fix(domain): custom domain should not filter data (opensearch-project…

…#1181)

Domain bounds should be used in the sense of zooming in/out with a viewport on the chart. A regression of this behavior slipped through due to a [PR](elastic/elastic-charts#896) causing data to be filtered out when applying a custom domain, removing data points from areas and lines. The right behavior is now restored.

fix opensearch-project#1129

packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/lines.ts

@@ -49,9 +49,16 @@ export function renderLines(ctx: CanvasRenderingContext2D, props: LineGeometries
       const { seriesLineStyle, seriesPointStyle, points } = line;
 
       if (seriesLineStyle.visible) {
-        withPanelTransform(ctx, panel, rotation, renderingArea, (ctx) => {
-          renderLine(ctx, line, sharedStyle, clippings, highlightedLegendItem);
-        });
+        withPanelTransform(
+          ctx,
+          panel,
+          rotation,
+          renderingArea,
+          (ctx) => {
+            renderLine(ctx, line, sharedStyle, clippings, highlightedLegendItem);
+          },
+          { area: clippings, shouldClip: true },
+        );
       }
 
       const visiblePoints = seriesPointStyle.visible ? points : points.filter(({ orphan }) => orphan);

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

@@ -748,14 +748,14 @@ describe('Rendering points - bubble', () => {
       geometries: { bubbles },
       geometriesIndex,
     } = computeSeriesGeometriesSelector(store.getState());
-    test('Can render two points', () => {
+    test('Should render 3 points', () => {
       const [
         {
           value: { points },
         },
       ] = bubbles;
-      // will not render the 3rd point that is out of y domain
-      expect(points.length).toBe(2);
+      // will not render the 4th point that is out of x domain
+      expect(points.length).toBe(3);
       // will keep the 3rd point as an indexedGeometry
       expect(geometriesIndex.size).toEqual(3);
       expect(points[0]).toEqual(

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

@@ -680,15 +680,15 @@ describe('Rendering points - line', () => {
       geometriesIndex,
     } = computeSeriesGeometriesSelector(store.getState());
 
-    test('Can render a split line', () => {
+    test('should render a split line', () => {
       const [{ value: renderedLine }] = lines;
       expect(renderedLine.line.split('M').length - 1).toBe(3);
       expect(renderedLine.color).toBe('red');
       expect(renderedLine.seriesIdentifier.seriesKeys).toEqual([1]);
       expect(renderedLine.seriesIdentifier.specId).toEqual(SPEC_ID);
       expect(renderedLine.transform).toEqual({ x: 0, y: 0 });
     });
-    test('Can render points', () => {
+    test('should render points', () => {
       const [
         {
           value: { points },
@@ -709,7 +709,7 @@ describe('Rendering points - line', () => {
       expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(LIGHT_THEME.lineSeriesStyle.point.radius);
     });
   });
-  describe('Remove points datum is not in domain', () => {
+  describe('Removing out-of-domain points', () => {
     const pointSeriesSpec = MockSeriesSpec.line({
       id: SPEC_ID,
       // groupId: GROUP_ID,
@@ -736,14 +736,14 @@ describe('Rendering points - line', () => {
       geometries: { lines },
       geometriesIndex,
     } = computeSeriesGeometriesSelector(store.getState());
-    test('Can render two points', () => {
+    test('should render 3 points', () => {
       const [
         {
           value: { points },
         },
       ] = lines;
-      // will not render the 3rd point that is out of y domain
-      expect(points.length).toBe(2);
+      // 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);
       expect(points[0]).toEqual(

packages/osd-charts/src/chart_types/xy_chart/rendering/utils.ts

@@ -184,8 +184,7 @@ export function isYValueDefinedFn(yScale: Scale, xScale: Scale): YDefinedFn {
     return (
       yValue !== null &&
       !((isLogScale && domainPolarity >= 0 && yValue <= 0) || (domainPolarity < 0 && yValue >= 0)) &&
-      xScale.isValueInDomain(datum.x) &&
-      yScale.isValueInDomain(yValue)
+      xScale.isValueInDomain(datum.x)
     );
   };
 }

packages/osd-charts/stories/axes/8_custom_domain.tsx

@@ -39,7 +39,7 @@ export const Example = () => {
 
   const lineDomain = {
     min: number('Line min', 0, options, 'Line'),
-    max: number('Line max', 10, options, 'Line'),
+    max: number('Line max', 8, options, 'Line'),
   };
 
   const ticksOptions = {