From d29d21f483ae8761ba3abcf6cc0314b5012cb553 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= <raphael.benitte@ekino.com>
Date: Mon, 27 Aug 2018 12:55:46 +0900
Subject: [PATCH] feat(storybook): improve components stories

---
 .storybook/config.js                          |  47 +++++-
 packages/bar/stories/bar.stories.js           |   4 +-
 packages/bar/stories/barCanvas.stories.js     |   4 +-
 packages/chord/stories/chord.stories.js       |   6 +-
 .../circle-packing/stories/bubble.stories.js  |  36 +++--
 .../stories/bubbleHtml.stories.js             |  36 +++--
 packages/heatmap/stories/heatmap.stories.js   | 151 ++++++++++--------
 packages/line/stories/line.stories.js         |   4 +-
 packages/pie/stories/pie.stories.js           | 123 +++++++-------
 packages/radar/stories/radar.stories.js       | 138 +++++++++-------
 packages/sankey/stories/sankey.stories.js     |  98 +++++++-----
 .../stories/scatterplot.stories.js            |   6 +-
 packages/sunburst/stories/sunburst.stories.js |  17 +-
 packages/treemap/stories/treemap.stories.js   |   6 +-
 .../treemap/stories/treemapHtml.stories.js    |   6 +-
 .../waffle/stories/waffle-canvas.stories.js   |  10 +-
 .../waffle/stories/waffle-html.stories.js     |  10 +-
 packages/waffle/stories/waffle.stories.js     |  20 +--
 18 files changed, 426 insertions(+), 296 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index 244bfda3fd..53d021cd1b 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -5,12 +5,55 @@ import infoAddon, { setDefaults } from '@storybook/addon-info'
 import './style.css'
 
 setDefaults({
-    header: false,
+    header: true,
     inline: true,
     propTables: false,
     maxPropObjectKeys: 10000,
     maxPropArrayLength: 10000,
-    maxPropStringLength: 10000
+    maxPropStringLength: 10000,
+    styles: {
+        infoBody: {
+            border: 'none',
+            borderRadius: 0,
+            padding: '0 30px 20px',
+            marginTop: '0',
+            marginBottom: '0',
+            boxShadow: 'none',
+        },
+        header: {
+            h1: {
+                fontSize: '28px',
+            },
+            h2: {
+                fontSize: '16px',
+            },
+        },
+        source: {
+            h1: {
+                fontSize: '22px',
+            },
+        },
+        /*
+        header: {
+    h1: {
+      margin: 0,
+      padding: 0,
+      fontSize: '35px',
+    },
+    h2: {
+      margin: '0 0 10px 0',
+      padding: 0,
+      fontWeight: 400,
+      fontSize: '22px',
+    },
+    body: {
+      borderBottom: '1px solid #eee',
+      paddingTop: 10,
+      marginBottom: 10,
+    },
+  },
+         */
+    },
 })
 setAddon(infoAddon)
 
diff --git a/packages/bar/stories/bar.stories.js b/packages/bar/stories/bar.stories.js
index c8c2cc838e..320a5e73bd 100644
--- a/packages/bar/stories/bar.stories.js
+++ b/packages/bar/stories/bar.stories.js
@@ -8,8 +8,8 @@ import { Bar } from '../index'
 
 const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
 const commonProps = {
-    width: 1000,
-    height: 600,
+    width: 900,
+    height: 500,
     margin: { top: 60, right: 80, bottom: 60, left: 80 },
     data: generateCountriesData(keys, { size: 7 }),
     indexBy: 'country',
diff --git a/packages/bar/stories/barCanvas.stories.js b/packages/bar/stories/barCanvas.stories.js
index ed47a0d4f1..f44960b75e 100644
--- a/packages/bar/stories/barCanvas.stories.js
+++ b/packages/bar/stories/barCanvas.stories.js
@@ -6,8 +6,8 @@ import { BarCanvas } from '../index'
 
 const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
 const commonProps = {
-    width: 1000,
-    height: 600,
+    width: 900,
+    height: 500,
     margin: { top: 60, right: 80, bottom: 60, left: 80 },
     data: generateCountriesData(keys, { size: 7 }),
     indexBy: 'country',
diff --git a/packages/chord/stories/chord.stories.js b/packages/chord/stories/chord.stories.js
index fa84a09621..172ac4478f 100644
--- a/packages/chord/stories/chord.stories.js
+++ b/packages/chord/stories/chord.stories.js
@@ -5,8 +5,8 @@ import { generateChordData } from '@nivo/generators'
 import { Chord } from '../index'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 500,
     margin: { top: 60, right: 80, bottom: 60, left: 80 },
     ...generateChordData({ size: 7 }),
     xPadding: 0.2,
@@ -46,7 +46,7 @@ stories.add(
             labelRotation={-90}
             padAngle={0.02}
             innerRadiusOffset={0.02}
-            colors="d320b"
+            colors="d310"
         />
     ))
 )
