CleverProgrammers / react-covid-tracker

202 stars 252 forks source link

LineGraph.js and util.js updated #40

Open Riya-2000 opened 2 years ago

Riya-2000 commented 2 years ago

I have add some features in graph in LineGraph.js like graph color will be different for every case type. I have also set the multiplier in util.js to a suitable value.

raghav0000 commented 2 years ago

hello riya i have an issue in linegraph component it shows the error Screenshot (56) )

my code is a :`import React, { useState, useEffect } 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: { // Include a dollar sign in the ticks callback: function (value, index, values) { return numeral(value).format("0a"); }, }, }, ], }, };

const buildChartData = (data, casesType) => { let chartData = []; let lastDataPoint; for (let date in data.cases) { if (lastDataPoint) { let newDataPoint = { x: date, y: data[casesType][date] - lastDataPoint, }; chartData.push(newDataPoint); } lastDataPoint = data[casesType][date]; } return chartData; };

function LineGraph({ casesType="cases" }) { const [data, setData] = useState({});

useEffect(() => { const fetchData = async () => { await fetch("https://disease.sh/v3/covid-19/historical/all?lastdays=120") .then((response) => { return response.json(); }) .then((data) => { let chartData = buildChartData(data, "cases"); setData(chartData); console.log(chartData); // buildChart(chartData); }); };

fetchData();

}, [casesType]);

return (

I am a graph

{data?.length > 0 && ( )}

); }

export default LineGraph;`

Facundo-Martin commented 2 years ago

Same issue here! Could anyone solve this??