Toggle for cumulative cases

src/components/graph-cases.tsx

@@ -25,12 +25,19 @@ const GraphCases: React.FC<Props> = ({ country }) => {
   const dataSource = React.useMemo<DataSource>(() => getCases(country), [country]);
   const data = React.useMemo<Data>(() => processCases(dataSource.cases), [dataSource.cases]);
 
+  const [showCumulative, setCumulative] = React.useState<boolean>(true);
+  const toggleCumulative = React.useCallback(() => setCumulative(last => !last), []);
+
   return (
     <div>
       <h3>Country: {country.toUpperCase()}</h3>
       <p>
         Source: <a href={dataSource.source}>{dataSource.source}</a>
       </p>
+      <p>
+        <input type="checkbox" onChange={toggleCumulative} checked={showCumulative} /> Cumulative
+        cases
+      </p>
       <LineChart width={640} height={480} data={data} margin={margin}>
         <XAxis
           dataKey="xValue"
@@ -40,16 +47,24 @@ const GraphCases: React.FC<Props> = ({ country }) => {
         />
         <YAxis tick yAxisId="left" />
         <CartesianGrid stroke="#f5f5f5" />
-        <Line type="monotone" dataKey="value" stroke="#ffabf8" yAxisId="left" />
-        <Line type="monotone" dataKey="regression" stroke="#ffcffb" yAxisId="left" dot={false} />
-        <Line type="monotone" dataKey="valueCumulative" stroke="#cc3d55" yAxisId="left" />
-        <Line
-          type="monotone"
-          dataKey="regressionCumulative"
-          stroke="#e86178"
-          yAxisId="left"
-          dot={false}
-        />
+        {!showCumulative && (
+          <Line type="monotone" dataKey="value" stroke="#5427b0" yAxisId="left" />
+        )}
+        {!showCumulative && (
+          <Line type="monotone" dataKey="regression" stroke="#8a5ce6" yAxisId="left" dot={false} />
+        )}
+        {showCumulative && (
+          <Line type="monotone" dataKey="valueCumulative" stroke="#cc3d55" yAxisId="left" />
+        )}
+        {showCumulative && (
+          <Line
+            type="monotone"
+            dataKey="regressionCumulative"
+            stroke="#e86178"
+            yAxisId="left"
+            dot={false}
+          />
+        )}
       </LineChart>
     </div>
   );