From eba081245ddae3fe69da73b2c17cd5d6541cbeac Mon Sep 17 00:00:00 2001 From: lflangis Date: Thu, 11 May 2023 11:02:26 -0400 Subject: [PATCH] feat(chart): SKFP-692 add pie and chart graphics --- packages/ui/package-lock.json | 592 +++++++++++++++++- packages/ui/package.json | 6 +- .../components/Charts/Bar/index.module.scss | 20 + .../ui/src/components/Charts/Bar/index.tsx | 38 ++ .../components/Charts/Pie/index.module.scss | 17 + .../ui/src/components/Charts/Pie/index.tsx | 48 ++ .../src/layout/ResizableGridLayout/index.tsx | 2 +- .../stories/Components/Chart/bar.stories.tsx | 44 ++ .../stories/Components/Chart/pie.stories.tsx | 44 ++ 9 files changed, 807 insertions(+), 4 deletions(-) create mode 100644 packages/ui/src/components/Charts/Bar/index.module.scss create mode 100644 packages/ui/src/components/Charts/Bar/index.tsx create mode 100644 packages/ui/src/components/Charts/Pie/index.module.scss create mode 100644 packages/ui/src/components/Charts/Pie/index.tsx create mode 100644 storybook/stories/Components/Chart/bar.stories.tsx create mode 100644 storybook/stories/Components/Chart/pie.stories.tsx diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json index 1c91f8572..c841701b8 100644 --- a/packages/ui/package-lock.json +++ b/packages/ui/package-lock.json @@ -1,18 +1,22 @@ { "name": "@ferlab/ui", - "version": "6.1.3", + "version": "7.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ferlab/ui", - "version": "6.1.3", + "version": "7.4.0", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@ant-design/icons": "^4.7.0", "@dnd-kit/core": "^4.0.3", "@dnd-kit/sortable": "^5.1.0", "@dnd-kit/utilities": "^3.2.0", + "@nivo/bar": "^0.80.0", + "@nivo/core": "^0.80.0", + "@nivo/pie": "^0.80.0", + "@nivo/tooltip": "^0.80.0", "classnames": "^2.2.6", "command-line-args": "^5.1.1", "cross-spawn": "^7.0.3", @@ -1331,6 +1335,168 @@ "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" }, + "node_modules/@nivo/annotations": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.80.0.tgz", + "integrity": "sha512-bC9z0CLjU07LULTMWsqpjovRtHxP7n8oJjqBQBLmHOGB4IfiLbrryBfu9+aEZH3VN2jXHhdpWUz+HxeZzOzsLg==", + "dependencies": { + "@nivo/colors": "0.80.0", + "@react-spring/web": "9.4.5", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@nivo/core": "0.80.0", + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/arcs": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/arcs/-/arcs-0.80.0.tgz", + "integrity": "sha512-g5m/wM36Ey45J3hrVDBPMw1Z6GOgIRwgb5zTh7TFoPuhRBZEDQLmctk8XYOm0xOMVCzsm6WkU5wlSQUeBY6IHQ==", + "dependencies": { + "@nivo/colors": "0.80.0", + "@react-spring/web": "9.4.5", + "d3-shape": "^1.3.5" + }, + "peerDependencies": { + "@nivo/core": "0.80.0", + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/axes": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.80.0.tgz", + "integrity": "sha512-AsUyaSHGwQVSEK8QXpsn8X+poZxvakLMYW7crKY1xTGPNw+SU4SSBohPVumm2jMH3fTSLNxLhAjWo71GBJXfdA==", + "dependencies": { + "@nivo/scales": "0.80.0", + "@react-spring/web": "9.4.5", + "d3-format": "^1.4.4", + "d3-time-format": "^3.0.0" + }, + "peerDependencies": { + "@nivo/core": "0.80.0", + "prop-types": ">= 15.5.10 < 16.0.0", + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/bar": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.80.0.tgz", + "integrity": "sha512-woE/S12Sp+RKQeOHtp302WXfy5usj73cV/gjP95PzJxMv+Rn01i1Uwys3BILzc9h4+OxYuWTFqLADAySAmi7qQ==", + "dependencies": { + "@nivo/annotations": "0.80.0", + "@nivo/axes": "0.80.0", + "@nivo/colors": "0.80.0", + "@nivo/legends": "0.80.0", + "@nivo/scales": "0.80.0", + "@nivo/tooltip": "0.80.0", + "@react-spring/web": "9.4.5", + "d3-scale": "^3.2.3", + "d3-shape": "^1.3.5", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@nivo/core": "0.80.0", + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/colors": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.80.0.tgz", + "integrity": "sha512-T695Zr411FU4RPo7WDINOAn8f79DPP10SFJmDdEqELE+cbzYVTpXqLGZ7JMv88ko7EOf9qxLQgcBqY69rp9tHQ==", + "dependencies": { + "d3-color": "^2.0.0", + "d3-scale": "^3.2.3", + "d3-scale-chromatic": "^2.0.0", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@nivo/core": "0.80.0", + "prop-types": ">= 15.5.10 < 16.0.0", + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/core": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.80.0.tgz", + "integrity": "sha512-6caih0RavXdWWSfde+rC2pk17WrX9YQlqK26BrxIdXzv3Ydzlh5SkrC7dR2TEvMGBhunzVeLOfiC2DWT1S8CFg==", + "dependencies": { + "@nivo/recompose": "0.80.0", + "@react-spring/web": "9.4.5", + "d3-color": "^2.0.0", + "d3-format": "^1.4.4", + "d3-interpolate": "^2.0.1", + "d3-scale": "^3.2.3", + "d3-scale-chromatic": "^2.0.0", + "d3-shape": "^1.3.5", + "d3-time-format": "^3.0.0", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@nivo/tooltip": "0.80.0", + "prop-types": ">= 15.5.10 < 16.0.0", + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/legends": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.80.0.tgz", + "integrity": "sha512-h0IUIPGygpbKIZZZWIxkkxOw4SO0rqPrqDrykjaoQz4CvL4HtLIUS3YRA4akKOVNZfS5agmImjzvIe0s3RvqlQ==", + "peerDependencies": { + "@nivo/core": "0.80.0", + "prop-types": ">= 15.5.10 < 16.0.0", + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/pie": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/pie/-/pie-0.80.0.tgz", + "integrity": "sha512-Zj2PtozUg5wizxdI/2o13YzwnBwf8lLrgc8vH7ucsgOu5nj6oLLpGTuNd3CBmRJHFGIGNT39bP63lKnB3P6qOQ==", + "dependencies": { + "@nivo/arcs": "0.80.0", + "@nivo/colors": "0.80.0", + "@nivo/legends": "0.80.0", + "@nivo/tooltip": "0.80.0", + "d3-shape": "^1.3.5" + }, + "peerDependencies": { + "@nivo/core": "0.80.0", + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/recompose": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/recompose/-/recompose-0.80.0.tgz", + "integrity": "sha512-iL3g7j3nJGD9+mRDbwNwt/IXDXH6E29mhShY1I7SP91xrfusZV9pSFf4EzyYgruNJk/2iqMuaqn+e+TVFra44A==", + "dependencies": { + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">= 16.14.0 < 19.0.0" + } + }, + "node_modules/@nivo/scales": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.80.0.tgz", + "integrity": "sha512-4y2pQdCg+f3n4TKXC2tYuq71veZM+xPRQbOTgGYJpuBvMc7pQsXF9T5z7ryeIG9hkpXkrlyjecU6XcAG7tLSNg==", + "dependencies": { + "d3-scale": "^3.2.3", + "d3-time": "^1.0.11", + "d3-time-format": "^3.0.0", + "lodash": "^4.17.21" + } + }, + "node_modules/@nivo/tooltip": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.80.0.tgz", + "integrity": "sha512-qGmrreRwnCsYjn/LAuwBtxBn/tvG8y+rwgd4gkANLBAoXd3bzJyvmkSe+QJPhUG64bq57ibDK+lO2pC48a3/fw==", + "dependencies": { + "@react-spring/web": "9.4.5" + }, + "peerDependencies": { + "@nivo/core": "0.80.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1366,6 +1532,73 @@ "node": ">= 8" } }, + "node_modules/@react-spring/animated": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5.tgz", + "integrity": "sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==", + "dependencies": { + "@react-spring/shared": "~9.4.5", + "@react-spring/types": "~9.4.5" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.4.5.tgz", + "integrity": "sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==", + "dependencies": { + "@react-spring/animated": "~9.4.5", + "@react-spring/rafz": "~9.4.5", + "@react-spring/shared": "~9.4.5", + "@react-spring/types": "~9.4.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, + "node_modules/@react-spring/rafz": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.4.5.tgz", + "integrity": "sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==" + }, + "node_modules/@react-spring/shared": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.4.5.tgz", + "integrity": "sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==", + "dependencies": { + "@react-spring/rafz": "~9.4.5", + "@react-spring/types": "~9.4.5" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.4.5.tgz", + "integrity": "sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==" + }, + "node_modules/@react-spring/web": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.4.5.tgz", + "integrity": "sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==", + "dependencies": { + "@react-spring/animated": "~9.4.5", + "@react-spring/core": "~9.4.5", + "@react-spring/shared": "~9.4.5", + "@react-spring/types": "~9.4.5" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0", + "react-dom": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, "node_modules/@sinclair/typebox": { "version": "0.24.51", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz", @@ -3832,6 +4065,87 @@ "dev": true, "peer": true }, + "node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/d3-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz", + "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==" + }, + "node_modules/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==" + }, + "node_modules/d3-interpolate": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz", + "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==", + "dependencies": { + "d3-color": "1 - 2" + } + }, + "node_modules/d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" + }, + "node_modules/d3-scale": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz", + "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==", + "dependencies": { + "d3-array": "^2.3.0", + "d3-format": "1 - 2", + "d3-interpolate": "1.2.0 - 2", + "d3-time": "^2.1.1", + "d3-time-format": "2 - 3" + } + }, + "node_modules/d3-scale-chromatic": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz", + "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==", + "dependencies": { + "d3-color": "1 - 2", + "d3-interpolate": "1 - 2" + } + }, + "node_modules/d3-scale/node_modules/d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==", + "dependencies": { + "d3-array": "2" + } + }, + "node_modules/d3-shape": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", + "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", + "dependencies": { + "d3-path": "1" + } + }, + "node_modules/d3-time": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz", + "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==" + }, + "node_modules/d3-time-format": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz", + "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==", + "dependencies": { + "d3-time": "1 - 2" + } + }, "node_modules/data-urls": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz", @@ -6242,6 +6556,11 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, "node_modules/interpret": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", @@ -10346,6 +10665,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-resizable": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz", @@ -14761,6 +15085,127 @@ "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" }, + "@nivo/annotations": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.80.0.tgz", + "integrity": "sha512-bC9z0CLjU07LULTMWsqpjovRtHxP7n8oJjqBQBLmHOGB4IfiLbrryBfu9+aEZH3VN2jXHhdpWUz+HxeZzOzsLg==", + "requires": { + "@nivo/colors": "0.80.0", + "@react-spring/web": "9.4.5", + "lodash": "^4.17.21" + } + }, + "@nivo/arcs": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/arcs/-/arcs-0.80.0.tgz", + "integrity": "sha512-g5m/wM36Ey45J3hrVDBPMw1Z6GOgIRwgb5zTh7TFoPuhRBZEDQLmctk8XYOm0xOMVCzsm6WkU5wlSQUeBY6IHQ==", + "requires": { + "@nivo/colors": "0.80.0", + "@react-spring/web": "9.4.5", + "d3-shape": "^1.3.5" + } + }, + "@nivo/axes": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.80.0.tgz", + "integrity": "sha512-AsUyaSHGwQVSEK8QXpsn8X+poZxvakLMYW7crKY1xTGPNw+SU4SSBohPVumm2jMH3fTSLNxLhAjWo71GBJXfdA==", + "requires": { + "@nivo/scales": "0.80.0", + "@react-spring/web": "9.4.5", + "d3-format": "^1.4.4", + "d3-time-format": "^3.0.0" + } + }, + "@nivo/bar": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.80.0.tgz", + "integrity": "sha512-woE/S12Sp+RKQeOHtp302WXfy5usj73cV/gjP95PzJxMv+Rn01i1Uwys3BILzc9h4+OxYuWTFqLADAySAmi7qQ==", + "requires": { + "@nivo/annotations": "0.80.0", + "@nivo/axes": "0.80.0", + "@nivo/colors": "0.80.0", + "@nivo/legends": "0.80.0", + "@nivo/scales": "0.80.0", + "@nivo/tooltip": "0.80.0", + "@react-spring/web": "9.4.5", + "d3-scale": "^3.2.3", + "d3-shape": "^1.3.5", + "lodash": "^4.17.21" + } + }, + "@nivo/colors": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.80.0.tgz", + "integrity": "sha512-T695Zr411FU4RPo7WDINOAn8f79DPP10SFJmDdEqELE+cbzYVTpXqLGZ7JMv88ko7EOf9qxLQgcBqY69rp9tHQ==", + "requires": { + "d3-color": "^2.0.0", + "d3-scale": "^3.2.3", + "d3-scale-chromatic": "^2.0.0", + "lodash": "^4.17.21" + } + }, + "@nivo/core": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.80.0.tgz", + "integrity": "sha512-6caih0RavXdWWSfde+rC2pk17WrX9YQlqK26BrxIdXzv3Ydzlh5SkrC7dR2TEvMGBhunzVeLOfiC2DWT1S8CFg==", + "requires": { + "@nivo/recompose": "0.80.0", + "@react-spring/web": "9.4.5", + "d3-color": "^2.0.0", + "d3-format": "^1.4.4", + "d3-interpolate": "^2.0.1", + "d3-scale": "^3.2.3", + "d3-scale-chromatic": "^2.0.0", + "d3-shape": "^1.3.5", + "d3-time-format": "^3.0.0", + "lodash": "^4.17.21" + } + }, + "@nivo/legends": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.80.0.tgz", + "integrity": "sha512-h0IUIPGygpbKIZZZWIxkkxOw4SO0rqPrqDrykjaoQz4CvL4HtLIUS3YRA4akKOVNZfS5agmImjzvIe0s3RvqlQ==", + "requires": {} + }, + "@nivo/pie": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/pie/-/pie-0.80.0.tgz", + "integrity": "sha512-Zj2PtozUg5wizxdI/2o13YzwnBwf8lLrgc8vH7ucsgOu5nj6oLLpGTuNd3CBmRJHFGIGNT39bP63lKnB3P6qOQ==", + "requires": { + "@nivo/arcs": "0.80.0", + "@nivo/colors": "0.80.0", + "@nivo/legends": "0.80.0", + "@nivo/tooltip": "0.80.0", + "d3-shape": "^1.3.5" + } + }, + "@nivo/recompose": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/recompose/-/recompose-0.80.0.tgz", + "integrity": "sha512-iL3g7j3nJGD9+mRDbwNwt/IXDXH6E29mhShY1I7SP91xrfusZV9pSFf4EzyYgruNJk/2iqMuaqn+e+TVFra44A==", + "requires": { + "react-lifecycles-compat": "^3.0.4" + } + }, + "@nivo/scales": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.80.0.tgz", + "integrity": "sha512-4y2pQdCg+f3n4TKXC2tYuq71veZM+xPRQbOTgGYJpuBvMc7pQsXF9T5z7ryeIG9hkpXkrlyjecU6XcAG7tLSNg==", + "requires": { + "d3-scale": "^3.2.3", + "d3-time": "^1.0.11", + "d3-time-format": "^3.0.0", + "lodash": "^4.17.21" + } + }, + "@nivo/tooltip": { + "version": "0.80.0", + "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.80.0.tgz", + "integrity": "sha512-qGmrreRwnCsYjn/LAuwBtxBn/tvG8y+rwgd4gkANLBAoXd3bzJyvmkSe+QJPhUG64bq57ibDK+lO2pC48a3/fw==", + "requires": { + "@react-spring/web": "9.4.5" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -14787,6 +15232,56 @@ "fastq": "^1.6.0" } }, + "@react-spring/animated": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5.tgz", + "integrity": "sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==", + "requires": { + "@react-spring/shared": "~9.4.5", + "@react-spring/types": "~9.4.5" + } + }, + "@react-spring/core": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.4.5.tgz", + "integrity": "sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==", + "requires": { + "@react-spring/animated": "~9.4.5", + "@react-spring/rafz": "~9.4.5", + "@react-spring/shared": "~9.4.5", + "@react-spring/types": "~9.4.5" + } + }, + "@react-spring/rafz": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.4.5.tgz", + "integrity": "sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==" + }, + "@react-spring/shared": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.4.5.tgz", + "integrity": "sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==", + "requires": { + "@react-spring/rafz": "~9.4.5", + "@react-spring/types": "~9.4.5" + } + }, + "@react-spring/types": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.4.5.tgz", + "integrity": "sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==" + }, + "@react-spring/web": { + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.4.5.tgz", + "integrity": "sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==", + "requires": { + "@react-spring/animated": "~9.4.5", + "@react-spring/core": "~9.4.5", + "@react-spring/shared": "~9.4.5", + "@react-spring/types": "~9.4.5" + } + }, "@sinclair/typebox": { "version": "0.24.51", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz", @@ -16853,6 +17348,89 @@ "dev": true, "peer": true }, + "d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "requires": { + "internmap": "^1.0.0" + } + }, + "d3-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz", + "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==" + }, + "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-interpolate": { + "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 - 2" + } + }, + "d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" + }, + "d3-scale": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz", + "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==", + "requires": { + "d3-array": "^2.3.0", + "d3-format": "1 - 2", + "d3-interpolate": "1.2.0 - 2", + "d3-time": "^2.1.1", + "d3-time-format": "2 - 3" + }, + "dependencies": { + "d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==", + "requires": { + "d3-array": "2" + } + } + } + }, + "d3-scale-chromatic": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz", + "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==", + "requires": { + "d3-color": "1 - 2", + "d3-interpolate": "1 - 2" + } + }, + "d3-shape": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", + "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", + "requires": { + "d3-path": "1" + } + }, + "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": "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 - 2" + } + }, "data-urls": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz", @@ -18743,6 +19321,11 @@ "side-channel": "^1.0.4" } }, + "internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, "interpret": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", @@ -21860,6 +22443,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-resizable": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz", diff --git a/packages/ui/package.json b/packages/ui/package.json index 699df2c6a..e14038578 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@ferlab/ui", - "version": "7.3.0", + "version": "7.4.0", "description": "Core components for scientific research data portals", "publishConfig": { "access": "public" @@ -85,6 +85,10 @@ "@dnd-kit/core": "^4.0.3", "@dnd-kit/sortable": "^5.1.0", "@dnd-kit/utilities": "^3.2.0", + "@nivo/bar": "^0.80.0", + "@nivo/core": "^0.80.0", + "@nivo/pie": "^0.80.0", + "@nivo/tooltip": "^0.80.0", "classnames": "^2.2.6", "command-line-args": "^5.1.1", "cross-spawn": "^7.0.3", diff --git a/packages/ui/src/components/Charts/Bar/index.module.scss b/packages/ui/src/components/Charts/Bar/index.module.scss new file mode 100644 index 000000000..4fe2be424 --- /dev/null +++ b/packages/ui/src/components/Charts/Bar/index.module.scss @@ -0,0 +1,20 @@ +.barChartWrapper { + height: 100%; + position: relative;; + width: 100%; + text-align: center; + + .barChartContent { + position: absolute; + width: 100%; + height: 100%; + text-align: center; + + } + + *[class$="-typography"] { + margin: 0; + } +} + + diff --git a/packages/ui/src/components/Charts/Bar/index.tsx b/packages/ui/src/components/Charts/Bar/index.tsx new file mode 100644 index 000000000..9221a8a22 --- /dev/null +++ b/packages/ui/src/components/Charts/Bar/index.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { BarDatum, BarSvgProps, ResponsiveBar } from '@nivo/bar'; +import { Typography } from 'antd'; + +import styles from './index.module.scss'; + +type TBarChart = Omit, 'width' | 'height'> & { + title?: string; +}; + +const { Title } = Typography; + +const BarChart = ({ + margin = { bottom: 12, left: 24, right: 24, top: 12 }, + onMouseEnter, + colorBy = 'indexValue', + title, + ...rest +}: TBarChart): JSX.Element => ( +
+
+ {title && {title}} + { + if (onMouseEnter) { + onMouseEnter(_, e); + } + e.target.style.cursor = 'pointer'; + }} + {...rest} + /> +
+
+); + +export default BarChart; diff --git a/packages/ui/src/components/Charts/Pie/index.module.scss b/packages/ui/src/components/Charts/Pie/index.module.scss new file mode 100644 index 000000000..cd788d762 --- /dev/null +++ b/packages/ui/src/components/Charts/Pie/index.module.scss @@ -0,0 +1,17 @@ +.pieChartWrapper { + height: 100%; + position: relative;; + width: 100%; + text-align: center; + + .pieChartContent { + position: absolute; + width: 100%; + height: 100%; + } + + *[class$="-typography"] { + margin: 0; + } +} + diff --git a/packages/ui/src/components/Charts/Pie/index.tsx b/packages/ui/src/components/Charts/Pie/index.tsx new file mode 100644 index 000000000..9fcdceea8 --- /dev/null +++ b/packages/ui/src/components/Charts/Pie/index.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { DefaultRawDatum, PieSvgProps, ResponsivePie } from '@nivo/pie'; +import { BasicTooltip } from '@nivo/tooltip'; +import { Typography } from 'antd'; + +import styles from './index.module.scss'; + +export type TPieChart = Omit, 'width' | 'height'> & { + title?: string; + margin?: { + top: number; + bottom: number; + left: number; + right: number; + }; +}; + +const { Title } = Typography; + +const PieChart = ({ + margin = { bottom: 12, left: 24, right: 24, top: 12 }, + onMouseEnter, + title, + ...rest +}: TPieChart): JSX.Element => ( +
+
+ {title && {title}} + { + if (onMouseEnter) { + onMouseEnter(_, e); + } + e.target.style.cursor = 'pointer'; + }} + tooltip={(value) => ( + + )} + {...rest} + /> +
+
+); + +export default PieChart; diff --git a/packages/ui/src/layout/ResizableGridLayout/index.tsx b/packages/ui/src/layout/ResizableGridLayout/index.tsx index 37b36e7b4..fadfceb35 100644 --- a/packages/ui/src/layout/ResizableGridLayout/index.tsx +++ b/packages/ui/src/layout/ResizableGridLayout/index.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Layout, Layouts, Responsive as ResponsiveGridLayout, ResponsiveProps } from 'react-grid-layout'; import { SizeMe } from 'react-sizeme'; import { Space } from 'antd'; -import { isEqual, xorWith } from 'lodash'; +import { isEqual } from 'lodash'; import ResizableItemSelector from './ResizableItemSelector'; diff --git a/storybook/stories/Components/Chart/bar.stories.tsx b/storybook/stories/Components/Chart/bar.stories.tsx new file mode 100644 index 000000000..3e55d2466 --- /dev/null +++ b/storybook/stories/Components/Chart/bar.stories.tsx @@ -0,0 +1,44 @@ +import BarChart from '@ferlab/ui/components/Charts/Bar'; +import { Meta } from "@storybook/react/types-6-0"; +import React from "react"; + +const data = [ + { + "id": "1", + "label": "label 1", + "value": 6560 + }, + { + "id": "2", + "label": "label 2", + "value": 2966 + }, + { + "id": "3", + "label": "label 3", + "value": 2096 + }, + { + "id": "4", + "label": "label 4", + "value": 1681 + } +] + +export default { + title: "@ferlab/Components/Charts/Bar", + component: BarChart, + decorators: [ + (Story) => ( + <> +

{Story}

+ + + ), + ], +} as Meta; + + +export const BarChartStory = () => ( + +); \ No newline at end of file diff --git a/storybook/stories/Components/Chart/pie.stories.tsx b/storybook/stories/Components/Chart/pie.stories.tsx new file mode 100644 index 000000000..abd05e066 --- /dev/null +++ b/storybook/stories/Components/Chart/pie.stories.tsx @@ -0,0 +1,44 @@ +import PieChart from '@ferlab/ui/components/Charts/Pie'; +import { Meta } from "@storybook/react/types-6-0"; +import React from "react"; + +const data = [ + { + "id": "1", + "label": "label 1", + "value": 6560 + }, + { + "id": "2", + "label": "label 2", + "value": 2966 + }, + { + "id": "3", + "label": "label 3", + "value": 2096 + }, + { + "id": "4", + "label": "label 4", + "value": 1681 + } +] + +export default { + title: "@ferlab/Components/Charts/Pie", + component: PieChart, + decorators: [ + (Story) => ( + <> +

{Story}

+ + + ), + ], +} as Meta; + + +export const PieChartBaseStory = () => ( + +); \ No newline at end of file