Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(network): improve stories
  • Loading branch information
plouc committed Dec 31, 2021
1 parent 986b0c0 commit 8faac86
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 48 deletions.
53 changes: 28 additions & 25 deletions packages/network/stories/network.stories.tsx
Expand Up @@ -4,11 +4,10 @@ import { withKnobs } from '@storybook/addon-knobs'
import { generateNetworkData } from '@nivo/generators'
import {
Network,
NetworkNodeProps,
NetworkLinkProps,
NetworkNodeTooltipProps,
NodeProps,
LinkProps,
NodeTooltipProps,
NetworkSvgProps,
svgDefaultProps,
// @ts-ignore
} from '../src'

Expand All @@ -20,21 +19,22 @@ export default {

const data = generateNetworkData()

type NodeType = typeof data['nodes'][0]
type Node = typeof data['nodes'][number]
type Link = typeof data['links'][number]

const commonProperties: NetworkSvgProps<NodeType> = {
...svgDefaultProps,
const commonProperties: NetworkSvgProps<Node, Link> = {
data,
width: 900,
height: 400,
width: 600,
height: 600,
nodeColor: node => node.color,
repulsivity: 6,
repulsivity: 10,
iterations: 60,
linkDistance: link => link.distance * 1.3,
}

export const Default = () => <Network<NodeType> {...commonProperties} />
export const Default = () => <Network<Node, Link> {...commonProperties} />

const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>) => (
const CustomNodeTooltipComponent = ({ node }: NodeTooltipProps<Node>) => (
<div
style={{
background: node.color,
Expand All @@ -46,43 +46,46 @@ const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>)
>
<strong>ID: {node.id}</strong>
<br />
depth: {node.depth}
<br />
radius: {node.radius}
size: {node.size}
</div>
)

export const CustomNodeTooltip = () => (
<Network<NodeType> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
<Network<Node, Link> {...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" />
const CustomNodeComponent = ({ node }: NodeProps<Node>) => (
<g transform={`translate(${node.x - 12},${node.y - 18})`}>
<circle cx="12" cy="8" r="5" fill={node.color} stroke="#ffffff" />
<path d="M3,21 h18 C 21,12 3,12 3,21" fill={node.color} stroke="#ffffff" />
</g>
)

export const CustomNode = () => (
<Network<NodeType> {...commonProperties} nodeComponent={CustomNodeComponent} />
<Network<Node, Link> {...commonProperties} nodeComponent={CustomNodeComponent} />
)

const CustomLinkComponent = ({ link }: NetworkLinkProps<NodeType>) => (
const CustomLinkComponent = ({ link }: LinkProps<Node, Link>) => (
<line
x1={link.source.x}
y1={link.source.y}
x2={link.target.x}
y2={link.target.y}
stroke={link.color}
strokeWidth={1}
strokeWidth={link.thickness}
strokeDasharray="5 7"
strokeLinecap="round"
/>
)

export const CustomLink = () => (
<Network<NodeType> {...commonProperties} linkComponent={CustomLinkComponent} />
<Network<Node, Link>
{...commonProperties}
linkThickness={link => 2 + link.target.data.height * 2}
linkComponent={CustomLinkComponent}
/>
)

export const OnClickHandler = () => (
<Network<NodeType> {...commonProperties} onClick={action('onClick')} />
<Network<Node, Link> {...commonProperties} onClick={action('onClick')} />
)
40 changes: 19 additions & 21 deletions packages/network/stories/networkCanvas.stories.tsx
Expand Up @@ -4,10 +4,9 @@ import { withKnobs } from '@storybook/addon-knobs'
import { generateNetworkData } from '@nivo/generators'
import {
NetworkCanvas,
canvasDefaultProps,
NetworkCanvasProps,
NetworkComputedNode,
NetworkNodeTooltipProps,
ComputedNode,
NodeTooltipProps,
// @ts-ignore
} from '../src'

Expand All @@ -19,21 +18,22 @@ export default {

const data = generateNetworkData()

type NodeType = typeof data['nodes'][0]
type Node = typeof data['nodes'][number]
type Link = typeof data['links'][number]

const commonProperties: NetworkCanvasProps<NodeType> = {
...canvasDefaultProps,
const commonProperties: NetworkCanvasProps<Node, Link> = {
data,
width: 900,
height: 400,
width: 600,
height: 600,
nodeColor: node => node.color,
repulsivity: 6,
repulsivity: 10,
iterations: 60,
linkDistance: link => link.distance * 1.3,
}

export const Default = () => <NetworkCanvas<NodeType> {...commonProperties} />
export const Default = () => <NetworkCanvas<Node, Link> {...commonProperties} />

const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>) => (
const CustomNodeTooltipComponent = ({ node }: NodeTooltipProps<Node>) => (
<div
style={{
background: node.color,
Expand All @@ -45,30 +45,28 @@ const CustomNodeTooltipComponent = ({ node }: NetworkNodeTooltipProps<NodeType>)
>
<strong>ID: {node.id}</strong>
<br />
depth: {node.depth}
<br />
radius: {node.radius}
size: {node.size}
</div>
)

export const CustomNodeTooltip = () => (
<NetworkCanvas<NodeType> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
<NetworkCanvas<Node, Link> {...commonProperties} nodeTooltip={CustomNodeTooltipComponent} />
)

const customNodeRenderer = (ctx: CanvasRenderingContext2D, node: NetworkComputedNode<NodeType>) => {
const customNodeRenderer = (ctx: CanvasRenderingContext2D, node: ComputedNode<Node>) => {
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.moveTo(node.x, node.y - node.size / 2)
ctx.lineTo(node.x + node.size / 2, node.y + node.size / 2)
ctx.lineTo(node.x - node.size / 2, node.y + node.size / 2)
ctx.fill()
}

export const CustomNodeRenderer = () => (
<NetworkCanvas<NodeType> {...commonProperties} renderNode={customNodeRenderer} />
<NetworkCanvas<Node, Link> {...commonProperties} renderNode={customNodeRenderer} />
)

export const OnClickHandler = () => (
<NetworkCanvas<NodeType> {...commonProperties} onClick={action('onClick')} />
<NetworkCanvas<Node, Link> {...commonProperties} onClick={action('onClick')} />
)
4 changes: 2 additions & 2 deletions website/src/data/config.ts
@@ -1,9 +1,9 @@
export default {
// local
// nivoApiUrl: 'http://localhost:3030/nivo',
// storybookUrl: 'http://localhost:6006/',
storybookUrl: 'http://localhost:6006/',

// production
nivoApiUrl: 'https://nivo-api.herokuapp.com/nivo',
storybookUrl: 'https://nivo.rocks/storybook/',
// storybookUrl: 'https://nivo.rocks/storybook/',
}

0 comments on commit 8faac86

Please sign in to comment.