Add map and change on hover

Author: PrinceSumberia

src/components/CovidApp.js

@@ -2,16 +2,16 @@ import React, { Component } from "react";
 import Overview from "./Overview";
 import { withStyles } from "@material-ui/styles";
 import colors from "../constants/colors";
-import "../styles/DarkModeButton.css";
 import Charts from "./Charts";
-import Map from "./Map/Map";
 import DisplayTable from "./DisplayTable";
 import TinyCharts from "./TinyCharts";
 import styles from "../styles/CovidAppStyles";
 import axios from "axios";
 import stateCodes from "../constants/stateCodes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
+import "../styles/DarkModeButton.css";
+import MapSection from "./MapSection";
 
 class CovidApp extends Component {
   constructor(props) {
@@ -95,7 +95,7 @@ class CovidApp extends Component {
 
   render() {
     const { classes, setDarkMode, isDarkMode } = this.props;
-    const { mapData, tableData, isLoading } = this.state;
+    const { mapData, tableData, isLoading, data } = this.state;
 
     if (isLoading) {
       return (
@@ -133,7 +133,12 @@ class CovidApp extends Component {
           <div className={classes.content}>
             <div className={classes.contentArea}>
               <div className={classes.mapArea}>
-                <Map mapData={mapData} />
+                {/* <Map mapData={mapData} /> */}
+                <MapSection
+                  mapData={mapData}
+                  data={data}
+                  isDarkMode={isDarkMode}
+                />
               </div>
               <div></div>
             </div>

src/components/Map/Map.js

@@ -60,9 +60,12 @@ class Map extends Component {
 
   onMouseEnter = (geo, current = { value: "NA" }) => {
     return () => {
-      this.setState({
-        tooltipContent: `${geo.properties.name}: ${current.value}`,
-      });
+      this.setState(
+        {
+          tooltipContent: `${geo.properties.name}: ${current.value}`,
+        },
+        () => this.props.currentLocation(geo.properties.name)
+      );
     };
   };
 
@@ -84,7 +87,7 @@ class Map extends Component {
       .range(COLOR_RANGE);
 
     return (
-      <div className="container">
+      <div>
         <ReactTooltip>{this.state.tooltipContent}</ReactTooltip>
         <ComposableMap
           projectionConfig={PROJECTION_CONFIG}

src/components/MapSection.js

@@ -0,0 +1,100 @@
+import React, { Component } from "react";
+import DisplayPanels from "./DisplayPanels";
+import Map from "./Map/Map";
+import { withStyles } from "@material-ui/styles";
+
+const styles = {
+  container: {
+    backgroundColor: "rgba(129, 124, 155, 0.05)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: "2rem 3rem",
+  },
+  mapContainer: {
+    flex: "1",
+  },
+  panelsContainer: {
+    display: "flex",
+    flex: "0 0 25%",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    alignItems: "center",
+  },
+};
+
+class MapSection extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      confirmed: null,
+      deaths: null,
+      recovered: null,
+      active: null,
+    };
+    this.currentLocation = this.currentLocation.bind(this);
+  }
+
+  currentLocation(location) {
+    const stateName = location.replace(" & ", " and ");
+    const data = this.props.data.slice(-1)[0].regional;
+    const updatedData = data.filter((el) => el.loc === stateName);
+    if (updatedData[0]) {
+      this.setState({
+        confirmed: updatedData[0].totalConfirmed,
+        deaths: updatedData[0].deaths,
+        recovered: updatedData[0].discharged,
+        active:
+          updatedData[0].totalConfirmed -
+          (updatedData[0].discharged + updatedData[0].deaths),
+      });
+    } else {
+      this.setState({
+        confirmed: "NA",
+        deaths: "NA",
+        recovered: "NA",
+        active: "NA",
+      });
+    }
+  }
+
+  render() {
+    const { classes, mapData, isDarkMode } = this.props;
+    const { confirmed, deaths, recovered, active } = this.state;
+    return (
+      <div className={classes.container}>
+        <div className={classes.panelsContainer}>
+          <DisplayPanels
+            title="Confirmed"
+            number={confirmed}
+            isDarkMode={isDarkMode}
+            dataChange={4}
+          />
+          <DisplayPanels
+            title="Active"
+            number={active}
+            isDarkMode={isDarkMode}
+            dataChange={4}
+          />
+          <DisplayPanels
+            title="Recovered"
+            number={recovered}
+            isDarkMode={isDarkMode}
+            dataChange={4}
+          />
+          <DisplayPanels
+            title="Deceased"
+            number={deaths}
+            isDarkMode={isDarkMode}
+            dataChange={4}
+          />
+        </div>
+        <div className={classes.mapContainer}>
+          <Map mapData={mapData} currentLocation={this.currentLocation} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(MapSection);

src/styles/CovidAppStyles.js

@@ -45,30 +45,28 @@ export default {
     textAlign: "center",
     margin: "4rem 0",
     fontSize: "3rem",
-    // textTransform: "uppercase",
   },
 
   tinyChartArea: {
     display: "flex",
     flexWrap: "wrap",
     padding: "2rem",
-    // flexDirection: "column",
     justifyContent: "space-around",
     alignItems: "center",
     marginTop: "3rem",
   },
+
   tinyChart: {
     margin: "2rem",
-    // padding: "2rem",
     "& h3": {
       textTransform: "capitalize",
       fontWeight: 500,
 
       textAlign: "center",
     },
   },
+
   tinych: {
-    // backgroundColor: "rgba(129, 124, 155, 0.05)",
     borderRadius: "2rem",
     marginBottom: "2rem",
     padding: "2rem",
@@ -106,7 +104,6 @@ export default {
     borderRadius: "10rem",
     fontFamily: "inherit",
     fontSize: "1.6rem",
-    // marginTop: "6rem",
     marginLeft: "2rem",
     transition: "all .4s",
     boxShadow: "0 .5rem 1rem rgba(0,0,0,.2)",