mirror of
https://github.com/bendtherules/react-vis-gridarea.git
synced 2026-08-18 22:02:23 +00:00
Add basic chart with grid story + Fix all build config
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
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 BasicChartWithGrid extends React.Component {
|
||||
render() {
|
||||
const timestamp = new Date('September 9 2017').getTime();
|
||||
return (
|
||||
<XYPlot
|
||||
xType="time"
|
||||
width={500}
|
||||
height={300}>
|
||||
<HorizontalGridLines />
|
||||
<VerticalGridLines />
|
||||
<GridArea
|
||||
direction={'vertical'}
|
||||
style={{fill:"rgba(0,255,0,0.4)"}}
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
import { Button, Welcome } from '@storybook/react/demo';
|
||||
import ChartWithGrid from './ChartWithGrid';
|
||||
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
@@ -17,3 +18,7 @@ storiesOf('Button', module)
|
||||
</span>
|
||||
</Button>
|
||||
));
|
||||
|
||||
storiesOf('Grid', module)
|
||||
.add('basic', () => <ChartWithGrid onClick={action('clicked')} />)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user