diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-test-points-outside-of-domain-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-test-points-outside-of-domain-visually-looks-correct-1-snap.png new file mode 100644 index 00000000000..e2e5c1e0a11 Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-test-points-outside-of-domain-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-positive-values-should-render-values-with-log-limit-1-snap.png b/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-positive-values-should-render-values-with-log-limit-1-snap.png index c4b40668c03..2a472e0ef02 100644 Binary files a/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-positive-values-should-render-values-with-log-limit-1-snap.png and b/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-positive-values-should-render-values-with-log-limit-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-not-display-tooltip-over-point-outside-of-domain-even-more-left-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-not-display-tooltip-over-point-outside-of-domain-even-more-left-1-snap.png new file mode 100644 index 00000000000..c47bf4e922f Binary files /dev/null and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-not-display-tooltip-over-point-outside-of-domain-even-more-left-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-area-chart-with-points-outside-of-domain-correclty-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-area-chart-with-points-outside-of-domain-correclty-1-snap.png new file mode 100644 index 00000000000..e2e5c1e0a11 Binary files /dev/null and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-area-chart-with-points-outside-of-domain-correclty-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-area-chart-with-points-outside-of-the-domain-with-y-0-accessor-correctly-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-area-chart-with-points-outside-of-the-domain-with-y-0-accessor-correctly-1-snap.png new file mode 100644 index 00000000000..c6bf85be3e6 Binary files /dev/null and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-area-chart-with-points-outside-of-the-domain-with-y-0-accessor-correctly-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-line-chart-with-points-outside-of-domain-correctly-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-line-chart-with-points-outside-of-domain-correctly-1-snap.png new file mode 100644 index 00000000000..5171f9a3e55 Binary files /dev/null and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-occlusion-of-points-outside-of-chart-domain-should-render-line-chart-with-points-outside-of-domain-correctly-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-data-points-outside-of-the-configured-y-domain-should-not-render-points-outside-domain-with-line-chart-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-data-points-outside-of-the-configured-y-domain-should-not-render-points-outside-domain-with-line-chart-1-snap.png new file mode 100644 index 00000000000..5171f9a3e55 Binary files /dev/null and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-data-points-outside-of-the-configured-y-domain-should-not-render-points-outside-domain-with-line-chart-1-snap.png differ diff --git a/integration/tests/test_cases_stories.test.ts b/integration/tests/test_cases_stories.test.ts index b1ada07bda1..803480d4a8c 100644 --- a/integration/tests/test_cases_stories.test.ts +++ b/integration/tests/test_cases_stories.test.ts @@ -56,4 +56,12 @@ describe('Test cases stories', () => { }); }); }); + + describe('Data points outside of the configured Y domain', () => { + it('should not render points outside domain with line chart', async () => { + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line', + ); + }); + }); }); diff --git a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bubble.test.ts.snap b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bubble.test.ts.snap index 42753183af6..4c61d09bc5d 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bubble.test.ts.snap +++ b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bubble.test.ts.snap @@ -726,7 +726,7 @@ Array [ ] `; -exports[`Rendering points - bubble Remove points datum is not in domain Should render 3 points 1`] = ` +exports[`Rendering points - bubble Remove points datum is not in domain Should render 2 points 1`] = ` Array [ Object { "color": "red", @@ -844,64 +844,6 @@ Array [ "x": 50, "y": 0, }, - Object { - "color": "red", - "orphan": false, - "panel": Object { - "height": 100, - "left": 0, - "top": 0, - "width": 100, - }, - "radius": 2, - "seriesIdentifier": Object { - "key": "groupId{__global__}spec{spec_1}yAccessor{1}splitAccessors{}", - "seriesKeys": Array [ - 1, - ], - "smHorizontalAccessorValue": undefined, - "smVerticalAccessorValue": undefined, - "specId": "spec_1", - "splitAccessors": Map {}, - "yAccessor": 1, - }, - "style": Object { - "fill": Object { - "color": Array [ - 255, - 255, - 255, - 1, - ], - }, - "shape": "circle", - "stroke": Object { - "color": Array [ - 255, - 0, - 0, - 1, - ], - "width": 1, - }, - }, - "transform": Object { - "x": 0, - "y": 0, - }, - "value": Object { - "accessor": "y1", - "datum": Array [ - 2, - 10, - ], - "mark": null, - "x": 2, - "y": 10, - }, - "x": 100, - "y": -900, - }, ] `; diff --git a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.lines.test.ts.snap b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.lines.test.ts.snap index de0eae31e99..c6d9409b48d 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.lines.test.ts.snap +++ b/packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.lines.test.ts.snap @@ -844,64 +844,6 @@ Array [ "x": 50, "y": 0, }, - Object { - "color": "red", - "orphan": false, - "panel": Object { - "height": 100, - "left": 0, - "top": 0, - "width": 100, - }, - "radius": 2, - "seriesIdentifier": Object { - "key": "groupId{__global__}spec{spec_1}yAccessor{1}splitAccessors{}", - "seriesKeys": Array [ - 1, - ], - "smHorizontalAccessorValue": undefined, - "smVerticalAccessorValue": undefined, - "specId": "spec_1", - "splitAccessors": Map {}, - "yAccessor": 1, - }, - "style": Object { - "fill": Object { - "color": Array [ - 255, - 255, - 255, - 1, - ], - }, - "shape": "circle", - "stroke": Object { - "color": Array [ - 255, - 0, - 0, - 1, - ], - "width": 1, - }, - }, - "transform": Object { - "x": 0, - "y": 0, - }, - "value": Object { - "accessor": "y1", - "datum": Array [ - 2, - 10, - ], - "mark": null, - "x": 2, - "y": 10, - }, - "x": 100, - "y": -900, - }, ] `; diff --git a/packages/charts/src/chart_types/xy_chart/rendering/points.ts b/packages/charts/src/chart_types/xy_chart/rendering/points.ts index c9891b16d74..9f1ab85fae8 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/points.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/points.ts @@ -109,9 +109,10 @@ export function renderPoints( panel, orphan, }; + const isInYDomain = yScale.isValueInDomain(valueAccessor(datum)); indexedGeometryMap.set(pointGeometry, geometryType); // use the geometry only if the yDatum in contained in the current yScale domain - if (y !== null && yDefined(datum, valueAccessor) && !isDatumFilled(datum)) { + if (y !== null && yDefined(datum, valueAccessor) && isInYDomain && !isDatumFilled(datum)) { points.push(pointGeometry); } }); diff --git a/packages/charts/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts b/packages/charts/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts index 9d19c45a9d5..9b9ac4445ba 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts @@ -396,14 +396,14 @@ describe('Rendering points - bubble', () => { geometries: { bubbles }, geometriesIndex, } = computeSeriesGeometriesSelector(store.getState()); - test('Should render 3 points', () => { + test('Should render 2 points', () => { const [ { value: { points }, }, ] = bubbles; - // will not render the 4th point that is out of x domain - expect(points).toHaveLength(3); + // will not render the 4th point that is out of x domain, the 3rd point is not rendered due to the y Domain max of 1 + expect(points).toHaveLength(2); // will keep the 3rd point as an indexedGeometry expect(geometriesIndex.size).toEqual(3); expect(points).toMatchSnapshot(); diff --git a/packages/charts/src/chart_types/xy_chart/rendering/rendering.lines.test.ts b/packages/charts/src/chart_types/xy_chart/rendering/rendering.lines.test.ts index fcc764b627b..a18d5e5bd19 100644 --- a/packages/charts/src/chart_types/xy_chart/rendering/rendering.lines.test.ts +++ b/packages/charts/src/chart_types/xy_chart/rendering/rendering.lines.test.ts @@ -421,8 +421,8 @@ describe('Rendering points - line', () => { value: { points }, }, ] = lines; - // will not render the 4th point is out of the x domain - expect(points.length).toBe(3); + // will not render the 4th point is out of the x domain, will not keep the 3rd point which is out of the y Domain + expect(points.length).toBe(2); // will keep the 3rd point as an indexedGeometry expect(geometriesIndex.size).toEqual(3); expect(points).toMatchSnapshot(); diff --git a/storybook/stories/test_cases/8_test_points_outside_of_domain.story.tsx b/storybook/stories/test_cases/8_test_points_outside_of_domain.story.tsx new file mode 100644 index 00000000000..b3dae0645e8 --- /dev/null +++ b/storybook/stories/test_cases/8_test_points_outside_of_domain.story.tsx @@ -0,0 +1,68 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { boolean, select } from '@storybook/addon-knobs'; +import React from 'react'; + +import { AreaSeries, LineSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; + +import { useBaseTheme } from '../../use_base_theme'; + +export const Example = () => { + const typeOfSeries = select('series type', ['line', 'area'], 'area'); + const showY0Accessor = typeOfSeries === 'area' ? boolean('show y0Accessor', false) : null; + + const data = [ + [1, 1], + [2, -3], + [3, 3], + [4, 4], + [5, 5], + [6, 4], + [7, -3], + [8, 2], + [9, 1], + ]; + return ( + + + + Number(d).toFixed(2)} + domain={{ + min: -2, + max: NaN, + }} + /> + {typeOfSeries === 'line' ? ( + + ) : ( + y - 1] : undefined} + data={data} + /> + )} + + ); +}; diff --git a/storybook/stories/test_cases/test_cases.stories.tsx b/storybook/stories/test_cases/test_cases.stories.tsx index 04d9b462c66..3f841650055 100644 --- a/storybook/stories/test_cases/test_cases.stories.tsx +++ b/storybook/stories/test_cases/test_cases.stories.tsx @@ -17,3 +17,4 @@ export { Example as filterZerosInLogFitDomain } from './4_filter_zero_values_log export { Example as legendScrollBarSizing } from './5_legend_scroll_bar_sizing.story'; export { Example as accessibilityCustomizations } from './6_a11y_custom_description.story'; export { Example as rtlText } from './7_rtl_text.story'; +export { Example as testPointsOutsideOfDomain } from './8_test_points_outside_of_domain.story';