Fix Charts With new API

Author: PrinceSumberia

src/components/Barchart.js

@@ -4,16 +4,27 @@ import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
 export default class Barchart extends Component {
   render() {
     const { data, isLoading, dataKey, stroke } = this.props;
-    const result = data.map((dataItem) => {
-      return {
-        date: dataItem.day.slice(5),
-        ...dataItem.summary,
-        confirmed: dataItem.summary.total,
-        active:
-          dataItem.summary.total -
-          (dataItem.summary.discharged + dataItem.summary.deaths),
-      };
-    });
+    let result;
+    try {
+      const updatedData = data.slice(1).slice(-50);
+      result = updatedData.map((dataItem) => {
+        let newObject = {};
+        for (let [key, value] of Object.entries(dataItem)) {
+          if (key === "date") {
+            newObject[key] = value;
+          } else {
+            newObject[key] = Number(value);
+          }
+        }
+        return {
+          ...newObject,
+          totalactive:
+            newObject.totalconfirmed -
+            (newObject.totalrecovered + newObject.totaldeceased),
+        };
+      });
+    } catch (err) {}
+
     return (
       <div className="charts">
         {!isLoading && (

src/components/Charts.js

@@ -8,24 +8,33 @@ export default class Charts extends Component {
     const { isLoading, data } = this.props;
     let result;
     try {
-      result = data.map((dataItem) => {
+      const updatedData = data.slice(1).slice(-50);
+      result = updatedData.map((dataItem) => {
+        let newObject = {};
+        for (let [key, value] of Object.entries(dataItem)) {
+          if (key === "date") {
+            newObject[key] = value;
+          } else {
+            newObject[key] = Number(value);
+          }
+        }
         return {
-          ...dataItem,
-          totalactive: String(
-            Number(dataItem.totalconfirmed) -
-              (Number(dataItem.totalrecovered) + Number(dataItem.totaldeceased))
-          ),
+          ...newObject,
+          totalactive:
+            newObject.totalconfirmed -
+            (newObject.totalrecovered + newObject.totaldeceased),
         };
       });
     } catch (err) {}
+    console.log(result);
 
     return (
       <div className="charts">
         {!isLoading && (
           <LineChart
-            dots={false}
             width={600}
             height={300}
+            dots={false}
             data={result}
             margin={{
               top: 5,

src/components/CovidApp.js

@@ -117,6 +117,7 @@ class CovidApp extends Component {
   render() {
     const { classes, setDarkMode, isDarkMode } = this.props;
     const { mapData, tableData, isLoading, data } = this.state;
+    console.log(this.state.casesTimeline);
 
     if (isLoading) {
       return (
@@ -170,17 +171,17 @@ class CovidApp extends Component {
               data={this.state.casesTimeline}
               isLoading={this.state.isLoading}
             />
-            {/* <div className={classes.tinyChartArea}>
+            <div className={classes.tinyChartArea}>
               <div className={classes.tinyChart}>
                 <div
                   className={classes.tinych}
                   style={{ background: "rgba(249, 52, 94,.1)" }}
                 >
                   <h3 style={{ color: colors.red }}>confirmed</h3>
                   <Barchart
-                    data={this.state.data}
+                    data={this.state.casesTimeline}
                     isLoading={this.state.isLoading}
-                    dataKey="confirmed"
+                    dataKey="totalconfirmed"
                     stroke={colors.red}
                   />
                 </div>
@@ -192,9 +193,9 @@ class CovidApp extends Component {
                 >
                   <h3 style={{ color: colors.orange }}>active</h3>
                   <Barchart
-                    data={this.state.data}
+                    data={this.state.casesTimeline}
                     isLoading={this.state.isLoading}
-                    dataKey="active"
+                    dataKey="totalactive"
                     stroke={colors.orange}
                   />
                 </div>
@@ -206,9 +207,9 @@ class CovidApp extends Component {
                 >
                   <h3 style={{ color: colors.green }}>Recovered</h3>
                   <Barchart
-                    data={this.state.data}
+                    data={this.state.casesTimeline}
                     isLoading={this.state.isLoading}
-                    dataKey="discharged"
+                    dataKey="totalrecovered"
                     stroke={colors.green}
                   />
                 </div>
@@ -220,14 +221,14 @@ class CovidApp extends Component {
                 >
                   <h3 style={{ color: colors.purple }}>Deceased</h3>
                   <Barchart
-                    data={this.state.data}
+                    data={this.state.casesTimeline}
                     isLoading={this.state.isLoading}
-                    dataKey="deaths"
+                    dataKey="totaldeceased"
                     stroke={colors.purple}
                   />
                 </div>
               </div>
-            </div> */}
+            </div>
           </div>
           {/* <div className={classes.tableContainer}>
             <h2 className={classes.tableHeading}>