From 259984377e81ef51b1741c4eefb275630c7971aa Mon Sep 17 00:00:00 2001 From: Tony Narlock Date: Thu, 31 Dec 2020 12:12:58 -0600 Subject: [PATCH 1/4] react: Add carbon-components, @carbon/charts --- packages/react/package.json | 4 + yarn.lock | 171 ++++++++++++++++++++++++++++++++++-- 2 files changed, 166 insertions(+), 9 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 3e3d4aa03..6f79213a8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -52,7 +52,11 @@ "eslint-plugin-promise": "^4.2.1" }, "dependencies": { + "@carbon/charts": "^0.41.24", + "@carbon/charts-react": "^0.41.24", "@tabler/icons": "^1.38.1", + "carbon-components": "^10.26.0", + "d3": "5.x", "fast-deep-equal": "^3.1.3", "html-webpack-plugin": "^4.5.1", "react": "^17.0.1", diff --git a/yarn.lock b/yarn.lock index 73fcbf04b..bc01f693e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1510,6 +1510,34 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== +"@carbon/charts-react@^0.41.24": + version "0.41.24" + resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.24.tgz#b075cc2988319e868ad32b4a27ea735e9308e616" + integrity sha512-1tA821LmF8+HYw9ds1cHzBmYbHnNp/8GqL7O+LLx/l9CcHV/OOFIV9qHK3Y0tOuoPNMqbFViaRbodrkKk5Giww== + dependencies: + "@carbon/charts" "^0.41.24" + +"@carbon/charts@^0.41.24": + version "0.41.24" + resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.24.tgz#5292de1604b6a0bedf9461f542f3dd8a6c07dcbf" + integrity sha512-/LmRSZiKawISnodDJRpfmjOohK6QMV5uJ8dV/AwYz+PgKAwwvwo3kX8+L1f2l8HJI3kCWrFcr8s82l+FJWAxwg== + dependencies: + "@carbon/colors" "10.15.0" + "@carbon/utils-position" "1.1.1" + date-fns "2.8.1" + lodash-es "4.17.15" + resize-observer-polyfill "1.5.0" + +"@carbon/colors@10.15.0": + version "10.15.0" + resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.15.0.tgz#1a7f211a9e92b51c838995f5f3ffae002a3fed8b" + integrity sha512-z6Ur7unTO6XoVVujXnGcvxxDaX1g5ccCqImlb/HtJHtF7WFCQVjpxKKn76XcmI3PRZ2tbc9q+ENpfbS5Ry/NBQ== + +"@carbon/utils-position@1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@carbon/utils-position/-/utils-position-1.1.1.tgz#bea463b833608902ea37ac30bec36e3c0a3b547f" + integrity sha512-W8ykraEzr9WsH8+6+FgI6lmK4elFxH8Uy9+XDbDTvyVbF6fq5jgi4dPCDd1AoCtUBCcLAehInhReDaFM3DrM6w== + "@choojs/findup@^0.2.0": version "0.2.1" resolved "https://registry.yarnpkg.com/@choojs/findup/-/findup-0.2.1.tgz#ac13c59ae7be6e1da64de0779a0a7f03d75615a3" @@ -4375,6 +4403,15 @@ capture-exit@^2.0.0: dependencies: rsvp "^4.8.4" +carbon-components@^10.26.0: + version "10.26.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.26.0.tgz#90f246435b4d6ee0514b229730e0c3f6bb9487f1" + integrity sha512-8E0mUPPJYWimGo8KFkXN7vqFo9GyInu7kZtFlYRjRTHx+HKhsaHfn6HQnn/EjLFIcoKKyQuHkqo2vs0HjsI2Ag== + dependencies: + flatpickr "4.6.1" + lodash.debounce "^4.0.8" + warning "^3.0.0" + caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" @@ -5617,7 +5654,7 @@ cyclist@^1.0.1: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= -d3-array@1, d3-array@^1.2.0, d3-array@^1.2.1: +d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0, d3-array@^1.2.1: version "1.2.4" resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f" integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw== @@ -5627,12 +5664,12 @@ d3-array@^2.3.0: resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.9.1.tgz#f355cc72b46c8649b3f9212029e2d681cb5b9643" integrity sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg== -d3-axis@^1.0.12: +d3-axis@1, d3-axis@^1.0.12: version "1.0.12" resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.12.tgz#cdf20ba210cfbb43795af33756886fb3638daac9" integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ== -d3-brush@^1.1.6: +d3-brush@1, d3-brush@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.1.6.tgz#b0a22c7372cabec128bdddf9bddc058592f89e9b" integrity sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA== @@ -5643,6 +5680,14 @@ d3-brush@^1.1.6: d3-selection "1" d3-transition "1" +d3-chord@1: + version "1.0.6" + resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f" + integrity sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA== + dependencies: + d3-array "1" + d3-path "1" + d3-collection@1, d3-collection@^1.0.4: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e" @@ -5658,6 +5703,13 @@ d3-color@1, d3-color@^1.4.1: resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e" integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ== +d3-contour@1: + version "1.3.2" + resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.3.2.tgz#652aacd500d2264cb3423cee10db69f6f59bead3" + integrity sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg== + dependencies: + d3-array "^1.1.1" + d3-delaunay@^5.1.1: version "5.3.0" resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d" @@ -5678,7 +5730,7 @@ d3-drag@1, d3-drag@^1.2.5: d3-dispatch "1" d3-selection "1" -d3-dsv@^1.2.0: +d3-dsv@1, d3-dsv@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.2.0.tgz#9d5f75c3a5f8abd611f74d3f5847b0d4338b885c" integrity sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g== @@ -5692,7 +5744,14 @@ d3-ease@1, d3-ease@^1.0.7: resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2" integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ== -d3-force@^1.2.1: +d3-fetch@1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-1.2.0.tgz#15ce2ecfc41b092b1db50abd2c552c2316cf7fc7" + integrity sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA== + dependencies: + d3-dsv "1" + +d3-force@1, d3-force@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.2.1.tgz#fd29a5d1ff181c9e7f0669e4bd72bdb0e914ec0b" integrity sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg== @@ -5712,7 +5771,14 @@ d3-format@1, d3-format@^1.4.4: resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767" integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA== -d3-hierarchy@^1.1.8, d3-hierarchy@^1.1.9: +d3-geo@1: + version "1.12.1" + resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.12.1.tgz#7fc2ab7414b72e59fbcbd603e80d9adc029b035f" + integrity sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg== + dependencies: + d3-array "1" + +d3-hierarchy@1, d3-hierarchy@^1.1.8, d3-hierarchy@^1.1.9: version "1.1.9" resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz#2f6bee24caaea43f8dc37545fa01628559647a83" integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ== @@ -5736,11 +5802,29 @@ d3-path@1: resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf" integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg== +d3-polygon@1: + version "1.0.6" + resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.6.tgz#0bf8cb8180a6dc107f518ddf7975e12abbfbd38e" + integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ== + d3-quadtree@1: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.7.tgz#ca8b84df7bb53763fe3c2f24bd435137f4e53135" integrity sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA== +d3-random@1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.2.tgz#2833be7c124360bf9e2d3fd4f33847cfe6cab291" + integrity sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ== + +d3-scale-chromatic@1: + version "1.5.0" + resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz#54e333fc78212f439b14641fb55801dd81135a98" + integrity sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg== + dependencies: + d3-color "1" + d3-interpolate "1" + d3-scale-chromatic@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab" @@ -5749,7 +5833,7 @@ d3-scale-chromatic@^2.0.0: d3-color "1 - 2" d3-interpolate "1 - 2" -d3-scale@^2.2.2: +d3-scale@2, d3-scale@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.2.2.tgz#4e880e0b2745acaaddd3ede26a9e908a9e17b81f" integrity sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw== @@ -5777,7 +5861,7 @@ d3-selection@1, d3-selection@^1.1.0, d3-selection@^1.4.2: resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c" integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg== -d3-shape@^1.2.0, d3-shape@^1.2.2, d3-shape@^1.3.5, d3-shape@^1.3.7: +d3-shape@1, d3-shape@^1.2.0, d3-shape@^1.2.2, d3-shape@^1.3.5, d3-shape@^1.3.7: version "1.3.7" resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7" integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw== @@ -5825,7 +5909,12 @@ d3-transition@1, d3-transition@^1.3.2: d3-selection "^1.1.0" d3-timer "1" -d3-zoom@^1.8.3: +d3-voronoi@1: + version "1.1.4" + resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297" + integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg== + +d3-zoom@1, d3-zoom@^1.8.3: version "1.8.3" resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.8.3.tgz#b6a3dbe738c7763121cd05b8a7795ffe17f4fc0a" integrity sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ== @@ -5836,6 +5925,43 @@ d3-zoom@^1.8.3: d3-selection "1" d3-transition "1" +d3@5.x: + version "5.16.0" + resolved "https://registry.yarnpkg.com/d3/-/d3-5.16.0.tgz#9c5e8d3b56403c79d4ed42fbd62f6113f199c877" + integrity sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw== + dependencies: + d3-array "1" + d3-axis "1" + d3-brush "1" + d3-chord "1" + d3-collection "1" + d3-color "1" + d3-contour "1" + d3-dispatch "1" + d3-drag "1" + d3-dsv "1" + d3-ease "1" + d3-fetch "1" + d3-force "1" + d3-format "1" + d3-geo "1" + d3-hierarchy "1" + d3-interpolate "1" + d3-path "1" + d3-polygon "1" + d3-quadtree "1" + d3-random "1" + d3-scale "2" + d3-scale-chromatic "1" + d3-selection "1" + d3-shape "1" + d3-time "1" + d3-time-format "2" + d3-timer "1" + d3-transition "1" + d3-voronoi "1" + d3-zoom "1" + d3@^3.5.17: version "3.5.17" resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8" @@ -5870,6 +5996,11 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" +date-fns@2.8.1: + version "2.8.1" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.8.1.tgz#2109362ccb6c87c3ca011e9e31f702bc09e4123b" + integrity sha512-EL/C8IHvYRwAHYgFRse4MGAPSqlJVlOrhVYZ75iQBKrnv+ZedmYsgwH3t+BCDuZDXpoo07+q9j4qgSSOa7irJg== + date-unit-ms@^1.1.0: version "1.1.14" resolved "https://registry.yarnpkg.com/date-unit-ms/-/date-unit-ms-1.1.14.tgz#82dc972bbe03a65c0c73b0c7b42075ce6b510de9" @@ -7351,6 +7482,11 @@ flat-cache@^3.0.4: flatted "^3.1.0" rimraf "^3.0.2" +flatpickr@4.6.1: + version "4.6.1" + resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.1.tgz#9eb498ab805dd27f5ae02e1ac6ac6c099ce45e94" + integrity sha512-3ULSxbXmcMIRzer/2jLNweoqHpwDvsjEawO2FUd9UFR8uPwLM+LruZcPDpuZStcEgbQKhuFOfXo4nYdGladSNw== + flatted@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.0.tgz#a5d06b4a8b01e3a63771daa5cb7a1903e2e57067" @@ -10163,6 +10299,11 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash-es@4.17.15: + version "4.17.15" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78" + integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ== + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -13175,6 +13316,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +resize-observer-polyfill@1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69" + integrity sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg== + resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" @@ -15778,6 +15924,13 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w= + dependencies: + loose-envify "^1.0.0" + watchpack-chokidar2@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957" From 0b731d0ddaebd20e35cdec4b93a3bc9fdc15d503 Mon Sep 17 00:00:00 2001 From: Tony Narlock Date: Thu, 31 Dec 2020 14:07:35 -0600 Subject: [PATCH 2/4] react(ncu): Ignore d3 package for @carbon/charts --- packages/react/.ncurc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/.ncurc b/packages/react/.ncurc index 921b45cfc..3ecd74dba 100644 --- a/packages/react/.ncurc +++ b/packages/react/.ncurc @@ -1,3 +1,3 @@ { - "reject": [] + "reject": ["d3"] } From f2cc06e5ce3602cc573eba216ef185c300ec9337 Mon Sep 17 00:00:00 2001 From: Tony Narlock Date: Thu, 31 Dec 2020 12:13:29 -0600 Subject: [PATCH 3/4] Add charts via @carbon/charts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Snags: - react/chart: Disable legend for now (keep the DonutChart) 🍩 - react/donut chart: Remove data.selectedGroups props (fixes chart updates) There's something at issue with selectedGroups clearing / pruning results when sets are passed. Even when the legend was removed, having any interaction passing props to data.selectedGroups kept stale values. !squash --- packages/chart-react-carbon/.eslintrc.js | 3 + packages/chart-react-carbon/.ncurc | 3 + packages/chart-react-carbon/package.json | 47 ++++++ packages/chart-react-carbon/src/charts.tsx | 106 +++++++++++++ packages/chart-react-carbon/src/hub.ts | 20 +++ packages/chart-react-carbon/src/query.ts | 174 +++++++++++++++++++++ packages/chart-react-carbon/tsconfig.json | 4 + packages/react/.ncurc | 2 +- packages/react/package.json | 4 - packages/react/src/App.tsx | 23 +-- packages/react/src/style.scss | 4 + 11 files changed, 366 insertions(+), 24 deletions(-) create mode 100644 packages/chart-react-carbon/.eslintrc.js create mode 100644 packages/chart-react-carbon/.ncurc create mode 100644 packages/chart-react-carbon/package.json create mode 100644 packages/chart-react-carbon/src/charts.tsx create mode 100644 packages/chart-react-carbon/src/hub.ts create mode 100644 packages/chart-react-carbon/src/query.ts create mode 100644 packages/chart-react-carbon/tsconfig.json diff --git a/packages/chart-react-carbon/.eslintrc.js b/packages/chart-react-carbon/.eslintrc.js new file mode 100644 index 000000000..8712bb5ad --- /dev/null +++ b/packages/chart-react-carbon/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: "../react/.eslintrc.js", +}; diff --git a/packages/chart-react-carbon/.ncurc b/packages/chart-react-carbon/.ncurc new file mode 100644 index 000000000..3ecd74dba --- /dev/null +++ b/packages/chart-react-carbon/.ncurc @@ -0,0 +1,3 @@ +{ + "reject": ["d3"] +} diff --git a/packages/chart-react-carbon/package.json b/packages/chart-react-carbon/package.json new file mode 100644 index 000000000..f25a86aa3 --- /dev/null +++ b/packages/chart-react-carbon/package.json @@ -0,0 +1,47 @@ +{ + "name": "@tony/cv-chart-react-carbon", + "license": "All rights reserved", + "private": true, + "version": "0.0.1", + "main": "dist/index.js", + "module": "src/index.ts", + "scripts": { + "start": "echo 'noop'", + "build": "echo 'noop'", + "test": "echo 'noop'", + "lint": "eslint . -c .eslintrc.js --ext .ts,.tsx", + "prettier": "prettier src webpack --write", + "format": "yarn run prettier", + "update": "yarn run ncu", + "ncu": "ncu", + "clean": "rm -rf dist/" + }, + "devDependencies": { + "@types/node": "^14.14.21", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "cross-env": "^7.0.3", + "eslint-plugin-react": "^7.22.0", + "prettier": "^2.2.1", + "typescript": "^4.1.3" + }, + "peerDependencies": { + "@typescript-eslint/eslint-plugin": "^4.13.0", + "@typescript-eslint/parser": "^4.13.0", + "eslint": "^7.18.0", + "eslint-plugin-import": "^2.22.1", + "eslint-plugin-promise": "^4.2.1" + }, + "dependencies": { + "@carbon/charts": "^0.41.24", + "@carbon/charts-react": "^0.41.24", + "@datorama/akita": "^6.0.0", + "@tony/cv-lib": "*", + "carbon-components": "^10.26.0", + "d3": "5.x", + "fast-deep-equal": "^3.1.3", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "rxjs": "^6.6.3" + } +} diff --git a/packages/chart-react-carbon/src/charts.tsx b/packages/chart-react-carbon/src/charts.tsx new file mode 100644 index 000000000..d1ddae997 --- /dev/null +++ b/packages/chart-react-carbon/src/charts.tsx @@ -0,0 +1,106 @@ +import { DonutChart, StackedAreaChart } from "@carbon/charts-react"; +import React from "react"; + +import type { Observable, Subscription } from "rxjs"; + +import { carbonChartQuery as query } from "./hub"; +import { DonutChartProps, LineChartProps } from "./query"; +import equal from "fast-deep-equal"; + +import "@carbon/charts/styles.css"; + +// Todo consolidate this into common code somewhere +export function onEmit( + source$: Observable, + nextFn: (value: T) => void +): Subscription { + return source$.subscribe(nextFn, console.error); +} + +// Same as onEmit +export const useAsyncEffect = ( + effect: React.EffectCallback | (() => Promise), + dependencies?: unknown[] +): void => + React.useEffect(() => { + effect(); + return () => void 0; + }, dependencies); + +export const LanguagePieChart: React.FC> = (props) => { + const [chartData, setChartData] = React.useState(); + const languageChartRef = React.useRef(null); + + useAsyncEffect(async () => { + if (!chartData) { + setChartData((await query.getDonutChart()) as DonutChartProps); + } + return void 0; + }); + + React.useEffect(() => void 0, [chartData]); + React.useEffect(() => { + const subscriptions: Subscription[] = [ + onEmit(query.subDonutChart$(), (newChart) => { + const isChanged = !equal(newChart, chartData); + console.log("pie published", newChart, chartData, { isChanged }); + + if (isChanged) { + setChartData(newChart); + } + }), + ]; + + return () => { + subscriptions.map((it) => it.unsubscribe()); + }; + }, []); + + if (!chartData) { + return null; + } + + return ; +}; + +export const ActivityLineChart: React.FC> = (props) => { + const [chartData, setChartData] = React.useState(); + const lineChartRef = React.useRef(null); + + useAsyncEffect(async () => { + if (!chartData) { + setChartData((await query.getLineChart()) as LineChartProps); + } + return void 0; + }); + + React.useEffect(() => void 0, [chartData]); + React.useEffect(() => { + const subscriptions: Subscription[] = [ + onEmit(query.subLineChart$(), (newChart) => { + const isChanged = !equal(newChart, chartData); + console.log("pie published", newChart, chartData, { isChanged }); + + if (isChanged) { + setChartData(newChart); + } + }), + ]; + + return () => { + subscriptions.map((it) => it.unsubscribe()); + }; + }, []); + + if (!chartData) { + return null; + } + + return ( + + ); +}; diff --git a/packages/chart-react-carbon/src/hub.ts b/packages/chart-react-carbon/src/hub.ts new file mode 100644 index 000000000..752aa986a --- /dev/null +++ b/packages/chart-react-carbon/src/hub.ts @@ -0,0 +1,20 @@ +import { + activitiesQuery, + activityTypesQuery, + cvStore, + query, + orgsQuery, + orgTypesQuery, + languagesQuery, +} from "@tony/cv-lib/hub"; +import { CarbonChartQuery } from "./query"; + +export const carbonChartQuery = new CarbonChartQuery( + cvStore, + query, + activitiesQuery, + activityTypesQuery, + languagesQuery, + orgsQuery, + orgTypesQuery +); diff --git a/packages/chart-react-carbon/src/query.ts b/packages/chart-react-carbon/src/query.ts new file mode 100644 index 000000000..8126c187c --- /dev/null +++ b/packages/chart-react-carbon/src/query.ts @@ -0,0 +1,174 @@ +import type { Observable } from "rxjs"; +import { + ChartConfig, + DonutChartOptions, + LineChartOptions, +} from "@carbon/charts/interfaces"; + +import { combineQueries } from "@datorama/akita"; +import { map, take } from "rxjs/operators"; + +import { CVQuery } from "@tony/cv-lib/search/query"; +import type { + OrgsQuery, + OrgTypesQuery, + LanguagesQuery, + ActivityTypesQuery, + ActivitiesQuery, +} from "@tony/cv-lib/search/query"; + +import { CVStore } from "@tony/cv-lib/search/store"; + +export type DonutChartProps = ChartConfig; +export type LineChartProps = ChartConfig; + +export interface Results { + // Charts + donutChart: DonutChartProps; + lineChart: LineChartProps; +} + +const DONUT_CHART_DEFAULT_OPTIONS: DonutChartOptions = { + legend: { + enabled: false, // Disable for now: https://github.com/carbon-design-system/carbon-charts/issues/916 + }, + resizable: true, + donut: { + center: { + label: "Results", + }, + }, + height: "400px", + width: "400px", +}; + +export const LINE_CHART_DEFAULT_OPTIONS: LineChartOptions = { + // So UX doesn't get: + // scales-cartesian.js:156 Uncaught TypeError: Cannot read property 'left' of null + resizable: true, + legend: { + enabled: false, // Disable for now: https://github.com/carbon-design-system/carbon-charts/issues/916 + }, + height: "400px", + axes: { + left: { + stacked: true, + // @ts-ignore + scaleType: "linear", + mapsTo: "value", + }, + bottom: { + // @ts-ignore + scaleType: "time", + mapsTo: "date", + }, + }, + curve: "curveMonotoneX", + experimental: true, +}; + +export const DEFAULT_RESULTS: Results = { + // Charts + donutChart: { + options: DONUT_CHART_DEFAULT_OPTIONS, + data: [], + }, + lineChart: { + options: LINE_CHART_DEFAULT_OPTIONS, // These also cause a crash if empty + data: [ + // These are needed to prevent a crash with empty values + { group: "Rust", value: 90 }, + { group: "Rust 2", value: 20 }, + ], + }, +}; + +export class CarbonChartQuery extends CVQuery { + constructor( + protected store: CVStore, + protected cvQuery: CVQuery, + protected activitiesQuery: ActivitiesQuery, + protected activityTypesQuery: ActivityTypesQuery, + protected languagesQuery: LanguagesQuery, + protected orgsQuery: OrgsQuery, + protected orgTypesQuery: OrgTypesQuery + ) { + super( + store, + activitiesQuery, + activityTypesQuery, + languagesQuery, + orgsQuery, + orgTypesQuery + ); + } + + // + // Chart + // + subDonutChart$(): Observable { + return combineQueries([ + this.languagesQuery.selectBackgroundColors$(), + this.visibleLanguageCount$(), + this.visibleActivities$(), + ]).pipe( + map(([bgColorMap, languageMap, visibleActivities]) => { + return { + data: Object.entries(languageMap).map(([languageName, count]) => { + return { group: languageName, value: count }; + }), + options: { + ...DONUT_CHART_DEFAULT_OPTIONS, + getFillColor: (datasetLabel, label, data, defaultFillColor) => { + return bgColorMap[datasetLabel] ?? defaultFillColor ?? ""; + }, + donut: { + center: { + number: visibleActivities.length, // Prevent multi language activities from summing, show activity count + label: "Results", + }, + }, + pie: { + labels: { formatter: () => "" }, + }, + } as DonutChartOptions, + } as DonutChartProps; + }) + ); + } + + // await $queries.CV.getDonutChart() + getDonutChart(): Promise { + return this.subDonutChart$().pipe(take(1)).toPromise(); + } + + subLineChart$(): Observable { + return this.visibleActivityYearCount$().pipe( + map((activityYearMap) => { + return { + data: Object.values(activityYearMap).length + ? Object.entries(activityYearMap).map(([year, count]) => { + return { + group: "Results", + date: `${year}-01-01T00:00:00.000Z`, + value: count, + }; + }) + : [ + { + group: "Results", + date: "2019-01-01T06:00:00.000Z", + value: 0, + }, + ], + options: LINE_CHART_DEFAULT_OPTIONS, + } as LineChartProps; + }) + ); + } + + // await $queries.CV.getLineChart() + getLineChart(): Promise { + return this.subLineChart$().pipe(take(1)).toPromise(); + } +} diff --git a/packages/chart-react-carbon/tsconfig.json b/packages/chart-react-carbon/tsconfig.json new file mode 100644 index 000000000..b5d7493cd --- /dev/null +++ b/packages/chart-react-carbon/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../react/tsconfig.json", + "include": ["src/*"] +} diff --git a/packages/react/.ncurc b/packages/react/.ncurc index 3ecd74dba..921b45cfc 100644 --- a/packages/react/.ncurc +++ b/packages/react/.ncurc @@ -1,3 +1,3 @@ { - "reject": ["d3"] + "reject": [] } diff --git a/packages/react/package.json b/packages/react/package.json index 6f79213a8..3e3d4aa03 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -52,11 +52,7 @@ "eslint-plugin-promise": "^4.2.1" }, "dependencies": { - "@carbon/charts": "^0.41.24", - "@carbon/charts-react": "^0.41.24", "@tabler/icons": "^1.38.1", - "carbon-components": "^10.26.0", - "d3": "5.x", "fast-deep-equal": "^3.1.3", "html-webpack-plugin": "^4.5.1", "react": "^17.0.1", diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx index 5bcd13666..2a12850f0 100644 --- a/packages/react/src/App.tsx +++ b/packages/react/src/App.tsx @@ -1,4 +1,3 @@ -import moment from "moment"; import React from "react"; import Select from "react-select"; import type { Subscription } from "rxjs"; @@ -40,7 +39,7 @@ import { onEmit, useAsyncEffect } from "./utils"; import { LanguagePieChart, ActivityLineChart, -} from "@tony/cv-chart-react-plotly/src/charts"; +} from "@tony/cv-chart-react-carbon/src/charts"; import christmasTreeSvg from "@tony/cv-data/img/icons/christmas-tree.svg"; import "@tony/cv-nav/components"; @@ -132,6 +131,8 @@ const App: React.FC = () => { return void 0; }); + const languageSelectRef = React.useRef