- 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
2020-11-16 15:22:30 +03:00 · 2020-11-16 15:22:30 +03:00 · a19523b258
parent 394fc5a9d8
commit a19523b258
10 changed files with 306 additions and 174 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -2014,72 +2014,168 @@
        }
      }
    },
-    "@nivo/axes": {
-      "version": "0.49.1",
-      "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.49.1.tgz",
-      "integrity": "sha512-2ZqpKtnZ9HE30H+r565VCrypKRQzAoMbAg1hsht88dlNQRtghBSxbAS0Y4IUW/wgN/AzvOIBJHvxH7bgaB8Oow==",
+    "@nivo/annotations": {
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.64.0.tgz",
+      "integrity": "sha512-b9VAVuAn2HztOZckU2GcBwptjCobYV5VgX/jwZTSFeZFLtjZza+QinNL2AbQ2cnmeU3nVCw1dTbJMMZ9fTCCNQ==",
      "requires": {
-        "@nivo/core": "0.49.0",
-        "d3-format": "^1.3.2",
+        "@nivo/colors": "0.64.0",
+        "lodash": "^4.17.11",
+        "react-spring": "^8.0.27"
+      }
+    },
+    "@nivo/axes": {
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.64.0.tgz",
+      "integrity": "sha512-Pm+Y3C67OuBb3JqHpyFKWAoPAnNojb1s5/LFQYVYN1QpKyjeqilGAoLCjHK6ckgfzreiGf7NG+oBgpH8Ncz2fQ==",
+      "requires": {
+        "@nivo/scales": "0.64.0",
+        "d3-format": "^1.4.4",
+        "d3-time": "^1.0.11",
        "d3-time-format": "^2.1.3",
-        "lodash": "^4.17.4",
-        "react-motion": "^0.5.2",
-        "recompose": "^0.26.0"
+        "react-spring": "^8.0.27"
+      },
+      "dependencies": {
+        "d3-format": {
+          "version": "1.4.5",
+          "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+          "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+        },
+        "d3-time": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+          "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+        },
+        "d3-time-format": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
+          "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+          "requires": {
+            "d3-time": "1"
+          }
+        }
+      }
+    },
+    "@nivo/colors": {
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.64.0.tgz",
+      "integrity": "sha512-3CKIkSjKgwSgBsiJoTlZpFUUpaGTl60pF6rFsIiFT30os9jMxP/J4ikQGQ/vMLPTXskZYoxByaMHGKJy5wypqg==",
+      "requires": {
+        "d3-color": "^1.2.3",
+        "d3-scale": "^3.0.0",
+        "d3-scale-chromatic": "^1.3.3",
+        "lodash.get": "^4.4.2",
+        "lodash.isplainobject": "^4.0.6",
+        "react-motion": "^0.5.2"
      }
    },
    "@nivo/core": {
-      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.49.0.tgz",
-      "integrity": "sha512-TCPMUO2aJ7fI+ZB6t3d3EBQtNxJnTzaxLJsrVyn/3AQIjUwccAeo2aIy81wLBGWGtlGNUDNdAbnFzXiJosH0yg==",
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.64.0.tgz",
+      "integrity": "sha512-tupETbvxgv4B9y3pcXy/lErMwY2aZht+FKSyah1dPFd88LnMD/DOL+to6ociBHmpLQNUMA7wid6R7BlXRY/bmg==",
      "requires": {
-        "d3-color": "^1.0.3",
-        "d3-format": "^1.3.2",
+        "d3-color": "^1.2.3",
+        "d3-format": "^1.4.4",
        "d3-hierarchy": "^1.1.8",
-        "d3-interpolate": "^1.3.2",
-        "d3-scale": "^2.1.2",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.0.0",
        "d3-scale-chromatic": "^1.3.3",
-        "d3-shape": "^1.2.2",
+        "d3-shape": "^1.3.5",
        "d3-time-format": "^2.1.3",
-        "lodash": "^4.17.4",
-        "react-measure": "^2.0.2",
-        "react-motion": "^0.5.2",
-        "recompose": "^0.26.0"
+        "lodash": "^4.17.11",
+        "react-spring": "^8.0.27",
+        "recompose": "^0.30.0",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "dependencies": {
+        "d3-format": {
+          "version": "1.4.5",
+          "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+          "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+        },
+        "d3-time": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+          "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+        },
+        "d3-time-format": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
+          "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+          "requires": {
+            "d3-time": "1"
+          }
+        }
      }
    },
    "@nivo/legends": {
-      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.49.0.tgz",
-      "integrity": "sha512-8KbUFYozqwD+/rj4in0mnF9b9CuyNFjVgXqm2KW3ODVlWIgYgjTVlEhlg9VZIArFPlIyyAjEYC88YSRcALHugg==",
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.64.0.tgz",
+      "integrity": "sha512-L7Mp/of/jY4qE7ef6PXJ8/e3aASBTfsf5BTOh3imSXZT6I4hXa5ppmGAgZ0gOSpcPXuMEjBc0aSIEJoeoytQ/g==",
      "requires": {
-        "lodash": "^4.17.4",
-        "recompose": "^0.26.0"
+        "@nivo/core": "0.64.0",
+        "lodash": "^4.17.11",
+        "recompose": "^0.30.0"
      }
    },
    "@nivo/line": {
-      "version": "0.49.1",
-      "resolved": "https://registry.npmjs.org/@nivo/line/-/line-0.49.1.tgz",
-      "integrity": "sha512-wKkOmpnwK2psmZbJReDq+Eh/WV9r1JA8V4Vl4eIRuf971CW0KUT9nCAoc/FcKio0qsiq5wyFt3J5LuAhfzlV/w==",
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/line/-/line-0.64.0.tgz",
+      "integrity": "sha512-WkQU28ZL9Mxq42AdmybWe+2qFh/TiUXu+7e6nj41e/8DO95Guxg1XQ+i5zQKuw/UZlqXZs6WOsMW8EMNE4GzXw==",
      "requires": {
-        "@nivo/axes": "0.49.1",
-        "@nivo/core": "0.49.0",
-        "@nivo/legends": "0.49.0",
-        "@nivo/scales": "0.49.0",
-        "d3-format": "^1.3.2",
-        "d3-scale": "^2.1.2",
-        "d3-shape": "^1.2.2",
-        "lodash": "^4.17.4",
-        "react-motion": "^0.5.2",
-        "recompose": "^0.26.0"
+        "@nivo/annotations": "0.64.0",
+        "@nivo/axes": "0.64.0",
+        "@nivo/colors": "0.64.0",
+        "@nivo/legends": "0.64.0",
+        "@nivo/scales": "0.64.0",
+        "@nivo/tooltip": "0.64.0",
+        "@nivo/voronoi": "0.64.0",
+        "d3-shape": "^1.3.5",
+        "react-spring": "^8.0.27"
      }
    },
    "@nivo/scales": {
-      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.49.0.tgz",
-      "integrity": "sha512-+5Leu4zX6mDSAunf4ZJHeqVlT+ZsqiKXLB6hT/u7r3GjxZP9A+n3rHePhIzikBiBRMlLjyiBlylLzhKBAYbGWQ==",
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.64.0.tgz",
+      "integrity": "sha512-Jbr1rlfe/gLCippndPaCM7doJzzx1K9oXPxS4JiyvrIUkQoMWiozymZQdEp8kgigI6uwWu5xvPwCOFXalCIhKg==",
      "requires": {
-        "d3-scale": "^2.1.2",
+        "d3-scale": "^3.0.0",
        "d3-time-format": "^2.1.3",
-        "lodash": "^4.17.4"
+        "lodash": "^4.17.11"
+      },
+      "dependencies": {
+        "d3-time": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+          "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+        },
+        "d3-time-format": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
+          "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+          "requires": {
+            "d3-time": "1"
+          }
+        }
+      }
+    },
+    "@nivo/tooltip": {
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.64.0.tgz",
+      "integrity": "sha512-iGsuCi42uw/8F7OVvPyWdQgxJXVOPTEdtl2WK2FlSJIH7bfnEsZ+R/lTdElY2JAvGHuNW6hQwpNUZdC/2rOatg==",
+      "requires": {
+        "react-spring": "^8.0.27"
+      }
+    },
+    "@nivo/voronoi": {
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/@nivo/voronoi/-/voronoi-0.64.0.tgz",
+      "integrity": "sha512-YdNRzD2rFc1NcAZe9D8gxos+IT2CRPOV/7fUfBCG9SoNw1TtSwSKtEs4xsxmUFmLT1FadWcyKeKuhgJUQnof/A==",
+      "requires": {
+        "@nivo/core": "0.64.0",
+        "d3-delaunay": "^5.1.1",
+        "d3-scale": "^3.0.0",
+        "recompose": "^0.30.0"
      }
    },
    "@nodelib/fs.scandir": {
@ -4681,24 +4777,27 @@
      "dev": true
    },
    "d3-array": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
