fix(area_charts): correctly represent baseline with negative data points [23.x]

integration/tests/area_stories.test.ts

@@ -63,4 +63,32 @@ describe('Area series stories', () => {
       );
     });
   });
+  describe('Negative log Areas', () => {
+    it('snows negative values with log scale', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/area-chart--with-negative-values&knob-Y scale=log',
+      );
+    });
+    it('snows only positive domain mixed polarity domain', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log',
+      );
+    });
+
+    it('snows only positive values when hiding negative one', async () => {
+      const action = async () => await page.click('.echLegendItem:nth-child(2) .echLegendItem__label');
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log',
+        { action },
+      );
+    });
+
+    it('snows only negative values when hiding positive one', async () => {
+      const action = async () => await page.click('.echLegendItem:nth-child(1) .echLegendItem__label');
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log',
+        { action },
+      );
+    });
+  });
 });

src/chart_types/xy_chart/rendering/rendering.areas.test.ts

@@ -1136,8 +1136,8 @@ describe('Rendering points - areas', () => {
       const zeroValueIndexdGeometry = indexedGeometryMap.find(5)!;
       expect(zeroValueIndexdGeometry).toBeDefined();
       expect(zeroValueIndexdGeometry.length).toBe(1);
-      // moved to the bottom of the chart
-      expect(zeroValueIndexdGeometry[0].y).toBe(100);
+      // the zero value is moved vertically to infinity
+      expect(zeroValueIndexdGeometry[0].y).toBe(Infinity);
       // 0 radius point
       expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(0);
     });

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

@@ -1080,12 +1080,8 @@ describe('Rendering points - bubble', () => {
         y: 100,
       });
       expect(zeroValueIndexdGeometry).toBeDefined();
-      expect(zeroValueIndexdGeometry.length).toBe(5);
+      expect(zeroValueIndexdGeometry.length).toBe(3);
       expect(zeroValueIndexdGeometry.find(({ value: { x } }) => x === 5)).toBeDefined();
-      // moved to the bottom of the chart
-      expect((zeroValueIndexdGeometry[0] as PointGeometry).y).toBe(100);
-      // 0 radius point
-      expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(0);
     });
   });
   describe('Remove points datum is not in domain', () => {
@@ -1198,82 +1194,4 @@ describe('Rendering points - bubble', () => {
       } as unknown) as PointGeometry);
     });
   });
-
-  describe('Error guards for scaled values', () => {
-    const pointSeriesSpec: BubbleSeriesSpec = {
-      chartType: ChartTypes.XYAxis,
-      specType: SpecTypes.Series,
-      id: SPEC_ID,
-      groupId: GROUP_ID,
-      seriesType: SeriesTypes.Bubble,
-      data: [
-        [0, 10],
-        [1, 5],
-      ],
-      xAccessor: 0,
-      yAccessors: [1],
-      xScaleType: ScaleType.Ordinal,
-      yScaleType: ScaleType.Linear,
-    };
-    const pointSeriesMap = [pointSeriesSpec];
-    const pointSeriesDomains = computeSeriesDomains(pointSeriesMap, new Map());
-    const xScale = computeXScale({
-      xDomain: pointSeriesDomains.xDomain,
-      totalBarsInCluster: pointSeriesMap.length,
-      range: [0, 100],
-    });
-    const yScales = computeYScales({ yDomains: pointSeriesDomains.yDomain, range: [100, 0] });
-    let renderedBubble: {
-      bubbleGeometry: BubbleGeometry;
-      indexedGeometryMap: IndexedGeometryMap;
-    };
-
-    beforeEach(() => {
-      renderedBubble = renderBubble(
-        25, // adding a ideal 25px shift, generally applied by renderGeometries
-        pointSeriesDomains.formattedDataSeries.nonStacked[0].dataSeries[0],
-        xScale,
-        yScales.get(GROUP_ID)!,
-        'red',
-        false,
-        LIGHT_THEME.bubbleSeriesStyle,
-        {
-          enabled: false,
-        },
-        false,
-      );
-    });
-
-    describe('xScale values throw error', () => {
-      beforeAll(() => {
-        jest.spyOn(xScale, 'scaleOrThrow').mockImplementation(() => {
-          throw new Error();
-        });
-      });
-
-      it('Should have empty bubble', () => {
-        const { bubbleGeometry } = renderedBubble;
-        expect(bubbleGeometry.points).toHaveLength(2);
-        expect(bubbleGeometry.color).toBe('red');
-        expect(bubbleGeometry.seriesIdentifier.seriesKeys).toEqual([1]);
-        expect(bubbleGeometry.seriesIdentifier.specId).toEqual(SPEC_ID);
-      });
-    });
-
-    describe('yScale values throw error', () => {
-      beforeAll(() => {
-        jest.spyOn(yScales.get(GROUP_ID)!, 'scaleOrThrow').mockImplementation(() => {
-          throw new Error();
-        });
-      });
-
-      it('Should have empty bubble', () => {
-        const { bubbleGeometry } = renderedBubble;
-        expect(bubbleGeometry.points).toHaveLength(2);
-        expect(bubbleGeometry.color).toBe('red');
-        expect(bubbleGeometry.seriesIdentifier.seriesKeys).toEqual([1]);
-        expect(bubbleGeometry.seriesIdentifier.specId).toEqual(SPEC_ID);
-      });
-    });
-  });
 });

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

@@ -1103,7 +1103,7 @@ describe('Rendering points - line', () => {
       expect(zeroValueIndexdGeometry).toBeDefined();
       expect(zeroValueIndexdGeometry.length).toBe(1);
       // moved to the bottom of the chart
-      expect((zeroValueIndexdGeometry[0] as PointGeometry).y).toBe(100);
+      expect((zeroValueIndexdGeometry[0] as PointGeometry).y).toBe(Infinity);
       // 0 radius point
       expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(0);
     });