Add under control chart

rickkln · Jul 5, 2020 · d6d6edb · d6d6edb
1 parent d05a01c
commit d6d6edb
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 0 deletions.
diff --git a/src/components/status/underControlChart.tsx b/src/components/status/underControlChart.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  VictoryChart, VictoryLegend, VictoryAxis, VictoryLabel, VictoryArea,
+} from 'victory';
+import { PeriodSummary } from '../../utilities/types/data';
+import Theme from '../shared/general/chartTheme';
+
+const UnderControlChart = ({ data }: { data: PeriodSummary[] }) => (
+  <VictoryChart
+    theme={Theme}
+    height={240}
+    width={600}
+    minDomain={{ y: 0 }}
+  >
+    <VictoryLegend
+      x={95}
+      y={15}
+      orientation="horizontal"
+      gutter={25}
+      data={[
+        { name: '% Flattening/Losing', symbol: { fill: 'lightcoral' } },
+        { name: '% None/Small/Crushing/Winning/Won', symbol: { fill: 'lightgreen' } },
+      ]}
+    />
+    <VictoryAxis fixLabelOverlap />
+    <VictoryAxis dependentAxis />
+    <VictoryLabel
+      text="Pandemic Status (corona.rickkln.com)"
+      x={400}
+      y={64}
+      style={{
+        fontSize: 6,
+        fontFamily: `"SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
+            "Liberation Mono", Menlo, Courier, monospace`,
+      }}
+    />
+    <VictoryLabel
+      text="Source: JHU CSSE"
+      x={400}
+      y={72}
+      style={{
+        fontSize: 6,
+        fontFamily: `"SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
+            "Liberation Mono", Menlo, Courier, monospace`,
+      }}
+    />
+    <VictoryArea
+      data={data}
+      interpolation="monotoneX"
+      style={{
+        data: {
+          fill: 'lightcoral',
+          fillOpacity: 0.5,
+          stroke: 'lightcoral',
+          strokeWidth: 0,
+        },
+      }}
+      x="endDate"
+      y={() => 100}
+      y0="underControl"
+    />
+    <VictoryArea
+      data={data}
+      interpolation="monotoneX"
+      style={{
+        data: {
+          fill: 'lightgreen',
+          fillOpacity: 0.5,
+          stroke: 'lightgreen',
+          strokeWidth: 2,
+        },
+      }}
+      x="endDate"
+      y="underControl"
+    />
+  </VictoryChart>
+);
+
+export default UnderControlChart;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -13,6 +13,7 @@ import { sumPeriodData, calculateGlobalSummary } from '../utilities/calcGlobal';
 import OutbreakStatus from '../utilities/types/OutbreakStatus';
 import CountryQuery from '../utilities/query';
 import PandemicFreeChart from '../components/status/pandemicFreeChart';
+import UnderControlChart from '../components/status/underControlChart';
 
 const IndexPage = () => {
   const { loading, error, data } = useQuery<Countries>(CountryQuery);
@@ -104,6 +105,14 @@ const IndexPage = () => {
           textAlign: 'center',
           marginTop: '1.2rem',
         }}
+      >
+        <h3 style={{ marginBottom: 0 }}>How many places have the pandemic under control?</h3>
+        <UnderControlChart data={globalSummaryData} />
+      </div>
+      <div
+        style={{
+          textAlign: 'center',
+        }}
       >
         <h3 style={{ marginBottom: 0 }}>How much of the world is pandemic free?</h3>
         <PandemicFreeChart data={globalSummaryData} />

diff --git a/src/utilities/calcGlobal.ts b/src/utilities/calcGlobal.ts
@@ -48,6 +48,7 @@ export const calculateGlobalSummary = (
       winning: 0,
       won: 0,
       pandemicFree: 0,
+      underControl: 0,
     }),
   );
   const periodSummaries = countries.reduce(
@@ -75,6 +76,15 @@ export const calculateGlobalSummary = (
         ) {
           newGlobalPeriods[periodIndex].pandemicFree += ((1 / 186) * 100);
         }
+        if (
+          country.periods[periodIndex].status === OutbreakStatus.None
+          || country.periods[periodIndex].status === OutbreakStatus.Small
+          || country.periods[periodIndex].status === OutbreakStatus.Crushing
+          || country.periods[periodIndex].status === OutbreakStatus.Winning
+          || country.periods[periodIndex].status === OutbreakStatus.Won
+        ) {
+          newGlobalPeriods[periodIndex].underControl += ((1 / 186) * 100);
+        }
         return newGlobalPeriods;
       },
       globalPeriods,

diff --git a/src/utilities/types/data.ts b/src/utilities/types/data.ts
@@ -47,4 +47,5 @@ export interface PeriodSummary {
   winning: number
   won: number
   pandemicFree: number
+  underControl: number
 }