-      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
-    },
-    "d3-collection": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
-      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
+      "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
    },
    "d3-color": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
    },
+    "d3-delaunay": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
+      "integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
+      "requires": {
+        "delaunator": "4"
+      }
+    },
    "d3-format": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
-      "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
    },
    "d3-hierarchy": {
      "version": "1.1.9",
@ -4706,11 +4805,11 @@
      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
    },
    "d3-interpolate": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
-      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
      "requires": {
-        "d3-color": "1"
+        "d3-color": "1 - 2"
      }
    },
    "d3-path": {
@ -4719,16 +4818,15 @@
      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
    },
    "d3-scale": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
-      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.3.tgz",
+      "integrity": "sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==",
      "requires": {
-        "d3-array": "^1.2.0",
-        "d3-collection": "1",
-        "d3-format": "1",
-        "d3-interpolate": "1",
-        "d3-time": "1",
-        "d3-time-format": "2"
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "1 - 2",
+        "d3-time-format": "2 - 3"
      }
    },
    "d3-scale-chromatic": {
@ -4738,6 +4836,16 @@
      "requires": {
        "d3-color": "1",
        "d3-interpolate": "1"
+      },
+      "dependencies": {
+        "d3-interpolate": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+          "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+          "requires": {
+            "d3-color": "1"
+          }
+        }
      }
    },
    "d3-shape": {
@ -4749,16 +4857,16 @@
      }
    },
    "d3-time": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
