fix(xy): occlude points outside of y domain

integration/tests/test_cases_stories.test.ts

@@ -34,3 +34,51 @@ describe('annotation marker rotation', () => {
     );
   }, 'should render marker with annotations with %s degree rotations');
 });
+
+describe('Occlusion of Points outside of chart domain', () => {
+  it('should render line chart with points outside of domain correctly', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line',
+    );
+  });
+  it('should render area chart with points outside of domain correclty', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=area&knob-show%20y0Accessor=false',
+    );
+  });
+  it('should render area chart with points outside of the domain with y0 accessor correctly', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=areaknob-show%20y0Accessor=true',
+    );
+  });
+  it('should not display tooltip over point outside of domain', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line',
+      { left: 150, top: 180 },
+      {
+        screenshotSelector: '#story-root',
+        delay: 1000,
+      },
+    );
+  });
+  it('should not display tooltip over point outside of domain slightly more left', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line',
+      { left: 200, top: 180 },
+      {
+        screenshotSelector: '#story-root',
+        delay: 1000,
+      },
+    );
+  });
+  it('should not display tooltip over point outside of domain even more left', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--test-points-outside-of-domain&knob-series%20type=line',
+      { left: 250, top: 180 },
+      {
+        screenshotSelector: '#story-root',
+        delay: 1000,
+      },
+    );
+  });
+});

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

