Skip to content

Commit

Permalink
Recoveries are back, top graphs have test data if availabile, to master!
Browse files Browse the repository at this point in the history
  • Loading branch information
@carlaiau
carlaiau committed Apr 9, 2020
1 parent c7e5e36 commit ceb7a27
Show file tree
Hide file tree
Showing 8 changed files with 126 additions and 125 deletions.
3 changes: 2 additions & 1 deletion client/data/countries.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41415,9 +41415,10 @@
"recovered": 317
}
],
"highest_confirmed": 1210,
"highest_confirmed": 1239,
"highest_deaths": 1,
"highest_tests": 46875,
"highest_recovered": 317,
"population": 4885500
}
]
2 changes: 1 addition & 1 deletion client/data/cumulative.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111959,7 +111959,7 @@
]
},
{
"highest_confirmed": 1210,
"highest_confirmed": 1239,
"highest_deaths": 1,
"population": 4885500,
"name": "New Zealand",
Expand Down
42 changes: 39 additions & 3 deletions client/src/components/advanced-country-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export default class AdvancedCountryPage extends React.Component{
field: full_field_name
})

const latest = active_country.time_series[active_country.time_series.length - 1]

active_country.name = this.props.country_name


Expand All @@ -60,7 +62,7 @@ export default class AdvancedCountryPage extends React.Component{
<SEO title={`${this.props.country_name} COVID-19 Update: ${this.state.area_label} level cumulative graphs and comparisons`}/>
<section className="section" style={{paddingBottom: 0}}>
<div className="container">
<div className="columns info" style={{alignItems: 'flex-end'}}>
<div className="columns info" style={{justifyContent: 'space-between', alignItems: 'center'}}>
<div className="column is-half">
<h2 className="is-size-3 title">{this.props.country_name}</h2>
<table className="subtitle">
Expand All @@ -84,8 +86,42 @@ export default class AdvancedCountryPage extends React.Component{
</tbody>
</table>
</div>
<div className="column is-half text-right-align-desktop">
<p className="is-size-7">
<div className="column is-narrow">
<table>
<tbody>
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(latest.confirmed_per_mil.toFixed(0))}</th>
<td className="is-size-4">Cases per million</td>
</tr>
{active_country.highest_deaths && active_country.highest_deaths > 1 ?
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(latest.deaths_per_mil.toFixed(0))}</th>
<td className="is-size-4">Deaths per million</td>
</tr>
:<></> }
<tr >
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>
{this.tidyFormat(((latest.recovered / latest.confirmed) * 100).toFixed(0))}%
</th>
<td className="is-size-4">Recovered</td>
</tr>
{active_country.highest_deaths && active_country.highest_deaths > 1 ?
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>
{this.tidyFormat(((latest.deaths / latest.confirmed) * 100).toFixed(0))}%
</th>
<td className="is-size-4">Died</td>
</tr>
:<></> }
</tbody>

</table>

