diff --git a/src/components/DataPanel.js b/src/components/DataPanel.js index 66d6d08..5dd4fe9 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 (
@@ -20,8 +41,38 @@ const DataPanel = (props) => {

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

+ 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}
); }; @@ -31,8 +82,10 @@ const mapStateToProps = (state) => { let stateName; let countyName; - let population; + let population; let beds; + let totalCases; + let totalDeaths; if (selectedCounty) { // get state name @@ -45,6 +98,10 @@ const mapStateToProps = (state) => { beds = selectedCountyAttrs.beds; // get county name countyName = selectedCountyAttrs.name; + // date hardcoded for now until we add slider + const recentSnapshot = selectedCountySnapshots['2020-04-22T07:00:00.000Z']; + totalDeaths = recentSnapshot.deaths; + totalCases = recentSnapshot.cases; } return { @@ -52,7 +109,9 @@ const mapStateToProps = (state) => { countyName, stateName, population, - beds + beds, + totalCases, + totalDeaths }; };