House-cleaning

src-docs/src/routes.js

@@ -338,16 +338,6 @@ const navigation = [{
     ToastExample,
     ToolTipExample,
   ].map(example => createExample(example)),
-}, {
-  name: 'Charts',
-  items: [
-    XYChartExample,
-    XYChartAxisExample,
-    XYChartLineExample,
-    XYChartAreaExample,
-    XYChartBarExample,
-    XYChartHistogramExample,
-  ].map(example => createExample(example)),
 }, {
   name: 'Forms',
   items: [
@@ -362,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/example-complex.js → src-docs/src/views/xy_chart/complex.js

@@ -3,8 +3,8 @@ import React from 'react';
 import {
   EuiXYChart,
   EuiVerticalBarSeries,
-  EuiArea,
-  EuiLine,
+  EuiAreaSeries,
+  EuiLineSeries,
 } from '../../../../src/components';
 
 export default () => {
@@ -29,7 +29,7 @@ export default () => {
       width={600}
       height={200}
     >
-      <EuiArea
+      <EuiAreaSeries
         name="Quitters"
         onClick={() => {
           alert('clicked!');
@@ -54,7 +54,7 @@ export default () => {
             data={data}
           />
         ))}
-      <EuiLine
+      <EuiLineSeries
         name="Avg Winners"
         data={[{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]}
         color={'#db1374'}

src-docs/src/views/xy_chart/example_dual_axis.js → src-docs/src/views/xy_chart/multi_axis.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   EuiXYChart,
-  EuiLine,
+  EuiLineSeries,
   EuiXAxis,
   EuiYAxis,
   EuiXYChartAxisUtils,
@@ -27,17 +27,17 @@ export default () => (
     xType="ordinal"
     showDefaultAxis={false}
   >
-    <EuiLine
+    <EuiLineSeries
       name="DATA A"
       data={DATA_A}
       yDomain={DATA_A_DOMAIN}
     />
-    <EuiLine
+    <EuiLineSeries
       name="DATA B"
       data={DATA_B}
       yDomain={DATA_B_DOMAIN}
     />
-    <EuiLine
+    <EuiLineSeries
       name="DATA C"
       data={DATA_C}
       yDomain={DATA_C_DOMAIN}

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { GuideSectionTypes } from '../../components';
 import { EuiCode } from '../../../../src/components';
-import ComplexChartExampleCode from './example-complex';
-import EmptyExampleCode from './example-empty';
-import MultiAxisChartExampleCode from './example_dual_axis';
-import { ExampleCrosshair } from './example-crosshair';
+import ComplexChartExampleCode from './complex';
+import EmptyExampleCode from './empty';
+import MultiAxisChartExampleCode from './multi_axis';
+import { ExampleCrosshair } from './crosshair_sync';
 
 export const XYChartExample = {
   title: 'General',
@@ -15,15 +15,15 @@ export const XYChartExample = {
         <div>
           <p>
             Use <EuiCode>EuiXYChart</EuiCode> to display line, bar, area, and stream charts. Note
-            that charts are composed with <EuiCode>EuiLine</EuiCode>, <EuiCode>EuiArea</EuiCode>,{' '}
+            that charts are composed with <EuiCode>EuiLineSeries</EuiCode>, <EuiCode>EuiAreaSeries</EuiCode>,{' '}
             <EuiCode>EuiBar</EuiCode>, and <EuiCode>EuiStream</EuiCode> being child components.
           </p>
         </div>
       ),
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: require('!!raw-loader!./example-complex'),
+          code: require('!!raw-loader!./complex'),
         },
         {
           type: GuideSectionTypes.HTML,
@@ -46,7 +46,7 @@ export const XYChartExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: require('!!raw-loader!./example-empty'),
+          code: require('!!raw-loader!./empty'),
         },
         {
           type: GuideSectionTypes.HTML,
@@ -71,7 +71,7 @@ export const XYChartExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: require('!!raw-loader!./example-empty'),
+          code: require('!!raw-loader!./crosshair_sync'),
         },
         {
           type: GuideSectionTypes.HTML,
@@ -94,7 +94,7 @@ export const XYChartExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: require('!!raw-loader!./example_dual_axis'),
+          code: require('!!raw-loader!./multi_axis'),
         },
         {
           type: GuideSectionTypes.HTML,

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

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { EuiXYChart, EuiArea } from '../../../../src/components';
+import { EuiXYChart, EuiAreaSeries } 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 }];
 
 export default () => (
   <EuiXYChart width={600} height={200}>
-    <EuiArea name="Users" data={DATA_A} />
+    <EuiAreaSeries name="Users" data={DATA_A} />
   </EuiXYChart>
 );

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

@@ -4,7 +4,7 @@ import AreaSeriesExample from './area';
 import StackedAreaSeriesExample from './stacked_area';
 import CurvedAreaExample from './curved_area';
 
-import { EuiCode, EuiArea, EuiLink } from '../../../../src/components';
+import { EuiCode, EuiAreaSeries, EuiLink } from '../../../../src/components';
 
 export const XYChartAreaExample = {
   title: 'Area chart',
@@ -14,11 +14,11 @@ export const XYChartAreaExample = {
       text: (
         <div>
           <p>
-            Use <EuiCode>EuiArea</EuiCode> to display area charts.
+            Use <EuiCode>EuiAreaSeries</EuiCode> to display area charts.
           </p>
         </div>
       ),
-      props: { EuiArea },
+      props: { EuiAreaSeries },
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -40,13 +40,13 @@ export const XYChartAreaExample = {
       text: (
         <div>
           <p>
-            Use multiple <EuiCode>EuiArea</EuiCode> to display stacked area charts specifying the{' '}
+            Use multiple <EuiCode>EuiAreaSeries</EuiCode> to display stacked area charts specifying the{' '}
             <EuiCode>stackBy:y</EuiCode> prop on the <EuiCode>EuiXYChart</EuiCode>
             to enable stacking.
           </p>
         </div>
       ),
-      props: { EuiArea },
+      props: { EuiAreaSeries },
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -76,7 +76,7 @@ export const XYChartAreaExample = {
           </p>
         </div>
       ),
-      props: { EuiArea },
+      props: { EuiAreaSeries },
       source: [
         {
           type: GuideSectionTypes.JS,

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

@@ -6,7 +6,7 @@ import {
   EuiSelect,
   EuiSpacer,
   EuiXYChart,
-  EuiArea,
+  EuiAreaSeries,
 } 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 }];
@@ -52,8 +52,8 @@ export default class extends Component {
         <EuiSpacer size="xl" />
 
         <EuiXYChart width={600} height={200} stackBy="y">
-          <EuiArea name="Total Bytes A" data={DATA_A} curve={this.state.value} />
-          <EuiArea name="Total Bytes B" data={DATA_B} curve={this.state.value} />
+          <EuiAreaSeries name="Total Bytes A" data={DATA_A} curve={this.state.value} />
+          <EuiAreaSeries name="Total Bytes B" data={DATA_B} curve={this.state.value} />
         </EuiXYChart>
       </Fragment>
     );

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

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import { EuiXYChart, EuiArea } from '../../../../src/components';
+import { EuiXYChart, EuiAreaSeries } from '../../../../src/components';
 
 const dataA = [{ x: 0, y: 3 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 2 }, { x: 4, y: 3 }];
 
 const dataB = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 4 }, { x: 3, y: 1 }, { x: 4, y: 1 }];
 
 export default () => (
   <EuiXYChart width={600} height={200} stackBy="y">
-    <EuiArea name="Tag A" data={dataA} />
-    <EuiArea name="Tag B" data={dataB} />
+    <EuiAreaSeries name="Tag A" data={dataA} />
+    <EuiAreaSeries name="Tag B" data={dataB} />
   </EuiXYChart>
 );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-  EuiLine,
+  EuiLineSeries,
   EuiXAxis,
   EuiYAxis,
   EuiXYChart,
@@ -17,7 +17,7 @@ function xAxisTickFormatter(value) {
 
 export default () => (
   <EuiXYChart width={600} height={200} xPadding={10} yPadding={10} showDefaultAxis={false}>
-    <EuiLine name="Total Bytes" data={DATA} />
+    <EuiLineSeries name="Total Bytes" data={DATA} />
     <EuiYAxis title="Left Y Axis" tickLabelAngle={45} />
     <EuiYAxis
       title="Right Y Axis"

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

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 
-import { EuiButton, EuiSpacer, EuiXYChart, EuiLine, EuiVerticalBarSeries } from '../../../../src/components';
+import { EuiButton, EuiSpacer, EuiXYChart, EuiLineSeries, EuiVerticalBarSeries } from '../../../../src/components';
 
 const timestamp = Date.now();
 const ONE_HOUR = 3600000;
@@ -42,7 +42,7 @@ export default class Example extends Component {
         <EuiSpacer size="xl" />
         <EuiXYChart width={600} height={200} xType="time">
           { data.map((d, i) => (<EuiVerticalBarSeries key={i} name={`Chart ${i}`} data={d} />))}
-          { data.map((d, i) => (<EuiLine key={i} name={`Chart ${i}`} data={d} showLineMarks={false} />))}
+          { data.map((d, i) => (<EuiLineSeries key={i} name={`Chart ${i}`} data={d} showLineMarks={false} />))}
         </EuiXYChart>
       </Fragment>
     );

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

@@ -6,7 +6,7 @@ import {
   EuiSelect,
   EuiSpacer,
   EuiXYChart,
-  EuiLine,
+  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 }];
@@ -52,7 +52,7 @@ export default class extends Component {
         <EuiSpacer size="xl" />
 
         <EuiXYChart width={600} height={200}>
-          <EuiLine name="Total Bytes" data={DATA_A} curve={this.state.value} />
+          <EuiLineSeries name="Total Bytes" data={DATA_A} curve={this.state.value} />
         </EuiXYChart>
       </Fragment>
     );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiXYChart, EuiLine } from '../../../../src/components';
+import { EuiXYChart, EuiLineSeries } from '../../../../src/components';
 
 const X_DOMAIN = [-1, 6];
 const Y_DOMAIN = [0, 3];
@@ -9,6 +9,6 @@ const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 },
 
 export default () => (
   <EuiXYChart width={600} height={200} yDomain={Y_DOMAIN} xDomain={X_DOMAIN}>
-    <EuiLine name="Total Bytes" data={DATA_A} />
+    <EuiLineSeries name="Total Bytes" data={DATA_A} />
   </EuiXYChart>
 );

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

@@ -6,7 +6,7 @@ import {
   EuiRange,
   EuiSpacer,
   EuiXYChart,
-  EuiLine,
+  EuiLineSeries,
   EuiCheckboxGroup,
 } from '../../../../src/components';
 
@@ -100,7 +100,7 @@ export default class extends Component {
         </EuiForm>
         <EuiSpacer size="xl" />
         <EuiXYChart width={600} height={200}>
-          <EuiLine
+          <EuiLineSeries
             name="Total Bytes"
             data={DATA_A}
             lineSize={Number(lineSize)}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiXYChart, EuiLine } from '../../../../src/components';
+import { EuiXYChart, EuiLineSeries } from '../../../../src/components';
 
 const DATA_A = [
   { x: 0, y: 1 },
@@ -13,6 +13,6 @@ const DATA_A = [
 
 export default () => (
   <EuiXYChart width={600} height={200}>
-    <EuiLine name="Total Bytes" data={DATA_A} />
+    <EuiLineSeries name="Total Bytes" data={DATA_A} />
   </EuiXYChart>
 );