-      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.0.0.tgz",
+      "integrity": "sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q=="
    },
    "d3-time-format": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
-      "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
      "requires": {
-        "d3-time": "1"
+        "d3-time": "1 - 2"
      }
    },
    "damerau-levenshtein": {
@ -4963,6 +5071,11 @@
        }
      }
    },
+    "delaunator": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
+      "integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag=="
+    },
    "delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@ -5253,11 +5366,21 @@
      "dev": true
    },
    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
      "requires": {
-        "iconv-lite": "~0.4.13"
+        "iconv-lite": "^0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
+          "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
      }
    },
    "end-of-stream": {
@ -6766,11 +6889,6 @@
      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
      "dev": true
    },
-    "get-node-dimensions": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz",
-      "integrity": "sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ=="
-    },
    "get-package-type": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@ -7430,6 +7548,7 @@
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
      "requires": {
        "safer-buffer": ">= 2.1.2 < 3"
      }
@ -10194,6 +10313,16 @@
      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
    },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
    "lodash.sortby": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@ -12403,17 +12532,6 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
-    "react-measure": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.3.0.tgz",
-      "integrity": "sha512-dwAvmiOeblj5Dvpnk8Jm7Q8B4THF/f1l1HtKVi0XDecsG6LXwGvzV5R1H32kq3TW6RW64OAf5aoQxpIgLa4z8A==",
-      "requires": {
-        "@babel/runtime": "^7.2.0",
-        "get-node-dimensions": "^1.2.1",
-        "prop-types": "^15.6.2",
-        "resize-observer-polyfill": "^1.5.0"
-      }
-    },
    "react-modal": {
      "version": "3.11.2",
      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz",
@ -12576,6 +12694,15 @@
        }
      }
    },
+    "react-spring": {
+      "version": "8.0.27",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "prop-types": "^15.5.8"
+      }
+    },
    "react-table": {
      "version": "6.11.4",
      "resolved": "https://registry.npmjs.org/react-table/-/react-table-6.11.4.tgz",
@ -12663,13 +12790,15 @@
      }
    },
    "recompose": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
