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;