bendtherules/react-vis-gridarea
1
0
Fork 0
mirror of https://github.com/bendtherules/react-vis-gridarea.git synced 2026-08-18 22:02:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add examples for event handling

Browse Source
This commit is contained in:
bendtherules
2018-07-02 15:47:45 +05:30
parent 9a8df2ec57
commit 657378cab8
3 changed files with 123 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/GridAreaWithSeriesEventListeners.js
+56
View File
@@ -0,0 +1,56 @@
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 GridAreaWithSeriesEvt 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]]}
onSeriesClick={() => console.log('Clicked on series')}
onSeriesMouseOver={() => console.log('Mouse over on series')}
onSeriesMouseOut={() => console.log('Mouse out from series')}
/>
<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>
);
}
}
stories/GridAreaWithValueEventListeners.js
+56
View File
@@ -0,0 +1,56 @@
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]]}
onValueClick={(ev, value) => console.log(`Clicked on value ${value}`)}
onValueMouseOver={(ev, value) => console.log(`Mouse over on value ${value}`)}
onValueMouseOut={(ev, value) => console.log(`Mouse out from value ${value}`)}
/>
<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>
);
}
}
stories/index.stories.js
+11 -6
View File
@@ -5,13 +5,18 @@ import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo';
import ChartWithGridAreaHorizontal from './BasicGridAreaHorizontal';
import ChartWithGridAreaVertical from './BasicGridAreaVertical';
import ChartWithGridAreaDefaultColor from './GridAreaWithDefaultStyle';
import BasicGridAreaHorizontal from './BasicGridAreaHorizontal';
import BasicGridAreaVertical from './BasicGridAreaVertical';
import GridAreaWithDefaultStyle from './GridAreaWithDefaultStyle';
import GridAreaWithSeriesEventListeners from './GridAreaWithSeriesEventListeners';
import GridAreaWithValueEventListeners from './GridAreaWithValueEventListeners';
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Grid area', module)
.add('Basic Horizontal', () => <ChartWithGridAreaHorizontal />)
.add('Basic Vertical', () => <ChartWithGridAreaVertical />)
.add('With default style', () => <ChartWithGridAreaDefaultColor />)
.add('Basic Horizontal', () => <BasicGridAreaHorizontal />)
.add('Basic Vertical', () => <BasicGridAreaVertical />)
.add('With default style', () => <GridAreaWithDefaultStyle />)
.add('With series event handler', () => <GridAreaWithSeriesEventListeners />)
.add('With value event handler', () => <GridAreaWithValueEventListeners />)