//* This is Linegraph.js file / import React, { useEffect, useState } from 'react' import { Line } from 'react-chartjs-2' import numeral from 'numeral' const options = { legend: { display: false, }, elements: { point: { radius: 0, }, }, maintainAspectRatio: false, tooltips: { mode: "index", intersect: false, callbacks: { label: function (tooltipItem, data) { return numeral(tooltipItem.value).format("+0,0"); }, }, }, scales: { xAxes: [ { type: "time", time: { format: "MM/DD/YY", tooltipFormat: "ll", }, }, ], yAxes: [ { gridLines: { display: false, }, ticks: { callback: function (value, index, values) { return numeral(value).format("0a"); }, }, }, ], }, }; const LineGraph = ({ casesType="cases" }) => { const [data, setData] = useState({}) const buildChartData = (data, caseType) => { const chartData = [] let lastPoint; for(let date in data.cases){ if(lastPoint) { const newPoint = { x: date, y: data[caseType][date] - lastPoint } chartData.push(newPoint) } lastPoint = data[caseType][date] } return chartData } useEffect(() => { const fetchData = async () => { fetch('https://disease.sh/v3/covid-19/historical/all?lastdays=120') .then(response => response.json()) .then(data => { console.log(data) const chartData = buildChartData(data, casesType) setData(chartData) }) } fetchData() }, [casesType]) return ( <div> {data?.length > 0 && ( <Line options={options} data={{ datasets: [{ backgroundColor: "rgba(204, 16, 52, 0.5)", borderColor: "#CC1034", data: data }] }} /> )} </div> ) } export default LineGraph