Global / US / NZ data update + Country Overview graph rejigged

carlaiau · Apr 9, 2020 · c7e5e36 · c7e5e36
1 parent f96bed6
commit c7e5e36
Show file tree

Hide file tree

Showing 12 changed files with 9,409 additions and 982 deletions.
diff --git a/client/data/advanced.json b/client/data/advanced.json
diff --git a/client/data/countries.json b/client/data/countries.json
diff --git a/client/data/cumulative.json b/client/data/cumulative.json
diff --git a/client/src/components/advanced-country-page.js b/client/src/components/advanced-country-page.js
@@ -64,6 +64,7 @@ export default class AdvancedCountryPage extends React.Component{
                         <div className="column is-half"> 
                             <h2 className="is-size-3 title">{this.props.country_name}</h2>
                             <table className="subtitle">
+                                <tbody>
                                 <tr>
                                     <th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(country.highest_confirmed)}</th>
                                     <td className="is-size-4">Cases</td>
@@ -74,6 +75,13 @@ export default class AdvancedCountryPage extends React.Component{
                                     <td className="is-size-4">Deaths</td>
                                 </tr>
                                 :<></> }
+                                {country.highest_recovered ?
+                                <tr>
+                                    <th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(country.highest_recovered)}</th>
+                                    <td className="is-size-4">Recovered</td>
+                                </tr>
+                                :<></> }
+                                </tbody>
                             </table>
                         </div>
                         <div className="column is-half text-right-align-desktop"> 

diff --git a/client/src/components/country-overview-graph.js b/client/src/components/country-overview-graph.js
@@ -1,40 +1,91 @@
 import React from 'react' 
-import SingularGraphTooltip from './graph-tooltip'
 import { parseJSON, format } from "date-fns"
