Add charts

Author: PrinceSumberia

src/components/Charts.css

@@ -0,0 +1,6 @@
+.charts {
+  margin-top: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center
+}

src/components/Charts.js

@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from "recharts";
+import colors from "../colors";
+import "./Charts.css";
+
+export default class Charts extends Component {
+  render() {
+    const { data, isLoading } = this.props;
+    const result = data.map((dataItem) => {
+      return {
+        date: dataItem.day,
+        ...dataItem.summary,
+        confirmed: dataItem.summary.total,
+        active:
+          dataItem.summary.total -
+          (dataItem.summary.discharged + dataItem.summary.deaths),
+      };
+    });
+    return (
+      <div className="charts">
+        {!isLoading && (
+          <LineChart width={700} height={500} data={result}>
+            <XAxis dataKey="date" />
+            <YAxis />
+            <CartesianGrid strokeDasharray="3 3" />
+            <Tooltip />
+            <Legend />
+            <Line
+              type="monotone"
+              dataKey="confirmed"
+              stroke={colors.red}
+              activeDot={{ r: 8 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="active"
+              stroke={colors.orange}
+              activeDot={{ r: 8 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="discharged"
+              stroke={colors.green}
+              activeDot={{ r: 8 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="deaths"
+              stroke={colors.purple}
+              activeDot={{ r: 8 }}
+            />
+          </LineChart>
+        )}
+      </div>
+    );
+  }
+}

src/components/CovidApp.js

@@ -4,11 +4,12 @@ import Navbar from "./Navbar";
 import { withStyles } from "@material-ui/styles";
 import colors from "../colors";
 import "./CodeApp.css";
+import Charts from "./Charts";
 
 const styles = {
   root: {
     display: "flex",
-    height: "100vh",
+    minHeight: "100vh",
   },
   navBar: {
     flex: "0 0 10%",
@@ -44,7 +45,22 @@ class CovidApp extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
+    this.state = {
+      completeData: [],
+      isLoading: false,
+    };
+    this.getData = this.getData.bind(this);
+    this.loadingStatus = this.loadingStatus.bind(this);
+  }
+
+  getData(data, isLoading) {
+    console.log("isLoading", isLoading);
+    this.setState({ completeData: data, isLoading: isLoading });
+  }
+
+  loadingStatus(loadingStatus) {
+    console.log("loadingstatus", loadingStatus);
+    this.setState({ isLoading: loadingStatus });
   }
 
   render() {
@@ -67,7 +83,15 @@ class CovidApp extends Component {
               </label>
             </div>
           </div>
-          <Overview isDarkMode={isDarkMode} />
+          <Overview
+            isDarkMode={isDarkMode}
+            getData={this.getData}
+            loadingStatus={this.loadingStatus}
+          />
+          <Charts
+            data={this.state.completeData}
+            isLoading={this.state.isLoading}
+          />
         </div>
       </div>
     );

src/components/Overview.js

@@ -100,6 +100,7 @@ class Overview extends Component {
       currentDay: {},
       previousDay: {},
       dataChanges: {},
+      completeData: {},
       isLoading: false,
     };
     this.calculateChange = this.calculateChange.bind(this);
@@ -111,7 +112,10 @@ class Overview extends Component {
   }
 
   async fetchData() {
-    this.setState({ isLoading: !this.state.isLoading });
+    this.setState(
+      { isLoading: !this.state.isLoading },
+      this.props.loadingStatus(!this.state.isLoading)
+    );
     const response = await axios.get(
       "https://api.rootnet.in/covid19-in/stats/history"
     );
@@ -134,6 +138,7 @@ class Overview extends Component {
           activeCases:
             currentDay.total - (currentDay.discharged + currentDay.deaths),
         },
+        completeData: response.data.data,
       },
       this.calculateChange
     );
@@ -145,7 +150,17 @@ class Overview extends Component {
       a[k] = currentDay[k] - previousDay[k];
       return a;
     }, {});
-    this.setState({ dataChanges: newObj, isLoading: !isLoading });
+    const newState = {
+      ...this.state,
+      dataChanges: newObj,
+      isLoading: !isLoading,
+    };
+    this.setState(
+      {
+        ...newState,
+      },
+      this.props.getData(newState.completeData, newState.isLoading)
+    );
   }
 
   render() {
@@ -192,8 +207,7 @@ class Overview extends Component {
         </div>
 
         <button className={classes.button} onClick={this.fetchData}>
-          {/* <FontAwesomeIcon icon={faSyncAlt} className={classes.refreshIcon} /> */}
-          Update Results
+          Update
         </button>
       </div>
     );