From 657378cab8e0218959a61c7c0711ab0747e5fed4 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Mon, 2 Jul 2018 15:47:45 +0530
Subject: [PATCH] Add examples for event handling

---
 stories/GridAreaWithSeriesEventListeners.js | 56 +++++++++++++++++++++
 stories/GridAreaWithValueEventListeners.js  | 56 +++++++++++++++++++++
 stories/index.stories.js                    | 17 ++++---
 3 files changed, 123 insertions(+), 6 deletions(-)
 create mode 100644 stories/GridAreaWithSeriesEventListeners.js
 create mode 100644 stories/GridAreaWithValueEventListeners.js

diff --git a/stories/GridAreaWithSeriesEventListeners.js b/stories/GridAreaWithSeriesEventListeners.js
new file mode 100644
index 0000000..949180d
--- /dev/null
+++ b/stories/GridAreaWithSeriesEventListeners.js
@@ -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>
+    );
+  }
+}
\ No newline at end of file
diff --git a/stories/GridAreaWithValueEventListeners.js b/stories/GridAreaWithValueEventListeners.js
new file mode 100644
index 0000000..d7148f5
--- /dev/null
+++ b/stories/GridAreaWithValueEventListeners.js
@@ -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>
+    );
+  }
+}
\ No newline at end of file
diff --git a/stories/index.stories.js b/stories/index.stories.js
index a705d8b..61c0b9e 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -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 />)
+