From a19523b2589afa34f8e6f831e36b80834630413e Mon Sep 17 00:00:00 2001 From: Artem Baskal Date: Mon, 16 Nov 2020 15:22:30 +0300 Subject: [PATCH] - client: 2237 Update graph drawing library Squashed commit of the following: commit 980e9c2f37640ee204ce0365f6c3bcc74741cc7c Merge: cb4cae82b 394fc5a9d Author: Artem Baskal Date: Mon Nov 16 14:52:26 2020 +0300 Merge branch 'master' into fix/2237 commit cb4cae82b5b605894d123d6442ea23b24cc90c12 Author: ArtemBaskal Date: Thu Nov 12 12:07:49 2020 +0300 minor commit 5c07dac48067b4ed201aeb59a44e8592ed2b0b67 Author: ArtemBaskal Date: Wed Nov 11 19:47:38 2020 +0300 minor commit 53f60762e520427a080bdfcd94b08b9ed3a63ca4 Author: ArtemBaskal Date: Wed Nov 11 19:06:06 2020 +0300 Adapt mobile version commit 7659ac733ce4606f6fadf30e0eaddbeefd6095d6 Author: ArtemBaskal Date: Wed Nov 11 18:31:53 2020 +0300 Fix empty graph offset, return background area below graph commit 45499adb20a90024dba4b0b4e44ad4f01a1782d5 Author: ArtemBaskal Date: Tue Nov 10 17:46:47 2020 +0300 - client: 2237 Update graph drawing library --- client/package-lock.json | 337 ++++++++++++------ client/package.json | 2 +- client/src/components/Dashboard/Dashboard.css | 5 - client/src/components/Logs/Logs.css | 1 + client/src/components/ui/Card.css | 1 - client/src/components/ui/Line.css | 9 +- client/src/components/ui/Line.js | 99 ++--- client/src/components/ui/Tabler.css | 2 - client/src/helpers/helpers.js | 23 +- client/webpack.dev.js | 1 - 10 files changed, 306 insertions(+), 174 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 42cac10f..f1172e00 100644 --- 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", diff --git a/client/package.json b/client/package.json index 4ad8d5eb..42d77823 100644 --- 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", diff --git a/client/src/components/Dashboard/Dashboard.css b/client/src/components/Dashboard/Dashboard.css index 3418e76e..c299464b 100644 --- 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; diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css index e256aeca..c4f70827 100644 --- 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); diff --git a/client/src/components/ui/Card.css b/client/src/components/ui/Card.css index eb8a7963..b70c9b9d 100644 --- 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; } diff --git a/client/src/components/ui/Line.css b/client/src/components/ui/Line.css index 4e77647e..24f9f16f 100644 --- 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); +} diff --git a/client/src/components/ui/Line.js b/client/src/components/ui/Line.js index 2374a3ca..da040e20 100644 --- 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 - && { + const interval = useSelector((state) => state.stats.interval); + + return 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) => ( -
- {slice.data.map((d) => ( -
- - {d.data.y} -
- {d.data.x} - -
- ))} -
- )} 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
+ + {yFormatted} +
+ {xFormatted} + +
; + }} />; +}; Line.propTypes = { data: PropTypes.array.isRequired, - color: PropTypes.string.isRequired, + color: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, }; export default Line; diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css index d11e0ce6..c651f728 100644 --- 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 { diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 8fcac7b4..0ace3f08 100644 --- 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) => ({ diff --git a/client/webpack.dev.js b/client/webpack.dev.js index 3d34cb28..afcc3506 100644 --- 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, }; };