diff --git a/src/components/DataPanel.js b/src/components/DataPanel.js index bf72e42..a13fd34 100644 --- a/src/components/DataPanel.js +++ b/src/components/DataPanel.js @@ -1,13 +1,34 @@ import React from 'react'; import { connect } from 'react-redux'; +import { Table } from 'react-bootstrap'; import styles from './DataPanel.module.css'; + const DataPanel = (props) => { const { selectedCounty } = props; // if there's no selected county, don't render if (!selectedCounty) return null; + // to avoid NaNs or 0.000s + let deathRate = 0; + let casesPer10k = 0; + let deathsPer10k = 0; + let casesPerBed = 0; + + if (props.totalCases > 0) { + deathRate = (props.totalDeaths / props.totalCases).toFixed(3); + + if (props.beds > 0) { + casesPerBed = (props.totalCases / props.beds).toFixed(3); + } + + if (props.population > 0) { + casesPer10k = ((props.totalCases / props.population) * 10000).toFixed(3); + deathsPer10k = ((props.totalDeaths / props.population) * 10000).toFixed(3); + } + } + return (
@@ -19,7 +40,39 @@ const DataPanel = (props) => {

-

Data goes here

+

Population: {props.population}
+ Hospital Beds: {props.beds}

+
+ +
April 22, 2020
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Cases{props.totalCases}
Cases per 10k Population{casesPer10k}
Cases per Hospital Bed{casesPerBed}
Deaths{props.totalDeaths}
Deaths per 10k Population{deathsPer10k}
Deaths/Cases{deathRate}
); }; @@ -29,22 +82,36 @@ const mapStateToProps = (state) => { let stateName; let countyName; + let population; + let beds; + let totalCases; + let totalDeaths; if (selectedCounty) { // get state name const { states, counties } = state.datasets['states-and-counties'].data; + const selectedCountySnapshots = state.datasets['usafacts-counties'].data[parseInt(selectedCounty)]; const selectedCountyAttrs = counties[selectedCounty]; const { stateId } = selectedCountyAttrs; stateName = states[stateId].name; - + population = selectedCountyAttrs.population; + beds = selectedCountyAttrs.beds; // get county name countyName = selectedCountyAttrs.name; + // date hardcoded for now until we add slider + const recentSnapshot = selectedCountySnapshots['2020-04-22T00:00:00.000Z']; + totalDeaths = recentSnapshot.deaths; + totalCases = recentSnapshot.cases; } return { selectedCounty, countyName, - stateName + stateName, + population, + beds, + totalCases, + totalDeaths }; }; diff --git a/src/datasets/datasetsUtils.js b/src/datasets/datasetsUtils.js index f182165..b94f3da 100644 --- a/src/datasets/datasetsUtils.js +++ b/src/datasets/datasetsUtils.js @@ -83,6 +83,8 @@ export function tidyUsafactsCounties(counties = [], countType) { // cache a map of dates => iso dates const snapshotDatesIso = snapshotDates.reduce((acc, snapshotDate) => { const snapshotDateObj = new Date(Date.parse(snapshotDate)); + // clear out time zone + snapshotDateObj.setUTCHours(0, 0, 0, 0); const snapshotDateIso = snapshotDateObj.toISOString(); acc[snapshotDate] = snapshotDateIso;