Add y crosshair formatting capabilities.

elastic · Jan 14, 2019 · 5f893a5 · 5f893a5
1 parent 8309686
commit 5f893a5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/components/series_chart/crosshairs/crosshair_x.js b/src/components/series_chart/crosshairs/crosshair_x.js
@@ -58,7 +58,7 @@ export class EuiCrosshairX extends AbstractSeries {
   _formatXValue = (x) => {
     const { xType, xCrosshairFormat } = this.props;
     if (xType === SCALE.TIME || xType === SCALE.TIME_UTC) {
-      return moment(x).format(xCrosshairFormat); // TODO add a props for time formatting
+      return moment(x).format(xCrosshairFormat);
     } else {
       return x;
     }
@@ -202,5 +202,6 @@ EuiCrosshairX.propTypes = {
    * The ordered array of series names
    */
   seriesNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  xCrosshairFormat: PropTypes.string,
 };
 EuiCrosshairX.defaultProps = {};
diff --git a/src/components/series_chart/crosshairs/crosshair_y.js b/src/components/series_chart/crosshairs/crosshair_y.js
@@ -23,6 +23,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { AbstractSeries, ScaleUtils } from 'react-vis';
 import { SCALE } from '../utils/chart_utils';
+import moment from 'moment';
 
 /**
  * Format title by detault.
@@ -237,9 +238,9 @@ export class EuiCrosshairY extends AbstractSeries {
     });
   }
   _formatYValue = (y) => {
-    const { yType } = this.props;
+    const { yType, yCrosshairFormat } = this.props;
     if (yType === SCALE.TIME || yType === SCALE.TIME_UTC) {
-      return new Date(y).toISOString(); // TODO add a props for time formatting
+      return moment(y).format(yCrosshairFormat);
     } else {
       return y;
     }
@@ -382,5 +383,6 @@ EuiCrosshairY.propTypes = {
    * The ordered array of series names
    */
   seriesNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  yCrosshairFormat: PropTypes.string,
 };
 EuiCrosshairY.defaultProps = {};
diff --git a/src/components/series_chart/series_chart.js b/src/components/series_chart/series_chart.js
@@ -92,6 +92,7 @@ class XYChart extends PureComponent {
       margins,
       xType,
       xCrosshairFormat,
+      yCrosshairFormat,
       yType,
       stackBy,
       statusText,
@@ -152,6 +153,7 @@ class XYChart extends PureComponent {
               crosshairValue={crosshairValue}
               onCrosshairUpdate={onCrosshairUpdate}
               xCrosshairFormat={xCrosshairFormat}
+              yCrosshairFormat={yCrosshairFormat}
             />
           )}
 
@@ -183,6 +185,8 @@ XYChart.propTypes = {
   xType: PropTypes.oneOf([LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL]),
   /** The formatting string for the X-axis. */
   xCrosshairFormat: PropTypes.string,
+  /** The formatting string for the Y-axis. */
+  yCrosshairFormat: PropTypes.string,
   /** The main y axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md*/
   yType: PropTypes.oneOf([LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL]),
   /** Manually specify the domain of x axis. */