Add series names to crosshair

elastic · Jul 5, 2018 · 6ebd383 · 6ebd383
1 parent 099724d
commit 6ebd383
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 18 deletions.
diff --git a/src-docs/src/views/xy_chart_bar/time_series.js b/src-docs/src/views/xy_chart_bar/time_series.js
@@ -48,10 +48,10 @@ export default class Example extends Component {
         <EuiSpacer size="xl" />
         <EuiXYChart width={600} height={200} xType={SCALE.TIME}>
           {data.map((d, i) => (
-            <EuiBarSeries key={i} name={`Chart ${i}`} data={d} />
+            <EuiBarSeries key={i} name={`Bars ${i}`} data={d} />
           ))}
           {data.map((d, i) => (
-            <EuiLineSeries key={i} name={`Chart ${i}`} data={d} showLineMarks={false} />
+            <EuiLineSeries key={i} name={`Lines ${i}`} data={d} showLineMarks={false} />
           ))}
         </EuiXYChart>
       </Fragment>

diff --git a/src/components/xy_chart/crosshairs/crosshair_x.js b/src/components/xy_chart/crosshairs/crosshair_x.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AbstractSeries, Crosshair } from 'react-vis';
-
+import { SCALE } from '../utils/chart_utils';
 /**
  * The Crosshair used by the XYChart as main tooltip mechanism along X axis (vertical).
  */
@@ -54,13 +54,22 @@ export class EuiCrosshairX extends AbstractSeries {
     })
   }
 
