diff --git a/packages/visx-demo/src/sandboxes/visx-sankey/Example.tsx b/packages/visx-demo/src/sandboxes/visx-sankey/Example.tsx
index d9fc19e7b..09877eab2 100644
--- a/packages/visx-demo/src/sandboxes/visx-sankey/Example.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-sankey/Example.tsx
@@ -1,8 +1,18 @@
import React, { useState } from 'react';
-import { Sankey, sankeyCenter, sankeyRight, sankeyLeft, sankeyJustify } from '@visx/sankey';
-import energy from './energy.json';
+import {
+ Sankey,
+ sankeyCenter,
+ sankeyRight,
+ sankeyLeft,
+ sankeyJustify,
+ SankeyNode,
+} from '@visx/sankey';
+import { Group } from '@visx/group';
+import { BarRounded, LinkHorizontal } from '@visx/shape';
+import { useTooltip, TooltipWithBounds } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
-const controlStyles = { fontSize: 10 };
+import energy from './energy.json';
export const background = '#84dccf';
export const color = '#392f5a';
@@ -32,6 +42,8 @@ export default function SankeyDemo({
showControls = true,
margin = defaultMargin,
}: SankeyDemoProps) {
+ const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } =
+ useTooltip();
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
@@ -42,9 +54,26 @@ export default function SankeyDemo({
if (width < 10) return null;
return (
-
+
+
{showControls && (
-
+
)}
-
-
);
diff --git a/packages/visx-demo/src/sandboxes/visx-sankey/package.json b/packages/visx-demo/src/sandboxes/visx-sankey/package.json
index 99b5834b8..c5440f800 100644
--- a/packages/visx-demo/src/sandboxes/visx-sankey/package.json
+++ b/packages/visx-demo/src/sandboxes/visx-sankey/package.json
@@ -6,9 +6,13 @@
"dependencies": {
"@babel/runtime": "^7.8.4",
"@types/react": "^18",
- "@types/react-dom": "^18",
- "@visx/sankey": "latest",
+ "@types/react-dom": "^18" ,
+ "@visx/event": "latest",
+ "@visx/group": "latest",
"@visx/responsive": "latest",
+ "@visx/sankey": "latest",
+ "@visx/shape": "latest",
+ "@visx/tooltip": "latest",
"react": "^18",
"react-dom": "^18",
"react-scripts-ts": "3.1.0",