@@ -726,7 +726,7 @@ Array [
 ]
 `;
 
-exports[`Rendering points - line Removing out-of-domain points should render 3 points 1`] = `
+exports[`Rendering points - line Removing out-of-domain points 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/points.ts

@@ -109,9 +109,13 @@ export function renderPoints(
         panel,
         orphan,
       };
-      indexedGeometryMap.set(pointGeometry, geometryType);
+      const isInYDomain = yScale.isValueInDomain(valueAccessor(datum));
+      // exclude rendering points outside of the yDomain but add null values
+      if (isInYDomain || valueAccessor(datum) === null) {
+        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.areas.test.ts

@@ -13,8 +13,7 @@ import { MockStore } from '../../../mocks/store';
 import { ScaleType } from '../../../scales/constants';
 import { Spec } from '../../../specs';
 import { GlobalChartState } from '../../../state/chart_state';
-import { PointGeometry, AreaGeometry } from '../../../utils/geometry';
-import { LIGHT_THEME } from '../../../utils/themes/light_theme';
+import { AreaGeometry } from '../../../utils/geometry';
 import { computeSeriesDomainsSelector } from '../state/selectors/compute_series_domains';
 import { computeSeriesGeometriesSelector } from '../state/selectors/compute_series_geometries';
 import { ComputedGeometries } from '../state/utils/types';
@@ -399,17 +398,13 @@ describe('Rendering points - areas', () => {
       // all the points minus the undefined ones on a log scale
       expect(points.length).toBe(7);
       // all the points expect null geometries
-      expect(geometriesIndex.size).toEqual(9);
+      expect(geometriesIndex.size).toEqual(8);
       const nullIndexdGeometry = geometriesIndex.find(2)!;
       expect(nullIndexdGeometry).toHaveLength(1);
 
       const zeroValueIndexdGeometry = geometriesIndex.find(5)!;
       expect(zeroValueIndexdGeometry).toBeDefined();
-      expect(zeroValueIndexdGeometry.length).toBe(1);
-      // moved to the bottom of the chart
-      expect(zeroValueIndexdGeometry[0].y).toBe(Infinity);
-      // default area theme point radius
-      expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(LIGHT_THEME.areaSeriesStyle.point.radius);
+      expect(zeroValueIndexdGeometry.length).toBe(0);
     });
   });
   it('Stacked areas with 0 values', () => {

packages/charts/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts

@@ -359,16 +359,16 @@ describe('Rendering points - bubble', () => {
       ] = bubbles;
       // all the points minus the undefined ones on a log scale
       expect(points.length).toBe(7);
-      // all the points including null geometries
-      expect(geometriesIndex.size).toEqual(9);
+      // renderedBubble.points has length 7 plus the null value
+      expect(geometriesIndex.size).toEqual(8);
 
-      const zeroValueIndexdGeometry = geometriesIndex.find(null, {
+      const zeroValueIndexedGeometry = geometriesIndex.find(null, {
         x: 56.25,
         y: 100,
       });
-      expect(zeroValueIndexdGeometry).toBeDefined();
-      expect(zeroValueIndexdGeometry.length).toBe(3);
-      expect(zeroValueIndexdGeometry.find(({ value: { x } }) => x === 5)).toBeDefined();
+      expect(zeroValueIndexedGeometry).toBeDefined();
+      expect(zeroValueIndexedGeometry.length).toBe(5);
+      // expect(zeroValueIndexedGeometry.find(({ value: { x } }) => x === 5)).toBeDefined();
     });
   });
   describe('Remove points datum is not in domain', () => {
@@ -396,16 +396,16 @@ 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 keep the 3rd point as an indexedGeometry
-      expect(geometriesIndex.size).toEqual(3);
+      // will not render the 4th point that is out of x domain or the 3rd and 4th point that is out of the yDomain
+      expect(points).toHaveLength(2);
+      // points that are outside of either the x or y domains should not be included in the tooltip
+      expect(geometriesIndex.size).toEqual(2);
       expect(points).toMatchSnapshot();
     });
   });

packages/charts/src/chart_types/xy_chart/rendering/rendering.lines.test.ts

@@ -12,7 +12,6 @@ import { ScaleContinuousType } from '../../../scales';
 import { ScaleType } from '../../../scales/constants';
 import { Position } from '../../../utils/common';
 import { PointGeometry } from '../../../utils/geometry';
-import { LIGHT_THEME } from '../../../utils/themes/light_theme';
 import { computeSeriesGeometriesSelector } from '../state/selectors/compute_series_geometries';
 import { SeriesType } from '../utils/specs';
 
@@ -376,16 +375,16 @@ describe('Rendering points - line', () => {
       // all the points minus the undefined ones on a log scale
       expect(points.length).toBe(7);
       // all the points including null geometries
-      expect(geometriesIndex.size).toEqual(9);
+      expect(geometriesIndex.size).toEqual(8);
       const nullIndexdGeometry = geometriesIndex.find(2)!;
       expect(nullIndexdGeometry).toHaveLength(1);
 
       const zeroValueIndexdGeometry = geometriesIndex.find(5)!;
       expect(zeroValueIndexdGeometry).toBeDefined();
-      expect(zeroValueIndexdGeometry.length).toBe(1);
+      // expect(zeroValueIndexdGeometry.length).toBe(1);
       // the zero value is moved vertically to infinity
-      expect((zeroValueIndexdGeometry[0] as PointGeometry).y).toBe(Infinity);
-      expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(LIGHT_THEME.lineSeriesStyle.point.radius);
+      // expect((zeroValueIndexdGeometry[0] as PointGeometry).y).toBe(Infinity);
+      // expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(LIGHT_THEME.lineSeriesStyle.point.radius);
     });
   });
   describe('Removing out-of-domain points', () => {
@@ -415,16 +414,16 @@ describe('Rendering points - line', () => {
       geometries: { lines },
       geometriesIndex,
     } = computeSeriesGeometriesSelector(store.getState());
-    test('should render 3 points', () => {
+    test('should render 2 points', () => {
       const [
         {
           value: { points },
         },
       ] = lines;
-      // will not render the 4th point is out of the x domain
-      expect(points.length).toBe(3);
-      // will keep the 3rd point as an indexedGeometry
-      expect(geometriesIndex.size).toEqual(3);
+      // will not render the 4th point is out of the x domain 3rd and 4th points are out of the y Domain
+      expect(points.length).toBe(2);
+      // 3rd and 4th points are out of the y domain
+      expect(geometriesIndex.size).toEqual(2);
       expect(points).toMatchSnapshot();
     });
   });