- client: 2237 Update graph drawing library

Squashed commit of the following:

commit 980e9c2f37640ee204ce0365f6c3bcc74741cc7c
Merge: cb4cae82b 394fc5a9d
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Nov 16 14:52:26 2020 +0300

    Merge branch 'master' into fix/2237

commit cb4cae82b5b605894d123d6442ea23b24cc90c12
Author: ArtemBaskal <asbaskal@miem.hse.ru>
Date:   Thu Nov 12 12:07:49 2020 +0300

    minor

commit 5c07dac48067b4ed201aeb59a44e8592ed2b0b67
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Nov 11 19:47:38 2020 +0300

    minor

commit 53f60762e520427a080bdfcd94b08b9ed3a63ca4
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Nov 11 19:06:06 2020 +0300

    Adapt mobile version

commit 7659ac733ce4606f6fadf30e0eaddbeefd6095d6
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Nov 11 18:31:53 2020 +0300

    Fix empty graph offset, return background area below graph

commit 45499adb20a90024dba4b0b4e44ad4f01a1782d5
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Nov 10 17:46:47 2020 +0300

    - client: 2237 Update graph drawing library

client/src/components/Dashboard/Dashboard.css

@@ -22,11 +22,6 @@
     border-bottom: 6px solid #585965;
 }
 
-.card-chart-bg {
-    left: -20px;
-    width: calc(100% + 20px);
-}
-
 @media (max-width: 1279.98px) {
     .table__action {
         position: absolute;

client/src/components/Logs/Logs.css

@@ -12,6 +12,7 @@
     --gray-4d: #4D4D4D;
     --gray-f3: #F3F3F3;
     --gray-8: #888;
+    --gray-3: #333;
     --danger: #DF3812;
     --white80: rgba(255, 255, 255, 0.8);
 

client/src/components/ui/Card.css

@@ -80,7 +80,6 @@
 .card-body-stats {
     position: relative;
     flex: 1 1 auto;
-    height: calc(100% - 3rem);
     margin: 0;
     padding: 1rem 1.5rem;
 }

client/src/components/ui/Line.css

@@ -1,9 +1,16 @@
 .line__tooltip {
     padding: 2px 10px 7px;
     line-height: 1.1;
-    color: #fff;
+    color: var(--white);
+    background-color: var(--gray-3);
+    border-radius: 4px;
+    opacity: 90%;
 }
 
 .line__tooltip-text {
     font-size: 0.7rem;
 }
+
+.card-chart-bg path[d^="M0,32"] {
+    transform: translateY(32px);
+}

client/src/components/ui/Line.js

@@ -1,56 +1,75 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ResponsiveLine } from '@nivo/line';
-
+import addDays from 'date-fns/add_days';
+import addHours from 'date-fns/add_hours';
+import subDays from 'date-fns/sub_days';
+import subHours from 'date-fns/sub_hours';
+import dateFormat from 'date-fns/format';
+import round from 'lodash/round';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
 import './Line.css';
 
-const Line = ({ data, color }) => data
-    && <ResponsiveLine
+const Line = ({
+    data, color = 'black',
+}) => {
+    const interval = useSelector((state) => state.stats.interval);
+
+    return <ResponsiveLine
+        enableArea
+        animate
+        enableSlices="x"
+        curve="linear"
+        colors={[color]}
         data={data}
-        margin={{
-            top: data[0].data.every(({ y }) => y === 0) ? 62 : 15,
-            right: 0,
-            bottom: 1,
-            left: 20,
-        }}
-        minY="auto"
-        stacked={false}
-        curve='linear'
-        axisBottom={null}
-        axisLeft={null}
-        enableGridX={false}
-        enableGridY={false}
-        enableDots={false}
-        enableArea={true}
-        animate={false}
-        colorBy={() => (color)}
-        tooltip={(slice) => (
-            <div>
-                {slice.data.map((d) => (
-                    <div key={d.serie.id} className="line__tooltip">
-                            <span className="line__tooltip-text">
-                                <strong>{d.data.y}</strong>
-                                <br />
-                                <small>{d.data.x}</small>
-                            </span>
-                    </div>
-                ))}
-            </div>
-        )}
         theme={{
-            tooltip: {
-                container: {
-                    padding: '0',
-                    background: '#333',
-                    borderRadius: '4px',
+            crosshair: {
+                line: {
+                    stroke: 'black',
+                    strokeWidth: 1,
+                    strokeOpacity: 0.35,
                 },
             },
         }}
+        xScale={{
+            type: 'linear',
+            min: 0,
+            max: 'auto',
+        }}
+        crosshairType="x"
+        axisLeft={false}
+        axisBottom={false}
+        enableGridX={false}
+        enableGridY={false}
+        enablePoints={false}
+        xFormat={(x) => {
+            if (interval === 1 || interval === 7) {
+                const hoursAgo = subHours(Date.now(), 24 * interval);
+                return dateFormat(addHours(hoursAgo, x), 'D MMM HH:00');
+            }
+
+            const daysAgo = subDays(Date.now(), interval - 1);
+            return dateFormat(addDays(daysAgo, x), 'D MMM YYYY');
+        }}
+        yFormat={(y) => round(y, 2)}
+        sliceTooltip={(slice) => {
+            const { xFormatted, yFormatted } = slice.slice.points[0].data;
+            return <div className="line__tooltip">
+                <span className="line__tooltip-text">
+                    <strong>{yFormatted}</strong>
+                    <br />
+                    <small>{xFormatted}</small>
+                </span>
+            </div>;
+        }}
     />;
+};
 
 Line.propTypes = {
     data: PropTypes.array.isRequired,
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
 };
 
 export default Line;

client/src/components/ui/Tabler.css

@@ -13452,10 +13452,8 @@ a.icon:hover {
 
 .card-chart-bg {
     height: 4rem;
-    margin-top: -1rem;
     position: relative;
     z-index: 1;
-    overflow: hidden;
 }
 
 .card-options {