text: import React from '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 {AreaSeries, LineSeries} from 'react-vis';
  
  import {generateLinearData, nonUniformX} from './storybook-data.js';
  import {SimpleChartWrapper, jsxOptions} from './storybook-utils.js';
  
  function styledAreaSeries(props) {
    return (
      <AreaSeries
        data={props.data}
        fill={color('fill', props.stroke || '#12939a')}
        opacity={number('opacity', props.opacity || 1, {max: 1, min: 0, range: true, step: 0.01})}
        stroke={color('stroke', props.stroke || '#12939a')}
        style={object('style', props.style || {})}
      />
    );
  }
  
  storiesOf('Series/AreaSeries/Base', module)
    .addDecorator(withKnobs)
    .addWithJSX(
      'Single Area chart',
      () => {
        return (
          <SimpleChartWrapper>
            <AreaSeries opacity={0.5} data={generateLinearData({key: 'area1'})} />
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    )
    .addDecorator(withKnobs)
    .addWithJSX(
      'Single Area chart paired with LineSeries',
      () => {
        return (
          <SimpleChartWrapper>
            <AreaSeries opacity={0.25} data={generateLinearData({key: 'area1'})} stroke="transparent" />
            <LineSeries stroke="#12939a" data={generateLinearData({key: 'area1'})} />
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    )
    .addWithJSX(
      'With negative numbers',
      () => {
        return (
          <SimpleChartWrapper yDomain={[-3, 3]}>
            <AreaSeries opacity={0.5} data={generateLinearData({startValue: 0, key: 'area-neg'})} />
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    )
    .addWithJSX(
      'With non-uniform x numbers',
      () => {
        return (
          <SimpleChartWrapper>
            <AreaSeries
              opacity={0.5}
              data={generateLinearData({key: 'area-random-x', extraParams: [['x', nonUniformX()]]})}
            />
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    )
    .addWithJSX(
      'Multiple Area series',
      () => {
        return (
          <SimpleChartWrapper>
            <AreaSeries opacity={0.25} data={generateLinearData({key: 'area1'})} />
            <AreaSeries opacity={0.25} data={generateLinearData({key: 'area2'})} />
            <AreaSeries opacity={0.25} data={generateLinearData({key: 'area3'})} />
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    )
    .addWithJSX(
      'Multiple stacked Area series',
      () => {
        return (
          <SimpleChartWrapper stackBy="y" yDomain={[0, 50]}>
            <AreaSeries opacity={0.5} data={generateLinearData({key: 'area1'})} />
            <AreaSeries opacity={0.5} data={generateLinearData({key: 'area2'})} />
            <AreaSeries opacity={0.5} data={generateLinearData({key: 'area3'})} />
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    );
  
  storiesOf('Series/AreaSeries/Styling', module)
    .addDecorator(withKnobs)
    .addWithJSX(
      'opacity',
      () => {
        return (
          <SimpleChartWrapper>
            {styledAreaSeries({data: generateLinearData({key: 'area1'}), opacity: 0.75})}
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    )
    .addWithJSX(
      'stroke',
      () => {
        return (
          <SimpleChartWrapper>
            {styledAreaSeries({data: generateLinearData({key: 'area1'}), stroke: '#2c51be'})}
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    )
    .addWithJSX(
      'style object',
      () => {
        return (
          <SimpleChartWrapper>
            {styledAreaSeries({
              data: generateLinearData({key: 'area1'}),
              style: {
                stroke: '#E48000',
                strokeAreajoin: 'round',
                strokeWidth: '3px'
              }
            })}
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    );
  
  storiesOf('Series/AreaSeries/Curve', module)
    .addDecorator(withKnobs)
    .addWithJSX(
      'Curve',
      () => {
        return (
          <SimpleChartWrapper>
            <AreaSeries
              opacity={0.5}
              data={generateLinearData({key: 'area1'})}
              curve={select(
                'curve',
                {
                  curveBasis: 'curveBasis',
                  curveCatmullRom: 'curveCatmullRom',
                  curveCardinal: 'curveCardinal',
                  curveAreaar: 'curveAreaar',
                  curveStep: 'curveStep',
                  curveStepAfter: 'curveStepAfter',
                  curveStepBefore: 'curveStepBefore',
                  none: null
                },
                'curveBasis'
              )}
            />
          </SimpleChartWrapper>
        );
      },
      jsxOptions
    );
  