feat(network): update stories for custom components

Author: plouc

packages/network/stories/network.stories.tsx

@@ -5,6 +5,7 @@ import { generateNetworkData } from '@nivo/generators'
 import {
     Network,
     NetworkNodeProps,
+    NetworkLinkProps,
     NetworkNodeTooltipProps,
     NetworkSvgProps,
     svgDefaultProps,
@@ -33,17 +34,6 @@ const commonProperties: NetworkSvgProps<NodeType> = {
 
 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<NodeType>) => (
     <div
         style={{
@@ -56,16 +46,43 @@ const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>)
     >
         <strong>ID: {node.id}</strong>
         <br />
-        Depth: {node.depth}
+        depth: {node.depth}
         <br />
-        Radius: {node.radius}
+        radius: {node.radius}
     </div>
 )
 
 export const CustomNodeTooltip = () => (
     <Network<NodeType> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
 )
 
+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 CustomLinkComponent = ({ link }: NetworkLinkProps<NodeType>) => (
+    <line
+        x1={link.source.x}
+        y1={link.source.y}
+        x2={link.target.x}
+        y2={link.target.y}
+        stroke={link.color}
+        strokeWidth={1}
+        strokeDasharray="5 7"
+    />
+)
+
+export const CustomLink = () => (
+    <Network<NodeType> {...commonProperties} linkComponent={CustomLinkComponent} />
+)
+
 export const OnClickHandler = () => (
     <Network<NodeType> {...commonProperties} onClick={action('onClick')} />
 )

packages/network/stories/networkCanvas.stories.tsx

@@ -33,20 +33,6 @@ const commonProperties: NetworkCanvasProps<NodeType> = {
 
 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<NodeType>) => (
     <div
         style={{
@@ -59,16 +45,30 @@ const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>)
     >
         <strong>ID: {node.id}</strong>
         <br />
-        Depth: {node.depth}
+        depth: {node.depth}
         <br />
-        Radius: {node.radius}
+        radius: {node.radius}
     </div>
 )
 
 export const CustomNodeTooltip = () => (
     <NetworkCanvas<NodeType> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
 )
 
+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} />
+)
+
 export const OnClickHandler = () => (
     <NetworkCanvas<NodeType> {...commonProperties} onClick={action('onClick')} />
 )

website/src/data/components/network/meta.yml

@@ -11,8 +11,12 @@ Network:
     - isomorphic
     - experimental
   stories:
+    - label: Custom node tooltip
+      link: network--custom-node-tooltip
     - label: Custom node component
       link: network--custom-node
+    - label: Custom link component
+      link: network--custom-link
   description: |
     A network component connecting nodes with links.
 
@@ -28,8 +32,12 @@ NetworkCanvas:
     - canvas
     - experimental
   stories:
+    - label: Custom node tooltip
+      link: networkcanvas--custom-node-tooltip
     - label: Custom node renderer
-      link: network--custom-node-renderer
+      link: networkcanvas--custom-node-renderer
+    - label: Custom link renderer
+      link: networkcanvas--custom-link-renderer
   description: |
     A variation around the [Network](self:/network/) component.
     Well suited for large data sets as it does not impact DOM tree depth,

website/src/data/components/network/props.ts

@@ -245,7 +245,7 @@ const props: ChartProperty[] = [
         type: 'boolean',
         required: false,
         help: 'Enable/disable interactivity.',
-        flavors: ['svg'],
+        flavors: ['svg', 'canvas'],
         defaultValue: commonDefaultProps.isInteractive,
         controlType: 'switch',
     },
@@ -257,9 +257,9 @@ const props: ChartProperty[] = [
         help: 'Custom tooltip component for nodes.',
         flavors: ['svg', 'canvas'],
         description: `
-            A function allowing complete tooltip customisation,
-            it must return a valid HTML
-            element and will receive the node's data.
+            An optional component allowing complete tooltip customisation,
+            it must return a valid HTML element and will receive
+            the node's data as a property.
         `,
     },
     {