last min version bump and add meta warnings, also linting fixes

package.json

@@ -47,6 +47,8 @@
     "react-datepicker": "v1.4.1",
     "react-input-autosize": "^2.2.1",
     "react-virtualized": "^9.18.5",
+    "react-vis": "^1.10.1",
+    "serve": "^6.3.1",
     "tabbable": "^1.1.0",
     "uuid": "^3.1.0"
   },

src-docs/src/routes.js

@@ -72,9 +72,6 @@ import { CardExample }
 import { CallOutExample }
   from './views/call_out/call_out_example';
 
-import { ChartExample }
-  from './views/chart/chart_example';
-
 import { CodeEditorExample }
   from './views/code_editor/code_editor_example';
 
@@ -213,6 +210,24 @@ import { ToolTipExample }
 import { ToggleExample }
   from './views/toggle/toggle_example';
 
+import { XYChartExample }
+  from './views/xy_chart/xy_chart_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';
 
@@ -315,7 +330,6 @@ const navigation = [{
     BadgeExample,
     CallOutExample,
     CardExample,
-    ChartExample,
     CodeExample,
     DescriptionListExample,
     EmptyPromptExample,
@@ -346,7 +360,7 @@ const navigation = [{
   ].map(example => createExample(example)),
 },
 {
-  name: 'XY Charts',
+  name: 'XY Charts (Beta)',
   items: [
     XYChartExample,
     XYChartAxisExample,

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

@@ -41,7 +41,7 @@ export default class ComplexDemo extends Component {
     }));
   }
   render() {
-    const { eventName, json } = this.state
+    const { eventName, json } = this.state;
     return (
       <Fragment>
         <EuiXYChart
@@ -84,4 +84,4 @@ export default class ComplexDemo extends Component {
       </Fragment>
     );
   }
-};
+}

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

@@ -12,13 +12,13 @@ const data = new Array(80).fill(0).map((d, i) => {
   const data = {
     y: i,
     y0: i,
-    x: Number((Math.random() * 4 +4).toFixed(2)),
+    x: Number((Math.random() * 4 + 4).toFixed(2)),
     x0: 0,
-  }
-  return data
+  };
+  return data;
 });
 
