diff --git a/packages/chord/stories/chord.stories.js b/packages/chord/stories/chord.stories.tsx
similarity index 78%
rename from packages/chord/stories/chord.stories.js
rename to packages/chord/stories/chord.stories.tsx
index 589e8e3475..160bf2030c 100644
--- a/packages/chord/stories/chord.stories.js
+++ b/packages/chord/stories/chord.stories.tsx
@@ -1,13 +1,20 @@
import { storiesOf } from '@storybook/react'
import { generateChordData } from '@nivo/generators'
import { TableTooltip, BasicTooltip, Chip } from '@nivo/tooltip'
-import { Chord } from '../src'
+// @ts-ignore
+import { Chord, ArcDatum, ArcTooltipComponentProps, RibbonTooltipComponentProps } from '../src'
+
+const generateData = (size: number) => {
+ const { matrix, keys } = generateChordData({ size })
+
+ return { data: matrix, keys }
+}
const commonProperties = {
width: 900,
height: 500,
margin: { top: 60, right: 80, bottom: 60, left: 80 },
- ...generateChordData({ size: 7 }),
+ ...generateData(7),
xPadding: 0.2,
}
@@ -17,9 +24,9 @@ stories.add('default', () => )
stories.add('radial labels', () => )
-const customLabel = d => `${d.id} [${d.value}]`
+const customLabel = (arc: Omit) => `${arc.id} [${arc.value}]`
stories.add('custom labels text', () => (
-
+
))
stories.add('angle padding', () => (
@@ -43,7 +50,7 @@ stories.add('alternative colors', () => (
stories.add('putting labels inside arcs', () => (
(
stories.add('with formatted values', () => (
`${Number(value).toLocaleString('ru-RU', {
minimumFractionDigits: 2,
@@ -64,7 +71,7 @@ stories.add('with formatted values', () => (
/>
))
-const ArcTooltip = ({ arc }) => (
+const ArcTooltip = ({ arc }: ArcTooltipComponentProps) => (
(
/>
)
-const RibbonTooltip = ({ ribbon }) => (
+const RibbonTooltip = ({ ribbon }: RibbonTooltipComponentProps) => (
(
stories.add('custom tooltips', () => (
diff --git a/website/src/data/components/chord/meta.yml b/website/src/data/components/chord/meta.yml
index b7ec581415..2d5d48fe04 100644
--- a/website/src/data/components/chord/meta.yml
+++ b/website/src/data/components/chord/meta.yml
@@ -12,7 +12,9 @@ Chord:
- relational
- svg
- isomorphic
- stories: []
+ stories:
+ - label: Custom arc & ribbon tooltip
+ link: chord--custom-tooltips
description: |
Chord diagram, uses [d3-chord](https://github.com/d3/d3-chord),
see [this demo](https://observablehq.com/@d3/chord-diagram).
diff --git a/website/src/data/config.ts b/website/src/data/config.ts
index 37f85a174e..82be3bca6d 100644
--- a/website/src/data/config.ts
+++ b/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/',
}