Statewise heat-map based on Population density covid19india#1007

nishcthulhu · Apr 22, 2020 · 4563f67 · 4563f67
1 parent b8f5375
commit 4563f67
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 55 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -2043,7 +2043,6 @@ table {
   }
 }
 
-<<<<<<< HEAD
 .tabs2 {
   position: relative;
   z-index: 99;

diff --git a/src/components/home.js b/src/components/home.js
@@ -7,7 +7,7 @@ import Table from './table';
 import TimeSeriesExplorer from './timeseriesexplorer';
 import Updates from './updates';
 
-import {MAP_META, MAP_TYPES} from '../constants';
+import {MAP_META} from '../constants';
 import {
   formatDate,
   formatDateAbsolute,
@@ -24,8 +24,6 @@ function Home(props) {
   const [states, setStates] = useState([]);
   const [stateDistrictWiseData, setStateDistrictWiseData] = useState({});
   const [stateTestData, setStateTestData] = useState({});
-  //const [graphOption, setGraphOption] = useState(1);
-  const [statisticOption, setStatisticOption] = useState(1);
   const [lastUpdated, setLastUpdated] = useState('');
   const [timeseries, setTimeseries] = useState({});
   const [fetched, setFetched] = useState(false);
@@ -38,8 +36,6 @@ function Home(props) {
     null
   );
   const [newUpdate, setNewUpdate] = useLocalStorage('newUpdate', false);
-  //const [seenUpdates, setSeenUpdates] = useState(false);
-  const [densityEnabled, setDensityEnabled] = useState(true);
 
   useFavicon(newUpdate ? '/icon_update.png' : '/favicon.ico');
 
@@ -118,14 +114,14 @@ function Home(props) {
     setActiveStateCode(statecode);
   }, []);
 
-  const setType = useCallback((type, mapType) => {
+  /* const setType = useCallback((type, mapType) => {
     setStatisticOption(type);
     if (mapType === MAP_TYPES.COUNTRY) {
       setDensityEnabled(true);
     } else {
       setDensityEnabled(false);
     }
-  }, []);
+  }, []);*/
 
   // const refs = [useRef(), useRef(), useRef()];
   // const scrollHandlers = refs.map((ref) => () =>
@@ -197,36 +193,9 @@ function Home(props) {
                 regionHighlighted={regionHighlighted}
                 onMapHighlightChange={onMapHighlightChange}
                 isCountryLoaded={true}
-                type={statisticOption}
-                setType={setType}
                 anchor={anchor}
-                setAnchor={setAnchor}            
+                setAnchor={setAnchor}
               />
-
-              <div className="tabs2">
-                <div
-                  className={`tab ${statisticOption === 1 ? 'focused' : ''}`}
-                  onClick={() => {
-                    setStatisticOption(1);
-                  }}
-                >
-                  <h4>Total Cases</h4>
-                </div>
-                <div
-                  className={`tab ${
-                    densityEnabled
-                      ? statisticOption === 2
-                        ? 'focused'
-                        : ''
-                      : 'disabled'
-                  }`}
-                  onClick={() => {
-                    setStatisticOption(2);
-                  }}
-                >
-                  <h4>Case Density Per Million</h4>
-                </div>
-              </div>
 
               {fetched && (
                 <TimeSeriesExplorer

diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js
@@ -1,4 +1,5 @@
 import ChoroplethMap from './choropleth';
+import statePopData from './StateStats.json';
 
 import {MAP_TYPES, MAP_META} from '../constants';
 import {
@@ -10,8 +11,6 @@ import {
 import {formatDistance, format, parse} from 'date-fns';
 import React, {useState, useEffect, useMemo, useCallback} from 'react';
 import * as Icon from 'react-feather';
-
-import statePopData from './StateStats.json';
 import {Link} from 'react-router-dom';
 
 const getRegionFromState = (state) => {
@@ -36,8 +35,6 @@ function MapExplorer({
   regionHighlighted,
   onMapHighlightChange,
   isCountryLoaded,
-  type,
-  setType,
   anchor,
   setAnchor,
 }) {
@@ -48,19 +45,14 @@ function MapExplorer({
   );
   const [testObj, setTestObj] = useState({});
   const [currentMap, setCurrentMap] = useState(mapMeta);
-  const [chartType, setChartType] = useState(type);
-
-  useEffect(() => {
-    setChartType(type);
-  }, [type]);
+  const [statisticOption, setStatisticOption] = useState(1);
 
   const [statistic, currentMapData] = useMemo(() => {
     const statistic = {total: 0, maxConfirmed: 0};
     let currentMapData = {};
 
     if (currentMap.mapType === MAP_TYPES.COUNTRY) {
-      if (chartType === 1) {
-        setType(1, MAP_TYPES.COUNTRY);
+      if (statisticOption === 1) {
         currentMapData = states.reduce((acc, state) => {
           if (state.state === 'Total') {
             return acc;
@@ -74,8 +66,7 @@ function MapExplorer({
           acc[state.state] = state.confirmed;
           return acc;
         }, {});
-      } else if (chartType === 2) {
-        setType(2, MAP_TYPES.COUNTRY);
+      } else if (statisticOption === 2) {
         currentMapData = states.reduce((acc, state) => {
           if (state.state === 'Total') {
             return acc;
@@ -95,7 +86,6 @@ function MapExplorer({
         }, {});
       }
     } else if (currentMap.mapType === MAP_TYPES.STATE) {
-      setType(1, MAP_TYPES.STATE);
       const districtWiseData = (
         stateDistrictWiseData[currentMap.name] || {districtData: {}}
       ).districtData;
@@ -113,8 +103,7 @@ function MapExplorer({
   }, [
     currentMap.mapType,
     currentMap.name,
-    chartType,
-    setType,
+    statisticOption,
     states,
     stateDistrictWiseData,
   ]);
@@ -335,15 +324,15 @@ function MapExplorer({
         )}
 
         {currentMap.mapType === MAP_TYPES.COUNTRY &&
-        type === 2 &&
+        statisticOption === 2 &&
         currentHoveredRegion.name !== 'Total' ? (
           <h1 className="district-confirmed">
             {currentMapData[currentHoveredRegion.name]
               ? Math.round(currentMapData[currentHoveredRegion.name])
               : 0}
             <br />
             <span style={{fontSize: '0.75rem', fontWeight: 600}}>
-              {type === 1 ? 'confirmed cases' : 'cases per million'}
+              {statisticOption === 1 ? 'confirmed cases' : 'cases per million'}
             </span>
           </h1>
         ) : null}
@@ -396,8 +385,33 @@ function MapExplorer({
         selectedRegion={selectedRegion}
         setSelectedRegion={setSelectedRegion}
         isCountryLoaded={isCountryLoaded}
-        type={chartType}
+        type={statisticOption}
       />
+
+      <div className="tabs2">
+        <div
+          className={`tab ${statisticOption === 1 ? 'focused' : ''}`}
+          onClick={() => {
+            setStatisticOption(1);
+          }}
+        >
+          <h4>Total Cases</h4>
+        </div>
+        <div
+          className={`tab ${
+            currentMap.mapType === MAP_TYPES.COUNTRY
+              ? statisticOption === 2
+                ? 'focused'
+                : ''
+              : 'disabled'
+          }`}
+          onClick={() => {
+            setStatisticOption(2);
+          }}
+        >
+          <h4>Case Density Per Million</h4>
+        </div>
+      </div>
     </div>
   );
 }