Adding accumulations.

src/Accordion.css

@@ -0,0 +1,27 @@
+.accor {
+ margin: 10px;
+ border: 1px solid #ddd;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+}
+.accor .head {
+ background: #eee;
+ padding: 10px 20px;
+ cursor: pointer;
+}
+.accor .body {
+ background: #fafafa;
+ padding: 0 20px;
+ max-height: 0;
+ overflow: hidden;
+ -webkit-transition: 200ms ease-in-out;
+ transition: 200ms ease-in-out;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+.accor.active > .body {
+ padding: 10px 20px;
+ max-height: 600px;
+}

src/Accordions.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import './Accordion.css';
+import groupBy from 'lodash/groupBy';
+import orderBy from 'lodash/orderBy';
+import mergeWith from 'lodash/mergeWith';
+import moment from 'moment';
+
+class Accordion extends React.Component {
+ constructor(props) {
+ super(props);
+ this._handleClick = this._handleClick.bind(this);
+ }
+
+ componentDidMount() {
+ this._handleClick();
+ }
+
+ _handleClick() {
+ const acc = this._acc.children;
+ for (let i = 0; i < acc.length; i++) {
+ let a = acc[i];
+ a.onclick = () => a.classList.toggle("active");
+ }
+ }
+
+ render() {
+ return (
+ <div
+ ref={a => this._acc = a}
+ onClick={this._handleClick}>
+ {this.props.children}
+ </div>
+ )
+ }
+}
+
+const formattedDate = (it) => moment(it.date).format('YYYY-MM-DD');
+class Accordions extends React.Component {
+ render() {
+ const confirmed = groupBy(this.props.confirmed, it => it.healthCareDistrict);
+ const orderedbyDateData = orderBy(this.props.confirmed, it => moment(it.date).format('YYYYMMDD'), ['asc']);
+ const dateArr = groupBy(orderedbyDateData, it => formattedDate(it));
+ return (
+ <div>
+ <Accordion>
+ <div className="accor">
+ <div className="head">Sairaanhoitopiireittain</div>
+ <div className="body">
+ {Object.entries(confirmed).map(([district, arr]) => (
+ <div key={district} style={{ margin: 5 }}>
+ <span style={{ fontWeight: 'bold' }}>{district}</span>
+ <div>Tapaukset: {JSON.stringify(arr.length)}</div>
+ </div>))
+ }
+ </div>
+ </div>
+ <div className="accor">
+ <div className="head">Päivittäin</div>
+ <div className="body">
+ {Object.entries(dateArr).map(([date, arr]) => (
+ <div key={date + arr.length} style={{ margin: 5 }}>
+ <span style={{ fontWeight: 'bold' }}>{date}</span>
+ <div>Tapaukset: {JSON.stringify(arr.length)}</div>
+ </div>))
+ }
+ </div>
+ </div>
+ </Accordion>
+ </div>
+ );
+ }
+}
+
+export default Accordions;

src/App.js

@@ -7,6 +7,7 @@ import 'react-tabs/style/react-tabs.css';
 import isoCodes from './isoCodes.json';
 import './App.css';
 import Table from './Table';
+import Accordions from './Accordions';
 import Viz from './viz';
 import Map from './viz/Map';
 
@@ -90,7 +91,7 @@ function App() {
  <div className="numberCircle">{state.deaths.length}</div>
  </div>
  </header>
-
+ <Accordions {...state} />
  <Tabs>
  <TabList>
  <Tab>Varmistetut</Tab>