feat(stream): add info about stories

plouc · Aug 30, 2018 · 4f98124 · 4f98124
1 parent a17d93b
commit 4f98124
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 36 deletions.
diff --git a/packages/sankey/stories/sankey.stories.js b/packages/sankey/stories/sankey.stories.js
@@ -4,11 +4,11 @@ import { generateSankeyData } from '@nivo/generators'
 import { Sankey } from '../index'
 
 const commonProperties = {
-    width: 1100,
-    height: 700,
+    width: 900,
+    height: 500,
     margin: { top: 0, right: 80, bottom: 0, left: 80 },
     data: generateSankeyData({ nodeCount: 11, maxIterations: 2 }),
-    colors: 'd320b',
+    colors: 'd310',
 }
 
 const stories = storiesOf('Sankey', module).addDecorator(story => (

diff --git a/packages/scatterplot/stories/scatterplot.stories.js b/packages/scatterplot/stories/scatterplot.stories.js
@@ -163,7 +163,7 @@ stories.add('multiple series', withInfo(importStatement)(() => <ScatterPlot {...
 
 stories.add(
     'alternative colors',
-    withInfo(importStatement)(() => <ScatterPlot {...commonProps} colors="d320b" />)
+    withInfo(importStatement)(() => <ScatterPlot {...commonProps} colors="d310" />)
 )
 
 stories.add(

diff --git a/packages/stream/stories/stream.stories.js b/packages/stream/stories/stream.stories.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import { range, random } from 'lodash'
 import { storiesOf } from '@storybook/react'
-import { withKnobs, boolean, select } from '@storybook/addon-knobs'
+import { withKnobs, select } from '@storybook/addon-knobs'
+import { withInfo } from '@storybook/addon-info'
 import { areaCurvePropKeys } from '@nivo/core'
 import { Stream } from '../index'
 
@@ -25,34 +26,43 @@ const stories = storiesOf('Stream', module)
 
 stories.addDecorator(story => <div className="wrapper">{story()}</div>).addDecorator(withKnobs)
 
-stories.add('default', () => <Stream {...commonProperties} />)
-
-stories.add('full height (expand offset)', () => (
-    <Stream
-        {...commonProperties}
-        offsetType="expand"
-        curve={select('curve', areaCurvePropKeys, 'catmullRom')}
-    />
-))
-
-stories.add('regular stacked chart', () => (
-    <Stream
-        {...commonProperties}
-        offsetType="none"
-        axisLeft={{}}
-        curve={select('curve', areaCurvePropKeys, 'catmullRom')}
-    />
-))
-
-stories.add('custom curve', () => <Stream {...commonProperties} curve="step" />)
-
-stories.add('with formatted values', () => (
-    <Stream
-        {...commonProperties}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
+stories.add('default', withInfo()(() => <Stream {...commonProperties} />))
+
+stories.add(
+    'full height (expand offset)',
+    withInfo()(() => (
+        <Stream
+            {...commonProperties}
+            offsetType="expand"
+            curve={select('curve', areaCurvePropKeys, 'catmullRom')}
+        />
+    ))
+)
+
+stories.add(
+    'regular stacked chart',
+    withInfo()(() => (
+        <Stream
+            {...commonProperties}
+            offsetType="none"
+            axisLeft={{}}
+            curve={select('curve', areaCurvePropKeys, 'catmullRom')}
+        />
+    ))
+)
+
+stories.add('custom curve', withInfo()(() => <Stream {...commonProperties} curve="step" />))
+
+stories.add(
+    'formatting tooltip values',
+    withInfo()(() => (
+        <Stream
+            {...commonProperties}
+            tooltipFormat={value =>
+                `${Number(value).toLocaleString('ru-RU', {
+                    minimumFractionDigits: 2,
+                })} ₽`
+            }
+        />
+    ))
+)