Add default style story

2026-08-18 22:02:23 +00:00 · 2018-07-02 11:14:51 +05:30
parent c6c4032059
commit 6c444beadf
2 changed files with 55 additions and 1 deletions
@@ -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>
+    );
+  }
+}