From c28747fb0c998f4611ba9c89ab87bc7b67bde3d4 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Wed, 15 Feb 2023 05:50:00 +1300 Subject: [PATCH 1/8] update class component to functional component --- superset-frontend/package-lock.json | 878 ++++++++++++++++++ superset-frontend/package.json | 1 + .../TimeTable/SparklineCell.tsx | 182 ++-- 3 files changed, 968 insertions(+), 93 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index dc764630d7176..d9836244bbf64 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -51,6 +51,7 @@ "@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy", "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", "@visx/responsive": "^3.0.0", + "@visx/xychart": "^3.0.0", "abortcontroller-polyfill": "^1.1.9", "ace-builds": "^1.4.14", "antd": "4.10.3", @@ -13690,6 +13691,79 @@ "react": "*" } }, + "node_modules/@react-spring/animated": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.6.1.tgz", + "integrity": "sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==", + "peer": true, + "dependencies": { + "@react-spring/shared": "~9.6.1", + "@react-spring/types": "~9.6.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.6.1.tgz", + "integrity": "sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==", + "peer": true, + "dependencies": { + "@react-spring/animated": "~9.6.1", + "@react-spring/rafz": "~9.6.1", + "@react-spring/shared": "~9.6.1", + "@react-spring/types": "~9.6.1" + }, + "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.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.6.1.tgz", + "integrity": "sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ==", + "peer": true + }, + "node_modules/@react-spring/shared": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.6.1.tgz", + "integrity": "sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==", + "peer": true, + "dependencies": { + "@react-spring/rafz": "~9.6.1", + "@react-spring/types": "~9.6.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.6.1.tgz", + "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==", + "peer": true + }, + "node_modules/@react-spring/web": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.6.1.tgz", + "integrity": "sha512-X2zR6q2Z+FjsWfGAmAXlQaoUHbPmfuCaXpuM6TcwXPpLE1ZD4A1eys/wpXboFQmDkjnrlTmKvpVna1MjWpZ5Hw==", + "peer": true, + "dependencies": { + "@react-spring/animated": "~9.6.1", + "@react-spring/core": "~9.6.1", + "@react-spring/shared": "~9.6.1", + "@react-spring/types": "~9.6.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@samverschueren/stream-to-observable": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz", @@ -20399,6 +20473,11 @@ "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.1.tgz", "integrity": "sha512-fck0Z9RGfIQn3GJIEKVrp15h9m6Vlg0d5XXeiE/6+CQiBmMDZxfR21XtjEPuDeg7gC3bBM0SdieA5XF3GW1wKA==" }, + "node_modules/@types/d3-voronoi": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz", + "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==" + }, "node_modules/@types/debug": { "version": "4.1.7", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz", @@ -21713,6 +21792,155 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@visx/annotation": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-3.0.0.tgz", + "integrity": "sha512-59mNnVP0a5A+4DSXKclCfO+cLn2zjgEACaQfceHX3NVNYbW0+sQ+EqKl2SGG48Emiaias6kwGWDaOayeq/ocIQ==", + "dependencies": { + "@types/react": "*", + "@visx/drag": "3.0.0", + "@visx/group": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/annotation/node_modules/react-use-measure": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", + "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", + "dependencies": { + "debounce": "^1.2.1" + }, + "peerDependencies": { + "react": ">=16.13", + "react-dom": ">=16.13" + } + }, + "node_modules/@visx/axis": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", + "integrity": "sha512-5vvTPPFUcIZ78ttd8MJLlWuwT+UmvO/sBZIzY2TYETda7ebDiMT/IkFHhIMtr1j/ugvqmcHKVW5jlAJCTnrOCw==", + "dependencies": { + "@types/react": "*", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.0" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/curve": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.0.0.tgz", + "integrity": "sha512-kvHJDLBeczTQ87ZExSTfRxej06l6o6UiQ0NHf9+xpAin06y6Qk1ThOHHWJTGM6KGzwlu7jEauJGHwZs6nMhDvA==", + "dependencies": { + "@types/d3-shape": "^1.3.1", + "d3-shape": "^1.0.6" + } + }, + "node_modules/@visx/drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-3.0.0.tgz", + "integrity": "sha512-sy/3xQQKwuck5MVwg68LXX3UQNS495sGCvUog7LiUnbOBGWvmKy6x1kcjDULm3TB9qg3R2av7qoEHJwW/u1jTQ==", + "dependencies": { + "@types/react": "*", + "@visx/event": "3.0.0", + "@visx/point": "3.0.0", + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/event": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/event/-/event-3.0.0.tgz", + "integrity": "sha512-Jr1+HwyfaTfhzsge75PiMc/ug1V9ip2t/yg9ckDWwzT8kcdk0BHCkxKqSrXKokKd2XNJ8XrJVwZZVcQaFg0ctA==", + "dependencies": { + "@types/react": "*", + "@visx/point": "3.0.0" + } + }, + "node_modules/@visx/glyph": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/glyph/-/glyph-3.0.0.tgz", + "integrity": "sha512-r1B0IocfWfhTABKjam0qqsWKjxLxZfGwefnwn8IcfELSd9iAUtLbI/46nP4roQRHhB/Wl3RBbgA97fZw8f1MxA==", + "dependencies": { + "@types/d3-shape": "^1.3.1", + "@types/react": "*", + "@visx/group": "3.0.0", + "classnames": "^2.3.1", + "d3-shape": "^1.2.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/grid": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", + "integrity": "sha512-NsoHjdLYY3PDeEdRNBe2a7eiVxfG50lzZOM/zt/5kb5F4Ag4xzvgy+E32gBa2m9kSyALzTMiMfIHjQ4/LbFQdg==", + "dependencies": { + "@types/react": "*", + "@visx/curve": "3.0.0", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/group": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/group/-/group-3.0.0.tgz", + "integrity": "sha512-SFjXhTMcsaVAb1/TVL1KM5vn8gQTIVgSx0ATdDl4BJSFp2ym1lO8LY4jpV4SFweaHnWxVwrrfGLTn5QsYnvmjQ==", + "dependencies": { + "@types/react": "*", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.0.0.tgz", + "integrity": "sha512-OWGTC9KZK63PSCXHpfFzez7InHW+eMdofVVyPUCtB3FG8Xr8qZbH8Ho17PH4e45AvGebOGW1F6ww391I1AV5fw==" + }, + "node_modules/@visx/react-spring": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/react-spring/-/react-spring-3.0.0.tgz", + "integrity": "sha512-YU+LNDPTR8RdoexxN4amWsgeFX1bUWQ35zo9RO+vDPbgWFZ9/WgrFraR94J/qHM5l3BQol/QhySO2PvinnysPA==", + "dependencies": { + "@types/react": "*", + "@visx/axis": "3.0.0", + "@visx/grid": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "@react-spring/web": "^9.4.5", + "react": "^16.3.0-0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@visx/responsive": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-3.0.0.tgz", @@ -21727,6 +21955,236 @@ "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, + "node_modules/@visx/scale": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-3.0.0.tgz", + "integrity": "sha512-WSf+wrxZEvu5TPGfGTafzzX1MbogbIxfD9ZKM9p7xfw65v23G0dNMy4bqVBUbOJigONoQkIZyqQ+gz5AJ/ioIg==", + "dependencies": { + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-time": "^2.0.0", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-time": "^2.1.1" + } + }, + "node_modules/@visx/scale/node_modules/@types/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@visx/scale/node_modules/@types/d3-scale": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz", + "integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==", + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@visx/scale/node_modules/@types/d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==" + }, + "node_modules/@visx/scale/node_modules/d3-array": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.2.tgz", + "integrity": "sha512-yEEyEAbDrF8C6Ob2myOBLjwBLck1Z89jMGFee0oPsn95GqjerpaOA4ch+vc2l0FNFFwMD5N7OCSEN5eAlsUbgQ==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@visx/scale/node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@visx/scale/node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@visx/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/@visx/scale/node_modules/d3-time/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/@visx/shape": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-3.0.0.tgz", + "integrity": "sha512-t6lpP9bIA1vwChDwiOUWl92ro29XF/M8IVNWRA0pm4LGxGGTACvxG3Agfcdi3JprahUVqPpnRCwuR36PDanq3Q==", + "dependencies": { + "@types/d3-path": "^1.0.8", + "@types/d3-shape": "^1.3.1", + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/curve": "3.0.0", + "@visx/group": "3.0.0", + "@visx/scale": "3.0.0", + "classnames": "^2.3.1", + "d3-path": "^1.0.5", + "d3-shape": "^1.2.0", + "lodash": "^4.17.21", + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/text": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/text/-/text-3.0.0.tgz", + "integrity": "sha512-LW6v5T/gpd9RGw83/ScXncYc6IlcfzXTpaN8WbbxLRI65gdvSqrykwAMR0cbpQmzoVFuZXljqOf0QslHGnBg1w==", + "dependencies": { + "@types/lodash": "^4.14.172", + "@types/react": "*", + "classnames": "^2.3.1", + "lodash": "^4.17.21", + "prop-types": "^15.7.2", + "reduce-css-calc": "^1.3.0" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/voronoi": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-3.0.0.tgz", + "integrity": "sha512-ySX7+Ic+irfgZQMij/0RJnryETonuKDWA3Upw3V6YtIiodPOEQ5w8FW8TvEbhaBlAUfSwQtHJ5ECvv3ZDrJa2A==", + "dependencies": { + "@types/d3-voronoi": "^1.1.9", + "@types/react": "*", + "classnames": "^2.3.1", + "d3-voronoi": "^1.1.2", + "prop-types": "^15.6.1" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/xychart": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/xychart/-/xychart-3.0.0.tgz", + "integrity": "sha512-CTGudVPHzL3CXqW0S8H/SsQ0RLcP2CS5IvtLtEag+TBj0Ft5f1Z+TNF/hx5+p5BSrmUSwCnaYGjvHRVByNleWg==", + "dependencies": { + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/annotation": "3.0.0", + "@visx/axis": "3.0.0", + "@visx/event": "3.0.0", + "@visx/glyph": "3.0.0", + "@visx/grid": "3.0.0", + "@visx/react-spring": "3.0.0", + "@visx/responsive": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "@visx/text": "3.0.0", + "@visx/tooltip": "3.0.0", + "@visx/voronoi": "3.0.0", + "classnames": "^2.3.1", + "d3-array": "^2.6.0", + "d3-interpolate-path": "2.2.1", + "d3-shape": "^2.0.0", + "lodash": "^4.17.21", + "mitt": "^2.1.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "@react-spring/web": "^9.4.5", + "react": "^16.8.0 || ^17.0.0 || ^ 18.0.0" + } + }, + "node_modules/@visx/xychart/node_modules/@visx/tooltip": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-3.0.0.tgz", + "integrity": "sha512-a+ZzlE/vVxQgW83k/Ypj721K09IKG4JRHVb7YDxiQnAawkJe9rkTxGoAIXD6PrqvERa+rSISgUWHAxuee5MnhA==", + "dependencies": { + "@types/react": "*", + "@visx/bounds": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + }, + "peerDependencies": { + "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0", + "react-dom": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/xychart/node_modules/@visx/tooltip/node_modules/@visx/bounds": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.0.0.tgz", + "integrity": "sha512-YQaSSER9erxlhppzRms6cvYdKqcIwk6eksrGdbJkBoHobhPo1JCIUXlmrA4qgrEnXInPJpueGE+PE5F+Dk12DA==", + "dependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", + "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/xychart/node_modules/@visx/tooltip/node_modules/react-use-measure": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", + "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", + "dependencies": { + "debounce": "^1.2.1" + }, + "peerDependencies": { + "react": ">=16.13", + "react-dom": ">=16.13" + } + }, + "node_modules/@visx/xychart/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/@visx/xychart/node_modules/d3-shape": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz", + "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==", + "dependencies": { + "d3-path": "1 - 2" + } + }, "node_modules/@vx/axis": { "version": "0.0.140", "resolved": "https://registry.npmjs.org/@vx/axis/-/axis-0.0.140.tgz", @@ -29098,6 +29556,11 @@ "d3-color": "1" } }, + "node_modules/d3-interpolate-path": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz", + "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q==" + }, "node_modules/d3-path": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.7.tgz", @@ -29388,6 +29851,11 @@ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz", "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==" }, + "node_modules/debounce": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", + "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==" + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -43996,6 +44464,11 @@ "node": ">=4.0.0" } }, + "node_modules/mitt": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz", + "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==" + }, "node_modules/mixin-deep": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", @@ -71469,6 +71942,62 @@ "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==", "requires": {} }, + "@react-spring/animated": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.6.1.tgz", + "integrity": "sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==", + "peer": true, + "requires": { + "@react-spring/shared": "~9.6.1", + "@react-spring/types": "~9.6.1" + } + }, + "@react-spring/core": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.6.1.tgz", + "integrity": "sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==", + "peer": true, + "requires": { + "@react-spring/animated": "~9.6.1", + "@react-spring/rafz": "~9.6.1", + "@react-spring/shared": "~9.6.1", + "@react-spring/types": "~9.6.1" + } + }, + "@react-spring/rafz": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.6.1.tgz", + "integrity": "sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ==", + "peer": true + }, + "@react-spring/shared": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.6.1.tgz", + "integrity": "sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==", + "peer": true, + "requires": { + "@react-spring/rafz": "~9.6.1", + "@react-spring/types": "~9.6.1" + } + }, + "@react-spring/types": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.6.1.tgz", + "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==", + "peer": true + }, + "@react-spring/web": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.6.1.tgz", + "integrity": "sha512-X2zR6q2Z+FjsWfGAmAXlQaoUHbPmfuCaXpuM6TcwXPpLE1ZD4A1eys/wpXboFQmDkjnrlTmKvpVna1MjWpZ5Hw==", + "peer": true, + "requires": { + "@react-spring/animated": "~9.6.1", + "@react-spring/core": "~9.6.1", + "@react-spring/shared": "~9.6.1", + "@react-spring/types": "~9.6.1" + } + }, "@samverschueren/stream-to-observable": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz", @@ -77266,6 +77795,11 @@ "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.1.tgz", "integrity": "sha512-fck0Z9RGfIQn3GJIEKVrp15h9m6Vlg0d5XXeiE/6+CQiBmMDZxfR21XtjEPuDeg7gC3bBM0SdieA5XF3GW1wKA==" }, + "@types/d3-voronoi": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz", + "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==" + }, "@types/debug": { "version": "4.1.7", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz", @@ -78367,6 +78901,131 @@ "eslint-visitor-keys": "^3.0.0" } }, + "@visx/annotation": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-3.0.0.tgz", + "integrity": "sha512-59mNnVP0a5A+4DSXKclCfO+cLn2zjgEACaQfceHX3NVNYbW0+sQ+EqKl2SGG48Emiaias6kwGWDaOayeq/ocIQ==", + "requires": { + "@types/react": "*", + "@visx/drag": "3.0.0", + "@visx/group": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + }, + "dependencies": { + "react-use-measure": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", + "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", + "requires": { + "debounce": "^1.2.1" + } + } + } + }, + "@visx/axis": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", + "integrity": "sha512-5vvTPPFUcIZ78ttd8MJLlWuwT+UmvO/sBZIzY2TYETda7ebDiMT/IkFHhIMtr1j/ugvqmcHKVW5jlAJCTnrOCw==", + "requires": { + "@types/react": "*", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.0" + } + }, + "@visx/curve": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.0.0.tgz", + "integrity": "sha512-kvHJDLBeczTQ87ZExSTfRxej06l6o6UiQ0NHf9+xpAin06y6Qk1ThOHHWJTGM6KGzwlu7jEauJGHwZs6nMhDvA==", + "requires": { + "@types/d3-shape": "^1.3.1", + "d3-shape": "^1.0.6" + } + }, + "@visx/drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-3.0.0.tgz", + "integrity": "sha512-sy/3xQQKwuck5MVwg68LXX3UQNS495sGCvUog7LiUnbOBGWvmKy6x1kcjDULm3TB9qg3R2av7qoEHJwW/u1jTQ==", + "requires": { + "@types/react": "*", + "@visx/event": "3.0.0", + "@visx/point": "3.0.0", + "prop-types": "^15.5.10" + } + }, + "@visx/event": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/event/-/event-3.0.0.tgz", + "integrity": "sha512-Jr1+HwyfaTfhzsge75PiMc/ug1V9ip2t/yg9ckDWwzT8kcdk0BHCkxKqSrXKokKd2XNJ8XrJVwZZVcQaFg0ctA==", + "requires": { + "@types/react": "*", + "@visx/point": "3.0.0" + } + }, + "@visx/glyph": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/glyph/-/glyph-3.0.0.tgz", + "integrity": "sha512-r1B0IocfWfhTABKjam0qqsWKjxLxZfGwefnwn8IcfELSd9iAUtLbI/46nP4roQRHhB/Wl3RBbgA97fZw8f1MxA==", + "requires": { + "@types/d3-shape": "^1.3.1", + "@types/react": "*", + "@visx/group": "3.0.0", + "classnames": "^2.3.1", + "d3-shape": "^1.2.0", + "prop-types": "^15.6.2" + } + }, + "@visx/grid": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", + "integrity": "sha512-NsoHjdLYY3PDeEdRNBe2a7eiVxfG50lzZOM/zt/5kb5F4Ag4xzvgy+E32gBa2m9kSyALzTMiMfIHjQ4/LbFQdg==", + "requires": { + "@types/react": "*", + "@visx/curve": "3.0.0", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + } + }, + "@visx/group": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/group/-/group-3.0.0.tgz", + "integrity": "sha512-SFjXhTMcsaVAb1/TVL1KM5vn8gQTIVgSx0ATdDl4BJSFp2ym1lO8LY4jpV4SFweaHnWxVwrrfGLTn5QsYnvmjQ==", + "requires": { + "@types/react": "*", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + } + }, + "@visx/point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.0.0.tgz", + "integrity": "sha512-OWGTC9KZK63PSCXHpfFzez7InHW+eMdofVVyPUCtB3FG8Xr8qZbH8Ho17PH4e45AvGebOGW1F6ww391I1AV5fw==" + }, + "@visx/react-spring": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/react-spring/-/react-spring-3.0.0.tgz", + "integrity": "sha512-YU+LNDPTR8RdoexxN4amWsgeFX1bUWQ35zo9RO+vDPbgWFZ9/WgrFraR94J/qHM5l3BQol/QhySO2PvinnysPA==", + "requires": { + "@types/react": "*", + "@visx/axis": "3.0.0", + "@visx/grid": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + } + }, "@visx/responsive": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-3.0.0.tgz", @@ -78378,6 +79037,210 @@ "prop-types": "^15.6.1" } }, + "@visx/scale": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-3.0.0.tgz", + "integrity": "sha512-WSf+wrxZEvu5TPGfGTafzzX1MbogbIxfD9ZKM9p7xfw65v23G0dNMy4bqVBUbOJigONoQkIZyqQ+gz5AJ/ioIg==", + "requires": { + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-time": "^2.0.0", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-time": "^2.1.1" + }, + "dependencies": { + "@types/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==", + "requires": { + "@types/d3-color": "*" + } + }, + "@types/d3-scale": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz", + "integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==", + "requires": { + "@types/d3-time": "*" + } + }, + "@types/d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==" + }, + "d3-array": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.2.tgz", + "integrity": "sha512-yEEyEAbDrF8C6Ob2myOBLjwBLck1Z89jMGFee0oPsn95GqjerpaOA4ch+vc2l0FNFFwMD5N7OCSEN5eAlsUbgQ==", + "requires": { + "internmap": "1 - 2" + } + }, + "d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "requires": { + "d3-color": "1 - 3" + } + }, + "d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "requires": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + } + }, + "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" + }, + "dependencies": { + "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" + } + } + } + } + } + }, + "@visx/shape": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-3.0.0.tgz", + "integrity": "sha512-t6lpP9bIA1vwChDwiOUWl92ro29XF/M8IVNWRA0pm4LGxGGTACvxG3Agfcdi3JprahUVqPpnRCwuR36PDanq3Q==", + "requires": { + "@types/d3-path": "^1.0.8", + "@types/d3-shape": "^1.3.1", + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/curve": "3.0.0", + "@visx/group": "3.0.0", + "@visx/scale": "3.0.0", + "classnames": "^2.3.1", + "d3-path": "^1.0.5", + "d3-shape": "^1.2.0", + "lodash": "^4.17.21", + "prop-types": "^15.5.10" + } + }, + "@visx/text": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/text/-/text-3.0.0.tgz", + "integrity": "sha512-LW6v5T/gpd9RGw83/ScXncYc6IlcfzXTpaN8WbbxLRI65gdvSqrykwAMR0cbpQmzoVFuZXljqOf0QslHGnBg1w==", + "requires": { + "@types/lodash": "^4.14.172", + "@types/react": "*", + "classnames": "^2.3.1", + "lodash": "^4.17.21", + "prop-types": "^15.7.2", + "reduce-css-calc": "^1.3.0" + } + }, + "@visx/voronoi": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-3.0.0.tgz", + "integrity": "sha512-ySX7+Ic+irfgZQMij/0RJnryETonuKDWA3Upw3V6YtIiodPOEQ5w8FW8TvEbhaBlAUfSwQtHJ5ECvv3ZDrJa2A==", + "requires": { + "@types/d3-voronoi": "^1.1.9", + "@types/react": "*", + "classnames": "^2.3.1", + "d3-voronoi": "^1.1.2", + "prop-types": "^15.6.1" + } + }, + "@visx/xychart": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/xychart/-/xychart-3.0.0.tgz", + "integrity": "sha512-CTGudVPHzL3CXqW0S8H/SsQ0RLcP2CS5IvtLtEag+TBj0Ft5f1Z+TNF/hx5+p5BSrmUSwCnaYGjvHRVByNleWg==", + "requires": { + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/annotation": "3.0.0", + "@visx/axis": "3.0.0", + "@visx/event": "3.0.0", + "@visx/glyph": "3.0.0", + "@visx/grid": "3.0.0", + "@visx/react-spring": "3.0.0", + "@visx/responsive": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "@visx/text": "3.0.0", + "@visx/tooltip": "3.0.0", + "@visx/voronoi": "3.0.0", + "classnames": "^2.3.1", + "d3-array": "^2.6.0", + "d3-interpolate-path": "2.2.1", + "d3-shape": "^2.0.0", + "lodash": "^4.17.21", + "mitt": "^2.1.0", + "prop-types": "^15.6.2" + }, + "dependencies": { + "@visx/tooltip": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-3.0.0.tgz", + "integrity": "sha512-a+ZzlE/vVxQgW83k/Ypj721K09IKG4JRHVb7YDxiQnAawkJe9rkTxGoAIXD6PrqvERa+rSISgUWHAxuee5MnhA==", + "requires": { + "@types/react": "*", + "@visx/bounds": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + }, + "dependencies": { + "@visx/bounds": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.0.0.tgz", + "integrity": "sha512-YQaSSER9erxlhppzRms6cvYdKqcIwk6eksrGdbJkBoHobhPo1JCIUXlmrA4qgrEnXInPJpueGE+PE5F+Dk12DA==", + "requires": { + "@types/react": "*", + "@types/react-dom": "*", + "prop-types": "^15.5.10" + } + }, + "react-use-measure": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", + "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", + "requires": { + "debounce": "^1.2.1" + } + } + } + }, + "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-shape": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz", + "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==", + "requires": { + "d3-path": "1 - 2" + } + } + } + }, "@vx/axis": { "version": "0.0.140", "resolved": "https://registry.npmjs.org/@vx/axis/-/axis-0.0.140.tgz", @@ -84110,6 +84973,11 @@ "d3-color": "1" } }, + "d3-interpolate-path": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz", + "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q==" + }, "d3-path": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.7.tgz", @@ -84362,6 +85230,11 @@ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz", "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==" }, + "debounce": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", + "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==" + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -95520,6 +96393,11 @@ "through2": "^2.0.0" } }, + "mitt": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz", + "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==" + }, "mixin-deep": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", diff --git a/superset-frontend/package.json b/superset-frontend/package.json index 5d6c3995337c0..18385cececafb 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -115,6 +115,7 @@ "@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy", "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", "@visx/responsive": "^3.0.0", + "@visx/xychart": "^3.0.0", "abortcontroller-polyfill": "^1.1.9", "ace-builds": "^1.4.14", "antd": "4.10.3", diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx index 8d6c208358cee..8b93c45138349 100644 --- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx +++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx @@ -26,17 +26,18 @@ import { VerticalReferenceLine, WithTooltip, } from '@data-ui/sparkline'; +// import { XYChart, LineSeries, GlyphSeries, Axis } from '@visx/xychart'; import { getTextDimension, formatNumber } from '@superset-ui/core'; interface Props { ariaLabel: string; className?: string; height: number; - numberFormat: string; + numberFormat?: string; renderTooltip: ({ index }: { index: number }) => void; showYAxis: boolean; width: number; - yAxisBounds: Array; + yAxisBounds: Array; data: Array; } @@ -88,8 +89,17 @@ function isValidBoundValue(value?: number | string) { ); } -class SparklineCell extends React.Component { - renderHorizontalReferenceLine(value?: number, label?: string) { +const SparklineCell = ({ + ariaLabel, + data, + width = 300, + height = 50, + numberFormat = '', + yAxisBounds = [undefined, undefined], + showYAxis = false, + renderTooltip = () =>
, +}: Props) => { + function renderHorizontalReferenceLine(value?: number, label?: string) { return ( { /> ); } + const yScale: Yscale = {}; + let hasMinBound = false; + let hasMaxBound = false; - render() { - const { - width = 300, - height = 50, - data, - ariaLabel, - numberFormat = undefined, - yAxisBounds = [undefined, undefined], - showYAxis = false, - renderTooltip = () =>
, - } = this.props; - - const yScale: Yscale = {}; - let hasMinBound = false; - let hasMaxBound = false; - - if (yAxisBounds) { - const [minBound, maxBound] = yAxisBounds; - hasMinBound = isValidBoundValue(minBound); - if (hasMinBound) { - yScale.min = minBound; - } - hasMaxBound = isValidBoundValue(maxBound); - if (hasMaxBound) { - yScale.max = maxBound; - } + if (yAxisBounds) { + const [minBound, maxBound] = yAxisBounds; + hasMinBound = isValidBoundValue(minBound); + if (hasMinBound) { + yScale.min = minBound; } - - let min: number | undefined; - let max: number | undefined; - let minLabel: string; - let maxLabel: string; - let labelLength = 0; - if (showYAxis) { - const [minBound, maxBound] = yAxisBounds; - min = hasMinBound - ? minBound - : data.reduce((acc, current) => Math.min(acc, current), data[0]); - max = hasMaxBound - ? maxBound - : data.reduce((acc, current) => Math.max(acc, current), data[0]); - - minLabel = formatNumber(numberFormat, min); - maxLabel = formatNumber(numberFormat, max); - labelLength = Math.max( - getSparklineTextWidth(minLabel), - getSparklineTextWidth(maxLabel), - ); + hasMaxBound = isValidBoundValue(maxBound); + if (hasMaxBound) { + yScale.max = maxBound; } + } - const margin = { - ...MARGIN, - right: MARGIN.right + labelLength, - }; + let min: number | undefined; + let max: number | undefined; + let minLabel: string; + let maxLabel: string; + let labelLength = 0; + if (showYAxis) { + const [minBound, maxBound] = yAxisBounds; + min = hasMinBound + ? minBound + : data.reduce((acc, current) => Math.min(acc, current), data[0]); + max = hasMaxBound + ? maxBound + : data.reduce((acc, current) => Math.max(acc, current), data[0]); - return ( - - {({ onMouseLeave, onMouseMove, tooltipData }: TooltipProps) => ( - - {showYAxis && this.renderHorizontalReferenceLine(min, minLabel)} - {showYAxis && this.renderHorizontalReferenceLine(max, maxLabel)} - - {tooltipData && ( - - )} - {tooltipData && ( - - )} - - )} - + minLabel = formatNumber(numberFormat, min); + maxLabel = formatNumber(numberFormat, max); + labelLength = Math.max( + getSparklineTextWidth(minLabel), + getSparklineTextWidth(maxLabel), ); } -} + + const margin = { + ...MARGIN, + right: MARGIN.right + labelLength, + }; + + return ( + + {({ onMouseLeave, onMouseMove, tooltipData }: TooltipProps) => ( + + {showYAxis && renderHorizontalReferenceLine(min, minLabel)} + {showYAxis && renderHorizontalReferenceLine(max, maxLabel)} + + {tooltipData && ( + + )} + {tooltipData && ( + + )} + + )} + + ); +}; export default SparklineCell; From a874bbc77651f4f3d4198cc76c08057514fb8915 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Thu, 16 Feb 2023 06:22:50 +1300 Subject: [PATCH 2/8] migrate init --- superset-frontend/package-lock.json | 1 + .../TimeTable/SparklineCell.tsx | 159 +++++++++++++----- .../visualizations/TimeTable/TimeTable.jsx | 1 + 3 files changed, 122 insertions(+), 39 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index d9836244bbf64..b771117fb90c6 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -51,6 +51,7 @@ "@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy", "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", "@visx/responsive": "^3.0.0", + "@visx/scale": "^3.0.0", "@visx/xychart": "^3.0.0", "abortcontroller-polyfill": "^1.1.9", "ace-builds": "^1.4.14", diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx index 8b93c45138349..51466424573ea 100644 --- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx +++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx @@ -18,6 +18,7 @@ * under the License. */ import React from 'react'; +import moment from 'moment'; import { Sparkline, LineSeries, @@ -26,19 +27,28 @@ import { VerticalReferenceLine, WithTooltip, } from '@data-ui/sparkline'; -// import { XYChart, LineSeries, GlyphSeries, Axis } from '@visx/xychart'; -import { getTextDimension, formatNumber } from '@superset-ui/core'; +import { + Axis, + GlyphSeries, + Grid, + LineSeries as NewLineSeries, + Tooltip, + XYChart, + buildChartTheme, +} from '@visx/xychart'; +import { getTextDimension, formatNumber, formatTime } from '@superset-ui/core'; interface Props { ariaLabel: string; className?: string; height: number; numberFormat?: string; - renderTooltip: ({ index }: { index: number }) => void; + renderTooltip: ({ index }: { index: number }) => React.ReactNode; showYAxis: boolean; width: number; yAxisBounds: Array; data: Array; + entries: Array; } interface TooltipProps { @@ -88,6 +98,13 @@ function isValidBoundValue(value?: number | string) { !Number.isNaN(value) ); } +const customTheme = buildChartTheme({ + backgroundColor: 'ffffff', + colors: ['#767676'], + gridColor: '#bbbbbb', + gridColorDark: '#bbbbbb', + tickLength: 5, +}); const SparklineCell = ({ ariaLabel, @@ -97,6 +114,7 @@ const SparklineCell = ({ numberFormat = '', yAxisBounds = [undefined, undefined], showYAxis = false, + entries = [], renderTooltip = () =>
, }: Props) => { function renderHorizontalReferenceLine(value?: number, label?: string) { @@ -111,6 +129,7 @@ const SparklineCell = ({ /> ); } + const yScale: Yscale = {}; let hasMinBound = false; let hasMaxBound = false; @@ -154,43 +173,105 @@ const SparklineCell = ({ right: MARGIN.right + labelLength, }; + const newData = data.map((num, idx) => ({ + x: idx, + y: num, + })); + + const xAccessor = (d: any) => d.x; + const yAccessor = (d: any) => d.y; + return ( - - {({ onMouseLeave, onMouseMove, tooltipData }: TooltipProps) => ( - - {showYAxis && renderHorizontalReferenceLine(min, minLabel)} - {showYAxis && renderHorizontalReferenceLine(max, maxLabel)} - - {tooltipData && ( - - )} - {tooltipData && ( - - )} - - )} - + <> + + {({ onMouseLeave, onMouseMove, tooltipData }: TooltipProps) => ( + + {showYAxis && renderHorizontalReferenceLine(min, minLabel)} + {showYAxis && renderHorizontalReferenceLine(max, maxLabel)} + + {tooltipData && ( + + )} + {tooltipData && ( + + )} + + )} + + + + {showYAxis && ( + formatNumber(numberFormat, d)} + /> + )} + {showYAxis && ( + + )} + { + const idx = tooltipData?.datumByKey[ariaLabel].index; + return ( +
+ {idx && formatNumber(numberFormat, data[idx])} +
+ {idx && + formatTime( + numberFormat, + moment.utc(entries[idx].time).toDate(), + )} +
+
+ ); + }} + /> + + + ); }; diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx index 6843387ed20f4..7417f5ce989d6 100644 --- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx +++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx @@ -171,6 +171,7 @@ const TimeTable = ({ numberFormat={column.d3format} yAxisBounds={column.yAxisBounds} showYAxis={column.showYAxis} + entries={entries} renderTooltip={({ index }) => (
{formatNumber(column.d3format, sparkData[index])} From 19b247045b37ebd5c9dd44e6c7e7ae4d4aef4ec6 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Fri, 17 Feb 2023 06:23:08 +1300 Subject: [PATCH 3/8] added grid --- superset-frontend/package-lock.json | 238 +++++++++++------- superset-frontend/package.json | 3 + .../TimeTable/SparklineCell.tsx | 43 +++- 3 files changed, 183 insertions(+), 101 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index b771117fb90c6..5e78b6dd062ee 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -50,8 +50,10 @@ "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud", "@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy", "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", + "@visx/grid": "^3.0.1", "@visx/responsive": "^3.0.0", "@visx/scale": "^3.0.0", + "@visx/tooltip": "^3.0.0", "@visx/xychart": "^3.0.0", "abortcontroller-polyfill": "^1.1.9", "ace-builds": "^1.4.14", @@ -21810,18 +21812,6 @@ "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, - "node_modules/@visx/annotation/node_modules/react-use-measure": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", - "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", - "dependencies": { - "debounce": "^1.2.1" - }, - "peerDependencies": { - "react": ">=16.13", - "react-dom": ">=16.13" - } - }, "node_modules/@visx/axis": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", @@ -21840,6 +21830,20 @@ "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, + "node_modules/@visx/bounds": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.0.0.tgz", + "integrity": "sha512-YQaSSER9erxlhppzRms6cvYdKqcIwk6eksrGdbJkBoHobhPo1JCIUXlmrA4qgrEnXInPJpueGE+PE5F+Dk12DA==", + "dependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", + "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/curve": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.0.0.tgz", @@ -21889,14 +21893,14 @@ } }, "node_modules/@visx/grid": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", - "integrity": "sha512-NsoHjdLYY3PDeEdRNBe2a7eiVxfG50lzZOM/zt/5kb5F4Ag4xzvgy+E32gBa2m9kSyALzTMiMfIHjQ4/LbFQdg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.1.tgz", + "integrity": "sha512-cln5CVvFG58C5Uz1Uf0KRBFmGmgD1NALOQdYDu5yPsTuY2yLzVYPvCIlYBMdUtE0uzfNq972SmkZHfZYs03jxQ==", "dependencies": { "@types/react": "*", "@visx/curve": "3.0.0", "@visx/group": "3.0.0", - "@visx/point": "3.0.0", + "@visx/point": "3.0.1", "@visx/scale": "3.0.0", "@visx/shape": "3.0.0", "classnames": "^2.3.1", @@ -21906,6 +21910,11 @@ "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, + "node_modules/@visx/grid/node_modules/@visx/point": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.0.1.tgz", + "integrity": "sha512-S5WOBMgEP2xHcgs3A2BFB2vwzrk0tMmn3PGZAbQJ+lu4HlnalDP72klUnxLTH8xclNNvpUHtHM5eLIJXyHx6Pw==" + }, "node_modules/@visx/group": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/group/-/group-3.0.0.tgz", @@ -21942,6 +21951,24 @@ "react": "^16.3.0-0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@visx/react-spring/node_modules/@visx/grid": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", + "integrity": "sha512-NsoHjdLYY3PDeEdRNBe2a7eiVxfG50lzZOM/zt/5kb5F4Ag4xzvgy+E32gBa2m9kSyALzTMiMfIHjQ4/LbFQdg==", + "dependencies": { + "@types/react": "*", + "@visx/curve": "3.0.0", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/responsive": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-3.0.0.tgz", @@ -22081,6 +22108,22 @@ "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, + "node_modules/@visx/tooltip": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-3.0.0.tgz", + "integrity": "sha512-a+ZzlE/vVxQgW83k/Ypj721K09IKG4JRHVb7YDxiQnAawkJe9rkTxGoAIXD6PrqvERa+rSISgUWHAxuee5MnhA==", + "dependencies": { + "@types/react": "*", + "@visx/bounds": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + }, + "peerDependencies": { + "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0", + "react-dom": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/voronoi": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-3.0.0.tgz", @@ -22128,46 +22171,22 @@ "react": "^16.8.0 || ^17.0.0 || ^ 18.0.0" } }, - "node_modules/@visx/xychart/node_modules/@visx/tooltip": { + "node_modules/@visx/xychart/node_modules/@visx/grid": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-3.0.0.tgz", - "integrity": "sha512-a+ZzlE/vVxQgW83k/Ypj721K09IKG4JRHVb7YDxiQnAawkJe9rkTxGoAIXD6PrqvERa+rSISgUWHAxuee5MnhA==", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", + "integrity": "sha512-NsoHjdLYY3PDeEdRNBe2a7eiVxfG50lzZOM/zt/5kb5F4Ag4xzvgy+E32gBa2m9kSyALzTMiMfIHjQ4/LbFQdg==", "dependencies": { "@types/react": "*", - "@visx/bounds": "3.0.0", + "@visx/curve": "3.0.0", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", "classnames": "^2.3.1", - "prop-types": "^15.5.10", - "react-use-measure": "^2.0.4" - }, - "peerDependencies": { - "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0", - "react-dom": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" - } - }, - "node_modules/@visx/xychart/node_modules/@visx/tooltip/node_modules/@visx/bounds": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.0.0.tgz", - "integrity": "sha512-YQaSSER9erxlhppzRms6cvYdKqcIwk6eksrGdbJkBoHobhPo1JCIUXlmrA4qgrEnXInPJpueGE+PE5F+Dk12DA==", - "dependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "prop-types": "^15.5.10" - }, - "peerDependencies": { - "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", - "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" - } - }, - "node_modules/@visx/xychart/node_modules/@visx/tooltip/node_modules/react-use-measure": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", - "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", - "dependencies": { - "debounce": "^1.2.1" + "prop-types": "^15.6.2" }, "peerDependencies": { - "react": ">=16.13", - "react-dom": ">=16.13" + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, "node_modules/@visx/xychart/node_modules/d3-array": { @@ -50409,6 +50428,18 @@ "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" } }, + "node_modules/react-use-measure": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", + "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", + "dependencies": { + "debounce": "^1.2.1" + }, + "peerDependencies": { + "react": ">=16.13", + "react-dom": ">=16.13" + } + }, "node_modules/react-virtualized": { "version": "9.19.1", "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.19.1.tgz", @@ -78914,16 +78945,6 @@ "classnames": "^2.3.1", "prop-types": "^15.5.10", "react-use-measure": "^2.0.4" - }, - "dependencies": { - "react-use-measure": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", - "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", - "requires": { - "debounce": "^1.2.1" - } - } } }, "@visx/axis": { @@ -78941,6 +78962,16 @@ "prop-types": "^15.6.0" } }, + "@visx/bounds": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.0.0.tgz", + "integrity": "sha512-YQaSSER9erxlhppzRms6cvYdKqcIwk6eksrGdbJkBoHobhPo1JCIUXlmrA4qgrEnXInPJpueGE+PE5F+Dk12DA==", + "requires": { + "@types/react": "*", + "@types/react-dom": "*", + "prop-types": "^15.5.10" + } + }, "@visx/curve": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.0.0.tgz", @@ -78984,18 +79015,25 @@ } }, "@visx/grid": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", - "integrity": "sha512-NsoHjdLYY3PDeEdRNBe2a7eiVxfG50lzZOM/zt/5kb5F4Ag4xzvgy+E32gBa2m9kSyALzTMiMfIHjQ4/LbFQdg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.1.tgz", + "integrity": "sha512-cln5CVvFG58C5Uz1Uf0KRBFmGmgD1NALOQdYDu5yPsTuY2yLzVYPvCIlYBMdUtE0uzfNq972SmkZHfZYs03jxQ==", "requires": { "@types/react": "*", "@visx/curve": "3.0.0", "@visx/group": "3.0.0", - "@visx/point": "3.0.0", + "@visx/point": "3.0.1", "@visx/scale": "3.0.0", "@visx/shape": "3.0.0", "classnames": "^2.3.1", "prop-types": "^15.6.2" + }, + "dependencies": { + "@visx/point": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.0.1.tgz", + "integrity": "sha512-S5WOBMgEP2xHcgs3A2BFB2vwzrk0tMmn3PGZAbQJ+lu4HlnalDP72klUnxLTH8xclNNvpUHtHM5eLIJXyHx6Pw==" + } } }, "@visx/group": { @@ -79025,6 +79063,23 @@ "@visx/text": "3.0.0", "classnames": "^2.3.1", "prop-types": "^15.6.2" + }, + "dependencies": { + "@visx/grid": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", + "integrity": "sha512-NsoHjdLYY3PDeEdRNBe2a7eiVxfG50lzZOM/zt/5kb5F4Ag4xzvgy+E32gBa2m9kSyALzTMiMfIHjQ4/LbFQdg==", + "requires": { + "@types/react": "*", + "@visx/curve": "3.0.0", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + } + } } }, "@visx/responsive": { @@ -79152,6 +79207,18 @@ "reduce-css-calc": "^1.3.0" } }, + "@visx/tooltip": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-3.0.0.tgz", + "integrity": "sha512-a+ZzlE/vVxQgW83k/Ypj721K09IKG4JRHVb7YDxiQnAawkJe9rkTxGoAIXD6PrqvERa+rSISgUWHAxuee5MnhA==", + "requires": { + "@types/react": "*", + "@visx/bounds": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + } + }, "@visx/voronoi": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-3.0.0.tgz", @@ -79192,36 +79259,19 @@ "prop-types": "^15.6.2" }, "dependencies": { - "@visx/tooltip": { + "@visx/grid": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-3.0.0.tgz", - "integrity": "sha512-a+ZzlE/vVxQgW83k/Ypj721K09IKG4JRHVb7YDxiQnAawkJe9rkTxGoAIXD6PrqvERa+rSISgUWHAxuee5MnhA==", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", + "integrity": "sha512-NsoHjdLYY3PDeEdRNBe2a7eiVxfG50lzZOM/zt/5kb5F4Ag4xzvgy+E32gBa2m9kSyALzTMiMfIHjQ4/LbFQdg==", "requires": { "@types/react": "*", - "@visx/bounds": "3.0.0", + "@visx/curve": "3.0.0", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", "classnames": "^2.3.1", - "prop-types": "^15.5.10", - "react-use-measure": "^2.0.4" - }, - "dependencies": { - "@visx/bounds": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.0.0.tgz", - "integrity": "sha512-YQaSSER9erxlhppzRms6cvYdKqcIwk6eksrGdbJkBoHobhPo1JCIUXlmrA4qgrEnXInPJpueGE+PE5F+Dk12DA==", - "requires": { - "@types/react": "*", - "@types/react-dom": "*", - "prop-types": "^15.5.10" - } - }, - "react-use-measure": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", - "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", - "requires": { - "debounce": "^1.2.1" - } - } + "prop-types": "^15.6.2" } }, "d3-array": { @@ -100984,6 +101034,14 @@ "ultimate-pagination": "1.0.0" } }, + "react-use-measure": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", + "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", + "requires": { + "debounce": "^1.2.1" + } + }, "react-virtualized": { "version": "9.19.1", "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.19.1.tgz", diff --git a/superset-frontend/package.json b/superset-frontend/package.json index 18385cececafb..0e0f41c0c4a8f 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -114,7 +114,10 @@ "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud", "@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy", "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", + "@visx/grid": "^3.0.1", "@visx/responsive": "^3.0.0", + "@visx/scale": "^3.0.0", + "@visx/tooltip": "^3.0.0", "@visx/xychart": "^3.0.0", "abortcontroller-polyfill": "^1.1.9", "ace-builds": "^1.4.14", diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx index 51466424573ea..7bebe67cee690 100644 --- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx +++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx @@ -17,8 +17,14 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; +import React, { useCallback } from 'react'; import moment from 'moment'; +import { + css, + getTextDimension, + formatNumber, + formatTime, +} from '@superset-ui/core'; import { Sparkline, LineSeries, @@ -29,14 +35,14 @@ import { } from '@data-ui/sparkline'; import { Axis, - GlyphSeries, Grid, LineSeries as NewLineSeries, Tooltip, XYChart, buildChartTheme, } from '@visx/xychart'; -import { getTextDimension, formatNumber, formatTime } from '@superset-ui/core'; +import { GridRows } from '@visx/grid'; +import { scaleLinear } from '@visx/scale'; interface Props { ariaLabel: string; @@ -231,6 +237,11 @@ const SparklineCell = ({ }} xScale={{ type: 'band', paddingInner: 0.5 }} theme={customTheme} + css={css` + svg:not(:root) { + overflow: visible; + } + `} > {showYAxis && ( )} {showYAxis && ( - + )} + { const idx = tooltipData?.datumByKey[ariaLabel].index; @@ -264,12 +291,6 @@ const SparklineCell = ({ ); }} /> - ); From a6be16d3dd12fb7cffc662a653fec18423ec719c Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Fri, 17 Feb 2023 13:16:05 +1300 Subject: [PATCH 4/8] show glyph --- .../TimeTable/SparklineCell.tsx | 82 +++++++++++-------- .../visualizations/TimeTable/TimeTable.jsx | 1 + 2 files changed, 49 insertions(+), 34 deletions(-) diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx index 7bebe67cee690..02f190d6725be 100644 --- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx +++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx @@ -17,13 +17,14 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useCallback } from 'react'; +import React from 'react'; import moment from 'moment'; import { css, - getTextDimension, formatNumber, formatTime, + getTextDimension, + useTheme, } from '@superset-ui/core'; import { Sparkline, @@ -33,28 +34,28 @@ import { VerticalReferenceLine, WithTooltip, } from '@data-ui/sparkline'; +import { GridRows } from '@visx/grid'; +import { scaleLinear } from '@visx/scale'; import { Axis, - Grid, LineSeries as NewLineSeries, Tooltip, XYChart, buildChartTheme, } from '@visx/xychart'; -import { GridRows } from '@visx/grid'; -import { scaleLinear } from '@visx/scale'; interface Props { ariaLabel: string; className?: string; + data: Array; + entries: Array; height: number; numberFormat?: string; + dateFormat?: string; renderTooltip: ({ index }: { index: number }) => React.ReactNode; showYAxis: boolean; width: number; yAxisBounds: Array; - data: Array; - entries: Array; } interface TooltipProps { @@ -104,13 +105,6 @@ function isValidBoundValue(value?: number | string) { !Number.isNaN(value) ); } -const customTheme = buildChartTheme({ - backgroundColor: 'ffffff', - colors: ['#767676'], - gridColor: '#bbbbbb', - gridColorDark: '#bbbbbb', - tickLength: 5, -}); const SparklineCell = ({ ariaLabel, @@ -118,11 +112,21 @@ const SparklineCell = ({ width = 300, height = 50, numberFormat = '', + dateFormat = '', yAxisBounds = [undefined, undefined], showYAxis = false, entries = [], renderTooltip = () =>
, }: Props) => { + const theme = useTheme(); + const xyTheme = buildChartTheme({ + backgroundColor: `${theme.colors.grayscale.light5}`, + colors: [`${theme.colors.grayscale.base}`], + gridColor: `${theme.colors.grayscale.light1}`, + gridColorDark: `${theme.colors.grayscale.base}`, + tickLength: 6, + }); + function renderHorizontalReferenceLine(value?: number, label?: string) { return ( {showYAxis && ( formatNumber(numberFormat, d)} + tickValues={[min, max]} /> )} - {showYAxis && ( + {showYAxis && min && max && ( )} { const idx = tooltipData?.datumByKey[ariaLabel].index; return (
- {idx && formatNumber(numberFormat, data[idx])} + + {idx !== undefined && formatNumber(numberFormat, data[idx])} +
- {idx && + {idx !== undefined && formatTime( - numberFormat, + dateFormat, moment.utc(entries[idx].time).toDate(), )}
@@ -292,6 +301,11 @@ const SparklineCell = ({ }} /> + ); }; diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx index 7417f5ce989d6..7b801402246da 100644 --- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx +++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx @@ -168,6 +168,7 @@ const TimeTable = ({ data={sparkData} data-value={sparkData[sparkData.length - 1]} ariaLabel={`spark-${valueField}`} + dateFormat={column.dateFormat} numberFormat={column.d3format} yAxisBounds={column.yAxisBounds} showYAxis={column.showYAxis} From 49666051549ee5e4202b3a841875dfd249ba5019 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Fri, 17 Feb 2023 14:16:27 +1300 Subject: [PATCH 5/8] innerWidth and innerHeight --- .../src/visualizations/TimeTable/SparklineCell.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx index 02f190d6725be..8057c0fc78719 100644 --- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx +++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx @@ -182,6 +182,8 @@ const SparklineCell = ({ ...MARGIN, right: MARGIN.right + labelLength, }; + const innerWidth = width - margin.left - margin.right; + const innerHeight = height - margin.top - margin.bottom; const newData = data.map((num, idx) => ({ x: idx, @@ -237,11 +239,6 @@ const SparklineCell = ({ yScale={{ type: 'linear', zero: false }} xScale={{ type: 'band', paddingInner: 0.5 }} theme={xyTheme} - css={css` - svg:not(:root) { - overflow: visible; - } - `} > {showYAxis && ( )} - {showYAxis && min && max && ( + {showYAxis && min !== undefined && max !== undefined && ( Date: Tue, 21 Feb 2023 17:04:20 -0800 Subject: [PATCH 6/8] set domain min and max --- superset-frontend/package-lock.json | 95 +++++++++++- superset-frontend/package.json | 1 + .../TimeTable/SparklineCell.tsx | 137 +++++------------- .../visualizations/TimeTable/TimeTable.jsx | 16 +- 4 files changed, 123 insertions(+), 126 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 5e78b6dd062ee..4b7341b6ef167 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -50,6 +50,7 @@ "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud", "@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy", "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", + "@visx/axis": "^3.0.1", "@visx/grid": "^3.0.1", "@visx/responsive": "^3.0.0", "@visx/scale": "^3.0.0", @@ -21813,13 +21814,13 @@ } }, "node_modules/@visx/axis": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", - "integrity": "sha512-5vvTPPFUcIZ78ttd8MJLlWuwT+UmvO/sBZIzY2TYETda7ebDiMT/IkFHhIMtr1j/ugvqmcHKVW5jlAJCTnrOCw==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.1.tgz", + "integrity": "sha512-ozi7DaEe4afsMHTQsG8jKt4ag0t9Z4wQJhHMYbmrYF4iP6BsQUpFUCf2rgnLo5fM0CEEoZXN0vc6ZhvYzp1ZYg==", "dependencies": { "@types/react": "*", "@visx/group": "3.0.0", - "@visx/point": "3.0.0", + "@visx/point": "3.0.1", "@visx/scale": "3.0.0", "@visx/shape": "3.0.0", "@visx/text": "3.0.0", @@ -21830,6 +21831,11 @@ "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, + "node_modules/@visx/axis/node_modules/@visx/point": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.0.1.tgz", + "integrity": "sha512-S5WOBMgEP2xHcgs3A2BFB2vwzrk0tMmn3PGZAbQJ+lu4HlnalDP72klUnxLTH8xclNNvpUHtHM5eLIJXyHx6Pw==" + }, "node_modules/@visx/bounds": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.0.0.tgz", @@ -21951,6 +21957,24 @@ "react": "^16.3.0-0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@visx/react-spring/node_modules/@visx/axis": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", + "integrity": "sha512-5vvTPPFUcIZ78ttd8MJLlWuwT+UmvO/sBZIzY2TYETda7ebDiMT/IkFHhIMtr1j/ugvqmcHKVW5jlAJCTnrOCw==", + "dependencies": { + "@types/react": "*", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.0" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/react-spring/node_modules/@visx/grid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", @@ -22171,6 +22195,24 @@ "react": "^16.8.0 || ^17.0.0 || ^ 18.0.0" } }, + "node_modules/@visx/xychart/node_modules/@visx/axis": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", + "integrity": "sha512-5vvTPPFUcIZ78ttd8MJLlWuwT+UmvO/sBZIzY2TYETda7ebDiMT/IkFHhIMtr1j/ugvqmcHKVW5jlAJCTnrOCw==", + "dependencies": { + "@types/react": "*", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.0" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/xychart/node_modules/@visx/grid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", @@ -78948,18 +78990,25 @@ } }, "@visx/axis": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", - "integrity": "sha512-5vvTPPFUcIZ78ttd8MJLlWuwT+UmvO/sBZIzY2TYETda7ebDiMT/IkFHhIMtr1j/ugvqmcHKVW5jlAJCTnrOCw==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.1.tgz", + "integrity": "sha512-ozi7DaEe4afsMHTQsG8jKt4ag0t9Z4wQJhHMYbmrYF4iP6BsQUpFUCf2rgnLo5fM0CEEoZXN0vc6ZhvYzp1ZYg==", "requires": { "@types/react": "*", "@visx/group": "3.0.0", - "@visx/point": "3.0.0", + "@visx/point": "3.0.1", "@visx/scale": "3.0.0", "@visx/shape": "3.0.0", "@visx/text": "3.0.0", "classnames": "^2.3.1", "prop-types": "^15.6.0" + }, + "dependencies": { + "@visx/point": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.0.1.tgz", + "integrity": "sha512-S5WOBMgEP2xHcgs3A2BFB2vwzrk0tMmn3PGZAbQJ+lu4HlnalDP72klUnxLTH8xclNNvpUHtHM5eLIJXyHx6Pw==" + } } }, "@visx/bounds": { @@ -79065,6 +79114,21 @@ "prop-types": "^15.6.2" }, "dependencies": { + "@visx/axis": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", + "integrity": "sha512-5vvTPPFUcIZ78ttd8MJLlWuwT+UmvO/sBZIzY2TYETda7ebDiMT/IkFHhIMtr1j/ugvqmcHKVW5jlAJCTnrOCw==", + "requires": { + "@types/react": "*", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.0" + } + }, "@visx/grid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", @@ -79259,6 +79323,21 @@ "prop-types": "^15.6.2" }, "dependencies": { + "@visx/axis": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.0.0.tgz", + "integrity": "sha512-5vvTPPFUcIZ78ttd8MJLlWuwT+UmvO/sBZIzY2TYETda7ebDiMT/IkFHhIMtr1j/ugvqmcHKVW5jlAJCTnrOCw==", + "requires": { + "@types/react": "*", + "@visx/group": "3.0.0", + "@visx/point": "3.0.0", + "@visx/scale": "3.0.0", + "@visx/shape": "3.0.0", + "@visx/text": "3.0.0", + "classnames": "^2.3.1", + "prop-types": "^15.6.0" + } + }, "@visx/grid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.0.0.tgz", diff --git a/superset-frontend/package.json b/superset-frontend/package.json index 0e0f41c0c4a8f..ace3794c52c97 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -114,6 +114,7 @@ "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud", "@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy", "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard", + "@visx/axis": "^3.0.1", "@visx/grid": "^3.0.1", "@visx/responsive": "^3.0.0", "@visx/scale": "^3.0.0", diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx index 8057c0fc78719..e49bb38694711 100644 --- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx +++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx @@ -20,32 +20,24 @@ import React from 'react'; import moment from 'moment'; import { - css, formatNumber, formatTime, getTextDimension, useTheme, } from '@superset-ui/core'; -import { - Sparkline, - LineSeries, - PointSeries, - HorizontalReferenceLine, - VerticalReferenceLine, - WithTooltip, -} from '@data-ui/sparkline'; import { GridRows } from '@visx/grid'; -import { scaleLinear } from '@visx/scale'; +import { LinearScaleConfig, scaleLinear } from '@visx/scale'; +import { AxisScaleOutput } from '@visx/axis'; import { Axis, - LineSeries as NewLineSeries, + LineSeries, Tooltip, XYChart, buildChartTheme, } from '@visx/xychart'; interface Props { - ariaLabel: string; + dataKey: string; className?: string; data: Array; entries: Array; @@ -58,31 +50,12 @@ interface Props { yAxisBounds: Array; } -interface TooltipProps { - onMouseLeave: () => void; - onMouseMove: () => void; - tooltipData: { - index: number; - }; -} - -interface Yscale { - min?: number; - max?: number; -} - const MARGIN = { top: 8, right: 8, bottom: 8, left: 8, }; -const tooltipProps = { - style: { - opacity: 0.8, - }, - offsetTop: 0, -}; function getSparklineTextWidth(text: string) { return ( @@ -107,7 +80,7 @@ function isValidBoundValue(value?: number | string) { } const SparklineCell = ({ - ariaLabel, + dataKey, data, width = 300, height = 50, @@ -116,7 +89,6 @@ const SparklineCell = ({ yAxisBounds = [undefined, undefined], showYAxis = false, entries = [], - renderTooltip = () =>
, }: Props) => { const theme = useTheme(); const xyTheme = buildChartTheme({ @@ -127,49 +99,43 @@ const SparklineCell = ({ tickLength: 6, }); - function renderHorizontalReferenceLine(value?: number, label?: string) { - return ( - label} - stroke="#bbb" - strokeDasharray="3 3" - strokeWidth={1} - /> - ); - } - - const yScale: Yscale = {}; + const yScaleConfig: LinearScaleConfig = { + type: 'linear', + zero: false, + }; let hasMinBound = false; let hasMaxBound = false; + let min: number = data.reduce( + (acc, current) => Math.min(acc, current), + data[0], + ); + let max: number = data.reduce( + (acc, current) => Math.max(acc, current), + data[0], + ); if (yAxisBounds) { const [minBound, maxBound] = yAxisBounds; hasMinBound = isValidBoundValue(minBound); if (hasMinBound) { - yScale.min = minBound; + if (minBound !== undefined && minBound <= 0) { + yScaleConfig.zero = true; + } + min = minBound || min; } + hasMaxBound = isValidBoundValue(maxBound); if (hasMaxBound) { - yScale.max = maxBound; + max = maxBound || max; } + yScaleConfig.domain = [min, max]; } - let min: number | undefined; - let max: number | undefined; let minLabel: string; let maxLabel: string; let labelLength = 0; if (showYAxis) { - const [minBound, maxBound] = yAxisBounds; - min = hasMinBound - ? minBound - : data.reduce((acc, current) => Math.min(acc, current), data[0]); - max = hasMaxBound - ? maxBound - : data.reduce((acc, current) => Math.max(acc, current), data[0]); - + yScaleConfig.domain = [min, max]; minLabel = formatNumber(numberFormat, min); maxLabel = formatNumber(numberFormat, max); labelLength = Math.max( @@ -183,9 +149,7 @@ const SparklineCell = ({ right: MARGIN.right + labelLength, }; const innerWidth = width - margin.left - margin.right; - const innerHeight = height - margin.top - margin.bottom; - - const newData = data.map((num, idx) => ({ + const chartData = data.map((num, idx) => ({ x: idx, y: num, })); @@ -195,48 +159,13 @@ const SparklineCell = ({ return ( <> - - {({ onMouseLeave, onMouseMove, tooltipData }: TooltipProps) => ( - - {showYAxis && renderHorizontalReferenceLine(min, minLabel)} - {showYAxis && renderHorizontalReferenceLine(max, maxLabel)} - - {tooltipData && ( - - )} - {tooltipData && ( - - )} - - )} - - @@ -263,9 +192,9 @@ const SparklineCell = ({ tickValues={[min, max]} /> )} - @@ -281,7 +210,7 @@ const SparklineCell = ({ strokeWidth: 1, }} renderTooltip={({ tooltipData }) => { - const idx = tooltipData?.datumByKey[ariaLabel].index; + const idx = tooltipData?.datumByKey[dataKey].index; return (
diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx index 7b801402246da..f34990626a898 100644 --- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx +++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx @@ -21,7 +21,7 @@ import PropTypes from 'prop-types'; import Mustache from 'mustache'; import { scaleLinear } from 'd3-scale'; import TableView from 'src/components/TableView'; -import { formatNumber, formatTime, styled, t } from '@superset-ui/core'; +import { styled, t } from '@superset-ui/core'; import { InfoTooltipWithTrigger, MetricOption, @@ -166,24 +166,12 @@ const TimeTable = ({ width={parseInt(column.width, 10) || 300} height={parseInt(column.height, 10) || 50} data={sparkData} - data-value={sparkData[sparkData.length - 1]} - ariaLabel={`spark-${valueField}`} + dataKey={`spark-${valueField}`} dateFormat={column.dateFormat} numberFormat={column.d3format} yAxisBounds={column.yAxisBounds} showYAxis={column.showYAxis} entries={entries} - renderTooltip={({ index }) => ( -
- {formatNumber(column.d3format, sparkData[index])} -
- {formatTime( - column.dateFormat, - moment.utc(entries[index].time).toDate(), - )} -
-
- )} /> ); }; From f47e3a8b0b099dc284f9672a2fb6f920a2050327 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Tue, 21 Feb 2023 17:11:29 -0800 Subject: [PATCH 7/8] remove data-ui/sparkline --- superset-frontend/package-lock.json | 39 +++++++++++++++---- superset-frontend/package.json | 1 - .../visualizations/TimeTable/TimeTable.jsx | 1 - 3 files changed, 32 insertions(+), 9 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 4b7341b6ef167..45fd1f4ff955e 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -15,7 +15,6 @@ "dependencies": { "@ant-design/icons": "^4.8.0", "@babel/runtime-corejs3": "^7.12.5", - "@data-ui/sparkline": "^0.0.84", "@emotion/babel-preset-css-prop": "^11.2.0", "@emotion/cache": "^11.4.0", "@emotion/react": "^11.4.1", @@ -4546,6 +4545,7 @@ "version": "0.0.84", "resolved": "https://registry.npmjs.org/@data-ui/sparkline/-/sparkline-0.0.84.tgz", "integrity": "sha512-Ja7T2JjioZtnoy0PEXF72qv/J8xIotu+oS1Z+ygVGZni6aN/DUY35eGpg/DDeemEFDMoifcx+kYa5LU7hQCnJg==", + "peer": true, "dependencies": { "@data-ui/shared": "^0.0.84", "@data-ui/theme": "^0.0.8", @@ -4571,12 +4571,14 @@ "node_modules/@data-ui/sparkline/node_modules/@data-ui/theme": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@data-ui/theme/-/theme-0.0.8.tgz", - "integrity": "sha1-MRZyPQS5n2XHdQ+BpQDpYItIN8M=" + "integrity": "sha1-MRZyPQS5n2XHdQ+BpQDpYItIN8M=", + "peer": true }, "node_modules/@data-ui/sparkline/node_modules/@vx/axis": { "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/axis/-/axis-0.0.179.tgz", "integrity": "sha512-FtUcdJxejYn5jgixSgSk9AdA96VwP9sCRATVfGvugEL0gtTKWYDbJEgSgqXfKqpeUdsDdf/JT7NVbLMc1hzrZg==", + "peer": true, "dependencies": { "@vx/group": "0.0.170", "@vx/point": "0.0.165", @@ -4593,6 +4595,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/event/-/event-0.0.179.tgz", "integrity": "sha512-wEwqKsxrzoRV/A9Va/f/CHPmV9asrTH/kW/f88jCydsVXd5W/nrJZiVpozN2Zr1Ernv0i1gW5896FWo/LHRg0A==", + "peer": true, "dependencies": { "@vx/point": "0.0.165" } @@ -4601,6 +4604,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/glyph/-/glyph-0.0.179.tgz", "integrity": "sha512-RO7adwyG+9gGzjFdfmplrojgWCT+gsOnIFcRgJNJjx41+P6hWdI9X4OpsLx8VVqNhp7g+hxBDZWte8AxTvLQGw==", + "peer": true, "dependencies": { "@vx/group": "0.0.170", "classnames": "^2.2.5", @@ -4615,6 +4619,7 @@ "version": "0.0.165", "resolved": "https://registry.npmjs.org/@vx/gradient/-/gradient-0.0.165.tgz", "integrity": "sha512-FjRXMTmcy7k0TWsfDzWWXw6T9WXKP+6LS/GRgnguq271pab/P+AdOJThsVxtBgUc8ZOAPbub3/2Gggz9d8tocg==", + "peer": true, "dependencies": { "classnames": "^2.2.5", "prop-types": "^15.5.7" @@ -4627,6 +4632,7 @@ "version": "0.0.170", "resolved": "https://registry.npmjs.org/@vx/group/-/group-0.0.170.tgz", "integrity": "sha512-RnDdRoy0YI5hokk+YWXc8t39Kp51i4BdCpiwkDJU4YypGycTYnDFjicam6jigUmZ/6wyMirDf/aQboWviFLt2Q==", + "peer": true, "dependencies": { "classnames": "^2.2.5" }, @@ -4638,6 +4644,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/pattern/-/pattern-0.0.179.tgz", "integrity": "sha512-qvJsK07oUnSbuzj9jo7b/1Up13DknIeTlj9FDIhg0UNmz90ikVN2CZIWtdJyc2I1AFDEg0odOqYXzUx9aEBRfg==", + "peer": true, "dependencies": { "classnames": "^2.2.5", "prop-types": "^15.5.10" @@ -4649,12 +4656,14 @@ "node_modules/@data-ui/sparkline/node_modules/@vx/point": { "version": "0.0.165", "resolved": "https://registry.npmjs.org/@vx/point/-/point-0.0.165.tgz", - "integrity": "sha512-spoHilhjcWNgccrSzBUPw+PXV81tYxeyEWBkgr35aGVU4m7YT86Ywvfemwp7AVVGPn+XJHrhB0ujAhDoyqFPoA==" + "integrity": "sha512-spoHilhjcWNgccrSzBUPw+PXV81tYxeyEWBkgr35aGVU4m7YT86Ywvfemwp7AVVGPn+XJHrhB0ujAhDoyqFPoA==", + "peer": true }, "node_modules/@data-ui/sparkline/node_modules/@vx/responsive": { "version": "0.0.192", "resolved": "https://registry.npmjs.org/@vx/responsive/-/responsive-0.0.192.tgz", "integrity": "sha512-HaXVwhSJXUfRbzRV+glxsX0ki2Hi1mdpz42iuGArVQgDPJEmBHjkXyoiXU8U6v66M7FAH+OyKgtc5j2bfhyYzA==", + "peer": true, "dependencies": { "lodash": "^4.17.10", "prop-types": "^15.6.1", @@ -4668,6 +4677,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/scale/-/scale-0.0.179.tgz", "integrity": "sha512-j40WiGu4VcHZdaSQAl12ig2w5c4Q9EVn7qqYf9PX7uoS5PbxRYNnHeKZ7e5Bf8O6b57iv5jFTfUV7HkpNF4vvg==", + "peer": true, "dependencies": { "d3-scale": "^2.0.0" } @@ -4676,6 +4686,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/shape/-/shape-0.0.179.tgz", "integrity": "sha512-YHVNx4xGpbjolkW3Lb5pEgJB0+u349vfnLI976DJlinY0hRNa4TZbWXOB4ywLIrYzQEXXPMUR8WtdubNxg6g0w==", + "peer": true, "dependencies": { "@vx/curve": "0.0.165", "@vx/group": "0.0.170", @@ -4692,7 +4703,8 @@ "node_modules/@data-ui/sparkline/node_modules/resize-observer-polyfill": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz", - "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==" + "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==", + "peer": true }, "node_modules/@data-ui/theme": { "version": "0.0.84", @@ -64692,6 +64704,7 @@ "version": "0.0.84", "resolved": "https://registry.npmjs.org/@data-ui/sparkline/-/sparkline-0.0.84.tgz", "integrity": "sha512-Ja7T2JjioZtnoy0PEXF72qv/J8xIotu+oS1Z+ygVGZni6aN/DUY35eGpg/DDeemEFDMoifcx+kYa5LU7hQCnJg==", + "peer": true, "requires": { "@data-ui/shared": "^0.0.84", "@data-ui/theme": "^0.0.8", @@ -64713,12 +64726,14 @@ "@data-ui/theme": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@data-ui/theme/-/theme-0.0.8.tgz", - "integrity": "sha1-MRZyPQS5n2XHdQ+BpQDpYItIN8M=" + "integrity": "sha1-MRZyPQS5n2XHdQ+BpQDpYItIN8M=", + "peer": true }, "@vx/axis": { "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/axis/-/axis-0.0.179.tgz", "integrity": "sha512-FtUcdJxejYn5jgixSgSk9AdA96VwP9sCRATVfGvugEL0gtTKWYDbJEgSgqXfKqpeUdsDdf/JT7NVbLMc1hzrZg==", + "peer": true, "requires": { "@vx/group": "0.0.170", "@vx/point": "0.0.165", @@ -64732,6 +64747,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/event/-/event-0.0.179.tgz", "integrity": "sha512-wEwqKsxrzoRV/A9Va/f/CHPmV9asrTH/kW/f88jCydsVXd5W/nrJZiVpozN2Zr1Ernv0i1gW5896FWo/LHRg0A==", + "peer": true, "requires": { "@vx/point": "0.0.165" } @@ -64740,6 +64756,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/glyph/-/glyph-0.0.179.tgz", "integrity": "sha512-RO7adwyG+9gGzjFdfmplrojgWCT+gsOnIFcRgJNJjx41+P6hWdI9X4OpsLx8VVqNhp7g+hxBDZWte8AxTvLQGw==", + "peer": true, "requires": { "@vx/group": "0.0.170", "classnames": "^2.2.5", @@ -64751,6 +64768,7 @@ "version": "0.0.165", "resolved": "https://registry.npmjs.org/@vx/gradient/-/gradient-0.0.165.tgz", "integrity": "sha512-FjRXMTmcy7k0TWsfDzWWXw6T9WXKP+6LS/GRgnguq271pab/P+AdOJThsVxtBgUc8ZOAPbub3/2Gggz9d8tocg==", + "peer": true, "requires": { "classnames": "^2.2.5", "prop-types": "^15.5.7" @@ -64760,6 +64778,7 @@ "version": "0.0.170", "resolved": "https://registry.npmjs.org/@vx/group/-/group-0.0.170.tgz", "integrity": "sha512-RnDdRoy0YI5hokk+YWXc8t39Kp51i4BdCpiwkDJU4YypGycTYnDFjicam6jigUmZ/6wyMirDf/aQboWviFLt2Q==", + "peer": true, "requires": { "classnames": "^2.2.5" } @@ -64768,6 +64787,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/pattern/-/pattern-0.0.179.tgz", "integrity": "sha512-qvJsK07oUnSbuzj9jo7b/1Up13DknIeTlj9FDIhg0UNmz90ikVN2CZIWtdJyc2I1AFDEg0odOqYXzUx9aEBRfg==", + "peer": true, "requires": { "classnames": "^2.2.5", "prop-types": "^15.5.10" @@ -64776,12 +64796,14 @@ "@vx/point": { "version": "0.0.165", "resolved": "https://registry.npmjs.org/@vx/point/-/point-0.0.165.tgz", - "integrity": "sha512-spoHilhjcWNgccrSzBUPw+PXV81tYxeyEWBkgr35aGVU4m7YT86Ywvfemwp7AVVGPn+XJHrhB0ujAhDoyqFPoA==" + "integrity": "sha512-spoHilhjcWNgccrSzBUPw+PXV81tYxeyEWBkgr35aGVU4m7YT86Ywvfemwp7AVVGPn+XJHrhB0ujAhDoyqFPoA==", + "peer": true }, "@vx/responsive": { "version": "0.0.192", "resolved": "https://registry.npmjs.org/@vx/responsive/-/responsive-0.0.192.tgz", "integrity": "sha512-HaXVwhSJXUfRbzRV+glxsX0ki2Hi1mdpz42iuGArVQgDPJEmBHjkXyoiXU8U6v66M7FAH+OyKgtc5j2bfhyYzA==", + "peer": true, "requires": { "lodash": "^4.17.10", "prop-types": "^15.6.1", @@ -64792,6 +64814,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/scale/-/scale-0.0.179.tgz", "integrity": "sha512-j40WiGu4VcHZdaSQAl12ig2w5c4Q9EVn7qqYf9PX7uoS5PbxRYNnHeKZ7e5Bf8O6b57iv5jFTfUV7HkpNF4vvg==", + "peer": true, "requires": { "d3-scale": "^2.0.0" } @@ -64800,6 +64823,7 @@ "version": "0.0.179", "resolved": "https://registry.npmjs.org/@vx/shape/-/shape-0.0.179.tgz", "integrity": "sha512-YHVNx4xGpbjolkW3Lb5pEgJB0+u349vfnLI976DJlinY0hRNa4TZbWXOB4ywLIrYzQEXXPMUR8WtdubNxg6g0w==", + "peer": true, "requires": { "@vx/curve": "0.0.165", "@vx/group": "0.0.170", @@ -64813,7 +64837,8 @@ "resize-observer-polyfill": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz", - "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==" + "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==", + "peer": true } } }, diff --git a/superset-frontend/package.json b/superset-frontend/package.json index ace3794c52c97..7136b486aba81 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -79,7 +79,6 @@ "dependencies": { "@ant-design/icons": "^4.8.0", "@babel/runtime-corejs3": "^7.12.5", - "@data-ui/sparkline": "^0.0.84", "@emotion/babel-preset-css-prop": "^11.2.0", "@emotion/cache": "^11.4.0", "@emotion/react": "^11.4.1", diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx index f34990626a898..fafab2b37adaa 100644 --- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx +++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx @@ -26,7 +26,6 @@ import { InfoTooltipWithTrigger, MetricOption, } from '@superset-ui/chart-controls'; -import moment from 'moment'; import sortNumericValues from 'src/utils/sortNumericValues'; import FormattedNumber from './FormattedNumber'; From a60846c95976ebbbc3dfb84c47e791a206d05c30 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Wed, 22 Feb 2023 14:36:20 -0800 Subject: [PATCH 8/8] address comments --- .../src/visualizations/TimeTable/SparklineCell.tsx | 7 +++++-- .../src/visualizations/TimeTable/TimeTable.jsx | 1 + 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx index e49bb38694711..c1d58e1eb5dc6 100644 --- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx +++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx @@ -37,13 +37,14 @@ import { } from '@visx/xychart'; interface Props { + ariaLabel: string; dataKey: string; className?: string; data: Array; entries: Array; height: number; - numberFormat?: string; - dateFormat?: string; + numberFormat: string; + dateFormat: string; renderTooltip: ({ index }: { index: number }) => React.ReactNode; showYAxis: boolean; width: number; @@ -80,6 +81,7 @@ function isValidBoundValue(value?: number | string) { } const SparklineCell = ({ + ariaLabel, dataKey, data, width = 300, @@ -160,6 +162,7 @@ const SparklineCell = ({ return ( <>