feat(network): add stories for custom node component and renderer

plouc · Dec 31, 2021 · 8f13a53 · 8f13a53
1 parent b115f70
commit 8f13a53
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 14 deletions.
diff --git a/packages/network/stories/network.stories.tsx b/packages/network/stories/network.stories.tsx
@@ -4,7 +4,7 @@ import { withKnobs } from '@storybook/addon-knobs'
 import { generateNetworkData } from '@nivo/generators'
 import {
     Network,
-    NetworkInputNode,
+    NetworkNodeProps,
     NetworkNodeTooltipProps,
     NetworkSvgProps,
     svgDefaultProps,
@@ -19,7 +19,9 @@ export default {
 
 const data = generateNetworkData()
 
-const commonProperties: NetworkSvgProps<NetworkInputNode> = {
+type NodeType = typeof data['nodes'][0]
+
+const commonProperties: NetworkSvgProps<NodeType> = {
     ...svgDefaultProps,
     data,
     width: 900,
@@ -29,9 +31,20 @@ const commonProperties: NetworkSvgProps<NetworkInputNode> = {
     iterations: 60,
 }
 
-export const Default = () => <Network {...commonProperties} />
+export const Default = () => <Network<NodeType> {...commonProperties} />
+
+const CustomNodeComponent = ({ node }: NetworkNodeProps<NodeType>) => (
+    <g transform={`translate(${node.x - 6},${node.y - 8}) scale(${0.5})`}>
+        <circle cx="12" cy="8" r="5" />
+        <path d="M3,21 h18 C 21,12 3,12 3,21" />
+    </g>
+)
+
+export const CustomNode = () => (
+    <Network<NodeType> {...commonProperties} nodeComponent={CustomNodeComponent} />
+)
 
-const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NetworkInputNode>) => (
+const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>) => (
     <div>
         <div>
             <strong style={{ color: node.color }}>ID: {node.id}</strong>
@@ -44,7 +57,9 @@ const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NetworkInp
 )
 
 export const CustomNodeTooltip = () => (
-    <Network {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
+    <Network<NodeType> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
 )
 
-export const OnClickHandler = () => <Network {...commonProperties} onClick={action('onClick')} />
+export const OnClickHandler = () => (
+    <Network<NodeType> {...commonProperties} onClick={action('onClick')} />
+)
diff --git a/packages/network/stories/networkCanvas.stories.tsx b/packages/network/stories/networkCanvas.stories.tsx
@@ -6,7 +6,7 @@ import {
     NetworkCanvas,
     canvasDefaultProps,
     NetworkCanvasProps,
-    NetworkInputNode,
+    NetworkComputedNode,
     NetworkNodeTooltipProps,
     // @ts-ignore
 } from '../src'
@@ -19,7 +19,9 @@ export default {
 
 const data = generateNetworkData()
 
-const commonProperties: NetworkCanvasProps<NetworkInputNode> = {
+type NodeType = typeof data['nodes'][0]
+
+const commonProperties: NetworkCanvasProps<NodeType> = {
     ...canvasDefaultProps,
     data,
     width: 900,
@@ -29,9 +31,23 @@ const commonProperties: NetworkCanvasProps<NetworkInputNode> = {
     iterations: 60,
 }
 
-export const Default = () => <NetworkCanvas {...commonProperties} />
+export const Default = () => <NetworkCanvas<NodeType> {...commonProperties} />
+
+const customNodeRenderer = (ctx: CanvasRenderingContext2D, node: NetworkComputedNode<NodeType>) => {
+    ctx.fillStyle = node.color
+
+    ctx.beginPath()
+    ctx.moveTo(node.x, node.y - node.radius)
+    ctx.lineTo(node.x + node.radius, node.y + node.radius)
+    ctx.lineTo(node.x - node.radius, node.y + node.radius)
+    ctx.fill()
+}
+
+export const CustomNodeRenderer = () => (
+    <NetworkCanvas<NodeType> {...commonProperties} renderNode={customNodeRenderer} />
+)
 
-const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NetworkInputNode>) => (
+const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>) => (
     <div>
         <div>
             <strong style={{ color: node.color }}>ID: {node.id}</strong>
@@ -44,9 +60,9 @@ const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NetworkInp
 )
 
 export const CustomNodeTooltip = () => (
-    <NetworkCanvas {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
+    <NetworkCanvas<NodeType> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
 )
 
 export const OnClickHandler = () => (
-    <NetworkCanvas {...commonProperties} onClick={action('onClick')} />
+    <NetworkCanvas<NodeType> {...commonProperties} onClick={action('onClick')} />
 )
diff --git a/website/src/data/components/network/meta.yml b/website/src/data/components/network/meta.yml
@@ -10,7 +10,9 @@ Network:
     - svg
     - isomorphic
     - experimental
-  stories: []
+  stories:
+    - label: Custom node component
+      link: network--custom-node
   description: |
     A network component connecting nodes with links.
 
@@ -25,7 +27,9 @@ NetworkCanvas:
   tags:
     - canvas
     - experimental
-  stories: []
+  stories:
+    - label: Custom node renderer
+      link: network--custom-node-renderer
   description: |
     A variation around the [Network](self:/network/) component.
     Well suited for large data sets as it does not impact DOM tree depth,