From 8d4085e32de6bedbb7a360da3a7d56168f3ad970 Mon Sep 17 00:00:00 2001
From: Jerome Cukier <jckr.github@gmail.com>
Date: Mon, 26 Mar 2018 15:01:32 -0700
Subject: [PATCH] storybook-jsx-addon-syntax-fix (#763)

---
 website/storybook/axis-story.js       | 303 +++++++++++++-----------
 website/storybook/barseries-story.js  | 243 +++++++++++---------
 website/storybook/lineseries-story.js | 199 +++++++++-------
 website/storybook/markseries-story.js | 317 +++++++++++++++-----------
 website/storybook/storybook-utils.js  |   2 +-
 5 files changed, 614 insertions(+), 450 deletions(-)

diff --git a/website/storybook/axis-story.js b/website/storybook/axis-story.js
index 325f8d7dd..6409de3fa 100644
--- a/website/storybook/axis-story.js
+++ b/website/storybook/axis-story.js
@@ -1,6 +1,9 @@
 import React from 'react';
 
-import {storiesOf} from '@storybook/react';
+import {setAddon, storiesOf} from '@storybook/react';
+import JSXAddon from 'storybook-addon-jsx';
+
+setAddon(JSXAddon);
 import {withKnobs, number, select} from '@storybook/addon-knobs/react';
 
 import {LineSeries, VerticalBarSeries, XAxis, YAxis} from 'react-vis';
@@ -10,139 +13,179 @@ import {SimpleChartWrapperNoAxes, jsxOptions} from './storybook-utils';
 
 storiesOf('Axes and scales/Axis Formatting/Base', module)
   .addDecorator(withKnobs)
-  .addWithJSX('Axis orientation', () => {
-    const XAxisOrientation = select('XAxis.orientation', {bottom: 'bottom', top: 'top'}, 'bottom');
-    const YAxisOrientation = select('YAxis.orientation', {left: 'left', right: 'right'}, 'left');
-    return (
-      <SimpleChartWrapperNoAxes
-        margin={{
-          ...(XAxisOrientation === 'top' ? {bottom: 20, top: 40} : {}),
-          ...(YAxisOrientation === 'right' ? {left: 10, right: 40} : {})
-        }}
-      >
-        <XAxis orientation={XAxisOrientation} />
-        <YAxis orientation={YAxisOrientation} />
-        <LineSeries data={generateLinearData({key: 'line1'})} />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions)
-  .addWithJSX('Axis titles', () => {
-    const XAxisPosition = select('XAxis.position', {start: 'start', middle: 'middle', end: 'end'}, 'end');
-    const YAxisPosition = select('YAxis.position', {start: 'start', middle: 'middle', end: 'end'}, 'end');
+  .addWithJSX(
+    'Axis orientation',
+    () => {
+      const XAxisOrientation = select('XAxis.orientation', {bottom: 'bottom', top: 'top'}, 'bottom');
+      const YAxisOrientation = select('YAxis.orientation', {left: 'left', right: 'right'}, 'left');
+      return (
+        <SimpleChartWrapperNoAxes
+          margin={{
+            ...(XAxisOrientation === 'top' ? {bottom: 20, top: 40} : {}),
+            ...(YAxisOrientation === 'right' ? {left: 10, right: 40} : {})
+          }}
+        >
+          <XAxis orientation={XAxisOrientation} />
+          <YAxis orientation={YAxisOrientation} />
+          <LineSeries data={generateLinearData({key: 'line1'})} />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'Axis titles',
+    () => {
+      const XAxisPosition = select('XAxis.position', {start: 'start', middle: 'middle', end: 'end'}, 'end');
+      const YAxisPosition = select('YAxis.position', {start: 'start', middle: 'middle', end: 'end'}, 'end');
 
-    return (
-      <SimpleChartWrapperNoAxes >
-        <XAxis title="x-axis" position={XAxisPosition} />
-        <YAxis title="y-axis" position={YAxisPosition} />
-        <LineSeries data={generateLinearData({key: 'line1'})} />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions)
-  .addWithJSX('Tick total', () => {
-    const xTickTotal = number('XAxis.tickTotal', 10, {max: 20, min: 0, range: true});
-    const yTickTotal = number('YAxis.tickTotal', 10, {max: 20, min: 0, range: true});
+      return (
+        <SimpleChartWrapperNoAxes>
+          <XAxis title="x-axis" position={XAxisPosition} />
+          <YAxis title="y-axis" position={YAxisPosition} />
+          <LineSeries data={generateLinearData({key: 'line1'})} />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'Tick total',
+    () => {
+      const xTickTotal = number('XAxis.tickTotal', 10, {max: 20, min: 0, range: true});
+      const yTickTotal = number('YAxis.tickTotal', 10, {max: 20, min: 0, range: true});
 
-    return (
-      <SimpleChartWrapperNoAxes>
-        <XAxis tickTotal={xTickTotal} />
-        <YAxis tickTotal={yTickTotal} />
-        <LineSeries data={generateLinearData({key: 'line1'})} />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions)
-  .addWithJSX('Tick Size', () => {
-    const xTickSize = number('XAxis.tickSize', 6, {max: 10, min: 0, range: true});
-    const yTickSize = number('YAxis.tickSize', 6, {max: 10, min: 0, range: true});
+      return (
+        <SimpleChartWrapperNoAxes>
+          <XAxis tickTotal={xTickTotal} />
+          <YAxis tickTotal={yTickTotal} />
+          <LineSeries data={generateLinearData({key: 'line1'})} />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'Tick Size',
+    () => {
+      const xTickSize = number('XAxis.tickSize', 6, {max: 10, min: 0, range: true});
+      const yTickSize = number('YAxis.tickSize', 6, {max: 10, min: 0, range: true});
 
-    return (
-      <SimpleChartWrapperNoAxes noHorizontalGridLines noVerticalGridLines>
-        <XAxis tickSize={xTickSize} />
-        <YAxis tickSize={yTickSize} />
-        <LineSeries data={generateLinearData({key: 'line1'})} />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions)
-  .addWithJSX('Tick Size (Inner)', () => {
-    const xTickSize = number('XAxis.tickSizeInner', 6, {max: 10, min: 0, range: true});
-    const yTickSize = number('YAxis.tickSizeInner', 6, {max: 10, min: 0, range: true});
+      return (
+        <SimpleChartWrapperNoAxes noHorizontalGridLines noVerticalGridLines>
+          <XAxis tickSize={xTickSize} />
+          <YAxis tickSize={yTickSize} />
+          <LineSeries data={generateLinearData({key: 'line1'})} />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'Tick Size (Inner)',
+    () => {
+      const xTickSize = number('XAxis.tickSizeInner', 6, {max: 10, min: 0, range: true});
+      const yTickSize = number('YAxis.tickSizeInner', 6, {max: 10, min: 0, range: true});
 
-    return (
-      <SimpleChartWrapperNoAxes noHorizontalGridLines noVerticalGridLines>
-        <XAxis tickSizeInner={xTickSize} />
-        <YAxis tickSizeInner={yTickSize} />
-        <LineSeries data={generateLinearData({key: 'line1'})} />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions)
-  .addWithJSX('Tick Size (Outer)', () => {
-    const xTickSize = number('XAxis.tickSizeOuter', 6, {max: 10, min: 0, range: true});
-    const yTickSize = number('YAxis.tickSizeOuter', 6, {max: 10, min: 0, range: true});
+      return (
+        <SimpleChartWrapperNoAxes noHorizontalGridLines noVerticalGridLines>
+          <XAxis tickSizeInner={xTickSize} />
+          <YAxis tickSizeInner={yTickSize} />
+          <LineSeries data={generateLinearData({key: 'line1'})} />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'Tick Size (Outer)',
+    () => {
+      const xTickSize = number('XAxis.tickSizeOuter', 6, {max: 10, min: 0, range: true});
+      const yTickSize = number('YAxis.tickSizeOuter', 6, {max: 10, min: 0, range: true});
 
-    return (
-      <SimpleChartWrapperNoAxes noHorizontalGridLines noVerticalGridLines>
-        <XAxis tickSizeOuter={xTickSize} />
-        <YAxis tickSizeOuter={yTickSize} />
-        <LineSeries data={generateLinearData({key: 'line1'})} />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions)
-  .addWithJSX('Tick orientation', () => {
-    const tickLabelAngle = number('tickLabelAngle', 0, {max: 90, min: -90, range: true});
-    return (
-      <SimpleChartWrapperNoAxes margin={{bottom: 80}}>
-        <XAxis tickFormat={d => new Date(d).toLocaleDateString()} tickLabelAngle={tickLabelAngle} />
-        <YAxis />
-        <LineSeries
-          data={generateLinearData({
-            key: 'line-with-time',
-            extraParams: [['x', getTime({})]]
-          })}
-        />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions);
+      return (
+        <SimpleChartWrapperNoAxes noHorizontalGridLines noVerticalGridLines>
+          <XAxis tickSizeOuter={xTickSize} />
+          <YAxis tickSizeOuter={yTickSize} />
+          <LineSeries data={generateLinearData({key: 'line1'})} />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'Tick orientation',
+    () => {
+      const tickLabelAngle = number('tickLabelAngle', 0, {max: 90, min: -90, range: true});
+      return (
+        <SimpleChartWrapperNoAxes margin={{bottom: 80}}>
+          <XAxis tickFormat={d => new Date(d).toLocaleDateString()} tickLabelAngle={tickLabelAngle} />
+          <YAxis />
+          <LineSeries
+            data={generateLinearData({
+              key: 'line-with-time',
+              extraParams: [['x', getTime({})]]
+            })}
+          />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  );
 storiesOf('Axes and scales/Scales', module)
   .addDecorator(withKnobs)
-  .addWithJSX('time Scale', () => {
-    return (
-      <SimpleChartWrapperNoAxes margin={{right: 20}}>
-        <XAxis tickFormat={d => new Date(d).toLocaleDateString()} />
-        <YAxis />
-        <LineSeries
-          data={generateLinearData({
-            key: 'line-with-time',
-            extraParams: [['x', getTime({})]]
-          })}
-        />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions)
-  .addWithJSX('category scale', () => {
-    const data = generateLinearData({
-      nbPoints: 8,
-      changeRatio: 0.4,
-      key: 'bar1'
-    });
-    return (
-      <SimpleChartWrapperNoAxes xType="ordinal">
-        <XAxis />
-        <YAxis />
-        <VerticalBarSeries data={data} />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions)
-  .addWithJSX('ordinal scale', () => {
-    const data = generateLinearData({
-      nbPoints: 8,
-      changeRatio: 0.4,
-      key: 'bar-with-words',
-      extraParams: [['x', getWord({})]]
-    });
-    return (
-      <SimpleChartWrapperNoAxes xType="ordinal">
-        <XAxis />
-        <YAxis />
-        <VerticalBarSeries data={data} />
-      </SimpleChartWrapperNoAxes>
-    );
-  }, jsxOptions);
+  .addWithJSX(
+    'time Scale',
+    () => {
+      return (
+        <SimpleChartWrapperNoAxes margin={{right: 20}}>
+          <XAxis tickFormat={d => new Date(d).toLocaleDateString()} />
+          <YAxis />
+          <LineSeries
+            data={generateLinearData({
+              key: 'line-with-time',
+              extraParams: [['x', getTime({})]]
+            })}
+          />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'category scale',
+    () => {
+      const data = generateLinearData({
+        nbPoints: 8,
+        changeRatio: 0.4,
+        key: 'bar1'
+      });
+      return (
+        <SimpleChartWrapperNoAxes xType="ordinal">
+          <XAxis />
+          <YAxis />
+          <VerticalBarSeries data={data} />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'ordinal scale',
+    () => {
+      const data = generateLinearData({
+        nbPoints: 8,
+        changeRatio: 0.4,
+        key: 'bar-with-words',
+        extraParams: [['x', getWord({})]]
+      });
+      return (
+        <SimpleChartWrapperNoAxes xType="ordinal">
+          <XAxis />
+          <YAxis />
+          <VerticalBarSeries data={data} />
+        </SimpleChartWrapperNoAxes>
+      );
+    },
+    jsxOptions
+  );
diff --git a/website/storybook/barseries-story.js b/website/storybook/barseries-story.js
index dc96728a3..a3ca51e76 100644
--- a/website/storybook/barseries-story.js
+++ b/website/storybook/barseries-story.js
@@ -1,6 +1,9 @@
 import React from 'react';
 
-import {storiesOf} from '@storybook/react';
+import {setAddon, storiesOf} from '@storybook/react';
+import JSXAddon from 'storybook-addon-jsx';
+
+setAddon(JSXAddon);
 import {withKnobs, color, number, object, text} from '@storybook/addon-knobs/react';
 
 import {HorizontalBarSeries, VerticalBarSeries} from 'react-vis';
@@ -31,52 +34,64 @@ function addBarSeriesStory(isVertical = true) {
 
   storiesOf(`Series/${seriesName}/Base`, module)
     .addDecorator(withKnobs)
-    .addWithJSX(`single ${seriesName}`, () => {
-      return (
-        <SimpleChartWrapper {...xyPlotParams}>
-          <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'})} />
-        </SimpleChartWrapper>
-      );
-    }, jsxOptions)
-    .addWithJSX(`multiple ${seriesName} - clustered`, () => {
-      return (
-        <SimpleChartWrapper {...xyPlotParams}>
-          <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'})} />
-          <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar2'})} />
-          <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar3'})} />
-        </SimpleChartWrapper>
-      );
-    }, jsxOptions)
-    .addWithJSX(`multiple ${seriesName} - stacked`, () => {
-      return (
-        <SimpleChartWrapper
-          {...(isVertical ?
-            {
-              stackBy: 'y',
-              xDomain: [0, 8],
-              yDomain: [0, 50]
-            } :
-            {
-              stackBy: 'x',
-              xDomain: [0, 50],
-              yDomain: [0, 8]
-            })}
-        >
-          <Series
-            cluster={text('BarSeries.1.cluster', 'stack 1')}
-            data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'})}
-          />
-          <Series
-            cluster={text('BarSeries.2.cluster', 'stack 1')}
-            data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar2'})}
-          />
-          <Series
-            cluster={text('BarSeries.3.cluster', 'stack 1')}
-            data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar3'})}
-          />
-        </SimpleChartWrapper>
-      );
-    }, jsxOptions);
+    .addWithJSX(
+      `single ${seriesName}`,
+      () => {
+        return (
+          <SimpleChartWrapper {...xyPlotParams}>
+            <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'})} />
+          </SimpleChartWrapper>
+        );
+      },
+      jsxOptions
+    )
+    .addWithJSX(
+      `multiple ${seriesName} - clustered`,
+      () => {
+        return (
+          <SimpleChartWrapper {...xyPlotParams}>
+            <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'})} />
+            <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar2'})} />
+            <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar3'})} />
+          </SimpleChartWrapper>
+        );
+      },
+      jsxOptions
+    )
+    .addWithJSX(
+      `multiple ${seriesName} - stacked`,
+      () => {
+        return (
+          <SimpleChartWrapper
+            {...(isVertical ?
+              {
+                stackBy: 'y',
+                xDomain: [0, 8],
+                yDomain: [0, 50]
+              } :
+              {
+                stackBy: 'x',
+                xDomain: [0, 50],
+                yDomain: [0, 8]
+              })}
+          >
+            <Series
+              cluster={text('BarSeries.1.cluster', 'stack 1')}
+              data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'})}
+            />
+            <Series
+              cluster={text('BarSeries.2.cluster', 'stack 1')}
+              data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar2'})}
+            />
+            <Series
+              cluster={text('BarSeries.3.cluster', 'stack 1')}
+              data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar3'})}
+            />
+          </SimpleChartWrapper>
+        );
+      },
+      jsxOptions
+    );
 
   storiesOf(`Series/${seriesName}/Styling/By datapoint`, module)
     .addDecorator(withKnobs)
@@ -96,66 +111,86 @@ function addBarSeriesStory(isVertical = true) {
         </SimpleChartWrapper>
       );
     })
-    .addWithJSX('opacity', () => {
-      return (
-        <SimpleChartWrapper {...xyPlotParams}>
-          <Series
-            data={dataGenerator({
-              nbPoints: 8,
-              changeRatio: 0.4,
-              extraParams: [['opacity', random({min: 0.5, max: 1})]],
-              key: 'bar-opacity-1'
-            })}
-          />
-        </SimpleChartWrapper>
-      );
-    }, jsxOptions);
+    .addWithJSX(
+      'opacity',
+      () => {
+        return (
+          <SimpleChartWrapper {...xyPlotParams}>
+            <Series
+              data={dataGenerator({
+                nbPoints: 8,
+                changeRatio: 0.4,
+                extraParams: [['opacity', random({min: 0.5, max: 1})]],
+                key: 'bar-opacity-1'
+              })}
+            />
+          </SimpleChartWrapper>
+        );
+      },
+      jsxOptions
+    );
 
   storiesOf(`Series/${seriesName}/Styling/At series level`, module)
     .addDecorator(withKnobs)
-    .addWithJSX('fill', () => {
-      return (
-        <SimpleChartWrapper {...xyPlotParams}>
-          {styledSeries({
-            data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),
-            fill: '#2c51be'
-          })}
-        </SimpleChartWrapper>
-      );
-    }, jsxOptions)
-    .addWithJSX('opacity', () => {
-      return (
-        <SimpleChartWrapper {...xyPlotParams}>
-          {styledSeries({
-            data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),
-            opacity: 0.5
-          })}
-        </SimpleChartWrapper>
-      );
-    }, jsxOptions)
-    .addWithJSX('stroke', () => {
-      return (
-        <SimpleChartWrapper {...xyPlotParams}>
-          {styledSeries({
-            data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),
-            stroke: '#2c51be'
-          })}
-        </SimpleChartWrapper>
-      );
-    }, jsxOptions)
-    .addWithJSX('style', () => {
-      return (
-        <SimpleChartWrapper {...xyPlotParams}>
-          {styledSeries({
-            data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),
-            style: {
-              stroke: '#2c51be',
-              strokeWidth: '3px'
-            }
-          })}
-        </SimpleChartWrapper>
-      );
-    }, jsxOptions);
+    .addWithJSX(
+      'fill',
+      () => {
+        return (
+          <SimpleChartWrapper {...xyPlotParams}>
+            {styledSeries({
+              data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),
+              fill: '#2c51be'
+            })}
+          </SimpleChartWrapper>
+        );
+      },
+      jsxOptions
+    )
+    .addWithJSX(
+      'opacity',
+      () => {
+        return (
+          <SimpleChartWrapper {...xyPlotParams}>
+            {styledSeries({
+              data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),
+              opacity: 0.5
+            })}
+          </SimpleChartWrapper>
+        );
+      },
+      jsxOptions
+    )
+    .addWithJSX(
+      'stroke',
+      () => {
+        return (
+          <SimpleChartWrapper {...xyPlotParams}>
+            {styledSeries({
+              data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),
+              stroke: '#2c51be'
+            })}
+          </SimpleChartWrapper>
+        );
+      },
+      jsxOptions
+    )
+    .addWithJSX(
+      'style',
+      () => {
+        return (
+          <SimpleChartWrapper {...xyPlotParams}>
+            {styledSeries({
+              data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),
+              style: {
+                stroke: '#2c51be',
+                strokeWidth: '3px'
+              }
+            })}
+          </SimpleChartWrapper>
+        );
+      },
+      jsxOptions
+    );
 }
 addBarSeriesStory();
 addBarSeriesStory(false);
diff --git a/website/storybook/lineseries-story.js b/website/storybook/lineseries-story.js
index 25c6b87b4..194925bbc 100644
--- a/website/storybook/lineseries-story.js
+++ b/website/storybook/lineseries-story.js
@@ -1,6 +1,9 @@
 import React from 'react';
 
-import {storiesOf} from '@storybook/react';
+import {setAddon, storiesOf} from '@storybook/react';
+import JSXAddon from 'storybook-addon-jsx';
+
+setAddon(JSXAddon);
 import {withKnobs, color, number, object, select, text} from '@storybook/addon-knobs/react';
 
 import {LineSeries} from 'react-vis';
@@ -35,90 +38,122 @@ storiesOf('Series/LineSeries/Base', module)
     },
     jsxOptions
   )
-  .addWithJSX('Multiple Line series', () => {
-    return (
-      <SimpleChartWrapper>
-        <LineSeries data={generateLinearData({key: 'line1'})} />
-        <LineSeries data={generateLinearData({key: 'line2'})} />
-        <LineSeries data={generateLinearData({key: 'line3'})} />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions);
+  .addWithJSX(
+    'Multiple Line series',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          <LineSeries data={generateLinearData({key: 'line1'})} />
+          <LineSeries data={generateLinearData({key: 'line2'})} />
+          <LineSeries data={generateLinearData({key: 'line3'})} />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  );
 
 storiesOf('Series/LineSeries/Styling', module)
   .addDecorator(withKnobs)
-  .addWithJSX('opacity', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledLineSeries({data: generateLinearData({key: 'line1'}), opacity: 0.5})}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('stroke', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledLineSeries({data: generateLinearData({key: 'line1'}), stroke: '#2c51be'})}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('strokeDasharray', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledLineSeries({data: generateLinearData({key: 'line1'}), strokeDasharray: '5, 5, 1, 5'})}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('strokeStyle', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledLineSeries({data: generateLinearData({key: 'line1'}), strokeStyle: 'dashed'})}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('strokeWidth', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledLineSeries({data: generateLinearData({key: 'line1'}), strokeWidth: '5px'})}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('style object', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledLineSeries({
-          data: generateLinearData({key: 'line1'}),
-          style: {
-            stroke: '#E48000',
-            strokeLinejoin: 'round',
-            strokeWidth: '3px'
-          }
-        })}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions);
+  .addWithJSX(
+    'opacity',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledLineSeries({data: generateLinearData({key: 'line1'}), opacity: 0.5})}
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'stroke',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledLineSeries({data: generateLinearData({key: 'line1'}), stroke: '#2c51be'})}
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'strokeDasharray',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledLineSeries({data: generateLinearData({key: 'line1'}), strokeDasharray: '5, 5, 1, 5'})}
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'strokeStyle',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledLineSeries({data: generateLinearData({key: 'line1'}), strokeStyle: 'dashed'})}
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'strokeWidth',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledLineSeries({data: generateLinearData({key: 'line1'}), strokeWidth: '5px'})}
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'style object',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledLineSeries({
+            data: generateLinearData({key: 'line1'}),
+            style: {
+              stroke: '#E48000',
+              strokeLinejoin: 'round',
+              strokeWidth: '3px'
+            }
+          })}
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  );
 
 storiesOf('Series/LineSeries/Curve', module)
   .addDecorator(withKnobs)
-  .addWithJSX('Curve', () => {
-    return (
-      <SimpleChartWrapper>
-        <LineSeries
-          data={generateLinearData({key: 'line1'})}
-          curve={select(
-            'curve',
-            {
-              curveBasis: 'curveBasis',
-              curveCatmullRom: 'curveCatmullRom',
-              curveCardinal: 'curveCardinal',
-              curveLinear: 'curveLinear',
-              curveStep: 'curveStep',
-              curveStepAfter: 'curveStepAfter',
-              curveStepBefore: 'curveStepBefore',
-              none: null
-            },
-            'curveBasis'
-          )}
-        />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions);
+  .addWithJSX(
+    'Curve',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          <LineSeries
+            data={generateLinearData({key: 'line1'})}
+            curve={select(
+              'curve',
+              {
+                curveBasis: 'curveBasis',
+                curveCatmullRom: 'curveCatmullRom',
+                curveCardinal: 'curveCardinal',
+                curveLinear: 'curveLinear',
+                curveStep: 'curveStep',
+                curveStepAfter: 'curveStepAfter',
+                curveStepBefore: 'curveStepBefore',
+                none: null
+              },
+              'curveBasis'
+            )}
+          />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  );
diff --git a/website/storybook/markseries-story.js b/website/storybook/markseries-story.js
index 8cd25755a..f649892e8 100644
--- a/website/storybook/markseries-story.js
+++ b/website/storybook/markseries-story.js
@@ -1,6 +1,9 @@
 import React from 'react';
 
-import {storiesOf} from '@storybook/react';
+import {setAddon, storiesOf} from '@storybook/react';
+import JSXAddon from 'storybook-addon-jsx';
+
+setAddon(JSXAddon);
 import {withKnobs, color, number, object, select} from '@storybook/addon-knobs/react';
 
 import {MarkSeries} from 'react-vis';
@@ -24,143 +27,191 @@ function styledMarkSeries(props) {
 
 storiesOf('Series/MarkSeries/Base', module)
   .addDecorator(withKnobs)
-  .addWithJSX('Single scatterplot', () => {
-    return (
-      <SimpleChartWrapper>
-        <MarkSeries data={generateScatterplotData({key: 'scatter1'})} />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('Multiple MarkSeries', () => {
-    return (
-      <SimpleChartWrapper>
-        <MarkSeries data={generateScatterplotData({key: 'scatter1'})} />
-        <MarkSeries data={generateScatterplotData({key: 'scatter2'})} />
-        <MarkSeries data={generateScatterplotData({key: 'scatter3'})} />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions);
+  .addWithJSX(
+    'Single scatterplot',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          <MarkSeries data={generateScatterplotData({key: 'scatter1'})} />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'Multiple MarkSeries',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          <MarkSeries data={generateScatterplotData({key: 'scatter1'})} />
+          <MarkSeries data={generateScatterplotData({key: 'scatter2'})} />
+          <MarkSeries data={generateScatterplotData({key: 'scatter3'})} />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  );
 
 storiesOf('Series/MarkSeries/Styling/By Datapoint', module)
   .addDecorator(withKnobs)
-  .addWithJSX('color', () => {
-    const {colorScale, colorRange} = chooseColorScale();
-    return (
-      <SimpleChartWrapper colorScale={colorScale} colorRange={colorRange}>
-        <MarkSeries
-          data={generateScatterplotData({
-            key: 'scatter-color-1',
-            extraParams: [['color', intRandom({})]]
+  .addWithJSX(
+    'color',
+    () => {
+      const {colorScale, colorRange} = chooseColorScale();
+      return (
+        <SimpleChartWrapper colorScale={colorScale} colorRange={colorRange}>
+          <MarkSeries
+            data={generateScatterplotData({
+              key: 'scatter-color-1',
+              extraParams: [['color', intRandom({})]]
+            })}
+          />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'fill',
+    () => {
+      const {colorScale, colorRange} = chooseColorScale();
+      return (
+        <SimpleChartWrapper fillScale={colorScale} fillRange={colorRange}>
+          <MarkSeries
+            data={generateScatterplotData({
+              key: 'scatter-fill-1',
+              extraParams: [['fill', intRandom({})]]
+            })}
+          />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'opacity',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          <MarkSeries
+            data={generateScatterplotData({
+              key: 'scatter-opacity-1',
+              extraParams: [['opacity', random({min: 0.5})]]
+            })}
+          />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'size',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          <MarkSeries
+            data={generateScatterplotData({
+              key: 'scatter-size-1',
+              extraParams: [['size', random({min: 5, max: 20})]]
+            })}
+          />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'stroke',
+    () => {
+      const {colorScale, colorRange} = chooseColorScale();
+      return (
+        <SimpleChartWrapper strokeScale={colorScale} strokeRange={colorRange}>
+          <MarkSeries
+            data={generateScatterplotData({
+              key: 'scatter-stroke-1',
+              extraParams: [['stroke', intRandom({})]]
+            })}
+            style={{strokeWidth: '2px'}}
+          />
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  );
+
+storiesOf('Series/MarkSeries/Styling/At series level', module)
+  .addDecorator(withKnobs)
+  .addWithJSX(
+    'fill',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledMarkSeries({
+            data: generateScatterplotData({key: 'scatter1'}),
+            fill: '#2c51be'
           })}
-        />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('fill', () => {
-    const {colorScale, colorRange} = chooseColorScale();
-    return (
-      <SimpleChartWrapper fillScale={colorScale} fillRange={colorRange}>
-        <MarkSeries
-          data={generateScatterplotData({
-            key: 'scatter-fill-1',
-            extraParams: [['fill', intRandom({})]]
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'opacity',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledMarkSeries({
+            data: generateScatterplotData({key: 'scatter1'}),
+            opacity: 0.5
           })}
-        />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('opacity', () => {
-    return (
-      <SimpleChartWrapper>
-        <MarkSeries
-          data={generateScatterplotData({
-            key: 'scatter-opacity-1',
-            extraParams: [['opacity', random({min: 0.5})]]
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'stroke',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledMarkSeries({
+            data: generateScatterplotData({key: 'scatter1'}),
+            stroke: '#2c51be'
           })}
-        />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('size', () => {
-    return (
-      <SimpleChartWrapper>
-        <MarkSeries
-          data={generateScatterplotData({
-            key: 'scatter-size-1',
-            extraParams: [['size', random({min: 5, max: 20})]]
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'strokeWidth',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledMarkSeries({
+            data: generateScatterplotData({key: 'scatter1'}),
+            strokeWidth: '3px'
           })}
-        />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('stroke', () => {
-    const {colorScale, colorRange} = chooseColorScale();
-    return (
-      <SimpleChartWrapper strokeScale={colorScale} strokeRange={colorRange}>
-        <MarkSeries
-          data={generateScatterplotData({
-            key: 'scatter-stroke-1',
-            extraParams: [['stroke', intRandom({})]]
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  )
+  .addWithJSX(
+    'style',
+    () => {
+      return (
+        <SimpleChartWrapper>
+          {styledMarkSeries({
+            data: generateScatterplotData({key: 'scatter1'}),
+            style: {
+              stroke: '#E48000',
+              strokeOpacity: 0.5,
+              strokeWidth: '3px'
+            }
           })}
-          style={{strokeWidth: '2px'}}
-        />
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions);
-
-storiesOf('Series/MarkSeries/Styling/At series level', module)
-  .addDecorator(withKnobs)
-  .addWithJSX('fill', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledMarkSeries({
-          data: generateScatterplotData({key: 'scatter1'}),
-          fill: '#2c51be'
-        })}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('opacity', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledMarkSeries({
-          data: generateScatterplotData({key: 'scatter1'}),
-          opacity: 0.5
-        })}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('stroke', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledMarkSeries({
-          data: generateScatterplotData({key: 'scatter1'}),
-          stroke: '#2c51be'
-        })}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('strokeWidth', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledMarkSeries({
-          data: generateScatterplotData({key: 'scatter1'}),
-          strokeWidth: '3px'
-        })}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions)
-  .addWithJSX('style', () => {
-    return (
-      <SimpleChartWrapper>
-        {styledMarkSeries({
-          data: generateScatterplotData({key: 'scatter1'}),
-          style: {
-            stroke: '#E48000',
-            strokeOpacity: 0.5,
-            strokeWidth: '3px'
-          }
-        })}
-      </SimpleChartWrapper>
-    );
-  }, jsxOptions);
+        </SimpleChartWrapper>
+      );
+    },
+    jsxOptions
+  );
diff --git a/website/storybook/storybook-utils.js b/website/storybook/storybook-utils.js
index 2d10ff90d..c12b3ee10 100644
--- a/website/storybook/storybook-utils.js
+++ b/website/storybook/storybook-utils.js
@@ -80,5 +80,5 @@ export const jsxOptions = {
     }
     return component.type.displayName;
   },
-  filterProps: ['className', 'nullAccessor']
+  filterProps: ['className', 'getNull', 'nullAccessor']
 };