+  _formatXValue = (x) => {
+    const { xType } = this.props;
+    if (xType === SCALE.TIME || xType === SCALE.TIME_UTC) {
+      return new Date(x).toISOString(); // TODO add a props for time formatting
+    } else {
+      return x
+    }
+  }
+
   _titleFormat = (dataPoints = []) => {
     if (dataPoints.length > 0) {
-      const [ firstDataPoint ] = dataPoints
-      const { originalValues } = firstDataPoint
+      const [ firstDataPoint ] = dataPoints;
+      const { originalValues } = firstDataPoint;
       const value = (typeof originalValues.x0 === 'number')
-        ? `${originalValues.x0} to ${originalValues.x}`
-        : originalValues.x;
+        ? `${this._formatXValue(originalValues.x0)} to ${this._formatXValue(originalValues.x)}`
+        : this._formatXValue(originalValues.x);
       return {
         title: 'X Value',
         value,
@@ -69,9 +78,11 @@ export class EuiCrosshairX extends AbstractSeries {
   }
 
   _itemsFormat = (dataPoints) => {
+    const { seriesNames } = this.props;
+
     return dataPoints.map(d => {
       return {
-        title: `series ${d.seriesIndex}`, // TODO specify series title or default one
+        title: seriesNames[d.seriesIndex],
         value: d.y,
       };
     });
@@ -179,10 +190,16 @@ export class EuiCrosshairX extends AbstractSeries {
 EuiCrosshairX.displayName = 'EuiCrosshairX';
 
 EuiCrosshairX.propTypes = {
-  /** The crosshair value used to display this crosshair (doesn't depend on mouse position) */
+  /**
+   * The crosshair value used to display this crosshair (doesn't depend on mouse position)
+   */
   crosshairValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
   ]),
+  /**
+   * The ordered array of series names
+   */
+  seriesNames: PropTypes.arrayOf(PropTypes.string).isRequired,
 }
 EuiCrosshairX.defaultProps = {};
diff --git a/src/components/xy_chart/crosshairs/crosshair_x.test.js b/src/components/xy_chart/crosshairs/crosshair_x.test.js
@@ -17,7 +17,7 @@ describe('EuiCrosshairX', () => {
         showCrosshair={false}
         {...requiredProps}
       >
-        <EuiCrosshairX />
+        <EuiCrosshairX seriesNames={['Test Series']} />
         <EuiVerticalBarSeries name="Test Series" data={data} />
       </EuiXYChart>
     );

diff --git a/src/components/xy_chart/crosshairs/crosshair_y.js b/src/components/xy_chart/crosshairs/crosshair_y.js
@@ -18,10 +18,11 @@
  */
 
 // Copyright (c) 2016 - 2017 Uber Technologies, Inc.
-//
+
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { AbstractSeries, ScaleUtils } from 'react-vis';
+import { SCALE } from '../utils/chart_utils';
 
 /**
  * Format title by detault.
@@ -235,14 +236,22 @@ export class EuiCrosshairY extends AbstractSeries {
       values: []
     })
   }
+  _formatYValue = (y) => {
+    const { yType } = this.props;
+    if ( yType === SCALE.TIME || yType === SCALE.TIME_UTC) {
+      return new Date(y).toISOString(); // TODO add a props for time formatting
+    } else {
+      return y
+    }
+  }
 
   _titleFormat = (dataPoints = []) => {
     if (dataPoints.length > 0) {
       const [ firstDataPoint ] = dataPoints
       const { originalValues } = firstDataPoint
       const value = (typeof originalValues.y0 === 'number')
-        ? `${originalValues.y0} to ${originalValues.y}`
-        : originalValues.y;
+        ? `${this._formatYValue(originalValues.y0)} to ${this._formatYValue(originalValues.y)}`
+        : this._formatYValue(originalValues.y);
       return {
         title: 'Y Value',
         value,
@@ -251,9 +260,10 @@ export class EuiCrosshairY extends AbstractSeries {
   }
 
   _itemsFormat = (dataPoints) => {
+    const { seriesNames } = this.props;
     return dataPoints.map(d => {
       return {
-        title: `series ${d.seriesIndex}`, // TODO specify series title or default one
+        title: seriesNames[d.seriesIndex],
         value: d.x,
       };
     });
@@ -361,10 +371,16 @@ export class EuiCrosshairY extends AbstractSeries {
 EuiCrosshairY.displayName = 'EuiCrosshairY';
 
 EuiCrosshairY.propTypes = {
-  /** The crosshair value used to display this crosshair (doesn't depend on mouse position) */
+  /**
+   * The crosshair value used to display this crosshair (doesn't depend on mouse position)
+   */
   crosshairValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
   ]),
+  /**
+   * The ordered array of series names
+   */
+  seriesNames: PropTypes.arrayOf(PropTypes.string).isRequired,
 }
 EuiCrosshairY.defaultProps = {};
diff --git a/src/components/xy_chart/crosshairs/crosshair_y.test.js b/src/components/xy_chart/crosshairs/crosshair_y.test.js
@@ -18,7 +18,7 @@ describe('EuiCrosshairY', () => {
         showCrosshair={false}
         {...requiredProps}
       >
-        <EuiCrosshairY />
+        <EuiCrosshairY seriesNames={['Test Series']}/>
         <EuiHorizontalBarSeries name="Test Series" data={data} />
       </EuiXYChart>
     );

diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap
@@ -3434,6 +3434,11 @@ exports[`EuiAreaSeries all props are rendered 1`] = `
               sameTypeIndex={0}
               sameTypeTotal={1}
               seriesIndex={1}
+              seriesNames={
+                Array [
+                  "name",
+                ]
+              }
               sizeDomain={Array []}
               sizeRange={
                 Array [
@@ -3549,6 +3554,11 @@ exports[`EuiAreaSeries all props are rendered 1`] = `
                 sameTypeIndex={0}
                 sameTypeTotal={1}
                 seriesIndex={1}
+                seriesNames={
+                  Array [
+                    "name",
+                  ]
+                }
                 sizeDomain={Array []}
                 sizeRange={
                   Array [

diff --git a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap
@@ -3910,6 +3910,11 @@ exports[`EuiLineSeries all props are rendered 1`] = `
               sameTypeIndex={0}
               sameTypeTotal={1}
               seriesIndex={1}
+              seriesNames={
+                Array [
+                  "test-chart",
+                ]
+              }
               sizeDomain={Array []}
               sizeRange={
                 Array [
@@ -4025,6 +4030,11 @@ exports[`EuiLineSeries all props are rendered 1`] = `
                 sameTypeIndex={0}
                 sameTypeTotal={1}
                 seriesIndex={1}
+                seriesNames={
+                  Array [
+                    "test-chart",
+                  ]
+                }
                 sizeDomain={Array []}
                 sizeRange={
                   Array [
@@ -7992,6 +8002,11 @@ exports[`EuiLineSeries is rendered 1`] = `
               sameTypeIndex={0}
               sameTypeTotal={1}
               seriesIndex={1}
+              seriesNames={
+                Array [
+                  "test",
+                ]
+              }
               sizeDomain={Array []}
               sizeRange={
                 Array [
@@ -8107,6 +8122,11 @@ exports[`EuiLineSeries is rendered 1`] = `
                 sameTypeIndex={0}
                 sameTypeTotal={1}
                 seriesIndex={1}
+                seriesNames={
+                  Array [
+                    "test",
+                  ]
+                }
                 sizeDomain={Array []}
                 sizeRange={
                   Array [

diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js
@@ -182,6 +182,11 @@ class XYChart extends PureComponent {
       return React.cloneElement(child, props);
     });
   }
+  _getSeriesNames = (children) => {
+    return  React.Children.toArray(children)
+    .filter(this._isAbstractSeries)
+    .map(({ props: { name } }) => (name));
+  }
 
   render() {
     const {
@@ -223,7 +228,7 @@ class XYChart extends PureComponent {
     }
 
     const Crosshair = orientation === HORIZONTAL ? EuiCrosshairY : EuiCrosshairX;
-
+    const seriesNames = this._getSeriesNames(children);
     return (
       <div {...rest}>
         <XYExtendedPlot
@@ -244,7 +249,7 @@ class XYChart extends PureComponent {
           {this._renderChildren(children)}
           {showDefaultAxis && <EuiDefaultAxis orientation={orientation} />}
           {showCrosshair && (
-            <Crosshair crosshairValue={crosshairValue} onCrosshairUpdate={onCrosshairUpdate} />
+            <Crosshair seriesNames={seriesNames} crosshairValue={crosshairValue} onCrosshairUpdate={onCrosshairUpdate} />
           )}
 
           {enableSelectionBrush && (