add tooltip to example

airbnb · Sep 27, 2024 · 1c4b2d2 · 1c4b2d2
1 parent 0cd4c44
commit 1c4b2d2
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 22 deletions.
diff --git 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 (
-    <div style={{}}>
+    <div>
+      <style>{`
+        .visx-sankey-link:hover {
+          stroke-opacity: 0.7; 
+        }
+        .visx-sankey-node:hover {
+          filter: brightness(1.3);
+        }
+        .visx-sankey-demo-container {
+          background: ${background};
+          padding: ${margin.top}px ${margin.right}px ${margin.bottom}px ${margin.left}px;
+          border-radius: 5px;
+          position: relative;
+        }
+        .visx-sankey-demo-controls {
+          font-size: 12px;
+        }
+      `}</style>
       {showControls && (
-        <div style={controlStyles}>
+        <div className="visx-sankey-demo-controls">
           <label>
             node alignment{' '}
             <select
@@ -77,28 +106,83 @@ export default function SankeyDemo({
           </label>
         </div>
       )}
-      <div
-        style={{
-          background,
-          padding: `${margin.top}px ${margin.right}px ${margin.bottom}px ${margin.left}px`,
-          borderRadius: 5,
-        }}
-      >
-        <svg width={width} height={height}>
+      <div className="visx-sankey-demo-container">
+        <svg width={xMax} height={yMax}>
           <Sankey<NodeDatum, LinkDatum>
             root={energy}
             nodeWidth={nodeWidth}
             size={[xMax, yMax]}
             nodePadding={nodePadding}
             nodeAlign={nodeAlignments[nodeAlignment]}
-            nodeProps={{
-              fill: color,
-            }}
-            linkProps={{
-              stroke: color,
-            }}
-          />
+          >
+            {({ graph, createPath }) => (
+              <>
+                <Group>
+                  {graph.links.map((link, i) => (
+                    <LinkHorizontal
+                      key={i}
+                      className="visx-sankey-link"
+                      data={link}
+                      path={createPath}
+                      fill="transparent"
+                      stroke={color}
+                      strokeWidth={link.width}
+                      strokeOpacity={0.5}
+                      onPointerMove={(event) => {
+                        const coords = localPoint(
+                          (event.target as SVGElement).ownerSVGElement,
+                          event,
+                        );
+                        showTooltip({
+                          tooltipData: `${
+                            (link.source as SankeyNode<NodeDatum, LinkDatum>).name
+                          } > ${(link.target as SankeyNode<NodeDatum, LinkDatum>).name} = ${
+                            link.value
+                          }`,
+                          tooltipTop: (coords?.y ?? 0) + 10,
+                          tooltipLeft: (coords?.x ?? 0) + 10,
+                        });
+                      }}
+                      onMouseOut={hideTooltip}
+                    />
+                  ))}
+                </Group>
+                <Group>
+                  {graph.nodes.map(({ y0, y1, x0, x1, name }, i) => (
+                    <BarRounded
+                      key={i}
+                      className="visx-sankey-node"
+                      width={x1 - x0}
+                      height={y1 - y0}
+                      x={x0}
+                      y={y0}
+                      radius={3}
+                      all
+                      fill={color}
+                      onPointerMove={(event) => {
+                        const coords = localPoint(
+                          (event.target as SVGElement).ownerSVGElement,
+                          event,
+                        );
+                        showTooltip({
+                          tooltipData: name,
+                          tooltipTop: (coords?.y ?? 0) + 10,
+                          tooltipLeft: (coords?.x ?? 0) + 10,
+                        });
+                      }}
+                      onMouseOut={hideTooltip}
+                    />
+                  ))}
+                </Group>
+              </>
+            )}
+          </Sankey>
         </svg>
+        {tooltipOpen && (
+          <TooltipWithBounds key={Math.random()} top={tooltipTop} left={tooltipLeft}>
+            {tooltipData}
+          </TooltipWithBounds>
+        )}
       </div>
     </div>
   );

diff --git 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",