-import {LineChart, Line, XAxis, YAxis, Tooltip, Legend, Label} from 'recharts'
-
+import {AreaChart, Area, XAxis, YAxis, Tooltip, Legend, Label} from 'recharts'
+import RegionalGraphTooltip from './regional-graph-tooltip'
 
 const CountryOverviewGraph = ({active_country, width, height, scale}) => {
 
 
     const filteredData = active_country.time_series.filter(t => parseInt(t.confirmed) > 0)
-
-    console.log(filteredData)
+    const latestDay = filteredData[filteredData.length - 1]
     filteredData.forEach(t => {
       t.dateString = format(parseJSON(t.date), 'MMM dd') 
     })
 
+    let has_tests = false
+    let has_confirmed = false
+    let has_hospitalized = false
+    let has_deaths = false
+    let has_recovered = false
+
+    filteredData.forEach((t,i) => {
+      t.dateString = format(parseJSON(t.date), 'MMM dd') 
+      t.index = i
+
+      if(t.tests > 0) has_tests = true
+      else t.tests = null
+
+      if(t.confirmed > 0) has_confirmed = true
+      else t.confirmed = null
+
+      if(t.hospitalized > 0) has_hospitalized = true
+      else t.hospitalized = null
+
+      if(t.deaths > 0) has_deaths = true
+      else t.deaths = null
+
+      if(t.recovered > 0) has_recovered = true
+      else t.recovered = null
+
+    })
+
 
     if(filteredData.length){
       return (
-        <LineChart width={width} height={height} data={filteredData} margin={{ bottom: 25, top: 15, right: 10, left: 10 }}>
+        <AreaChart width={width} height={height} data={filteredData} margin={{ bottom: 25, top: 15, right: 10, left: 10 }}>
           <XAxis 
             dataKey="index"
             name="Days"
             type="number"
+            tickCount={8}
+            domain = {[0, latestDay.day]}
             >
               <Label value="Days since first confirmed case" offset={-15} position="insideBottom" />
             </XAxis>
 
           <YAxis width={55} scale={scale} domain={['auto', 'auto']} interval="preserveStart" tickCount={12}/>
-
-          <Line type="monotone" dataKey="confirmed" name="Confirmed" stroke="#ff793f" dot={false} strokeWidth={3}/>
-          <Line type="monotone" dataKey="deaths" name="Deaths" stroke="#ff793f" dot={false} strokeWidth={3}/> 
-          <Line type="monotone" dataKey="recovered" name="Recovered" stroke="#ff793f" dot={false} strokeWidth={3}/>
-          <Tooltip content={SingularGraphTooltip}/>
-          <Legend verticalAlign="top" iconType="square"/>
+
+          { has_tests ? 
+            <Area type="monotone" dataKey="tests" name="Tests" stroke="#218c74" fillOpacity={1} fill="#218c74" dot={false} strokeWidth={1}/>
+          : <></> }
+          { has_confirmed ? 
+            <Area type="monotone" dataKey="confirmed" name="Confirmed" stroke="#227093" fillOpacity={1} fill="#227093" dot={false} strokeWidth={1}/>
+          : <></> }
+          { has_hospitalized ? 
+            <Area type="monotone" dataKey="hospitalized" name="Hospitalized" stroke="#ff793f" fillOpacity={1} fill="#ff793f" dot={false} strokeWidth={1}/>
+          : <></> }
+          { has_deaths && has_recovered && latestDay.deaths < latestDay.recovered ?
+          <Area type="monotone" dataKey="recovered" name="Recovered" stroke="#2ecc71" fillOpacity={0.9} fill="#2ecc71" dot={false} strokeWidth={1}/>
+            : <></> }
+          { has_deaths && has_recovered && latestDay.deaths < latestDay.recovered ?
+            <Area type="monotone" dataKey="deaths" name="Deaths" stroke="#ff5252" fillOpacity={0.9} fill="#ff5252" dot={false} strokeWidth={1}/>
+          : <></> }
+          { has_deaths && has_recovered && latestDay.deaths > latestDay.recovered ?
+            <Area type="monotone" dataKey="deaths" name="Deaths" stroke="#ff5252" fillOpacity={0.9} fill="#ff5252" dot={false} strokeWidth={1}/>
+          : <></> }
+          { has_deaths && has_recovered && latestDay.deaths > latestDay.recovered ?
+            <Area type="monotone" dataKey="recovered" name="Recovered" stroke="#2ecc71" fillOpacity={0.9} fill="#2ecc71" dot={false} strokeWidth={1}/>
+          : <></> }
 
-        </LineChart>
+          { has_recovered && ! has_deaths ? 
+            <Area type="monotone" dataKey="recovered" name="Recovered" stroke="#2ecc71" fillOpacity={1} fill="#2ecc71" dot={false} strokeWidth={1}/>
+          : <></> }
+          { ! has_recovered && has_deaths ? 
+            <Area type="monotone" dataKey="deaths" name="Deaths" stroke="#ff5252" fillOpacity={1} fill="#ff5252" dot={false} strokeWidth={1}/>
+          : <></> }
+          <Legend verticalAlign="top" iconType="square"/>
+          <Tooltip content={RegionalGraphTooltip}/>
+        </AreaChart>
       )
     }
     return <p className="is-size-3"><strong>No Deaths!</strong></p>

diff --git a/client/src/components/regional-advanced/regional-area-graph.js b/client/src/components/regional-advanced/regional-area-graph.js
@@ -1,15 +1,16 @@
 import React from 'react' 
 import { parseJSON, format } from "date-fns"
 import {AreaChart, Area, XAxis, YAxis, Tooltip, Legend, Label} from 'recharts'
-import RegionalGraphTooltip from './regional-graph-tooltip'
+import RegionalGraphTooltip from '../regional-graph-tooltip'
 
 
-const RegionalAreaGraph = ({active_region, width, height, scale, tidy}) => {
+const RegionalAreaGraph = ({active_region, width, height, scale}) => {
 
 
+
     const filteredData = active_region.time_series.filter(t => parseInt(t.confirmed) > 0)
-    
-    console.log(filteredData)
+
+    const latestDay = filteredData[filteredData.length - 1]
 
     let has_tests = false
     let has_confirmed = false
@@ -39,6 +40,7 @@ const RegionalAreaGraph = ({active_region, width, height, scale, tidy}) => {
     })
 
 
+    // note has_deaths && has_recovered logic to ensure that the one that has the least is shown in front
 
     return (
       <AreaChart width={width} height={height} data={filteredData} margin={{ bottom: 25, top: 15, right: 10, left: 10 }}>
@@ -48,7 +50,7 @@ const RegionalAreaGraph = ({active_region, width, height, scale, tidy}) => {
           name="Days"
           type="number"
           tickCount={8}
-          domain = {[0, active_region.time_series[active_region.time_series.length - 1].day]}
+          domain = {[0, latestDay.day]}
           >
             <Label value="Days since first confirmed case" offset={-15} position="insideBottom" />
           </XAxis>
@@ -63,12 +65,26 @@ const RegionalAreaGraph = ({active_region, width, height, scale, tidy}) => {
         { has_hospitalized ? 
           <Area type="monotone" dataKey="hospitalized" name="Hospitalized" stroke="#ff793f" fillOpacity={1} fill="#ff793f" dot={false} strokeWidth={1}/>
         : <></> }
-        { has_recovered ? 
+
+        { has_deaths && has_recovered && latestDay.deaths < latestDay.recovered ?
           <Area type="monotone" dataKey="recovered" name="Recovered" stroke="#2ecc71" fillOpacity={0.9} fill="#2ecc71" dot={false} strokeWidth={1}/>
+          : <></> }
+        { has_deaths && has_recovered && latestDay.deaths < latestDay.recovered ?
+          <Area type="monotone" dataKey="deaths" name="Deaths" stroke="#ff5252" fillOpacity={0.9} fill="#ff5252" dot={false} strokeWidth={1}/>
         : <></> }
-        { has_deaths ? 
+        { has_deaths && has_recovered && latestDay.deaths > latestDay.recovered ?
           <Area type="monotone" dataKey="deaths" name="Deaths" stroke="#ff5252" fillOpacity={0.9} fill="#ff5252" dot={false} strokeWidth={1}/>
         : <></> }
+        { has_deaths && has_recovered && latestDay.deaths > latestDay.recovered ?
+          <Area type="monotone" dataKey="recovered" name="Recovered" stroke="#2ecc71" fillOpacity={0.9} fill="#2ecc71" dot={false} strokeWidth={1}/>
+        : <></> }
+
+        { has_recovered && ! has_deaths ? 
+          <Area type="monotone" dataKey="recovered" name="Recovered" stroke="#2ecc71" fillOpacity={1} fill="#2ecc71" dot={false} strokeWidth={1}/>
+        : <></> }
+        { ! has_recovered && has_deaths ? 
+          <Area type="monotone" dataKey="deaths" name="Deaths" stroke="#ff5252" fillOpacity={1} fill="#ff5252" dot={false} strokeWidth={1}/>
+        : <></> }
 
 
         <Tooltip content={RegionalGraphTooltip}/>

diff --git a/client/src/components/regional-advanced/regional-graph-tooltip.js b/client/src/components/regional-advanced/regional-graph-tooltip.js
diff --git a/client/src/components/regional-graph-tooltip.js b/client/src/components/regional-graph-tooltip.js
@@ -0,0 +1,48 @@
+import React from 'react'
+const RegionalGraphToolTip = (tooltipProps)  => {
+
+    if(! tooltipProps.hasOwnProperty('payload')) return <></>
+
+    if(! tooltipProps.payload || tooltipProps.payload.length == 0) return <></>
+
+
+    const { payload } = tooltipProps.payload[0] 
+    let date = payload.dateString
+
+
+    const classes = {
+        "Tests": "#218c74",
+        "Confirmed": "#227093",
+        "Hospitalized": "#ff793f",
+        "Recovered": "#2ecc71",
+        "Deaths": "#ff5252",
+    }
+    const tidy = new Intl.NumberFormat()
+        return (
+            <>
+                <div className={`box`} style={{padding: '3px 5px'}}>
+                    <p className="is-size-7">
+                        {date ? date : ''}
+                    </p>
+                    <table className="is-size-7">
+                        <tbody>
+                        { tooltipProps.payload.map((tool,i) => (
+                            <tr key={i}>
+                                <td style={{textAlign: 'right'}}>
+                                    <strong>{tidy.format(tool.value)}</strong>
+                                </td>
+                                <td style={{paddingLeft: '5px'}}>
+                                    <strong style={{color: classes[tool.name]}}>
+                                        {tool.name}
+                                    </strong>
+                                </td>
+
+                            </tr>
+                        ))}
+                        </tbody>
+                    </table>
+                </div>
+            </>
+        )
+}
+export default RegionalGraphToolTip 
diff --git a/client/src/components/regional-new-zealand/regional-area-graph.js b/client/src/components/regional-new-zealand/regional-area-graph.js
@@ -1,7 +1,7 @@
 import React from 'react' 
 import { parseJSON, format } from "date-fns"
 import {AreaChart, Area, XAxis, YAxis, Tooltip, Legend, Label} from 'recharts'
-import RegionalGraphTooltip from './regional-graph-tooltip'
+import RegionalGraphTooltip from '../regional-graph-tooltip'
 
 
 const RegionalAreaGraph = ({active_region, width, height, scale}) => {

diff --git a/client/src/components/regional-new-zealand/regional-graph-tooltip.js b/client/src/components/regional-new-zealand/regional-graph-tooltip.js
diff --git a/client/src/context/GlobalContextProvider.js b/client/src/context/GlobalContextProvider.js
@@ -101,9 +101,9 @@ const GlobalContextProvider = ({ children }) => {
           500:  deaths.map((node) => mapFn( node, 'deaths', 10)),
         },
         update_times:{
-          global: "1:30am 8 April UTC",
-          us: "4:00pm 7 April ET",
-          nz: "1:30pm 8 April NZT",
+          global: "1:20am 9 April UTC",
+          us: "4:00pm 8 April ET",
+          nz: "1:20pm 9 April NZT",
           nz_regional: "2:00pm 8 April NZT",
         }
     });

diff --git a/processing/data/new-zealand.json b/processing/data/new-zealand.json
@@ -274,6 +274,15 @@
       "deaths_per_mil": 0.20468734,
       "tests": 46875,
       "recovered": 282
+    },
+    {
+      "date": "2020-04-08T00:00:00.000Z",
+      "confirmed": 1239,
+      "confirmed_per_mil": 253.63357216,
+      "deaths": 1,
+      "deaths_per_mil": 0.20468734,
+      "tests": 51165,
+      "recovered": 317
     }
 
   ],