{"size": 2703, "ext": "js", "max_stars_repo_path": "client/src/components/Chart/LineChart.js", "max_stars_repo_name": "Litabeach/Snooze", "max_stars_repo_stars_event_min_datetime": "2021-05-11T23:31:09.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-13T01:04:43.000Z", "max_issues_repo_path": "client/src/components/Chart/LineChart.js", "max_issues_repo_name": "Litabeach/Snooze", "max_issues_repo_issues_event_min_datetime": "2021-05-18T05:13:21.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-25T19:04:25.000Z", "max_forks_repo_path": "client/src/components/Chart/LineChart.js", "max_forks_repo_name": "Litabeach/Snooze", "max_forks_repo_forks_event_min_datetime": "2021-05-28T06:41:37.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-23T13:04:48.000Z"}
{"max_stars_count": 2, "max_issues_count": 4, "max_forks_count": 3, "avg_line_length": 20.0222222222, "max_line_length": 67, "alphanum_fraction": 0.4938956715}
import React, { useEffect, useState } from "react";
import { Line } from "react-chartjs-2";
import surveyAPI from "../../utils/surveyAPI";


function LineChart() {
  const [hours, setHours] = useState([]);
  const [dates, setDates] = useState([]);
  const [rec, setRec] = useState([]);
  const [userRes, setRes] = useState();
  
  useEffect(() => {
    getChartData();
  }, [])

  // finds user surveys from db and saves relative values to arrays
  function getChartData() {
    let hoursArray = []
    let dateArray = [];
    let eightArray = [];

    surveyAPI.getSurveys()
    .then(res => {
      
    if (!res.data) {
        setRes("none")
     } else {

      let data = res.data

      data.forEach(entry => {
        let date = entry.date
        let year = date.split('T')[0].split("-")[0]
        let month = date.split('T')[0].split("-")[1]
        let day = date.split('T')[0].split("-")[2]
        let newDate = month + "/" + day + "/" + year
        eightArray.push(8)
        dateArray.push(newDate)
        hoursArray.push(entry.hoursslept)
      })

      setHours(hoursArray);
      setDates(dateArray);
      setRec(eightArray);
    }})
      .catch(err => console.log(err));
  }

//set data for chart
const data = 
{ 
  labels: dates,
  datasets: [
    {
      label: "Hours Slept",
      data: hours,
      fill: true,
      backgroundColor: "rgba(75,192,192,0.2)",
      borderColor: "rgba(75,192,192,1)",
      color: "white",
    },
    
  //get an array of 8's for each day
    {
      label: "Recommended Hours",
      data: rec,
      fill: false,
      borderColor: "#742774"
    }
  ],
  
};

// chart customization
const options = {
  plugins: {
    title: {
        display: true,
        text: "Your Hours Slept",
        fullSize: true,
        font: {
          size: 30
        },
        color: "grey"
      }
  },
  scales: {
    x: [{
      title: {
        display: true,
        text: "Dates",
        color: "grey",
        gridLines: [null, "white"]
      }, 
      gridLines: [null, "white"], 
  }],

      y: {
          beginAtZero: true,
          title: {
            display: true,
            text: "Hours",
            color: "grey",
            gridLines: [null, "white"]
          },
          gridLines: [null, "white"]
      }
    },
    // elements: { 
    //   line: { 
    //     color: "yellow",
    //     borderColor: "yellow",
    //     backgroundColor: "yellow",
    //     borderWidth: "3px"
    //   }
    // }
}

  //conditional render logic
  if (userRes === "none") {
    return (
        <p></p>
    )
} else {

  return (
    <>
      <Line id="chart2" data={ data } options={ options }/>
    </>
  );
}
}


export default LineChart