Replace the main Statistics graph with 4 blocks instead

client/src/components/ui/Line.css

@@ -0,0 +1,9 @@
+.line__tooltip {
+    padding: 2px 10px 7px;
+    line-height: 1.1;
+    color: #fff;
+}
+
+.line__tooltip-text {
+    font-size: 0.7rem;
+}

client/src/components/ui/Line.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ResponsiveLine } from '@nivo/line';
+
+import './Line.css';
+
+const Line = props => (
+    props.data &&
+        <ResponsiveLine
+            data={props.data}
+            margin={{
+                top: 15,
+                right: 0,
+                bottom: 1,
+                left: 0,
+            }}
+            minY="auto"
+            stacked={false}
+            curve='linear'
+            axisBottom={{
+                tickSize: 0,
+                tickPadding: 0,
+            }}
+            axisLeft={{
+                tickSize: 0,
+                tickPadding: 0,
+            }}
+            enableGridX={false}
+            enableGridY={false}
+            enableDots={false}
+            enableArea={true}
+            animate={false}
+            colorBy={() => (props.color)}
+            tooltip={slice => (
+                <div>
+                    {slice.data.map(d => (
+                        <div key={d.serie.id} className="line__tooltip">
+                            <span className="line__tooltip-text">
+                                {d.data.y}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            )}
+            theme={{
+                tooltip: {
+                    container: {
+                        padding: '0',
+                        background: '#333',
+                        borderRadius: '4px',
+                    },
+                },
+            }}
+        />
+);
+
+Line.propTypes = {
+    data: PropTypes.array.isRequired,
+    color: PropTypes.string.isRequired,
+};
+
+export default Line;