Adding a piece of pie into the oven.

src/App.js

@@ -7,7 +7,7 @@ import 'react-tabs/style/react-tabs.css';
 import isoCodes from './isoCodes.json';
 import './App.css';
 import Table from './Table';
-import Viz from './Viz';
+import Viz from './viz';
 
 moment.locale('FI');
 const headers = (showInfectionInfo) => [

src/Viz.js → src/viz/Line.js

@@ -1,34 +1,29 @@
 import React from 'react';
-import { XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries } from 'react-vis';
-import '../node_modules/react-vis/dist/style.css';
+import { HorizontalGridLines, LineSeries, makeVisFlexible, VerticalGridLines, XAxis, XYPlot, YAxis } from 'react-vis';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import orderBy from 'lodash/orderBy';
-import {isMobile} from 'react-device-detect';
+
 
 const formattedDate = (it) => moment(it.date).format('MM/DD/YYYY'); // Murica
-const mmdd = (it) => moment(it).format('DD-MM'); // Murica
+const mmdd = (it) => moment(it).format('DD-MM');
+
+const FlexXYPlot = makeVisFlexible(XYPlot);
 
-const Chart = ({ data }) => {
- const orderedData = orderBy(data, it => moment(it.date).format('YYYYMMDD'), ['asc']);
- const dataArr = Object.entries(
- groupBy(orderedData, it => formattedDate(it)))
+const Line = ({ data }) => {
+ const orderedbyDateData = orderBy(data, it => moment(it.date).format('YYYYMMDD'), ['asc']);
+ const dataArr = Object.entries(groupBy(orderedbyDateData, it => formattedDate(it)))
  .reduce((acc, [date, data]) => {
  acc.push({
  x: new Date(date),
  y: acc.length > 0 ? acc[acc.length - 1].y + data.length : 1
  });
  return acc;
  }, []);
-
-
-
- console.log(dataArr)
  return (
- <XYPlot
- xType="time"
- width={isMobile ? 400 : 800}
- height={500}>
+ <FlexXYPlot
+ margin={{ bottom: 50 }}
+ xType="time">
  <HorizontalGridLines/>
 
  <VerticalGridLines/>
@@ -38,8 +33,7 @@ const Chart = ({ data }) => {
  />
  <YAxis title="Todetut tapaukset"/>
  <LineSeries color={'red'} data={dataArr}/>
- </XYPlot>
-
+ </FlexXYPlot>
  );
 };
-export default Chart;
+export default Line;

src/viz/Pie.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { makeVisFlexible, RadialChart } from 'react-vis';
+import groupBy from 'lodash/groupBy';
+
+import isoCodes from '../isoCodes.json';
+
+const colors = [
+ '#F66D44',
+ '#FEAE65',
+ '#E6F69D',
+ '#AADEA7',
+ '#64C2A6',
+ '#2D87BB',
+];
+
+const FlexRadialChart = makeVisFlexible(RadialChart);
+
+const Pie = ({ data }) => {
+ const groupedBySourceCountry = Object.entries(groupBy(data, 'infectionSourceCountry'))
+ .reduce((acc, [country, data], idx) => {
+ acc.push({
+ angle: data.length + 1,
+ label: isoCodes[country] ? isoCodes[country] : 'Tuntematon',
+ ...isoCodes[country] ? { color: colors[idx] } : { color: 'red' }
+ });
+ return acc;
+ }, []);
+ return (
+ <FlexRadialChart
+
+ colorType="literal"
+ data={groupedBySourceCountry}
+ showLabels={true}
+ />
+ );
+};
+export default Pie;

src/viz/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import '../../node_modules/react-vis/dist/style.css';
+
+import Line from './Line';
+import Pie from './Pie';
+
+const Chart = ({ data }) => {
+ return (
+ <div>
+ <div style={{ height: '50vh' }}>
+ <Line data={data}/>
+ </div>
+ <div style={{ height: '50vh' }}>
+ <Pie data={data}/>
+ </div>
+ </div>
+ );
+};
+export default Chart;