diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index dc764630d7176..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",
@@ -50,7 +49,12 @@
         "@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",
+        "@visx/tooltip": "^3.0.0",
+        "@visx/xychart": "^3.0.0",
         "abortcontroller-polyfill": "^1.1.9",
         "ace-builds": "^1.4.14",
         "antd": "4.10.3",
@@ -4541,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",
@@ -4566,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",
@@ -4588,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"
       }
@@ -4596,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",
@@ -4610,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"
@@ -4622,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"
       },
@@ -4633,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"
@@ -4644,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",
@@ -4663,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"
       }
@@ -4671,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",
@@ -4687,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",
@@ -13690,6 +13707,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 +20489,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 +21808,203 @@
         "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/axis": {
+      "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.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"
+      },
+      "peerDependencies": {
+        "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",
+      "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",
+      "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.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.1",
+        "@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/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",
+      "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/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",
+      "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",
@@ -21727,6 +22019,246 @@
         "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/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",
+      "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/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",
+      "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/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 +29630,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 +29925,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 +44538,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",
@@ -49935,6 +50482,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",
@@ -64145,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",
@@ -64166,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",
@@ -64185,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"
           }
@@ -64193,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",
@@ -64204,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"
@@ -64213,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"
           }
@@ -64221,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"
@@ -64229,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",
@@ -64245,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"
           }
@@ -64253,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",
@@ -64266,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
         }
       }
     },
@@ -71469,6 +72041,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 +77894,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 +79000,177 @@
         "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"
+      }
+    },
+    "@visx/axis": {
+      "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.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": {
+      "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",
+      "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.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.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": {
+      "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"
+      },
+      "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",
+          "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": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-3.0.0.tgz",
@@ -78378,6 +79182,220 @@
         "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/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",
+      "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/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",
+          "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"
+          }
+        },
+        "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 +85128,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 +85385,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 +96548,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",
@@ -100105,6 +101138,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 5d6c3995337c0..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",
@@ -114,7 +113,12 @@
     "@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",
+    "@visx/tooltip": "^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..c1d58e1eb5dc6 100644
--- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx
+++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx
@@ -18,39 +18,37 @@
  * under the License.
  */
 import React from 'react';