diff --git a/packages/circle-packing/stories/bubble.stories.js b/packages/circle-packing/stories/bubble.stories.js
index 4bfcf00da7..651fa8f8ca 100644
--- a/packages/circle-packing/stories/bubble.stories.js
+++ b/packages/circle-packing/stories/bubble.stories.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { generateLibTree } from '@nivo/generators'
 import { Bubble } from '../index'
-import { withInfo } from '@storybook/addon-info'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 500,
     root: generateLibTree(),
     identity: 'name',
     value: 'loc',
@@ -16,18 +16,24 @@ const commonProperties = {
 
 storiesOf('Bubble', module)
     .addDecorator(story => <div className="wrapper">{story()}</div>)
-    .add('default', () => <Bubble {...commonProperties} />)
-    .add('rendering leaves only', () => <Bubble {...commonProperties} leavesOnly={true} />)
-    .add('with formatted values', () => (
-        <Bubble
-            {...commonProperties}
-            tooltipFormat={value =>
-                `${Number(value).toLocaleString('ru-RU', {
-                    minimumFractionDigits: 2,
-                })} ₽`
-            }
-        />
-    ))
+    .add('default', withInfo()(() => <Bubble {...commonProperties} />))
+    .add(
+        'rendering leaves only',
+        withInfo()(() => <Bubble {...commonProperties} leavesOnly={true} />)
+    )
+    .add(
+        'with formatted values',
+        withInfo()(() => (
+            <Bubble
+                {...commonProperties}
+                tooltipFormat={value =>
+                    `${Number(value).toLocaleString('ru-RU', {
+                        minimumFractionDigits: 2,
+                    })} ₽`
+                }
+            />
+        ))
+    )
     .add(
         'custom tooltip',
         withInfo()(() => (
diff --git a/packages/circle-packing/stories/bubbleHtml.stories.js b/packages/circle-packing/stories/bubbleHtml.stories.js
index 6e3bd6db0c..80fa4816b5 100644
--- a/packages/circle-packing/stories/bubbleHtml.stories.js
+++ b/packages/circle-packing/stories/bubbleHtml.stories.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { generateLibTree } from '@nivo/generators'
 import { BubbleHtml } from '../index'
-import { withInfo } from '@storybook/addon-info'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 500,
     root: generateLibTree(),
     identity: 'name',
     value: 'loc',
@@ -16,18 +16,24 @@ const commonProperties = {
 
 storiesOf('BubbleHtml', module)
     .addDecorator(story => <div className="wrapper">{story()}</div>)
-    .add('default', () => <BubbleHtml {...commonProperties} />)
-    .add('rendering leaves only', () => <BubbleHtml {...commonProperties} leavesOnly={true} />)
-    .add('with formatted values', () => (
-        <BubbleHtml
-            {...commonProperties}
-            tooltipFormat={value =>
-                `${Number(value).toLocaleString('ru-RU', {
-                    minimumFractionDigits: 2,
-                })} ₽`
-            }
-        />
-    ))
+    .add('default', withInfo()(() => <BubbleHtml {...commonProperties} />))
+    .add(
+        'rendering leaves only',
+        withInfo()(() => <BubbleHtml {...commonProperties} leavesOnly={true} />)
+    )
+    .add(
+        'with formatted values',
+        withInfo()(() => (
+            <BubbleHtml
+                {...commonProperties}
+                tooltipFormat={value =>
+                    `${Number(value).toLocaleString('ru-RU', {
+                        minimumFractionDigits: 2,
+                    })} ₽`
+                }
+            />
+        ))
+    )
     .add(
         'custom tooltip',
         withInfo()(() => (
diff --git a/packages/heatmap/stories/heatmap.stories.js b/packages/heatmap/stories/heatmap.stories.js
index e3a46ea26e..cf000a9058 100644
--- a/packages/heatmap/stories/heatmap.stories.js
+++ b/packages/heatmap/stories/heatmap.stories.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { generateCountriesData } from '@nivo/generators'
 import { HeatMap } from '../index'
 
@@ -56,7 +57,7 @@ const keys = [
 ]
 const commonProperties = {
     width: 900,
-    height: 520,
+    height: 500,
     margin: { top: 60, right: 80, bottom: 60, left: 80 },
     data: generateCountriesData(keys, { size: 9, min: 0, max: 100 }),
     indexBy: 'country',
@@ -67,76 +68,94 @@ const stories = storiesOf('HeatMap', module).addDecorator(story => (
     <div className="wrapper">{story()}</div>
 ))
 
-stories.add('default', () => <HeatMap {...commonProperties} />)
+stories.add('default', withInfo()(() => <HeatMap {...commonProperties} />))
 
-stories.add('square cells', () => (
-    <HeatMap
-        {...commonProperties}
-        forceSquare={true}
-        axisTop={{
-            orient: 'top',
-            tickSize: 5,
-            tickPadding: 5,
-            tickRotation: -55,
-            legend: '',
-            legendOffset: 36,
-        }}
-    />
-))
+stories.add(
+    'square cells',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            forceSquare={true}
+            axisTop={{
+                orient: 'top',
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: -55,
+                legend: '',
+                legendOffset: 36,
+            }}
+        />
+    ))
+)
 
-stories.add('circle cells', () => (
-    <HeatMap {...commonProperties} cellShape="circle" padding={2} enableGridY={true} />
-))
+stories.add(
+    'circle cells',
+    withInfo()(() => (
+        <HeatMap {...commonProperties} cellShape="circle" padding={2} enableGridY={true} />
+    ))
+)
 
-stories.add('alternative colors', () => <HeatMap {...commonProperties} colors="BrBG" />)
+stories.add('alternative colors', withInfo()(() => <HeatMap {...commonProperties} colors="BrBG" />))
 
-stories.add('variable cell size', () => (
-    <HeatMap
-        {...commonProperties}
-        colors="BuPu"
-        cellShape="circle"
-        padding={2}
-        sizeVariation={0.6}
-        enableGridX={true}
-        enableGridY={true}
-    />
-))
+stories.add(
+    'variable cell size',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            colors="BuPu"
+            cellShape="circle"
+            padding={2}
+            sizeVariation={0.6}
+            enableGridX={true}
+            enableGridY={true}
+        />
+    ))
+)
 
-stories.add('Custom cell component', () => (
-    <HeatMap
-        {...commonProperties}
-        cellShape={CustomCell}
-        padding={4}
-        colors="GnBu"
-        labelTextColor="inherit:darker(1.6)"
-    />
-))
+stories.add(
+    'Custom cell component',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            cellShape={CustomCell}
+            padding={4}
+            colors="GnBu"
+            labelTextColor="inherit:darker(1.6)"
+        />
+    ))
+)
 
-stories.add('with formatted values', () => (
-    <HeatMap
-        {...commonProperties}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
+stories.add(
+    'with formatted values',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            tooltipFormat={value =>
+                `${Number(value).toLocaleString('ru-RU', {
+                    minimumFractionDigits: 2,
+                })} ₽`
+            }
+        />
+    ))
+)
 
-stories.add('custom tooltip', () => (
-    <HeatMap
-        {...commonProperties}
-        tooltip={({ xKey, yKey, value, color }) => (
-            <strong style={{ color }}>
-                {xKey} / {yKey}: {value}
-            </strong>
-        )}
-        theme={{
-            tooltip: {
-                container: {
-                    background: 'gray',
+stories.add(
+    'custom tooltip',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            tooltip={({ xKey, yKey, value, color }) => (
+                <strong style={{ color }}>
+                    {xKey} / {yKey}: {value}
+                </strong>
+            )}
+            theme={{
+                tooltip: {
+                    container: {
+                        background: 'gray',
+                    },
                 },
-            },
-        }}
-    />
-))
+            }}
+        />
+    ))
+)
diff --git a/packages/line/stories/line.stories.js b/packages/line/stories/line.stories.js
index 6686581593..d9ca66cc89 100644
--- a/packages/line/stories/line.stories.js
+++ b/packages/line/stories/line.stories.js
@@ -8,8 +8,8 @@ import { Line } from '../index'
 const data = generateDrinkStats(18)
 const commonProperties = {
     width: 900,
-    height: 360,
-    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    height: 400,
+    margin: { top: 20, right: 20, bottom: 60, left: 80 },
     data,
     animate: true,
 }
diff --git a/packages/pie/stories/pie.stories.js b/packages/pie/stories/pie.stories.js
index 51bfeaeeba..0e2a5b6d11 100644
--- a/packages/pie/stories/pie.stories.js
+++ b/packages/pie/stories/pie.stories.js
@@ -1,12 +1,13 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { withKnobs, select } from '@storybook/addon-knobs'
+import { withKnobs } from '@storybook/addon-knobs'
+import { withInfo } from '@storybook/addon-info'
 import { generateProgrammingLanguageStats } from '@nivo/generators'
 import { Pie } from '../index'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 500,
     margin: { top: 80, right: 120, bottom: 80, left: 120 },
     data: generateProgrammingLanguageStats(true, 9).map(d => ({
         id: d.label,
@@ -19,61 +20,73 @@ const stories = storiesOf('Pie', module)
 
 stories.addDecorator(story => <div className="wrapper">{story()}</div>).addDecorator(withKnobs)
 
-stories.add('default', () => <Pie {...commonProperties} />)
+stories.add('default', withInfo()(() => <Pie {...commonProperties} />))
 
-stories.add('donut', () => <Pie {...commonProperties} innerRadius={0.6} />)
+stories.add('donut', withInfo()(() => <Pie {...commonProperties} innerRadius={0.6} />))
 
-stories.add('fancy slices', () => (
-    <Pie
-        {...commonProperties}
-        innerRadius={0.6}
-        padAngle={0.5}
-        cornerRadius={5}
-        radialLabelsLinkColor="inherit"
-        radialLabelsLinkStrokeWidth={3}
-        radialLabelsTextColor="inherit:darker(1.2)"
-    />
-))
+stories.add(
+    'fancy slices',
+    withInfo()(() => (
+        <Pie
+            {...commonProperties}
+            innerRadius={0.6}
+            padAngle={0.5}
+            cornerRadius={5}
+            radialLabelsLinkColor="inherit"
+            radialLabelsLinkStrokeWidth={3}
+            radialLabelsTextColor="inherit:darker(1.2)"
+        />
+    ))
+)
 
-stories.add('custom radial label', () => (
-    <Pie
-        {...commonProperties}
-        innerRadius={0.6}
-        padAngle={0.5}
-        cornerRadius={5}
-        radialLabel={d => `${d.id}: ${d.value}`}
-        radialLabelsLinkColor="inherit"
-        radialLabelsLinkStrokeWidth={3}
-        radialLabelsTextColor="inherit:darker(1.2)"
-        enableSlicesLabels={false}
-    />
-))
+stories.add(
+    'custom radial label',
+    withInfo()(() => (
+        <Pie
+            {...commonProperties}
+            innerRadius={0.6}
+            padAngle={0.5}
+            cornerRadius={5}
+            radialLabel={d => `${d.id}: ${d.value}`}
+            radialLabelsLinkColor="inherit"
+            radialLabelsLinkStrokeWidth={3}
+            radialLabelsTextColor="inherit:darker(1.2)"
+            enableSlicesLabels={false}
+        />
+    ))
+)
 
-stories.add('formatted tooltip values', () => (
-    <Pie
-        {...commonProperties}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
+stories.add(
+    'formatted tooltip values',
+    withInfo()(() => (
+        <Pie
+            {...commonProperties}
+            tooltipFormat={value =>
+                `${Number(value).toLocaleString('ru-RU', {
+                    minimumFractionDigits: 2,
+                })} ₽`
+            }
+        />
+    ))
+)
 
-stories.add('custom tooltip', () => (
-    <Pie
-        {...commonProperties}
-        tooltip={({ id, value, color }) => (
-            <strong style={{ color }}>
-                {id}: {value}
-            </strong>
-        )}
-        theme={{
-            tooltip: {
-                container: {
-                    background: '#333',
+stories.add(
+    'custom tooltip',
+    withInfo()(() => (
+        <Pie
+            {...commonProperties}
+            tooltip={({ id, value, color }) => (
+                <strong style={{ color }}>
+                    {id}: {value}
+                </strong>
+            )}
+            theme={{
+                tooltip: {
+                    container: {
+                        background: '#333',
+                    },
                 },
-            },
-        }}
-    />
-))
+            }}
+        />
+    ))
+)
diff --git a/packages/radar/stories/radar.stories.js b/packages/radar/stories/radar.stories.js
index 85c0c9b340..0e60779d6f 100644
--- a/packages/radar/stories/radar.stories.js
+++ b/packages/radar/stories/radar.stories.js
@@ -1,13 +1,14 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, select } from '@storybook/addon-knobs'
+import { withInfo } from '@storybook/addon-info'
 import { generateWinesTastes } from '@nivo/generators'
 import { Radar } from '../index'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
-    margin: { top: 80, right: 80, bottom: 80, left: 80 },
+    width: 900,
+    height: 500,
+    margin: { top: 60, right: 80, bottom: 20, left: 80 },
     ...generateWinesTastes(),
     indexBy: 'taste',
     animate: true,
@@ -19,43 +20,53 @@ const stories = storiesOf('Radar', module)
 
 stories.addDecorator(story => <div className="wrapper">{story()}</div>).addDecorator(withKnobs)
 
-stories.add('default', () => <Radar {...commonProperties} />)
+stories.add('default', withInfo()(() => <Radar {...commonProperties} />))
 
-stories.add('with custom curve', () => (
-    <Radar {...commonProperties} gridShape="linear" curve="catmullRomClosed" />
-))
+stories.add(
+    'with custom curve',
+    withInfo()(() => <Radar {...commonProperties} gridShape="linear" curve="catmullRomClosed" />)
+)
 
-stories.add('linear grid shape', () => (
-    <Radar
-        {...commonProperties}
-        gridShape="linear"
-        curve={select('curve', curveOptions, 'linearClosed')}
-    />
-))
+stories.add(
+    'linear grid shape',
+    withInfo()(() => (
+        <Radar
+            {...commonProperties}
+            gridShape="linear"
+            curve={select('curve', curveOptions, 'linearClosed')}
+        />
+    ))
+)
 
-stories.add('with dot label', () => (
-    <Radar
-        {...commonProperties}
-        curve={select('curve', curveOptions, 'linearClosed')}
-        gridShape="linear"
-        dotSize={10}
-        dotBorderColor="#fff"
-        dotBorderWidth={2}
-        enableDotLabel={true}
-        gridLabelOffset={36}
-    />
-))
+stories.add(
+    'with dot label',
+    withInfo()(() => (
+        <Radar
+            {...commonProperties}
+            curve={select('curve', curveOptions, 'linearClosed')}
+            gridShape="linear"
+            dotSize={10}
+            dotBorderColor="#fff"
+            dotBorderWidth={2}
+            enableDotLabel={true}
+            gridLabelOffset={36}
+        />
+    ))
+)
 
-stories.add('abusing dots', () => (
-    <Radar
-        {...commonProperties}
-        curve={select('curve', curveOptions, 'catmullRomClosed')}
-        dotSize={32}
-        enableDotLabel={true}
-        dotLabelYOffset={3}
-        gridLabelOffset={36}
-    />
-))
+stories.add(
+    'abusing dots',
+    withInfo()(() => (
+        <Radar
+            {...commonProperties}
+            curve={select('curve', curveOptions, 'catmullRomClosed')}
+            dotSize={32}
+            enableDotLabel={true}
+            dotLabelYOffset={3}
+            gridLabelOffset={36}
+        />
+    ))
+)
 
 const CustomSymbol = ({ size, color, borderWidth, borderColor }) => (
     <rect
@@ -69,28 +80,34 @@ const CustomSymbol = ({ size, color, borderWidth, borderColor }) => (
     />
 )
 
-stories.add('custom dot symbol', () => (
-    <Radar
-        {...commonProperties}
-        curve={select('curve', curveOptions, 'catmullRomClosed')}
-        dotSize={18}
-        dotSymbol={CustomSymbol}
-        dotBorderWidth={1}
-        dotBorderColor="inherit:darker(0.3)"
-        gridLabelOffset={36}
-    />
-))
+stories.add(
+    'custom dot symbol',
+    withInfo()(() => (
+        <Radar
+            {...commonProperties}
+            curve={select('curve', curveOptions, 'catmullRomClosed')}
+            dotSize={18}
+            dotSymbol={CustomSymbol}
+            dotBorderWidth={1}
+            dotBorderColor="inherit:darker(0.3)"
+            gridLabelOffset={36}
+        />
+    ))
+)
 
-stories.add('with formatted values', () => (
-    <Radar
-        {...commonProperties}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
+stories.add(
+    'with formatted values',
+    withInfo()(() => (
+        <Radar
+            {...commonProperties}
+            tooltipFormat={value =>
+                `${Number(value).toLocaleString('ru-RU', {
+                    minimumFractionDigits: 2,
+                })} ₽`
+            }
+        />
+    ))
+)
 
 const LabelComponent = ({ id, anchor }) => (
     <g transform={`translate(${anchor === 'end' ? -60 : anchor === 'middle' ? -30 : 0}, -20)`}>
@@ -108,6 +125,7 @@ const LabelComponent = ({ id, anchor }) => (
     </g>
 )
 
-stories.add('custom label component', () => (
-    <Radar {...commonProperties} gridLabel={LabelComponent} />
-))
+stories.add(
+    'custom label component',
+    withInfo()(() => <Radar {...commonProperties} gridLabel={LabelComponent} />)
+)
diff --git a/packages/sankey/stories/sankey.stories.js b/packages/sankey/stories/sankey.stories.js
index fdbb004aa4..00d439357a 100644
--- a/packages/sankey/stories/sankey.stories.js
+++ b/packages/sankey/stories/sankey.stories.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { generateSankeyData } from '@nivo/generators'
 import { Sankey } from '../index'
 
@@ -15,49 +16,72 @@ const stories = storiesOf('Sankey', module).addDecorator(story => (
     <div className="wrapper">{story()}</div>
 ))
 
-stories.add('default', () => <Sankey {...commonProperties} />)
+stories.add('default', withInfo()(() => <Sankey {...commonProperties} />))
 
-stories.add('custom align (right)', () => <Sankey {...commonProperties} align="right" />)
+stories.add(
+    'custom align (right)',
+    withInfo()(() => <Sankey {...commonProperties} align="right" />)
+)
 
-stories.add('outside labels', () => <Sankey {...commonProperties} labelPosition="outside" />)
+stories.add(
+    'outside labels',
+    withInfo()(() => <Sankey {...commonProperties} labelPosition="outside" />)
+)
 
-stories.add('vertical labels', () => (
-    <Sankey {...commonProperties} labelOrientation="vertical" labelPadding={20} />
-))
+stories.add(
+    'vertical labels',
+    withInfo()(() => <Sankey {...commonProperties} labelOrientation="vertical" labelPadding={20} />)
+)
 
-stories.add('nodes x padding', () => (
-    <Sankey {...commonProperties} nodePaddingX={6} nodeWidth={24} nodeBorderWidth={0} />
-))
+stories.add(
+    'nodes x padding',
+    withInfo()(() => (
+        <Sankey {...commonProperties} nodePaddingX={6} nodeWidth={24} nodeBorderWidth={0} />
+    ))
+)
 
-stories.add('contracting links', () => <Sankey {...commonProperties} linkContract={10} />)
+stories.add(
+    'contracting links',
+    withInfo()(() => <Sankey {...commonProperties} linkContract={10} />)
+)
 
-stories.add('click listener (console)', () => (
-    <Sankey {...commonProperties} onClick={(data, event) => console.log({ data, event })} />
-))
+stories.add(
+    'click listener (console)',
+    withInfo()(() => (
+        <Sankey {...commonProperties} onClick={(data, event) => console.log({ data, event })} />
+    ))
+)
 
-stories.add('label formatter', () => (
-    <Sankey {...commonProperties} label={node => `${node.id} 😁`} />
-))
+stories.add(
+    'label formatter',
+    withInfo()(() => <Sankey {...commonProperties} label={node => `${node.id} 😁`} />)
+)
 
-stories.add('custom tooltip', () => (
-    <Sankey
-        {...commonProperties}
-        nodeTooltip={node => <span>Custom tooltip for node: {node.label}</span>}
-        linkTooltip={node => (
-            <span>
-                Custom tooltip for link: {node.source.label} to {node.target.label}
-            </span>
-        )}
-    />
-))
+stories.add(
+    'custom tooltip',
+    withInfo()(() => (
+        <Sankey
+            {...commonProperties}
+            nodeTooltip={node => <span>Custom tooltip for node: {node.label}</span>}
+            linkTooltip={node => (
+                <span>
+                    Custom tooltip for link: {node.source.label} to {node.target.label}
+                </span>
+            )}
+        />
+    ))
+)
 
-stories.add('with formatted values', () => (
-    <Sankey
-        {...commonProperties}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
+stories.add(
+    'with formatted values',
+    withInfo()(() => (
+        <Sankey
+            {...commonProperties}
+            tooltipFormat={value =>
+                `${Number(value).toLocaleString('ru-RU', {
+                    minimumFractionDigits: 2,
+                })} ₽`
+            }
+        />
+    ))
+)
diff --git a/packages/scatterplot/stories/scatterplot.stories.js b/packages/scatterplot/stories/scatterplot.stories.js
index 680a775f56..39ce1ee13b 100644
--- a/packages/scatterplot/stories/scatterplot.stories.js
+++ b/packages/scatterplot/stories/scatterplot.stories.js
@@ -121,9 +121,9 @@ const sampleData = [
 ]
 
 const commonProps = {
-    width: 1000,
-    height: 600,
-    margin: { top: 60, right: 80, bottom: 80, left: 80 },
+    width: 900,
+    height: 500,
+    margin: { top: 20, right: 20, bottom: 80, left: 80 },
     symbolSize: 10,
     axisBottom: {
         format: d => `week ${d}`,
diff --git a/packages/sunburst/stories/sunburst.stories.js b/packages/sunburst/stories/sunburst.stories.js
index d7e5e06fb2..6cec51184c 100644
--- a/packages/sunburst/stories/sunburst.stories.js
+++ b/packages/sunburst/stories/sunburst.stories.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { withKnobs, boolean, select } from '@storybook/addon-knobs'
+import { withKnobs } from '@storybook/addon-knobs'
+import { withInfo } from '@storybook/addon-info'
 import { generateLibTree } from '@nivo/generators'
 import { Sunburst } from '../index'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
-    margin: { top: 0, right: 0, bottom: 0, left: 0 },
+    width: 900,
+    height: 500,
     data: generateLibTree(),
     identity: 'name',
     value: 'loc',
@@ -18,8 +18,9 @@ const stories = storiesOf('Sunburst', module)
 
 stories.addDecorator(story => <div className="wrapper">{story()}</div>).addDecorator(withKnobs)
 
-stories.add('default', () => <Sunburst {...commonProperties} />)
+stories.add('default', withInfo()(() => <Sunburst {...commonProperties} />))
 
-stories.add('with child color modifier', () => (
-    <Sunburst {...commonProperties} childColor="inherit:brighter(0.13)" />
-))
+stories.add(
+    'with child color modifier',
+    withInfo()(() => <Sunburst {...commonProperties} childColor="inherit:brighter(0.13)" />)
+)
diff --git a/packages/treemap/stories/treemap.stories.js b/packages/treemap/stories/treemap.stories.js
index d6d257091b..2591f8ba79 100644
--- a/packages/treemap/stories/treemap.stories.js
+++ b/packages/treemap/stories/treemap.stories.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { generateLibTree } from '@nivo/generators'
-import { TreeMap } from '../index'
 import { withInfo } from '@storybook/addon-info'
+import { TreeMap } from '../index'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 400,
     root: generateLibTree(),
     identity: 'name',
     value: 'loc',
diff --git a/packages/treemap/stories/treemapHtml.stories.js b/packages/treemap/stories/treemapHtml.stories.js
index 9c8c5b8ee4..a4471e1cb9 100644
--- a/packages/treemap/stories/treemapHtml.stories.js
+++ b/packages/treemap/stories/treemapHtml.stories.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { generateLibTree } from '@nivo/generators'
-import { TreeMapHtml } from '../index'
 import { withInfo } from '@storybook/addon-info'
+import { TreeMapHtml } from '../index'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 400,
     root: generateLibTree(),
     identity: 'name',
     value: 'loc',
diff --git a/packages/waffle/stories/waffle-canvas.stories.js b/packages/waffle/stories/waffle-canvas.stories.js
index dee97c1674..db9bfce925 100644
--- a/packages/waffle/stories/waffle-canvas.stories.js
+++ b/packages/waffle/stories/waffle-canvas.stories.js
@@ -20,8 +20,8 @@ const data = [
     },
 ]
 const commonProps = {
-    width: 460,
-    height: 600,
+    width: 900,
+    height: 500,
     total,
     data,
     rows: 48,
@@ -32,7 +32,7 @@ const stories = storiesOf('WaffleCanvas', module)
 
 stories.add('default', withInfo()(() => <WaffleCanvas {...commonProps} />))
 
-stories.add('colors', withInfo()(() => <WaffleCanvas {...commonProps} colors="d320b" />))
+stories.add('colors', withInfo()(() => <WaffleCanvas {...commonProps} colors="d310" />))
 
 stories.add(
     'using data color',
@@ -44,8 +44,8 @@ stories.add(
     withInfo()(() => (
         <WaffleCanvas
             {...commonProps}
-            width={600}
-            height={460}
+            width={900}
+            height={400}
             fillDirection="left"
             rows={36}
             columns={48}
diff --git a/packages/waffle/stories/waffle-html.stories.js b/packages/waffle/stories/waffle-html.stories.js
index fbc20bc33f..4604f08520 100644
--- a/packages/waffle/stories/waffle-html.stories.js
+++ b/packages/waffle/stories/waffle-html.stories.js
@@ -20,8 +20,8 @@ const data = [
     },
 ]
 const commonProps = {
-    width: 460,
-    height: 600,
+    width: 900,
+    height: 500,
     total,
     data,
     rows: 24,
@@ -32,7 +32,7 @@ const stories = storiesOf('WaffleHtml', module)
 
 stories.add('default', withInfo()(() => <WaffleHtml {...commonProps} />))
 
-stories.add('colors', withInfo()(() => <WaffleHtml {...commonProps} colors="d320b" />))
+stories.add('colors', withInfo()(() => <WaffleHtml {...commonProps} colors="d310" />))
 
 stories.add(
     'using data color',
@@ -44,8 +44,8 @@ stories.add(
     withInfo()(() => (
         <WaffleHtml
             {...commonProps}
-            width={600}
-            height={460}
+            width={900}
+            height={400}
             fillDirection="left"
             rows={18}
             columns={24}
diff --git a/packages/waffle/stories/waffle.stories.js b/packages/waffle/stories/waffle.stories.js
index 2c196270d8..0f04b04ed9 100644
--- a/packages/waffle/stories/waffle.stories.js
+++ b/packages/waffle/stories/waffle.stories.js
@@ -21,8 +21,8 @@ const data = [
     },
 ]
 const commonProps = {
-    width: 460,
-    height: 600,
+    width: 900,
+    height: 500,
     total,
     data,
     rows: 24,
@@ -33,7 +33,7 @@ const stories = storiesOf('Waffle', module)
 
 stories.add('default', withInfo()(() => <Waffle {...commonProps} />))
 
-stories.add('colors', withInfo()(() => <Waffle {...commonProps} colors="d320b" />))
+stories.add('colors', withInfo()(() => <Waffle {...commonProps} colors="d310" />))
 
 stories.add(
     'using data color',
@@ -71,8 +71,8 @@ stories.add(
     withInfo()(() => (
         <Waffle
             {...commonProps}
-            width={600}
-            height={460}
+            width={900}
+            height={400}
             fillDirection="left"
             rows={18}
             columns={24}
@@ -155,17 +155,17 @@ class WaffleLegendToggle extends Component {
             <Waffle
                 {...commonProps}
                 hiddenIds={hiddenIds}
-                margin={{ left: 110 }}
+                margin={{ top: 40 }}
                 legends={[
                     {
-                        anchor: 'left',
-                        direction: 'column',
-                        itemsSpacing: 4,
+                        anchor: 'top',
+                        direction: 'row',
+                        translateY: -40,
+                        itemsSpacing: 10,
                         itemWidth: 100,
                         itemHeight: 20,
                         symbolSize: 20,
                         itemTextColor: '#555',
-                        translateX: -110,
                         onClick: this.toggle,
                         effects: [
                             {