{"size": 1112, "ext": "js", "max_stars_repo_path": "src/components/charts/LineChart.js", "max_stars_repo_name": "apoorvachikara/dev-care-app", "max_stars_repo_stars_event_min_datetime": "2022-02-28T17:27:54.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-26T05:50:45.000Z", "max_issues_repo_path": "src/components/charts/LineChart.js", "max_issues_repo_name": "apoorvachikara/dev-care-app", "max_issues_repo_issues_event_min_datetime": "2022-02-28T20:27:10.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-22T06:05:27.000Z", "max_forks_repo_path": "src/components/charts/LineChart.js", "max_forks_repo_name": "apoorvachikara/dev-care-app", "max_forks_repo_forks_event_min_datetime": "2022-02-28T20:28:26.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-20T06:53:30.000Z"}
{"max_stars_count": 33, "max_issues_count": 8, "max_forks_count": 10, "avg_line_length": 18.2295081967, "max_line_length": 96, "alphanum_fraction": 0.5800359712}
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js";
import { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
);


export function LineChart() {
  const [eyeData, setEyeData] = useState([0, 0, 0, 0, 0, 0, 0]);

  useEffect(() => {
    let eyedata = JSON.parse(localStorage.getItem("eyedata"));
    setEyeData(eyedata);
  }, []);

  const labels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  const data = {
    labels: labels,
    datasets: [
      {
        label: "Eye Care Exercises Analysis",
        fill: true,
        data: eyeData,
        borderColor: "rgba(0, 153, 246, 0.5)",
        backgroundColor: "rgba(0, 153, 246, 0.2)",
        responsive: true,
      },
    ],
  };


  return (
    <Line
      data={data}
      options={{
        responsive: true,
        maintainAspectRatio: false,
      }}
    />
  );
}
