From 8309686d77f7a9abed37f1c89f0811e24aa272ef Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Sat, 12 Jan 2019 21:33:02 -0500 Subject: [PATCH 1/7] Specify a date format prop for EuiSeriesChart's crosshair. --- .../format_crosshair_times.js | 26 ++++++++++ .../histogram_example.js | 22 +++++++++ .../series_chart/crosshairs/crosshair_x.js | 5 +- src/components/series_chart/series_chart.js | 49 ++++++++++--------- 4 files changed, 76 insertions(+), 26 deletions(-) create mode 100644 src-docs/src/views/series_chart_histogram/format_crosshair_times.js diff --git a/src-docs/src/views/series_chart_histogram/format_crosshair_times.js b/src-docs/src/views/series_chart_histogram/format_crosshair_times.js new file mode 100644 index 00000000000..71cf3a41731 --- /dev/null +++ b/src-docs/src/views/series_chart_histogram/format_crosshair_times.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { + EuiSeriesChart, + EuiHistogramSeries, + EuiSeriesChartUtils, +} from '../../../../src/experimental'; + +const { SCALE } = EuiSeriesChartUtils; +let timeseriesX = Date.now(); +const HOUR = 1000 * 60 * 60; + +const histogramData = new Array(1000).fill(0).map(() => { + const x0 = timeseriesX; + timeseriesX += HOUR; + const x = timeseriesX; + const y = Math.floor(Math.random() * 100); + return { x0, x, y }; +}); + +export const FormatCrosshairTimesExample = () => ( +
+ + + +
+); diff --git a/src-docs/src/views/series_chart_histogram/histogram_example.js b/src-docs/src/views/series_chart_histogram/histogram_example.js index eec51f283bb..212f7fd2b54 100644 --- a/src-docs/src/views/series_chart_histogram/histogram_example.js +++ b/src-docs/src/views/series_chart_histogram/histogram_example.js @@ -5,6 +5,7 @@ import StackedVerticalRectSeriesExample from './stacked_vertical_rect_series'; import HorizontalRectSeriesExample from './horizontal_rect_series'; import StackedHorizontalRectSeriesExample from './stacked_horizontal_rect_series'; import TimeHistogramSeriesExample from './time_histogram_series'; +import { FormatCrosshairTimesExample } from './format_crosshair_times'; import { EuiBadge, @@ -177,6 +178,27 @@ export const XYChartHistogramExample = { ], demo: , }, + { + title: 'Custom crosshair time format', + text: ( +
+

+ Specify a custom formatting string to change the locality or format of the time string on the x crosshair. +

+
+ ), + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./format_crosshair_times'), + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React', + }, + ], + demo: + }, { title: 'Time Series Histogram version', text: ( diff --git a/src/components/series_chart/crosshairs/crosshair_x.js b/src/components/series_chart/crosshairs/crosshair_x.js index 6423a136d88..12cfed86d15 100644 --- a/src/components/series_chart/crosshairs/crosshair_x.js +++ b/src/components/series_chart/crosshairs/crosshair_x.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { AbstractSeries, Crosshair } from 'react-vis'; import { SCALE } from '../utils/chart_utils'; +import moment from 'moment'; /** * The Crosshair used by the XYChart as main tooltip mechanism along X axis (vertical). */ @@ -55,9 +56,9 @@ export class EuiCrosshairX extends AbstractSeries { } _formatXValue = (x) => { - const { xType } = this.props; + const { xType, xCrosshairFormat } = this.props; if (xType === SCALE.TIME || xType === SCALE.TIME_UTC) { - return new Date(x).toISOString(); // TODO add a props for time formatting + return moment(x).format(xCrosshairFormat); // TODO add a props for time formatting } else { return x; } diff --git a/src/components/series_chart/series_chart.js b/src/components/series_chart/series_chart.js index fa44089c317..e805c3524cf 100644 --- a/src/components/series_chart/series_chart.js +++ b/src/components/series_chart/series_chart.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import classNames from 'classnames'; -import { XYPlot, AbstractSeries } from 'react-vis'; +import { AbstractSeries, XYPlot } from 'react-vis'; import { makeFlexible } from './utils/flexible'; import PropTypes from 'prop-types'; import { EuiEmptyPrompt } from '../empty_prompt'; @@ -17,7 +17,7 @@ const DEFAULT_MARGINS = { left: 40, right: 10, top: 10, - bottom: 40 + bottom: 40, }; /** @@ -32,18 +32,17 @@ class XYChart extends PureComponent { colorIterator = 0; _xyPlotRef = React.createRef(); - /** * Checks if the plot is empty, looking at existing series and data props. */ _isEmptyPlot(children) { - return React.Children - .toArray(children) - .filter(this._isAbstractSeries) - .filter(child => { - return child.props.data && child.props.data.length > 0; - }) - .length === 0; + return ( + React.Children.toArray(children) + .filter(this._isAbstractSeries) + .filter(child => { + return child.props.data && child.props.data.length > 0; + }).length === 0 + ); } /** @@ -55,14 +54,13 @@ class XYChart extends PureComponent { return prototype instanceof AbstractSeries; } - /** * Render children adding a valid EUI visualization color if the color prop is not specified. */ _renderChildren(children) { let colorIterator = 0; - return React.Children.map(children, (child, i) => { + return React.Children.map(children, (child, i) => { // Avoid applying color props to non series children if (!this._isAbstractSeries(child)) { return child; @@ -80,11 +78,11 @@ class XYChart extends PureComponent { return React.cloneElement(child, props); }); } - _getSeriesNames = (children) => { - return React.Children.toArray(children) + _getSeriesNames = children => { + return React.Children.toArray(children) .filter(this._isAbstractSeries) - .map(({ props: { name } }) => (name)); - } + .map(({ props: { name } }) => name); + }; render() { const { @@ -93,6 +91,7 @@ class XYChart extends PureComponent { height, margins, xType, + xCrosshairFormat, yType, stackBy, statusText, @@ -119,9 +118,7 @@ class XYChart extends PureComponent { className="euiSeriesChartContainer__emptyPrompt" iconType="visualizeApp" title={Chart not available} - body={ -

{ statusText }

- } + body={

{statusText}

} /> ); } @@ -130,10 +127,7 @@ class XYChart extends PureComponent { const seriesNames = this._getSeriesNames(children); const classes = classNames(className, 'euiSeriesChartContainer'); return ( -
+
} {showCrosshair && ( - + )} {enableSelectionBrush && ( @@ -182,6 +181,8 @@ XYChart.propTypes = { stackBy: PropTypes.string, /** The main x axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md */ xType: PropTypes.oneOf([LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL]), + /** The formatting string for the X-axis. */ + xCrosshairFormat: 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. */ From 5f893a5d11147b06f0e597c30d03fc5cb152fc5c Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Sat, 12 Jan 2019 22:08:24 -0500 Subject: [PATCH 2/7] Add y crosshair formatting capabilities. --- src/components/series_chart/crosshairs/crosshair_x.js | 3 ++- src/components/series_chart/crosshairs/crosshair_y.js | 6 ++++-- src/components/series_chart/series_chart.js | 4 ++++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/series_chart/crosshairs/crosshair_x.js b/src/components/series_chart/crosshairs/crosshair_x.js index 12cfed86d15..8d2f60acbe2 100644 --- 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 index 108cd320751..11690f4ba49 100644 --- 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 index e805c3524cf..c34b6b8bdc8 100644 --- 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. */ From 5d03a6999f55b61a4e1b03a9abfb4ab4cb3aa3e1 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 14 Jan 2019 10:59:07 -0500 Subject: [PATCH 3/7] Sync with latest changelog. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 953d5ac71c8..dba6ddd420d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ No public interface changes since `6.3.0`. ## [`6.3.0`](https://github.com/elastic/eui/tree/v6.3.0) +- Added custom date string formatting for series charts crosshair overlay ([#1429](https://github.com/elastic/eui/pull/1429)) - Added `onBlur` prop to `EuiComboBox` ([#1400](https://github.com/elastic/eui/pull/1400)) - Added `initialFocus` prop typedefs to `EuiModal` and `EuiPopover` ([#1410](https://github.com/elastic/eui/pull/1410)) - Updated `gisApp` icon ([#1413](https://github.com/elastic/eui/pull/1413)) From 7968372174c487d89507dd805430f9b3beb73275 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 14 Jan 2019 19:00:06 -0500 Subject: [PATCH 4/7] Update based on PR feedback. --- CHANGELOG.md | 3 +-- src/components/series_chart/crosshairs/crosshair_x.js | 2 +- src/components/series_chart/crosshairs/crosshair_y.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dba6ddd420d..2b6024cde4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,9 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `6.3.0`. +- Added custom date string formatting for series charts crosshair overlay ([#1429](https://github.com/elastic/eui/pull/1429)) ## [`6.3.0`](https://github.com/elastic/eui/tree/v6.3.0) -- Added custom date string formatting for series charts crosshair overlay ([#1429](https://github.com/elastic/eui/pull/1429)) - Added `onBlur` prop to `EuiComboBox` ([#1400](https://github.com/elastic/eui/pull/1400)) - Added `initialFocus` prop typedefs to `EuiModal` and `EuiPopover` ([#1410](https://github.com/elastic/eui/pull/1410)) - Updated `gisApp` icon ([#1413](https://github.com/elastic/eui/pull/1413)) diff --git a/src/components/series_chart/crosshairs/crosshair_x.js b/src/components/series_chart/crosshairs/crosshair_x.js index 8d2f60acbe2..35eec890f9a 100644 --- 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); + return xCrosshairFormat ? moment(x).format(xCrosshairFormat) : new Date(x).toISOString(); } else { return x; } diff --git a/src/components/series_chart/crosshairs/crosshair_y.js b/src/components/series_chart/crosshairs/crosshair_y.js index 11690f4ba49..aa4050cd94a 100644 --- a/src/components/series_chart/crosshairs/crosshair_y.js +++ b/src/components/series_chart/crosshairs/crosshair_y.js @@ -240,7 +240,7 @@ export class EuiCrosshairY extends AbstractSeries { _formatYValue = (y) => { const { yType, yCrosshairFormat } = this.props; if (yType === SCALE.TIME || yType === SCALE.TIME_UTC) { - return moment(y).format(yCrosshairFormat); + return yCrosshairFormat ? moment(y).format(yCrosshairFormat) : new Date(y).toISOString(); } else { return y; } From 53f284af1d9b03dc1092c460d181ff0abc674333 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 14 Jan 2019 23:06:43 -0500 Subject: [PATCH 5/7] Restore default crosshair formatting, write tests. --- .../format_crosshair_times.js | 4 +- .../__snapshots__/crosshair_x.test.js.snap | 1014 +++++++++++++++ .../__snapshots__/crosshair_y.test.js.snap | 1098 +++++++++++++++++ .../crosshairs/crosshair_x.test.js | 44 + .../crosshairs/crosshair_y.test.js | 47 + 5 files changed, 2205 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/series_chart_histogram/format_crosshair_times.js b/src-docs/src/views/series_chart_histogram/format_crosshair_times.js index 71cf3a41731..454cb1ef6f3 100644 --- a/src-docs/src/views/series_chart_histogram/format_crosshair_times.js +++ b/src-docs/src/views/series_chart_histogram/format_crosshair_times.js @@ -19,8 +19,8 @@ const histogramData = new Array(1000).fill(0).map(() => { export const FormatCrosshairTimesExample = () => (
- - + +
); diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap index 7f2cd1b9cb3..d4054ba6450 100644 --- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap +++ b/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap @@ -43,3 +43,1017 @@ exports[`EuiCrosshairX render the X crosshair 1`] = `
`; + +exports[`EuiCrosshairX x crosshair adheres to custom formatting 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + 01 PM + + + + + + 01:30 + + + + + + 02 PM + + + + + + 02:30 + + + + + + 03 PM + + + + + + 03:30 + + + + + + 04 PM + + + + + + 04:30 + + + + + + 05 PM + + + + + + 05:30 + + + + + + 06 PM + + + + + + 06:30 + + + + + + + + + + + 0.0 + + + + + + 0.5 + + + + + + 1.0 + + + + + + 1.5 + + + + + + 2.0 + + + + + +
+
+
+
+
+
+ + X Value + + : + + 2004-01-15 03:43-05:00 to 2004-01-15 06:43-05:00 + +
+
+ + Test Series + + : + + 2 + +
+
+
+
+
+
+
+
+`; + +exports[`EuiCrosshairX x crosshair formats ISO string by default 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + 01 PM + + + + + + 01:30 + + + + + + 02 PM + + + + + + 02:30 + + + + + + 03 PM + + + + + + 03:30 + + + + + + 04 PM + + + + + + 04:30 + + + + + + 05 PM + + + + + + 05:30 + + + + + + 06 PM + + + + + + 06:30 + + + + + + + + + + + 0.0 + + + + + + 0.5 + + + + + + 1.0 + + + + + + 1.5 + + + + + + 2.0 + + + + + +
+
+
+
+
+
+ + X Value + + : + + 2004-01-15T20:43:06.000Z to 2004-01-15T23:43:06.000Z + +
+
+ + Test Series + + : + + 2 + +
+
+
+
+
+
+
+
+`; diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap index f21208a2808..b6f4ae91d6f 100644 --- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap +++ b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap @@ -43,3 +43,1101 @@ exports[`EuiCrosshairY render the Y crosshair 1`] = `
`; + +exports[`EuiCrosshairY y crosshair formats ISO string by default 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.2 + + + + + + 0.4 + + + + + + 0.6 + + + + + + 0.8 + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + 1.6 + + + + + + 1.8 + + + + + + 2.0 + + + + + + + + + + + 01 PM + + + + + + 02 PM + + + + + + 03 PM + + + + + + 04 PM + + + + + + 05 PM + + + + + + 06 PM + + + + + +
+
+
+
+
+
+ + Y Value + + : + + 2004-01-15T17:43:06.000Z to 2004-01-15T20:43:06.000Z + +
+
+ + Test Series + + : + + 1.5 + +
+
+
+
+
+
+
+
+`; + +exports[`EuiCrosshairY y crosshair formats ISO string by default 2`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.2 + + + + + + 0.4 + + + + + + 0.6 + + + + + + 0.8 + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + 1.6 + + + + + + 1.8 + + + + + + 2.0 + + + + + + + + + + + 01 PM + + + + + + 02 PM + + + + + + 03 PM + + + + + + 04 PM + + + + + + 05 PM + + + + + + 06 PM + + + + + +
+
+
+
+
+
+ + Y Value + + : + + 2004-01-15 12:43-05:00 to 2004-01-15 03:43-05:00 + +
+
+ + Test Series + + : + + 1.5 + +
+
+
+
+
+
+
+
+`; diff --git a/src/components/series_chart/crosshairs/crosshair_x.test.js b/src/components/series_chart/crosshairs/crosshair_x.test.js index 7929853c489..eef22320511 100644 --- a/src/components/series_chart/crosshairs/crosshair_x.test.js +++ b/src/components/series_chart/crosshairs/crosshair_x.test.js @@ -6,6 +6,11 @@ import { EuiVerticalBarSeries } from '../series/vertical_bar_series'; import { EuiCrosshairX } from './'; import { requiredProps } from '../../../test/required_props'; import { Crosshair } from 'react-vis'; +import { EuiHistogramSeries } from '../series'; +import { EuiSeriesChartUtils } from '../utils'; + +const { SCALE } = EuiSeriesChartUtils; + describe('EuiCrosshairX', () => { test('render the X crosshair', () => { const data = [ { x: 0, y: 1.5 }, { x: 1, y: 2 }]; @@ -39,4 +44,43 @@ describe('EuiCrosshairX', () => { expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__title__value').text()).toBe('1'); expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__item__value').text()).toBe('2'); }); + + test('x crosshair formats ISO string by default', () => { + const data = [ { x0: 1074188586000, x: 1074199386000, y: 1.5 }, { x0: 1074199386000, x: 1074210186000, y: 2 }]; + const component = mount( + + + + ); + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); + const crosshair = component.find('.rv-crosshair'); + expect(crosshair).toHaveLength(1); + expect(crosshair.text()).toContain('2004-01-15T20:43:06.000Z to 2004-01-15T23:43:06.000Z'); + expect(component.render()).toMatchSnapshot(); + }); + + test('x crosshair adheres to custom formatting', () => { + const data = [ { x0: 1074188586000, x: 1074199386000, y: 1.5 }, { x0: 1074199386000, x: 1074210186000, y: 2 }]; + const component = mount( + + + + ); + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); + const crosshair = component.find('.rv-crosshair'); + expect(crosshair).toHaveLength(1); + expect(crosshair.text()).toContain('2004-01-15 03:43-05:00 to 2004-01-15 06:43-05:00'); + expect(component.render()).toMatchSnapshot(); + }); }); diff --git a/src/components/series_chart/crosshairs/crosshair_y.test.js b/src/components/series_chart/crosshairs/crosshair_y.test.js index 1ea8ecdb57e..0b1d89d61fe 100644 --- a/src/components/series_chart/crosshairs/crosshair_y.test.js +++ b/src/components/series_chart/crosshairs/crosshair_y.test.js @@ -6,6 +6,10 @@ import { EuiHorizontalBarSeries } from '../series/horizontal_bar_series'; import { EuiCrosshairY } from './'; import { CrosshairY } from './crosshair_y'; import { requiredProps } from '../../../test/required_props'; +import { EuiHistogramSeries } from '../series'; +import { EuiSeriesChartUtils } from '../utils'; + +const { SCALE } = EuiSeriesChartUtils; describe('EuiCrosshairY', () => { test('render the Y crosshair', () => { @@ -40,4 +44,47 @@ describe('EuiCrosshairY', () => { expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__title__value').text()).toBe('0'); expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__item__value').text()).toBe('1.5'); }); + + test('y crosshair formats ISO string by default', () => { + const data = [ { y0: 1074188586000, y: 1074199386000, x: 1.5 }, { y0: 1074199386000, y: 1074210186000, x: 2 }]; + const component = mount( + + + + ); + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); + const crosshair = component.find('.rv-crosshair'); + expect(crosshair).toHaveLength(1); + expect(crosshair.text()).toContain('2004-01-15T17:43:06.000Z to 2004-01-15T20:43:06.000Z'); + expect(component.render()).toMatchSnapshot(); + }); + + test('y crosshair formats ISO string by default', () => { + const data = [ { y0: 1074188586000, y: 1074199386000, x: 1.5 }, { y0: 1074199386000, y: 1074210186000, x: 2 }]; + const component = mount( + + + + ); + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); + const crosshair = component.find('.rv-crosshair'); + expect(crosshair).toHaveLength(1); + expect(crosshair.text()).toContain('2004-01-15 12:43-05:00 to 2004-01-15 03:43-05:00'); + expect(component.render()).toMatchSnapshot(); + }); }); From a744e0dfbc6d5b4b475942e20a3ec0adc4994926 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 15 Jan 2019 11:07:05 -0500 Subject: [PATCH 6/7] Fixing unit tests that failed CI. --- .../__snapshots__/crosshair_x.test.js.snap | 1014 ----------------- .../__snapshots__/crosshair_y.test.js.snap | 549 --------- .../crosshairs/crosshair_x.test.js | 23 +- .../crosshairs/crosshair_y.test.js | 22 +- 4 files changed, 30 insertions(+), 1578 deletions(-) diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap index d4054ba6450..7f2cd1b9cb3 100644 --- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap +++ b/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap @@ -43,1017 +43,3 @@ exports[`EuiCrosshairX render the X crosshair 1`] = `
`; - -exports[`EuiCrosshairX x crosshair adheres to custom formatting 1`] = ` -
-
-
- - - - - - - - - - - - - - - - - - - 01 PM - - - - - - 01:30 - - - - - - 02 PM - - - - - - 02:30 - - - - - - 03 PM - - - - - - 03:30 - - - - - - 04 PM - - - - - - 04:30 - - - - - - 05 PM - - - - - - 05:30 - - - - - - 06 PM - - - - - - 06:30 - - - - - - - - - - - 0.0 - - - - - - 0.5 - - - - - - 1.0 - - - - - - 1.5 - - - - - - 2.0 - - - - - -
-
-
-
-
-
- - X Value - - : - - 2004-01-15 03:43-05:00 to 2004-01-15 06:43-05:00 - -
-
- - Test Series - - : - - 2 - -
-
-
-
-
-
-
-
-`; - -exports[`EuiCrosshairX x crosshair formats ISO string by default 1`] = ` -
-
-
- - - - - - - - - - - - - - - - - - - 01 PM - - - - - - 01:30 - - - - - - 02 PM - - - - - - 02:30 - - - - - - 03 PM - - - - - - 03:30 - - - - - - 04 PM - - - - - - 04:30 - - - - - - 05 PM - - - - - - 05:30 - - - - - - 06 PM - - - - - - 06:30 - - - - - - - - - - - 0.0 - - - - - - 0.5 - - - - - - 1.0 - - - - - - 1.5 - - - - - - 2.0 - - - - - -
-
-
-
-
-
- - X Value - - : - - 2004-01-15T20:43:06.000Z to 2004-01-15T23:43:06.000Z - -
-
- - Test Series - - : - - 2 - -
-
-
-
-
-
-
-
-`; diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap index b6f4ae91d6f..6b719b1e58b 100644 --- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap +++ b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap @@ -592,552 +592,3 @@ exports[`EuiCrosshairY y crosshair formats ISO string by default 1`] = `
`; - -exports[`EuiCrosshairY y crosshair formats ISO string by default 2`] = ` -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - 0.0 - - - - - - 0.2 - - - - - - 0.4 - - - - - - 0.6 - - - - - - 0.8 - - - - - - 1.0 - - - - - - 1.2 - - - - - - 1.4 - - - - - - 1.6 - - - - - - 1.8 - - - - - - 2.0 - - - - - - - - - - - 01 PM - - - - - - 02 PM - - - - - - 03 PM - - - - - - 04 PM - - - - - - 05 PM - - - - - - 06 PM - - - - - -
-
-
-
-
-
- - Y Value - - : - - 2004-01-15 12:43-05:00 to 2004-01-15 03:43-05:00 - -
-
- - Test Series - - : - - 1.5 - -
-
-
-
-
-
-
-
-`; diff --git a/src/components/series_chart/crosshairs/crosshair_x.test.js b/src/components/series_chart/crosshairs/crosshair_x.test.js index eef22320511..1e65d17e911 100644 --- a/src/components/series_chart/crosshairs/crosshair_x.test.js +++ b/src/components/series_chart/crosshairs/crosshair_x.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; - +import moment from 'moment'; import { EuiSeriesChart } from '../series_chart'; import { EuiVerticalBarSeries } from '../series/vertical_bar_series'; import { EuiCrosshairX } from './'; @@ -46,7 +46,11 @@ describe('EuiCrosshairX', () => { }); test('x crosshair formats ISO string by default', () => { - const data = [ { x0: 1074188586000, x: 1074199386000, y: 1.5 }, { x0: 1074199386000, x: 1074210186000, y: 2 }]; + const openRange = 1074199386000; + const closeRange = 1074210186000; + const data = [ { x0: 1074188586000, x: openRange, y: 1.5 }, { x0: 1074199386000, x: closeRange, y: 2 }]; + const startRangeString = new Date(openRange).toISOString(); + const endRangeString = new Date(closeRange).toISOString(); const component = mount( { component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); const crosshair = component.find('.rv-crosshair'); expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain('2004-01-15T20:43:06.000Z to 2004-01-15T23:43:06.000Z'); - expect(component.render()).toMatchSnapshot(); + expect(crosshair.text()).toContain(`${startRangeString} to ${endRangeString}`); }); test('x crosshair adheres to custom formatting', () => { - const data = [ { x0: 1074188586000, x: 1074199386000, y: 1.5 }, { x0: 1074199386000, x: 1074210186000, y: 2 }]; + const openRange = 1074199386000; + const closeRange = 1074210186000; + const data = [ { x0: 1074188586000, x: openRange, y: 1.5 }, { x0: 1074199386000, x: closeRange, y: 2 }]; + const momentFormat = 'YYYY-MM-DD hh:mmZ'; + const startRange = moment(openRange).format(momentFormat); + const endRange = moment(closeRange).format(momentFormat); const component = mount( @@ -80,7 +88,6 @@ describe('EuiCrosshairX', () => { component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); const crosshair = component.find('.rv-crosshair'); expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain('2004-01-15 03:43-05:00 to 2004-01-15 06:43-05:00'); - expect(component.render()).toMatchSnapshot(); + expect(crosshair.text()).toContain(`${startRange} to ${endRange}`); }); }); diff --git a/src/components/series_chart/crosshairs/crosshair_y.test.js b/src/components/series_chart/crosshairs/crosshair_y.test.js index 0b1d89d61fe..14ab537bff5 100644 --- a/src/components/series_chart/crosshairs/crosshair_y.test.js +++ b/src/components/series_chart/crosshairs/crosshair_y.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; - +import moment from 'moment'; import { EuiSeriesChart } from '../series_chart'; import { EuiHorizontalBarSeries } from '../series/horizontal_bar_series'; import { EuiCrosshairY } from './'; @@ -46,7 +46,11 @@ describe('EuiCrosshairY', () => { }); test('y crosshair formats ISO string by default', () => { - const data = [ { y0: 1074188586000, y: 1074199386000, x: 1.5 }, { y0: 1074199386000, y: 1074210186000, x: 2 }]; + const openRange = 1074188586000; + const closeRange = 1074199386000; + const data = [ { y0: openRange, y: 1074199386000, x: 1.5 }, { y0: closeRange, y: 1074210186000, x: 2 }]; + const startRangeString = new Date(openRange).toISOString(); + const endRangeString = new Date(closeRange).toISOString(); const component = mount( { component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); const crosshair = component.find('.rv-crosshair'); expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain('2004-01-15T17:43:06.000Z to 2004-01-15T20:43:06.000Z'); + expect(crosshair.text()).toContain(`${startRangeString} to ${endRangeString}`); expect(component.render()).toMatchSnapshot(); }); test('y crosshair formats ISO string by default', () => { - const data = [ { y0: 1074188586000, y: 1074199386000, x: 1.5 }, { y0: 1074199386000, y: 1074210186000, x: 2 }]; + const openRange = 1074188586000; + const closeRange = 1074199386000; + const data = [ { y0: openRange, y: 1074199386000, x: 1.5 }, { y0: closeRange, y: 1074210186000, x: 2 }]; + const momentFormat = 'YYYY-MM-DD hh:mmZ'; + const startRangeString = moment(openRange).format(momentFormat); + const endRangeString = moment(closeRange).format(momentFormat); const component = mount( { {...requiredProps} stackBy="x" yType={SCALE.TIME} - yCrosshairFormat="YYYY-MM-DD hh:mmZ" + yCrosshairFormat={momentFormat} orientation={EuiSeriesChartUtils.ORIENTATION.HORIZONTAL} > @@ -84,7 +93,6 @@ describe('EuiCrosshairY', () => { component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); const crosshair = component.find('.rv-crosshair'); expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain('2004-01-15 12:43-05:00 to 2004-01-15 03:43-05:00'); - expect(component.render()).toMatchSnapshot(); + expect(crosshair.text()).toContain(`${startRangeString} to ${endRangeString}`); }); }); From c8a97b70a8de56833181ac07647d764cae65d4d2 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 15 Jan 2019 11:15:37 -0500 Subject: [PATCH 7/7] Commit unsaved changes. --- .../__snapshots__/crosshair_y.test.js.snap | 549 ------------------ .../crosshairs/crosshair_x.test.js | 6 +- .../crosshairs/crosshair_y.test.js | 1 - 3 files changed, 3 insertions(+), 553 deletions(-) diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap index 6b719b1e58b..f21208a2808 100644 --- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap +++ b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap @@ -43,552 +43,3 @@ exports[`EuiCrosshairY render the Y crosshair 1`] = `
`; - -exports[`EuiCrosshairY y crosshair formats ISO string by default 1`] = ` -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - 0.0 - - - - - - 0.2 - - - - - - 0.4 - - - - - - 0.6 - - - - - - 0.8 - - - - - - 1.0 - - - - - - 1.2 - - - - - - 1.4 - - - - - - 1.6 - - - - - - 1.8 - - - - - - 2.0 - - - - - - - - - - - 01 PM - - - - - - 02 PM - - - - - - 03 PM - - - - - - 04 PM - - - - - - 05 PM - - - - - - 06 PM - - - - - -
-
-
-
-
-
- - Y Value - - : - - 2004-01-15T17:43:06.000Z to 2004-01-15T20:43:06.000Z - -
-
- - Test Series - - : - - 1.5 - -
-
-
-
-
-
-
-
-`; diff --git a/src/components/series_chart/crosshairs/crosshair_x.test.js b/src/components/series_chart/crosshairs/crosshair_x.test.js index 1e65d17e911..998b05ee065 100644 --- a/src/components/series_chart/crosshairs/crosshair_x.test.js +++ b/src/components/series_chart/crosshairs/crosshair_x.test.js @@ -72,8 +72,8 @@ describe('EuiCrosshairX', () => { const closeRange = 1074210186000; const data = [ { x0: 1074188586000, x: openRange, y: 1.5 }, { x0: 1074199386000, x: closeRange, y: 2 }]; const momentFormat = 'YYYY-MM-DD hh:mmZ'; - const startRange = moment(openRange).format(momentFormat); - const endRange = moment(closeRange).format(momentFormat); + const startRangeString = moment(openRange).format(momentFormat); + const endRangeString = moment(closeRange).format(momentFormat); const component = mount( { component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); const crosshair = component.find('.rv-crosshair'); expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain(`${startRange} to ${endRange}`); + expect(crosshair.text()).toContain(`${startRangeString} to ${endRangeString}`); }); }); diff --git a/src/components/series_chart/crosshairs/crosshair_y.test.js b/src/components/series_chart/crosshairs/crosshair_y.test.js index 14ab537bff5..38384eca27b 100644 --- a/src/components/series_chart/crosshairs/crosshair_y.test.js +++ b/src/components/series_chart/crosshairs/crosshair_y.test.js @@ -67,7 +67,6 @@ describe('EuiCrosshairY', () => { const crosshair = component.find('.rv-crosshair'); expect(crosshair).toHaveLength(1); expect(crosshair.text()).toContain(`${startRangeString} to ${endRangeString}`); - expect(component.render()).toMatchSnapshot(); }); test('y crosshair formats ISO string by default', () => {