Add switch to hide all countries

rickkln · Apr 30, 2020 · c069fab · c069fab
1 parent 66c79d5
commit c069fab
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 48 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -30,5 +30,9 @@ module.exports = {
   rules: {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    "jsx-a11y/label-has-associated-control": [2, {
+      "controlComponents": ["Switch"],
+      "depth": 3,
+    }],
   },
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
     "react-icons": "^3.9.0",
+    "react-switch": "^5.0.1",
     "react-table": "^7.0.4",
     "react-tag-autocomplete": "^5.13.0",
     "victory": "^34.1.3"

diff --git a/src/components/dataChart.tsx b/src/components/dataChart.tsx
@@ -6,14 +6,20 @@ import { Tag } from 'react-tag-autocomplete';
 import { Country } from '../utilities/getData';
 import Theme from './chartTheme';
 import {
-  purpleA100, tealA200, cyanA400, deepPurpleA200, lightBlueA700, greenA700, purpleA200, green600, teal400, green900, green700, lightGreen700,
+  cyanA400,
+  deepPurpleA200,
+  teal400,
+  lightBlueA700,
+  purpleA200,
+  lightGreen700,
 } from './colors';
 
 interface DataChartProps {
   countries: Country[]
-  tags: Tag[]
   x: string
   y: string
+  tags: Tag[]
+  showAll: boolean
 }
 
 interface Selected {
@@ -30,7 +36,7 @@ const selectedColors = [
 ];
 
 const DataChart = ({
-  countries, tags, x, y,
+  countries, x, y, tags, showAll,
 }: DataChartProps) => {
   const selected: Selected = {};
   tags.forEach(
@@ -39,43 +45,46 @@ const DataChart = ({
     },
   );
   return (
-    <VictoryChart
-      theme={Theme}
-      height={220}
-      width={600}
-      padding={{
-        top: 10,
-        bottom: 30,
-        left: 70,
-        right: 3,
-      }}
-      domainPadding={{ x: [0, -4], y: [0, 1] }}
-      minDomain={{ y: 0 }}
-    >
-      <VictoryAxis fixLabelOverlap />
-      <VictoryAxis dependentAxis />
-      {countries.map((country) => {
-        if (country.name === undefined) { return undefined; }
-        const data = Object.keys(selected).includes(country.name)
-          ? {
-            stroke: selected[country.name],
-            strokeWidth: 1.8,
-          }
-          : {
-            strokeWidth: 1,
-          };
-        return (
-          <VictoryLine
-            key={country.name}
-            data={country.periods.slice(0).reverse()}
-            interpolation="monotoneX"
-            style={{ data }}
-            x={x}
-            y={y}
-          />
-        );
-      })}
-    </VictoryChart>
+    <>
+      <VictoryChart
+        theme={Theme}
+        height={220}
+        width={600}
+        padding={{
+          top: 10,
+          bottom: 30,
+          left: 70,
+          right: 3,
+        }}
+        domainPadding={{ x: [0, -4], y: [0, 1] }}
+        minDomain={{ y: 0 }}
+      >
+        <VictoryAxis fixLabelOverlap />
+        <VictoryAxis dependentAxis />
+        {countries.map((country) => {
+          if (country.name === undefined) { return undefined; }
+          if (!showAll && !Object.keys(selected).includes(country.name)) { return undefined; }
+          const data = Object.keys(selected).includes(country.name)
+            ? {
+              stroke: selected[country.name],
+              strokeWidth: 1.8,
+            }
+            : {
+              strokeWidth: 1,
+            };
+          return (
+            <VictoryLine
+              key={country.name}
+              data={country.periods.slice(0).reverse()}
+              interpolation="monotoneX"
+              style={{ data }}
+              x={x}
+              y={y}
+            />
+          );
+        })}
+      </VictoryChart>
+    </>
   );
 };
 

diff --git a/src/components/dataContent.module.css b/src/components/dataContent.module.css
@@ -0,0 +1,4 @@
+.switch {
+  top: 0.6em;
+  margin-left: 1em;
+}
diff --git a/src/components/dataContent.tsx b/src/components/dataContent.tsx
@@ -1,5 +1,6 @@
 import React, { useState, CSSProperties } from 'react';
 import { Link } from 'gatsby';
+import Switch from 'react-switch';
 import Layout from './layout';
 import SEO from './seo';
 import {
@@ -10,6 +11,7 @@ import {
 } from './tables';
 import DataChart from './dataChart';
 import CountryFilter, { Tags } from './countryFilter';
+import styles from './dataContent.module.css';
 
 const buttonStyle: CSSProperties = {
   fontSize: '0.85em',
@@ -44,6 +46,7 @@ const DataContent = ({ countries }: { countries: Country[] }) => {
     ],
     suggestedTags: possibleTags,
   });
+  const [showAll, setShowAll] = useState(true);
   return (
     <Layout>
       <SEO title="All Data" />
@@ -115,21 +118,35 @@ const DataContent = ({ countries }: { countries: Country[] }) => {
         {selectedTable === 'newCases' && 'New cases in period.'}
         {selectedTable === 'totalCases' && 'Cases to date.'}
         {' '}
-        Table color coded by
-        {' '}
-        <Link to="/details">Outbreak Status</Link>
+        <br />
+        <label>
+          <span>Include all countries</span>
+          <Switch
+            id="showAll"
+            onChange={setShowAll}
+            checked={showAll}
+            onColor="#28c53c"
+            offColor="#ddd"
+            className={styles.switch}
+          />
+        </label>
       </p>
       <CountryFilter tags={tags} setTags={setTags} />
       {selectedTable === 'growth'
-        && <DataChart countries={countries} tags={tags.currentTags} x="endDate" y="growthRate" />}
+        && <DataChart countries={countries} x="endDate" y="growthRate" tags={tags.currentTags} showAll={showAll} />}
       {selectedTable === 'newDeaths'
-        && <DataChart countries={countries} tags={tags.currentTags} x="endDate" y="newDeaths" />}
+        && <DataChart countries={countries} x="endDate" y="newDeaths" tags={tags.currentTags} showAll={showAll} />}
       {selectedTable === 'totalDeaths'
-        && <DataChart countries={countries} tags={tags.currentTags} x="endDate" y="totalDeaths" />}
+        && <DataChart countries={countries} x="endDate" y="totalDeaths" tags={tags.currentTags} showAll={showAll} />}
       {selectedTable === 'newCases'
-        && <DataChart countries={countries} tags={tags.currentTags} x="endDate" y="newCases" />}
+        && <DataChart countries={countries} x="endDate" y="newCases" tags={tags.currentTags} showAll={showAll} />}
       {selectedTable === 'totalCases'
-        && <DataChart countries={countries} tags={tags.currentTags} x="endDate" y="totalCases" />}
+        && <DataChart countries={countries} x="endDate" y="totalCases" tags={tags.currentTags} showAll={showAll} />}
+      <small>
+        The table below is color coded by
+        {' '}
+        <Link to="/details">Outbreak Status</Link>
+      </small>
       {selectedTable === 'growth' && <GrowthTable data={countries} />}
       {selectedTable === 'newDeaths' && <NewDeathsTable data={countries} />}
       {selectedTable === 'totalDeaths' && <TotalDeathsTable data={countries} />}