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 (
Population: {props.population}
- Hospital Beds: {props.beds}
Cases | +{props.totalCases} | +
Cases per 10k Population | +{casesPer10k} | +
Cases per Hospital Bed | +{casesPerBed} | +
Deaths | +{props.totalDeaths} | +
Deaths per 10k Population | +{deathsPer10k} | +
Deaths/Cases | +{deathRate} | +