Merge pull request #2 from markov00/eui-bar-types

EUI Barchart and Histogram refactoring

src-docs/src/routes.js

@@ -207,8 +207,20 @@ import { ToolTipExample }
 import { XYChartExample }
   from './views/xy_chart/xy_chart_example';
 
-import { XYChartSeriesExample }
-  from './views/xy_chart_series/series_example'
+import { XYChartAxisExample }
+  from './views/xy_chart_axis/xy_axis_example';
+
+import { XYChartBarExample }
+  from './views/xy_chart_bar/bar_example';
+
+import { XYChartHistogramExample }
+  from './views/xy_chart_histogram/histogram_example';
+
+import { XYChartAreaExample }
+  from './views/xy_chart_area/area_example';
+
+import { XYChartLineExample }
+  from './views/xy_chart_line/line_example';
 
   import { Changelog }
   from './views/package/changelog';
@@ -326,12 +338,6 @@ const navigation = [{
     ToastExample,
     ToolTipExample,
   ].map(example => createExample(example)),
-}, {
-  name: 'Charts',
-  items: [
-    XYChartExample,
-    XYChartSeriesExample,
-  ].map(example => createExample(example)),
 }, {
   name: 'Forms',
   items: [
@@ -346,7 +352,19 @@ const navigation = [{
     FilterGroupExample,
     SearchBarExample,
   ].map(example => createExample(example)),
-}, {
+},
+{
+  name: 'XY Charts',
+  items: [
+    XYChartExample,
+    XYChartAxisExample,
+    XYChartLineExample,
+    XYChartAreaExample,
+    XYChartBarExample,
+    XYChartHistogramExample,
+  ].map(example => createExample(example)),
+},
+{
   name: 'Utilities',
   items: [
     AccessibilityExample,

src-docs/src/views/xy_chart/complex.js

@@ -0,0 +1,87 @@
+import React, { Fragment, Component } from 'react';
+
+import {
+  EuiText,
+  EuiCodeBlock,
+  EuiSpacer,
+  EuiXYChart,
+  EuiBarSeries,
+  EuiAreaSeries,
+  EuiLineSeries,
+} from '../../../../src/components';
+
+const barSeries = [];
+for (let i = 0; i < 2; i++) {
+  const data = new Array(20).fill(0).map((d, i) => ({ x: i, y: Number((Math.random() * 4).toFixed(2)) }));
+  barSeries.push(data);
+}
+const lineData = new Array(20).fill(0).map((d, i) => ({ x: i, y: Number((Math.random() * 4).toFixed(2)) }));
+const areaData = new Array(20).fill(0).map((d, i) => ({ x: i, y: Number((Math.random() * 4).toFixed(2)) }));
+
+export default class ComplexDemo extends Component {
+  state = {
+    json: 'Please drag your mouse to select an area or click on an element'
+  }
+  handleSelectionBrushEnd = (area) => {
+    this.setState(() => ({
+      eventName: 'onSelectionBrushEnd',
+      json: JSON.stringify(area, null, 2),
+    }));
+  }
+  handleOnValueClick = (data) => {
+    this.setState(() => ({
+      eventName: 'onValueClick',
+      json: JSON.stringify(data, null, 2),
+    }));
+  }
+  handleOnSeriesClick = (series) => () => {
+    this.setState(() => ({
+      eventName: 'onSeriesClick',
+      json: JSON.stringify({ name: series }),
+    }));
+  }
+  render() {
+    const { eventName, json } = this.state
+    return (
+      <Fragment>
+        <EuiXYChart
+          enableSelectionBrush={true}
+          onSelectionBrushEnd={this.handleSelectionBrushEnd}
+          width={600}
+          height={200}
+        >
+          <EuiAreaSeries
+            name="Quitters"
+            curve="curveMonotoneX"
+            data={areaData}
+            onSeriesClick={this.handleOnSeriesClick('EuiAreaSeries')}
+          />
+          {barSeries
+            .map((data, index) => (
+              <EuiBarSeries
+                key={index}
+                name={`User-${index}`}
+                data={data}
+                onValueClick={this.handleOnValueClick}
+              />
+            ))}
+          <EuiLineSeries
+            name="Avg Winners"
+            data={lineData}
+            curve="curveMonotoneX"
+            onSeriesClick={this.handleOnSeriesClick('EuiLineSeries')}
+          />
+        </EuiXYChart>
+        <EuiSpacer size="xl"/>
+        { eventName && (
+          <EuiText grow={false}>
+            <p>Event: <em>{ eventName }</em></p>
+          </EuiText>
+        )}
+        <EuiCodeBlock language="json">
+          { json }
+        </EuiCodeBlock>
+      </Fragment>
+    );
+  }
+};

src-docs/src/views/xy_chart/crosshair_sync.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { EuiSpacer, EuiXYChart, EuiBarSeries } from '../../../../src/components';
+
+// eslint-disable-next-line
+export class ExampleCrosshair extends React.Component {
+  state = {
+    crosshairValue: 2,
+  };
+  _updateCrosshairLocation = crosshairValue => {
+    this.setState({ crosshairValue });
+  };
+  render() {
+    return (
+      <div>
+        <EuiXYChart
+          onCrosshairUpdate={this._updateCrosshairLocation}
+          crosshairValue={this.state.crosshairValue}
+          width={600}
+          height={200}
+        >
+          <EuiBarSeries
+            name="Users"
+            data={[{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]}
+          />
+        </EuiXYChart>
+        <EuiSpacer size="xl" />
+        <EuiXYChart
+          onCrosshairUpdate={this._updateCrosshairLocation}
+          crosshairValue={this.state.crosshairValue}
+          width={600}
+          height={200}
+        >
+          <EuiBarSeries
+            name="Users"
+            data={[{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]}
+          />
+        </EuiXYChart>
+      </div>
+    );
+  }
+}

src-docs/src/views/xy_chart/empty.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { EuiXYChart } from '../../../../src/components';
+
+export default () => <EuiXYChart width={600} height={200} statusText="Missing data"/>;

src-docs/src/views/xy_chart/horizontal.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {
+  EuiXYChart,
+  EuiAreaSeries,
+  EuiLineSeries,
+  EuiXYChartUtils,
+} from '../../../../src/components';
+const { ORIENTATION } = EuiXYChartUtils;
+
+const data = new Array(80).fill(0).map((d, i) => {
+  const data = {
+    y: i,
+    y0: i,
+    x: Number((Math.random() * 4 +4).toFixed(2)),
+    x0: 0,
+  }
+  return data
+});
+
+export default function() {
+  return (
+    <EuiXYChart
+      width={600}
+      height={600}
+      orientation={ORIENTATION.HORIZONTAL}
+      animateData={false}
+    >
+      <EuiAreaSeries
+        name="Quitters"
+        data={data}
+      />
+      <EuiLineSeries
+        name="Quitters"
+        data={data}
+      />
+    </EuiXYChart>
+  );
+};