From 3b2816671f310de141d6574c43e3cffb43f37c0d Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Mon, 2 Jul 2018 11:07:22 +0530
Subject: [PATCH] Fix examples horizontal + Add vertical

---
 ...GridArea.js => BasicGridAreaHorizontal.js} |  0
 stories/BasicGridAreaVertical.js              | 54 +++++++++++++++++++
 stories/index.stories.js                      |  8 +--
 3 files changed, 59 insertions(+), 3 deletions(-)
 rename stories/{ChartWithGridArea.js => BasicGridAreaHorizontal.js} (100%)
 create mode 100644 stories/BasicGridAreaVertical.js

diff --git a/stories/ChartWithGridArea.js b/stories/BasicGridAreaHorizontal.js
similarity index 100%
rename from stories/ChartWithGridArea.js
rename to stories/BasicGridAreaHorizontal.js
diff --git a/stories/BasicGridAreaVertical.js b/stories/BasicGridAreaVertical.js
new file mode 100644
index 0000000..94a4f4a
--- /dev/null
+++ b/stories/BasicGridAreaVertical.js
@@ -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 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'} 
+        style={{fill:"rgba(0,255,0,0.4)"}}
+        highlightRegion={[[timestamp + MSEC_DAILY*2, timestamp + MSEC_DAILY*3]]}
+        />
+
+        <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 f782529..86b3860 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -5,7 +5,8 @@ import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
 import { Button, Welcome } from '@storybook/react/demo';
-import ChartWithGrid from './ChartWithGridArea';
+import ChartWithGridAreaHorizontal from './BasicGridAreaHorizontal';
+import ChartWithGridAreaVertical from './BasicGridAreaVertical';
 
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
@@ -19,6 +20,7 @@ storiesOf('Button', module)
     </Button>
   ));
 
-storiesOf('Grid', module)
-  .add('basic', () => <ChartWithGrid onClick={action('clicked')} />)
+storiesOf('Grid area', module)
+  .add('Basic Horizontal', () => <ChartWithGridAreaHorizontal onClick={action('clicked')} />)
+  .add('Basic Vertical', () => <ChartWithGridAreaVertical onClick={action('clicked')} />)