{"size": 958, "ext": "js", "max_stars_repo_path": "client/src/pages/Home.js", "max_stars_repo_name": "tonymelek/envison", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/pages/Home.js", "max_issues_repo_name": "tonymelek/envison", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/pages/Home.js", "max_forks_repo_name": "tonymelek/envison", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.95, "max_line_length": 84, "alphanum_fraction": 0.503131524}
import React, { useEffect, useState } from 'react'
import Barcharts from '../components/graphs/Barcharts'
import Header from '../components/Header'
import MyMoment from '../utils/MyMoment'


export default function Home({ data, days, hours }) {
    const [perDay, setPerDay] = useState([])
    const width = window.innerWidth - 100
    useEffect(() => {
        const tempDays = []

        for (let day of days) {
            tempDays.push({
                period: `${new MyMoment(day).formatDate}`,
                qty: data
                    .filter(record => record.timestamp.split('T')[0] === day).length

            })
        }
        setPerDay(tempDays)

    }, [])



    return (
        <div>

            <div className="d-flex justify-around">
                <div >
                    <h2>Records per Day</h2>
                    <Barcharts data={perDay} width={width} />
                </div>

            </div>
        </div>
    )
}
