Add default style story

This commit is contained in:
2018-07-02 11:14:51 +05:30
parent c6c4032059
commit 6c444beadf
2 changed files with 55 additions and 1 deletions
+53
View File
@@ -0,0 +1,53 @@
import React from 'react';
import {
XYPlot,
XAxis,
YAxis,
HorizontalGridLines,
VerticalGridLines,
LineSeries
} from 'react-vis';
import GridArea from '../src/grid-area';
import '../node_modules/react-vis/dist/style.css';
const MSEC_DAILY = 86400000;
export default class BasicChartWithGridArea extends React.Component {
render() {
const timestamp = new Date('September 9 2017').getTime();
return (
<XYPlot
xType="time"
width={500}
height={300}>
<HorizontalGridLines />
<VerticalGridLines />
<GridArea
direction={'horizontal'}
highlightRegion={[[4, 5.76], [8.5, 11.25]]}
/>
<XAxis title="X Axis" />
<YAxis title="Y Axis" />
<LineSeries
data={[
{x: timestamp + MSEC_DAILY, y: 3},
{x: timestamp + MSEC_DAILY * 2, y: 5},
{x: timestamp + MSEC_DAILY * 3, y: 15},
{x: timestamp + MSEC_DAILY * 4, y: 12}
]}/>
<LineSeries
data={null}/>
<LineSeries
data={[
{x: timestamp + MSEC_DAILY, y: 10},
{x: timestamp + MSEC_DAILY * 2, y: 4},
{x: timestamp + MSEC_DAILY * 3, y: 2},
{x: timestamp + MSEC_DAILY * 4, y: 15}
]}/>
</XYPlot>
);
}
}
+2 -1
View File
@@ -7,10 +7,11 @@ import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo'; import { Button, Welcome } from '@storybook/react/demo';
import ChartWithGridAreaHorizontal from './BasicGridAreaHorizontal'; import ChartWithGridAreaHorizontal from './BasicGridAreaHorizontal';
import ChartWithGridAreaVertical from './BasicGridAreaVertical'; import ChartWithGridAreaVertical from './BasicGridAreaVertical';
import ChartWithGridAreaDefaultColor from './GridAreaWithDefaultStyle';
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />); storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Grid area', module) storiesOf('Grid area', module)
.add('Basic Horizontal', () => <ChartWithGridAreaHorizontal onClick={action('clicked')} />) .add('Basic Horizontal', () => <ChartWithGridAreaHorizontal onClick={action('clicked')} />)
.add('Basic Vertical', () => <ChartWithGridAreaVertical onClick={action('clicked')} />) .add('Basic Vertical', () => <ChartWithGridAreaVertical onClick={action('clicked')} />)
.add('With default style', () => <ChartWithGridAreaDefaultColor onClick={action('clicked')} />)