mirror of
https://github.com/bendtherules/react-vis-gridarea.git
synced 2026-08-18 13:51:59 +00:00
Add default style story
This commit is contained in:
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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')} />)
|
||||||
|
|||||||
Reference in New Issue
Block a user