+import moment from 'moment';
 import {
-  Sparkline,
+  formatNumber,
+  formatTime,
+  getTextDimension,
+  useTheme,
+} from '@superset-ui/core';
+import { GridRows } from '@visx/grid';
+import { LinearScaleConfig, scaleLinear } from '@visx/scale';
+import { AxisScaleOutput } from '@visx/axis';
+import {
+  Axis,
   LineSeries,
-  PointSeries,
-  HorizontalReferenceLine,
-  VerticalReferenceLine,
-  WithTooltip,
-} from '@data-ui/sparkline';
-import { getTextDimension, formatNumber } from '@superset-ui/core';
+  Tooltip,
+  XYChart,
+  buildChartTheme,
+} from '@visx/xychart';
 
 interface Props {
   ariaLabel: string;
+  dataKey: string;
   className?: string;
+  data: Array<number>;
+  entries: Array<any>;
   height: number;
   numberFormat: string;
-  renderTooltip: ({ index }: { index: number }) => void;
+  dateFormat: string;
+  renderTooltip: ({ index }: { index: number }) => React.ReactNode;
   showYAxis: boolean;
   width: number;
-  yAxisBounds: Array<number>;
-  data: Array<number>;
-}
-
-interface TooltipProps {
-  onMouseLeave: () => void;
-  onMouseMove: () => void;
-  tooltipData: {
-    index: number;
-  };
-}
-
-interface Yscale {
-  min?: number;
-  max?: number;
+  yAxisBounds: Array<number | undefined>;
 }
 
 const MARGIN = {
@@ -59,12 +57,6 @@ const MARGIN = {
   bottom: 8,
   left: 8,
 };
-const tooltipProps = {
-  style: {
-    opacity: 0.8,
-  },
-  offsetTop: 0,
-};
 
 function getSparklineTextWidth(text: string) {
   return (
@@ -88,114 +80,164 @@ function isValidBoundValue(value?: number | string) {
   );
 }
 
-class SparklineCell extends React.Component<Props, {}> {
-  renderHorizontalReferenceLine(value?: number, label?: string) {
-    return (
-      <HorizontalReferenceLine
-        reference={value}
-        labelPosition="right"
-        renderLabel={() => label}
-        stroke="#bbb"
-        strokeDasharray="3 3"
-        strokeWidth={1}
-      />
-    );
-  }
-
-  render() {
-    const {
-      width = 300,
-      height = 50,
-      data,
-      ariaLabel,
-      numberFormat = undefined,
-      yAxisBounds = [undefined, undefined],
-      showYAxis = false,
-      renderTooltip = () => <div />,
-    } = this.props;
+const SparklineCell = ({
+  ariaLabel,
+  dataKey,
+  data,
+  width = 300,
+  height = 50,
+  numberFormat = '',
+  dateFormat = '',
+  yAxisBounds = [undefined, undefined],
+  showYAxis = false,
+  entries = [],
+}: 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,
+  });
 
-    const yScale: Yscale = {};
-    let hasMinBound = false;
-    let hasMaxBound = false;
+  const yScaleConfig: LinearScaleConfig<AxisScaleOutput> = {
+    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;
-      }
-      hasMaxBound = isValidBoundValue(maxBound);
-      if (hasMaxBound) {
-        yScale.max = maxBound;
+  if (yAxisBounds) {
+    const [minBound, maxBound] = yAxisBounds;
+    hasMinBound = isValidBoundValue(minBound);
+    if (hasMinBound) {
+      if (minBound !== undefined && minBound <= 0) {
+        yScaleConfig.zero = true;
       }
+      min = minBound || min;
     }
 
-    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) {
+      max = maxBound || max;
     }
+    yScaleConfig.domain = [min, max];
+  }
+
+  let minLabel: string;
+  let maxLabel: string;
+  let labelLength = 0;
+  if (showYAxis) {
+    yScaleConfig.domain = [min, max];
+    minLabel = formatNumber(numberFormat, min);
+    maxLabel = formatNumber(numberFormat, max);
+    labelLength = Math.max(
+      getSparklineTextWidth(minLabel),
+      getSparklineTextWidth(maxLabel),
+    );
+  }
+
+  const margin = {
+    ...MARGIN,
+    right: MARGIN.right + labelLength,
+  };
+  const innerWidth = width - margin.left - margin.right;
+  const chartData = data.map((num, idx) => ({
+    x: idx,
+    y: num,
+  }));
 
-    const margin = {
-      ...MARGIN,
-      right: MARGIN.right + labelLength,
-    };
+  const xAccessor = (d: any) => d.x;
+  const yAccessor = (d: any) => d.y;
 
-    return (
-      <WithTooltip
-        tooltipProps={tooltipProps}
-        hoverStyles={null}
-        renderTooltip={renderTooltip}
+  return (
+    <>
+      <XYChart
+        accessibilityLabel={ariaLabel}
+        width={width}
+        height={height}
+        margin={margin}
+        yScale={{
+          ...yScaleConfig,
+        }}
+        xScale={{ type: 'band', paddingInner: 0.5 }}
+        theme={xyTheme}
       >
-        {({ onMouseLeave, onMouseMove, tooltipData }: TooltipProps) => (
-          <Sparkline
-            ariaLabel={ariaLabel}
-            width={width}
-            height={height}
-            margin={margin}
-            data={data}
-            onMouseLeave={onMouseLeave}
-            onMouseMove={onMouseMove}
-            {...yScale}
-          >
-            {showYAxis && this.renderHorizontalReferenceLine(min, minLabel)}
-            {showYAxis && this.renderHorizontalReferenceLine(max, maxLabel)}
-            <LineSeries showArea={false} stroke="#767676" />
-            {tooltipData && (
-              <VerticalReferenceLine
-                reference={tooltipData.index}
-                strokeDasharray="3 3"
-                strokeWidth={1}
-              />
-            )}
-            {tooltipData && (
-              <PointSeries
-                points={[tooltipData.index]}
-                fill="#767676"
-                strokeWidth={1}
-              />
-            )}
-          </Sparkline>
+        {showYAxis && (
+          <Axis
+            hideAxisLine
+            hideTicks
+            numTicks={2}
+            orientation="right"
+            tickFormat={(d: any) => formatNumber(numberFormat, d)}
+            tickValues={[min, max]}
+          />
         )}
-      </WithTooltip>
-    );
-  }
-}
+        {showYAxis && min !== undefined && max !== undefined && (
+          <GridRows
+            left={margin.left}
+            scale={scaleLinear({
+              range: [height - margin.top, margin.bottom],
+              domain: [min, max],
+            })}
+            width={innerWidth}
+            strokeDasharray="3 3"
+            stroke={`${theme.colors.grayscale.light1}`}
+            tickValues={[min, max]}
+          />
+        )}
+        <LineSeries
+          data={chartData}
+          dataKey={dataKey}
+          xAccessor={xAccessor}
+          yAccessor={yAccessor}
+        />
+        <Tooltip
+          glyphStyle={{ strokeWidth: 1 }}
+          showDatumGlyph
+          showVerticalCrosshair
+          snapTooltipToDatumX
+          snapTooltipToDatumY
+          verticalCrosshairStyle={{
+            stroke: `${theme.colors.grayscale.dark1}`,
+            strokeDasharray: '3 3',
+            strokeWidth: 1,
+          }}
+          renderTooltip={({ tooltipData }) => {
+            const idx = tooltipData?.datumByKey[dataKey].index;
+            return (
+              <div>
+                <strong>
+                  {idx !== undefined && formatNumber(numberFormat, data[idx])}
+                </strong>
+                <div>
+                  {idx !== undefined &&
+                    formatTime(
+                      dateFormat,
+                      moment.utc(entries[idx].time).toDate(),
+                    )}
+                </div>
+              </div>
+            );
+          }}
+        />
+      </XYChart>
+      <style>
+        {`svg:not(:root) {
+            overflow: visible;
+          }`}
+      </style>
+    </>
+  );
+};
 
 export default SparklineCell;
diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
index 6843387ed20f4..bf8551bf07457 100644
--- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
+++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
@@ -21,12 +21,11 @@ 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,
 } from '@superset-ui/chart-controls';
-import moment from 'moment';
 import sortNumericValues from 'src/utils/sortNumericValues';
 
 import FormattedNumber from './FormattedNumber';
@@ -163,25 +162,16 @@ const TimeTable = ({
 
       return (
         <SparklineCell
+          ariaLabel={`spark-${valueField}`}
           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}
-          renderTooltip={({ index }) => (
-            <div>
-              <strong>{formatNumber(column.d3format, sparkData[index])}</strong>
-              <div>
-                {formatTime(
-                  column.dateFormat,
-                  moment.utc(entries[index].time).toDate(),
-                )}
-              </div>
-            </div>
-          )}
+          entries={entries}
         />
       );
     };