Add and Style BarCharts

Author: PrinceSumberia

src/components/Barchart.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from "recharts";
+
+export default class Barchart extends Component {
+  render() {
+    const { data, isLoading, dataKey, stroke } = this.props;
+    // const updatedData = data.slice(25, -1);
+    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),
+      };
+    });
+    return (
+      <div className="charts">
+        {!isLoading && (
+          <BarChart
+            width={350}
+            height={150}
+            data={result}
+            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+          >
+            <XAxis dataKey="date" />
+            <YAxis />
+            <Tooltip />
+            {/* <Legend /> */}
+            <Bar dataKey={dataKey} fill={stroke} />
+          </BarChart>
+        )}
+      </div>
+    );
+  }
+}

src/components/Charts.js

@@ -41,7 +41,7 @@ export default class Charts extends Component {
           >
             <XAxis dataKey="date" />
             <YAxis />
-            <CartesianGrid strokeDasharray="3 3" />
+            {/* <CartesianGrid strokeDasharray="3 3" /> */}
             <Tooltip />
             <Legend
               wrapperStyle={{

src/components/CovidApp.js

@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
 import "../styles/DarkModeButton.css";
 import MapSection from "./MapSection";
+import Barchart from "./Barchart";
 
 class CovidApp extends Component {
   constructor(props) {
@@ -140,65 +141,70 @@ class CovidApp extends Component {
                   isDarkMode={isDarkMode}
                 />
               </div>
-              <div></div>
             </div>
+            {/* <Barchart
+              data={this.state.data}
+              isLoading={this.state.isLoading}
+              dataKey="confirmed"
+              stroke={colors.red}
+            /> */}
             <div className={classes.chartArea}>
               <div className={classes.tinyChartArea}>
                 <div className={classes.tinyChart}>
                   <div
                     className={classes.tinych}
                     style={{ background: "rgba(249, 52, 94,.1)" }}
                   >
-                    <TinyCharts
+                    <h3 style={{ color: colors.red }}>confirmed</h3>
+                    <Barchart
                       data={this.state.data}
                       isLoading={this.state.isLoading}
                       dataKey="confirmed"
                       stroke={colors.red}
                     />
                   </div>
-                  <h3 style={{ color: colors.red }}>confirmed</h3>
                 </div>
                 <div className={classes.tinyChart}>
                   <div
                     className={classes.tinych}
                     style={{ background: "rgba(250, 100, 0,.1)" }}
                   >
-                    <TinyCharts
+                    <h3 style={{ color: colors.orange }}>active</h3>
+                    <Barchart
                       data={this.state.data}
                       isLoading={this.state.isLoading}
                       dataKey="active"
                       stroke={colors.orange}
                     />
                   </div>
-                  <h3 style={{ color: colors.orange }}>active</h3>
                 </div>
                 <div className={classes.tinyChart}>
                   <div
                     className={classes.tinych}
                     style={{ background: "rgba(28, 177, 66,.1)" }}
                   >
-                    <TinyCharts
+                    <h3 style={{ color: colors.green }}>Recovered</h3>
+                    <Barchart
                       data={this.state.data}
                       isLoading={this.state.isLoading}
                       dataKey="discharged"
                       stroke={colors.green}
                     />
                   </div>
-                  <h3 style={{ color: colors.green }}>Recovered</h3>
                 </div>
                 <div className={classes.tinyChart}>
                   <div
                     className={classes.tinych}
                     style={{ background: "rgba(98, 54, 255,.1)" }}
                   >
-                    <TinyCharts
+                    <h3 style={{ color: colors.purple }}>Deceased</h3>
+                    <Barchart
                       data={this.state.data}
                       isLoading={this.state.isLoading}
                       dataKey="deaths"
                       stroke={colors.purple}
                     />
                   </div>
-                  <h3 style={{ color: colors.purple }}>Deceased</h3>
                 </div>
               </div>
               <Charts data={this.state.data} isLoading={this.state.isLoading} />

src/index.css

@@ -19,6 +19,7 @@ body {
   font-size: 1.6rem;
   line-height: 1.7;
   color: #1A1053;
+  /* background-color: #fff; */
   background-color: rgb(245, 245, 245);
   /* background-color: rgba(185, 185, 185, 0.281); */
 }

src/styles/DisplayPanelsStyles.js

@@ -16,18 +16,19 @@ export default {
       if (props.isMiniPanel) {
         return null;
       }
-      let color;
-      let title = props.title.toLowerCase();
-      if (title === "recovered") {
-        color = "rgb(28, 177, 66,.2)";
-      } else if (title === "deceased") {
-        color = "rgb(98, 54, 25,.2)";
-      } else if (title === "active") {
-        color = "rgb(250, 100, 0,.2)";
-      } else if (title === "confirmed") {
-        color = "rgb(249, 52, 94,.2)";
-      }
-      return `0 .5rem 3rem ${color}`;
+      return "0 1.5rem 3rem rgba(0, 0, 0, 0.1)";
+      // let color;
+      // let title = props.title.toLowerCase();
+      // if (title === "recovered") {
+      //   color = "rgb(28, 177, 66,.2)";
+      // } else if (title === "deceased") {
+      //   color = "rgb(98, 54, 25,.2)";
+      // } else if (title === "active") {
+      //   color = "rgb(250, 100, 0,.2)";
+      // } else if (title === "confirmed") {
+      //   color = "rgb(249, 52, 94,.2)";
+      // }
+      // return `0 .5rem 3rem ${color}`;
     },
   },