Age group graph

client/src/components/country-page.js

@@ -3,7 +3,7 @@ import React from "react"
 import SEO from "../components/seo"
 import CountryOverviewGraph from "./country-overview-graph"
 import CountryGrid from "./country-grid/country-grid"
-import NZRegionalView from "./nz-regional-view"
+import RegionalView from "./regional-view"
 import SetupCountry from '../utils/setup-country'
 
 import 'bulma/css/bulma.css'
@@ -147,11 +147,12 @@ export default class CountryPage extends React.Component{
           </div>                
         </section>
         { active_country.name == 'New Zealand' ? 
-          <NZRegionalView
+
+          <RegionalView
             width={this.props.overview_width}
             height={this.props.overview_height}
-          /> : <></>
-        }
+          />
+        : <></> }
         <CountryGrid 
           active_country={active_country}
           countries={countries}

client/src/components/nz-regional-graph.js → client/src/components/regional-area-graph.js

@@ -1,13 +1,13 @@
 import React from 'react' 
 import { parseJSON, format } from "date-fns"
 import {AreaChart, Area, XAxis, YAxis, Tooltip, Legend, Label} from 'recharts'
-import NZRegionalGraphTooltip from './nz-regional-graph-tooltip'
+import RegionalGraphTooltip from './regional-graph-tooltip'
 
 
-const NZRegionalGraph = ({active_dhb, width, height, scale}) => {
+const RegionalAreaGraph = ({active_region, width, height, scale}) => {
 
 
-    const filteredData = active_dhb.time_series.filter(t => parseInt(t.total) > 0)
+    const filteredData = active_region.time_series.filter(t => parseInt(t.total) > 0)
 
     console.log(filteredData)
     filteredData.forEach((t,i) => {
@@ -43,12 +43,12 @@ const NZRegionalGraph = ({active_dhb, width, height, scale}) => {
 
         <Area type="monotone" dataKey="total" name="Total" stroke="#ff793f" fillOpacity={1} fill="url(#total)" dot={false} strokeWidth={1}/>
         <Area type="monotone" dataKey="confirmed" name="Confirmed" stroke="#ff5252" fillOpacity={1} fill="url(#confirmed)" dot={false} strokeWidth={1}/>
-        <Tooltip content={NZRegionalGraphTooltip}/>
+        <Tooltip content={RegionalGraphTooltip}/>
         <Legend verticalAlign="top" iconType="square"/>
 
       </AreaChart>
     )
 
 }
 
-export default NZRegionalGraph
+export default RegionalAreaGraph

client/src/components/regional-bar-graph.js

@@ -0,0 +1,73 @@
+import React from 'react' 
+import {BarChart, Bar, XAxis, YAxis, Tooltip, Legend, Label, CartesianGrid} from 'recharts'
+
+
+
+const RegionalBarGraph = ({active_region, width, height, scale}) => {
+
+    const ages = active_region.highest.ages
+
+    const data = []
+    const combined_under_10 = {
+        name: '0 - 9',
+        value: 0
+    }
+    const combined_teen = {
+        name: '10 to 19',
+        value: 0
+    }
+
+    Object.keys(ages).forEach( key => {
+        const clean_name = key.replace("_", "").replace(/_/g, " ")
+
+        if(
+            clean_name != "1" && 
+            clean_name != "1 to 4" && 
+            clean_name != "5 to 9" &&
+            clean_name != "10 to 14" &&
+            clean_name != "15 to 19"
+            ){
+            data.push({
+                name: clean_name,
+                value: ages[key]
+            })
+        }
+        else if(clean_name == "10 to 14" || clean_name == "15 to 19"){
+            combined_teen.value += ages[key]
+        }
+        else{
+            combined_under_10.value += ages[key]
+        }
+    })
+
+    const output_data = [
+        combined_under_10,
+        combined_teen,
+        ... data
+    ]
+
+
+
+    return (
+        <BarChart width={width} height={height} data={output_data}
+            margin={{bottom: 20 }}
+        >
+            <defs>
+                <linearGradient id="bars" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#218c74" stopOpacity={1}/>
+                <stop offset="100%" stopColor="#218c74" stopOpacity={0.33}/>
+            </linearGradient>
+            </defs>
+            <XAxis dataKey="name" name="Age Group">
+                <Label value="Age Group" position="bottom"/>
+            </XAxis>
+            <YAxis/>
+            <Tooltip />
+            <Bar dataKey="value" fillOpacity={1} fill="url(#bars)" name="Total Cases"/>
+      </BarChart>
+
+    )
+
+}
+
+export default RegionalBarGraph

client/src/components/nz-regional-graph-tooltip.js → client/src/components/regional-graph-tooltip.js

@@ -1,5 +1,5 @@
 import React from 'react'
-const NZRegionalGraphToolTip = (tooltipProps)  => {
+const RegionalGraphToolTip = (tooltipProps)  => {
 
     if(! tooltipProps.hasOwnProperty('payload')) return <></>
 
@@ -26,4 +26,4 @@ const NZRegionalGraphToolTip = (tooltipProps)  => {
             </>
         )
 }
-export default NZRegionalGraphToolTip 
+export default RegionalGraphToolTip 

client/src/components/nz-regional-view.js → client/src/components/regional-view.js

@@ -2,11 +2,11 @@ import React from "react"
 import  { graphql, useStaticQuery } from 'gatsby'
 
 import EnhancedTable from './enhanced-table/enhanced-table'
-import NZRegionalGraph from './nz-regional-graph'
-
+import RegionalAreaGraph from './regional-area-graph'
+import RegionalBarGraph from './regional-bar-graph'
 import SetupNZTable from '../utils/setup-nz-table'
 
-const NZRegionalView = ({width, height}) => {
+const RegionalView = ({width, height}) => {
     const nzData = useStaticQuery(graphql`query {
         newZealand: allNzAdvancedJson {
             nodes {
@@ -75,32 +75,27 @@ const NZRegionalView = ({width, height}) => {
         <div className="container">
           <div className="columns">
             <div className="column is-one-third">
-                <div className="box has-background-success">
-                    <h3 className="is-size-3 has-text-white title">
-                        Current Cases by DHB
-                    </h3>
-                    <p className="is-size-5 subtitle has-text-white">
-                      Total includes confirmed and probable.
-                    </p>
-                    <p className="is-size-7 has-text-white">
-                      Using Ministry of Health Current Case data found 
-                      {' '}<a
-                        href="https://www.health.govt.nz/our-work/diseases-and-conditions/covid-19-novel-coronavirus/covid-19-current-situation/covid-19-current-cases/covid-19-current-cases-details"
-                        target="_blank" 
-                        rel="noopener noreferrer"
-                      >
-                        <strong className="has-text-white">
-                          here
-                        </strong>
-                      </a>. This data sometimes does not contain every single case, and therefore there can be disrepancies in the below data
-                      and what is announced at the daily press conference.
+              <div className="box has-background-success">
+                  <h3 className="is-size-3 has-text-white title">
+                      Current Cases by DHB
+                  </h3>
+                  <p className="is-size-5 subtitle has-text-white">
+                    Total includes confirmed and probable.
+                  </p>
+                  <p className="is-size-7 has-text-white">
+                    Using Ministry of Health Current Case data found 
+                    {' '}<a
+                      href="https://www.health.govt.nz/our-work/diseases-and-conditions/covid-19-novel-coronavirus/covid-19-current-situation/covid-19-current-cases/covid-19-current-cases-details"
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                    >
+                      <strong className="has-text-white">
+                        here
+                      </strong>
+                    </a>. The dates for all graphing is based on when they cases are reported not when they're announced.
 
-                    </p>
-                </div>
-            </div>
-          </div>
-          <div className="columns">
-            <div className="column is-one-third">
+                  </p>
+              </div>
               <EnhancedTable 
                 rows={rows} 
                 headCells={headCells} 
@@ -111,18 +106,27 @@ const NZRegionalView = ({width, height}) => {
               />
             </div>
             <div className="column is-two-thirds">
-              <NZRegionalGraph
-                active_dhb={regions.filter(r => r.name == activeRegion)[0]}
+              <p className="title is-size-4 has-text-centered">
+                Cases versus time {activeRegion == 'All' ? 'nationwide' : 'in ' + activeRegion + ' DHB'} 
+              </p>
+              <RegionalAreaGraph
+                active_region={regions.filter(r => r.name == activeRegion)[0]}
+                width={width}
+                height={height}
+              />
+              <p className="title is-size-4 has-text-centered" style={{marginTop: '30px'}}>
+                Cases versus age group {activeRegion == 'All' ? 'nationwide' : 'in ' + activeRegion + ' DHB'} 
+              </p>
+              <RegionalBarGraph
+                active_region={regions.filter(r => r.name == activeRegion)[0]}
                 width={width}
                 height={height}
               />
             </div>
           </div>
-
-
         </div>
       </section>
     )
 }
 
-export default NZRegionalView
+export default RegionalView