Option to toggle countries on/off

src/components/graph-cases.tsx

@@ -4,7 +4,7 @@ import { LineChart, XAxis, YAxis, Line, CartesianGrid, ScaleType } from 'rechart
 import { lighten } from 'polished';
 import styled from 'styled-components';
 
-import { Countries, CountryCases, Data } from '../types';
+import { Countries, Country, CountryCases, Data } from '../types';
 import { getCases } from '../utils/get-cases';
 import { processCases } from '../utils/regression';
 
@@ -42,7 +42,17 @@ type Props = {
   countries: Countries;
 };
 
+type EnabledList = {
+  [country in Country]?: boolean;
+};
+
 const GraphCases: React.FC<Props> = ({ countries }) => {
+  const [enabledList, setEnabledList] = React.useState<EnabledList>({});
+  const enabledCountries = React.useMemo<Countries>(
+    () => countries.filter(({ country }) => enabledList[country] !== false),
+    [countries, enabledList],
+  );
+
   const [showCumulative, setCumulative] = React.useState<boolean>(true);
 
   const [scale, setScale] = React.useState<ScaleType>('log');
@@ -110,7 +120,7 @@ const GraphCases: React.FC<Props> = ({ countries }) => {
         />
         <YAxis scale={scale} tick yAxisId="left" domain={[50, 'auto']} />
         <CartesianGrid stroke="#f5f5f5" />
-        {countries.map(({ country, color }) => (
+        {enabledCountries.map(({ country, color }) => (
           <Line
             key={`actual-${country}`}
             type="monotone"
@@ -121,7 +131,7 @@ const GraphCases: React.FC<Props> = ({ countries }) => {
             strokeWidth={2}
           />
         ))}
-        {countries.map(({ country, color }) => (
+        {enabledCountries.map(({ country, color }) => (
           <Line
             key={`regression-${country}`}
             type="monotone"
@@ -136,6 +146,13 @@ const GraphCases: React.FC<Props> = ({ countries }) => {
         {countries.map(({ country, color }, index) => (
           <li key={country} style={{ color }}>
             <h3>
+              <input
+                type="checkbox"
+                checked={enabledList[country] !== false}
+                onChange={(): void =>
+                  setEnabledList((last: EnabledList) => ({ ...last, [country]: !last[country] }))
+                }
+              />
               {country}{' '}
               <span>
                 (<a href={countryCases[index].dataSource.source}>source</a>)