diff --git a/src/components/status/underControlChart.tsx b/src/components/status/underControlChart.tsx new file mode 100644 index 0000000..284953c --- /dev/null +++ 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[] }) => ( + + + + + + + 100} + y0="underControl" + /> + + +); + +export default UnderControlChart; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2be4091..a79e5af 100644 --- 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(CountryQuery); @@ -104,6 +105,14 @@ const IndexPage = () => { textAlign: 'center', marginTop: '1.2rem', }} + > +

How many places have the pandemic under control?

+ + +

How much of the world is pandemic free?

diff --git a/src/utilities/calcGlobal.ts b/src/utilities/calcGlobal.ts index 7984592..81d182b 100644 --- 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 index 466f5d0..087a25f 100644 --- 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 }