-export default function() {
+export default function () {
   return (
     <EuiXYChart
       width={600}
@@ -36,4 +36,4 @@ export default function() {
       />
     </EuiXYChart>
   );
-};
+}

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

@@ -1,13 +1,29 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { GuideSectionTypes } from '../../components';
-import { EuiCode, EuiXYChart } from '../../../../src/components';
+import { EuiCode, EuiXYChart, EuiCallOut, EuiSpacer } from '../../../../src/components';
 import ComplexChartExampleCode from './complex';
 import EmptyExampleCode from './empty';
 import MultiAxisChartExampleCode from './multi_axis';
 import { ExampleCrosshair } from './crosshair_sync';
 
 export const XYChartExample = {
   title: 'General',
+  intro: (
+    <Fragment>
+      <EuiCallOut
+        title="Beta Component"
+        color="warning"
+      >
+        <p>
+          This component is still in Beta. We consider it to be reasonably stable, and welcome you to implament it,
+          but please be aware that breaking changes can come at any time with this component as such changes on beta
+          components does not necessitate a major version bump.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
+    </Fragment>
+  ),
   sections: [
     {
       title: 'Complex example',

src-docs/src/views/xy_chart_area/area_example.js

@@ -1,14 +1,29 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { GuideSectionTypes } from '../../components';
 import AreaSeriesExample from './area';
 import StackedAreaSeriesExample from './stacked_area';
 import CurvedAreaExample from './curved_area';
 import RangeAreaExample from './range_area';
-
-import { EuiCode, EuiAreaSeries, EuiLink } from '../../../../src/components';
+import { EuiCode, EuiAreaSeries, EuiLink, EuiCallOut, EuiSpacer } from '../../../../src/components';
 
 export const XYChartAreaExample = {
   title: 'Area chart',
+  intro: (
+    <Fragment>
+      <EuiCallOut
+        title="Beta Component"
+        color="warning"
+      >
+        <p>
+          This component is still in Beta. We consider it to be reasonably stable, and welcome you to implament it,
+          but please be aware that breaking changes can come at any time with this component as such changes on beta
+          components does not necessitate a major version bump.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
+    </Fragment>
+  ),
   sections: [
     {
       title: 'Area Series',

src-docs/src/views/xy_chart_area/range_area.js

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { EuiXYChart, EuiAreaSeries, EuiLineSeries } from '../../../../src/components';
 
-const LINE_DATA = new Array(100).fill(0).map((d, i) => ({ x: i, y: Math.random() * 2 + 8 }))
-const AREA_DATA = LINE_DATA.map(({ x, y })=> ({ x, y0: y - Math.random() - 2, y: y + Math.random() + 2 }))
+const LINE_DATA = new Array(100).fill(0).map((d, i) => ({ x: i, y: Math.random() * 2 + 8 }));
+const AREA_DATA = LINE_DATA.map(({ x, y })=> ({ x, y0: y - Math.random() - 2, y: y + Math.random() + 2 }));
 
 export default () => (
   <EuiXYChart width={600} height={200}>

src-docs/src/views/xy_chart_axis/xy_axis_example.js

@@ -1,11 +1,27 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { GuideSectionTypes } from '../../components';
-import { EuiCode, EuiXAxis, EuiYAxis, EuiLineAnnotation } from '../../../../src/components';
+import { EuiCode, EuiXAxis, EuiYAxis, EuiLineAnnotation, EuiCallOut, EuiSpacer } from '../../../../src/components';
 import SimpleAxisExampleCode from './simple_axis';
 import AnnotationExampleCode from './annotations';
 
 export const XYChartAxisExample = {
   title: 'Axis',
+  intro: (
+    <Fragment>
+      <EuiCallOut
+        title="Beta Component"
+        color="warning"
+      >
+        <p>
+          This component is still in Beta. We consider it to be reasonably stable, and welcome you to implament it,
+          but please be aware that breaking changes can come at any time with this component as such changes on beta
+          components does not necessitate a major version bump.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
+    </Fragment>
+  ),
   sections: [
     {
       title: 'Complex Axis example',

src-docs/src/views/xy_chart_bar/bar_example.js

@@ -12,6 +12,18 @@ export const XYChartBarExample = {
   title: 'Bar charts',
   intro: (
     <Fragment>
+      <EuiCallOut
+        title="Beta Component"
+        color="warning"
+      >
+        <p>
+         This component is still in Beta. We consider it to be reasonably stable, and welcome you to implament it,
+         but please be aware that breaking changes can come at any time with this component as such changes on beta
+         components does not necessitate a major version bump.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
       <p>
         You can use <EuiCode>EuiXYChart</EuiCode> with <EuiCode>EuiBarSeries</EuiCode> to
         displaying bar charts.

src-docs/src/views/xy_chart_histogram/histogram_example.js

@@ -19,6 +19,18 @@ export const XYChartHistogramExample = {
   title: 'Histograms',
   intro: (
     <Fragment>
+      <EuiCallOut
+        title="Beta Component"
+        color="warning"
+      >
+        <p>
+          This component is still in Beta. We consider it to be reasonably stable, and welcome you to implament it,
+          but please be aware that breaking changes can come at any time with this component as such changes on beta
+          components does not necessitate a major version bump.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
       <p>
         You can use <EuiCode>EuiXYChart</EuiCode> with <EuiCode>EuiHistogramSeries</EuiCode> to
         displaying histogram charts.

src-docs/src/views/xy_chart_line/line_example.js

@@ -1,14 +1,30 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { GuideSectionTypes } from '../../components';
 import LineChartExample from './line';
 import CustomDomainLineChartExample from './custom_domain_line';
 import MultiLineChartExample from './multi_line';
 import CurvedLineChartExample from './curved_line';
 import CustomStyleLineChartExample from './custom_style_line';
-import { EuiCode, EuiLineSeries, EuiLink } from '../../../../src/components';
+import { EuiCode, EuiLineSeries, EuiLink, EuiCallOut, EuiSpacer } from '../../../../src/components';
 
 export const XYChartLineExample = {
   title: 'Line chart',
+  intro: (
+    <Fragment>
+      <EuiCallOut
+        title="Beta Component"
+        color="warning"
+      >
+        <p>
+          This component is still in Beta. We consider it to be reasonably stable, and welcome you to implament it,
+          but please be aware that breaking changes can come at any time with this component as such changes on beta
+          components does not necessitate a major version bump.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer size="l" />
+    </Fragment>
+  ),
   sections: [
     {
       title: 'Line chart',

src-docs/src/views/xy_chart_line/multi_line.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { EuiXYChart, EuiLineSeries } from '../../../../src/components';
 
-const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }];
+const DATA_A = [{ x: 0, y: 1 }, { x: 1.5, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }];
 const DATA_B = [{ x: 0, y: 3 }, { x: 1, y: 4 }, { x: 2, y: 1 }, { x: 3, y: 2 }, { x: 5, y: 5 }];
 
 export default () => (

src/components/index.js

@@ -37,16 +37,8 @@ export {
 } from './call_out';
 
 export {
-<<<<<<< HEAD
   EuiCard,
 } from './card';
-=======
-  EuiChart,
-  EuiLine,
-  EuiArea,
-  EuiBar
-} from './chart';
->>>>>>> finish commit
 
 export {
   EuiCode,
@@ -316,6 +308,27 @@ export {
   EuiToolTip,
 } from './tool_tip';
 
+export {
+  EuiXYChart,
+  EuiXYChartUtils,
+  EuiXYChartAxisUtils,
+  EuiXYChartTextUtils,
+  EuiLineSeries,
+  EuiAreaSeries,
+  EuiBarSeries,
+  EuiHistogramSeries,
+  EuiVerticalBarSeries,
+  EuiHorizontalBarSeries,
+  EuiVerticalRectSeries,
+  EuiHorizontalRectSeries,
+  EuiDefaultAxis,
+  EuiXAxis,
+  EuiYAxis,
+  EuiCrosshairX,
+  EuiCrosshairY,
+  EuiLineAnnotation,
+} from './xy_chart';
+
 export {
   EuiHideFor,
   EuiShowFor,

src/components/index.scss

@@ -11,7 +11,6 @@
 @import 'breadcrumbs/index';
 @import 'call_out/index';
 @import 'card/index';
-@import 'chart/index';
 @import 'code/index';
 @import 'code_editor/index';
 @import 'color_picker/index';

src/components/xy_chart/axis/default_axis.test.js

@@ -9,7 +9,7 @@ import { ORIENTATION } from '../utils/chart_utils';
 
 describe('EuiDefaultAxis', () => {
   test('render default axis', () => {
-    const data = [ { x:0, y: 1 }, { x:1, y: 2 }];
+    const data = [ { x: 0, y: 1 }, { x: 1, y: 2 }];
     const component = mount(
       <EuiXYChart
         width={600}
@@ -27,7 +27,7 @@ describe('EuiDefaultAxis', () => {
     expect(component.render()).toMatchSnapshot();
   });
   test('render rotated 90deg default axis', () => {
-    const data = [ { x:0, y: 1 }, { x:1, y: 2 }];
+    const data = [ { x: 0, y: 1 }, { x: 1, y: 2 }];
     const component = mount(
       <EuiXYChart
         width={600}
@@ -42,5 +42,5 @@ describe('EuiDefaultAxis', () => {
     expect(component.find(EuiVerticalGrid)).toHaveLength(1);
     expect(component.find(EuiHorizontalGrid)).toHaveLength(0);
     expect(component.render()).toMatchSnapshot();
-  })
+  });
 });

src/components/xy_chart/axis/horizontal_grid.js

@@ -10,7 +10,7 @@ export class EuiHorizontalGrid extends PureComponent {
       <HorizontalGridLines
         {...this.props}
       />
-    )
+    );
   }
 }
 

src/components/xy_chart/axis/horizontal_grid.test.js

@@ -8,7 +8,7 @@ import { requiredProps } from '../../../test/required_props';
 
 describe('EuiHorizontalGrid', () => {
   test('render the horizontal grid', () => {
-    const data = [ { x:0, y: 1 }, { x:1, y: 2 }];
+    const data = [ { x: 0, y: 1 }, { x: 1, y: 2 }];
     const width = 600;
     const component = mount(
       <EuiXYChart
@@ -21,7 +21,7 @@ describe('EuiHorizontalGrid', () => {
         <EuiLineSeries name="Test Series" data={data} />
       </EuiXYChart>
     );
-    const horizontalGridComponent = component.find(EuiHorizontalGrid)
+    const horizontalGridComponent = component.find(EuiHorizontalGrid);
     expect(horizontalGridComponent).toHaveLength(1);
     const firstLineProps = horizontalGridComponent.find('line').at(0).props();
     expect(firstLineProps.y1).toEqual(firstLineProps.y2);

src/components/xy_chart/axis/vertical_grid.js

@@ -10,7 +10,7 @@ export class EuiVerticalGrid extends PureComponent {
       <VerticalGridLines
         {...this.props}
       />
-    )
+    );
   }
 }