</div>
</div>
<div className="columns">
<div className="column is-half">
<p className="is-size-7" style={{marginBottom: '10px'}}>
Global data updated at <strong>{update_times.global}</strong>
</p>
{this.props.country_name == 'United States' ?
Expand Down
193 changes: 75 additions & 118 deletions client/src/components/country-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,134 +29,84 @@ export default class CountryPage extends React.Component{

render(){
const {countries, update_times} = this.props.stateHook
const {selected_country, field, per} = this.state

let full_field_name = field === 'confirmed' ?
per === 'total' ? 'confirmed' : 'confirmed_per_mil' :
per === 'total' ? 'deaths' : 'deaths_per_mil'
const {selected_country} = this.state


const active_country = SetupCountry({
country: countries.filter( (c) => c.name === this.state.selected_country )[0]
})


const ContentBlock = () => {
const {name, highest} = active_country
const {confirmed, deaths} = highest
return (
<div className="box">
<h3 className="is-size-4 title">{name} must act now</h3>

<p className="is-size-6">
Because of the explosive growth, it is critical we all do our best to flatten the curve, even when these early measures feel extreme.
Slowing the spread is our best tool to prevent catastrophic collapse of our medical systems.
</p>
{ (confirmed > 100 ||deaths > 10) && per == 'total' ?
<p className="is-size-6"style={{marginTop: '10px'}}>
The <strong>{field =='confirmed' ? 'Cases' :'Deaths'} double every 3 days</strong> comparison is based on compounding daily growth starting from when {name}'s daily figure first exceeded{' '}
{ confirmed > 100 && field =='confirmed'? <strong>100 confirmed cases</strong> : <></> }{' '}
{ deaths > 10 && field != 'confirmed' ? <strong>10 deaths</strong> : <></> }
</p>
: <></> }
<div style={{marginTop: '10px', marginBottom: '10px'}}>
<p className="is-size-6">
Global data updated at <strong>{update_times.global}</strong>
</p>

{name == 'New Zealand' ?
<>
<p className="is-size-6">
{name} data updated at <strong>{update_times.nz}</strong>
</p>
<p className="is-size-6">
Regional data updated at <strong>{update_times.nz_regional}</strong>
</p>

<p className="is-size-6" style={{marginTop: '10px'}}>
While we're in lockdown please visit <a href="https://www.alonetogether.co.nz/"
target="_blank"
rel="noopener noreferrer">Alone Together</a> for ideas to help you take care of yourself and others

</p>



</>
: <></> }
</div>
</div>
)
}
const latest = active_country.time_series[active_country.time_series.length - 1]

return (<>
<SEO title={`Flatten The Curve: ${selected_country} COVID-19 Status`} />

{ active_country.name == 'New Zealand' ?
<>
<section className="section" style={{paddingBottom: 0}}>
<div className="container">
<div className="columns info" style={{alignItems: 'flex-end'}}>
<div className="column is-half">
<h2 className="is-size-2 title">{selected_country}</h2>
<table className="subtitle">
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(active_country.highest_confirmed)}</th>
<td className="is-size-4">Cases</td>
</tr>
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(active_country.highest_deaths)}</th>
<td className="is-size-4">{ active_country.highest_deaths == 1 ? 'Death' : 'Deaths'}</td>
</tr>
</table>
</div>
<div className="column is-half text-right-align-desktop">
<p className="is-size-7">
Global data updated at <strong>{update_times.global}</strong>
</p>
{selected_country== 'New Zealand' ?
<>
<p className="is-size-7">
Nationwide data updated at <strong>{update_times.nz}</strong>
</p>
<p className="is-size-7">
DHB data updated at <strong>{update_times.nz_regional}</strong>
</p>
</>
: <></>}
</div>
</div>
</div>
</section>
<NZView width={this.props.overview_width} height={this.props.overview_height}/>
</>
:


<section className="section">
<div className="container">
<div className="columns info">
<div className="column is-two-thirds">
<h2 className="is-size-3 title">
{active_country.name}
</h2>
<p className="is-size-4 subtitle">
{
// Notice use of country wide constant variable, not dynamically based on highest. due to sorting
active_country.highest_confirmed ? this.tidyFormat(active_country.highest_confirmed) + ' Cases' : ''}
<span style={{float: 'right'}}>
{active_country.highest.deaths ? this.tidyFormat(active_country.highest.deaths) + ' Deaths' : ''}
</span>
</p>
<CountryOverviewGraph
active_country={active_country}
scale={this.state.overview_scale}
width={this.props.overview_width}
height={this.props.overview_height}
/>
</div>
<div className="columns" style={{alignItems: 'center'}}>
<div className="column is-one-third">
<div className="field is-grouped is-horizontal">
<h2 className="is-size-2 title">{selected_country}</h2>
<table style={{marginBottom: '10px'}}>
<tbody>
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(active_country.highest_confirmed)}</th>
<td className="is-size-4">Cases</td>
</tr>
{active_country.highest_deaths ?
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(active_country.highest_deaths)}</th>
<td className="is-size-4">Death{active_country.highest_deaths == 1 ? '' : 's'}</td>
</tr>
:<></> }
{active_country.highest_recovered ?
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(active_country.highest_recovered)}</th>
<td className="is-size-4">Recovered</td>
</tr>
:<></> }
<tr >
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right', paddingTop: '15px'}}>{this.tidyFormat(latest.confirmed_per_mil.toFixed(0))}</th>
<td className="is-size-4" style={{paddingTop: '15px'}}>Cases per million</td>
</tr>
{active_country.highest_deaths && active_country.highest_deaths > 1 ?
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>{this.tidyFormat(latest.deaths_per_mil.toFixed(0))}</th>
<td className="is-size-4">Deaths per million</td>
</tr>
:<></> }
<tr >
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right', paddingTop: active_country.highest_deaths > 1 ? '15px': 0}}>
{this.tidyFormat(((latest.recovered / latest.confirmed) * 100).toFixed(0))}%
</th>
<td className="is-size-4" style={{paddingTop: active_country.highest_deaths > 1 ? '15px': 0}}>Recovered</td>
</tr>
{active_country.highest_deaths && active_country.highest_deaths > 1 ?
<tr>
<th className="is-size-4" style={{paddingRight: '10px', textAlign: 'right'}}>
{this.tidyFormat(((latest.deaths / latest.confirmed) * 100).toFixed(0))}%
</th>
<td className="is-size-4">Died</td>
</tr>
:<></> }
</tbody>
</table>
<div>
<p className="is-size-7" style={{marginTop: '20px'}}>
Global data updated at <strong>{update_times.global}</strong>
</p>
{selected_country== 'New Zealand' ?
<>
<p className="is-size-7">
Nationwide data updated at <strong>{update_times.nz}</strong>
</p>
<p className="is-size-7">
DHB data updated at <strong>{update_times.nz_regional}</strong>
</p>
</>
: <></>}
</div>
</div>
<div className="column is-two-thirds">
<div className="field is-grouped is-horizontal" style={{width: "100%", justifyContent: 'flex-end'}}>
<div className="control">
<div className="select">
<select value={this.state.overview_scale} onChange={e => this.setState({overview_scale: e.target.value})}>
Expand All @@ -166,12 +116,19 @@ export default class CountryPage extends React.Component{
</div>
</div>
</div>
<ContentBlock/>
<CountryOverviewGraph
active_country={active_country}
scale={this.state.overview_scale}
width={this.props.overview_width}
height={this.props.overview_height}
/>
</div>
</div>
</div>
</section>
}
{ selected_country == 'New Zealand' ?
<NZView width={this.props.overview_width} height={this.props.overview_height}/>
: <></> }
<CountryGrid
active_country={active_country}
countries={countries}
Expand Down
3 changes: 3 additions & 0 deletions client/src/components/regional-advanced/regional-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ const RegionalView = ({rows, headCells, all, width, height, area_label = "State"
/>
</div>
<div className="column is-two-thirds-desktop is-full-tablet">
<p className="title is-size-4" >
Cases {activeRegion == 'All' ? 'nationwide' : 'in ' + activeRegion}
</p>
<GraphHeader className="field is-horizontal" style={{width: "100%", justifyContent: 'flex-end'}}>
<div className="control">
<div className="select">
Expand Down
3 changes: 3 additions & 0 deletions client/src/components/regional-new-zealand/nz-regional-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,9 @@ const NZRegionalView = ({width, height}) => {
/>
</div>
<div className="column is-two-thirds-desktop is-full-tablet">
<p className="title is-size-4" >
Total and confirmed cases {activeRegion == 'All' ? 'nationwide' : 'in ' + activeRegion + ' DHB'}
</p>
<GraphHeader className="field is-horizontal" style={{width: "100%", justifyContent: 'flex-end'}}>

<div className="control">
Expand Down
2 changes: 1 addition & 1 deletion client/src/context/GlobalContextProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const GlobalContextProvider = ({ children }) => {
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",
nz_regional: "4:00pm 8 April NZT",
}
});

Expand Down
3 changes: 2 additions & 1 deletion processing/data/new-zealand.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,8 +286,9 @@
}

],
"highest_confirmed": 1210,
"highest_confirmed": 1239,
"highest_deaths": 1,
"highest_tests": 46875,
"highest_recovered": 317,
"population": 4885500
}

0 comments on commit ceb7a27

Please sign in to comment.