fix(xy): occlude points outside of y domain

integration/tests/test_cases_stories.test.ts

@@ -57,3 +57,11 @@ 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',
+    );
+  });
+});

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,
-  },
 ]
 `;
 

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,
-  },
 ]
 `;
 

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);
       }
     });

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();

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();

storybook/stories/test_cases/8_test_points_outside_of_domain.story.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 (
+    <Chart>
+      <Settings baseTheme={useBaseTheme()} />
+      <Axis id="bottom" title="index" position={Position.Bottom} />
+      <Axis
+        id="left"
+        title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
+        position={Position.Left}
+        tickFormat={(d) => Number(d).toFixed(2)}
+        domain={{
+          min: -2,
+          max: NaN,
+          minInterval: 1,
+        }}
+      />
+      {typeOfSeries === 'line' ? (
+        <LineSeries
+          id="lines"
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          data={data}
+        />
+      ) : (
+        <AreaSeries
+          id="areas"
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          y0Accessors={showY0Accessor ? [([, y]) => y - 1] : undefined}
+          data={data}
+        />
+      )}
+    </Chart>
+  );
+};

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';