-      "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
      "requires": {
+        "@babel/runtime": "^7.0.0",
        "change-emitter": "^0.1.2",
        "fbjs": "^0.8.1",
        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
        "symbol-observable": "^1.0.4"
      }
    },
@ -15067,9 +15196,9 @@
      }
    },
    "ua-parser-js": {
-      "version": "0.7.21",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
-      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
+      "version": "0.7.22",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
+      "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q=="
    },
    "unherit": {
      "version": "1.1.3",
@ -16086,9 +16215,9 @@
      }
    },
    "whatwg-fetch": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz",
+      "integrity": "sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A=="
    },
    "whatwg-mimetype": {
      "version": "2.3.0",
--- a/client/package.json
+++ b/client/package.json
@ -13,7 +13,7 @@
        "test:watch": "jest --watch"
    },
    "dependencies": {
-        "@nivo/line": "^0.49.1",
+        "@nivo/line": "^0.64.0",
        "axios": "^0.19.2",
        "classnames": "^2.2.6",
        "date-fns": "^1.29.0",
--- a/client/src/components/Dashboard/Dashboard.css
+++ b/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;
--- a/client/src/components/Logs/Logs.css
+++ b/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);

--- a/client/src/components/ui/Card.css
+++ b/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;
 }
--- a/client/src/components/ui/Line.css
+++ b/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);
+}
--- a/client/src/components/ui/Line.js
+++ b/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,
+        theme={{
+            crosshair: {
+                line: {
+                    stroke: 'black',
+                    strokeWidth: 1,
+                    strokeOpacity: 0.35,
+                },
+            },
        }}
-        minY="auto"
-        stacked={false}
-        curve='linear'
-        axisBottom={null}
-        axisLeft={null}
+        xScale={{
+            type: 'linear',
+            min: 0,
+            max: 'auto',
+        }}
+        crosshairType="x"
+        axisLeft={false}
+        axisBottom={false}
        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">
+        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>{d.data.y}</strong>
+                    <strong>{yFormatted}</strong>
                    <br />
-                                <small>{d.data.x}</small>
+                    <small>{xFormatted}</small>
                </span>
-                    </div>
-                ))}
-            </div>
-        )}
-        theme={{
-            tooltip: {
-                container: {
-                    padding: '0',
-                    background: '#333',
-                    borderRadius: '4px',
-                },
-            },
+            </div>;
        }}
    />;
+};

 Line.propTypes = {
    data: PropTypes.array.isRequired,
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
 };

 export default Line;
--- a/client/src/components/ui/Tabler.css
+++ b/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 {
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@ -1,10 +1,6 @@
 import 'url-polyfill';
 import dateParse from 'date-fns/parse';
 import dateFormat from 'date-fns/format';
-import subHours from 'date-fns/sub_hours';
-import addHours from 'date-fns/add_hours';
-import addDays from 'date-fns/add_days';
-import subDays from 'date-fns/sub_days';
 import round from 'lodash/round';
 import axios from 'axios';
 import i18n from 'i18next';
@ -105,21 +101,10 @@ export const normalizeLogs = (logs) => logs.map((log) => {
    };
 });

-export const normalizeHistory = (history, interval) => {
-    if (interval === 1 || interval === 7) {
-        const hoursAgo = subHours(Date.now(), 24 * interval);
-        return history.map((item, index) => ({
-            x: dateFormat(addHours(hoursAgo, index), 'D MMM HH:00'),
-            y: round(item, 2),
-        }));
-    }
-
-    const daysAgo = subDays(Date.now(), interval - 1);
-    return history.map((item, index) => ({
-        x: dateFormat(addDays(daysAgo, index), 'D MMM YYYY'),
-        y: round(item, 2),
-    }));
-};
+export const normalizeHistory = (history) => history.map((item, idx) => ({
+    x: idx,
+    y: item,
+}));

 export const normalizeTopStats = (stats) => (
    stats.map((item) => ({
--- a/client/webpack.dev.js
+++ b/client/webpack.dev.js
@ -44,7 +44,6 @@ const getDevServerConfig = (proxyUrl = BASE_URL) => {
        proxy: {
            [proxyUrl]: `http://${devServerHost}:${port}`,
        },
-        open: true,
    };
 };