fix: polarity value filtering on non-log scales (#1292)

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

@@ -8,6 +8,7 @@
 
 import { MockGlobalSpec, MockSeriesSpec } from '../../../mocks/specs';
 import { MockStore } from '../../../mocks/store';
+import { ScaleContinuousType } from '../../../scales';
 import { ScaleType } from '../../../scales/constants';
 import { Position } from '../../../utils/common';
 import { PointGeometry } from '../../../utils/geometry';
@@ -427,4 +428,48 @@ describe('Rendering points - line', () => {
       expect(points).toMatchSnapshot();
     });
   });
+
+  describe('polarity', () => {
+    let polarity = 1;
+    let points: PointGeometry[] = [];
+    let yScaleType: ScaleContinuousType = ScaleType.Linear;
+
+    beforeEach(() => {
+      const pointSeriesSpec = MockSeriesSpec.line({
+        id: SPEC_ID,
+        data: [
+          { x: 1, y: 0 },
+          { x: 2, y: 0 },
+          { x: 3, y: polarity },
+          { x: 4, y: 0 },
+        ],
+        xScaleType: ScaleType.Linear,
+        yScaleType,
+      });
+      const axis = MockGlobalSpec.axis({ position: Position.Left });
+      const store = MockStore.default();
+      MockStore.addSpecs([pointSeriesSpec, axis], store);
+      // eslint-disable-next-line prefer-destructuring
+      points = computeSeriesGeometriesSelector(store.getState()).geometries.lines[0].value.points;
+    });
+
+    describe.each([
+      ['positive', 1],
+      ['negative', -1],
+    ])('%s', (_, pol) => {
+      beforeAll(() => {
+        polarity = pol;
+      });
+
+      describe.each([ScaleType.Linear, ScaleType.Log])('%s', (scaleType) => {
+        beforeAll(() => {
+          yScaleType = scaleType;
+        });
+
+        test('should render correct number of points', () => {
+          expect(points.length).toBe(scaleType === ScaleType.Log ? 1 : 4);
+        });
+      });
+    });
+  });
 });

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

@@ -153,6 +153,15 @@ export function isPointOnGeometry(
   return yCoordinate >= y && yCoordinate <= y + height && xCoordinate >= x && xCoordinate <= x + width;
 }
 
+const getScaleTypeValueValidator = (yScale: Scale): ((n: number) => boolean) => {
+  if (!isLogarithmicScale(yScale)) return () => true;
+
+  const domainPolarity = getDomainPolarity(yScale.domain);
+  return (yValue: number) => {
+    return !((domainPolarity >= 0 && yValue <= 0) || (domainPolarity < 0 && yValue >= 0));
+  };
+};
+
 /**
  * The default zero baseline for area charts.
  */
@@ -166,15 +175,10 @@ export type YDefinedFn = (
 
 /** @internal */
 export function isYValueDefinedFn(yScale: Scale, xScale: Scale): YDefinedFn {
-  const isLogScale = isLogarithmicScale(yScale);
-  const domainPolarity = getDomainPolarity(yScale.domain);
+  const validator = getScaleTypeValueValidator(yScale);
   return (datum, getValueAccessor) => {
     const yValue = getValueAccessor(datum);
-    return (
-      yValue !== null &&
-      !((isLogScale && domainPolarity >= 0 && yValue <= 0) || (domainPolarity < 0 && yValue >= 0)) &&
-      xScale.isValueInDomain(datum.x)
-    );
+    return yValue !== null && validator(yValue) && xScale.isValueInDomain(datum.x);
   };
 }
 

storybook/stories/line/15_test_negative_points.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 moment from 'moment';
+import React from 'react';
+
+import { LineSeries, Chart, ScaleType, Settings, Position, Axis } from '@elastic/charts';
+
+import { useBaseTheme } from '../../use_base_theme';
+
+export const Example = () => {
+  const negative = boolean('use negative values', true);
+  const yScaleType = select(
+    'Y scale type',
+    {
+      [ScaleType.Linear]: ScaleType.Linear,
+      [ScaleType.Log]: ScaleType.Log,
+    },
+    ScaleType.Linear,
+  );
+  const start = moment(1628547917775);
+  const data = new Array(12).fill(0).map((_, i) => {
+    return {
+      y: i === 10 ? (negative ? -1 : 1) : 0,
+      x: start.add(1, 'm').valueOf(),
+    };
+  });
+  return (
+    <Chart>
+      <Settings baseTheme={useBaseTheme()} />
+      <Axis id="y" position={Position.Left} />
+      <Axis id="x" position={Position.Bottom} />
+      <LineSeries fit="linear" id="line" xScaleType={ScaleType.Time} yScaleType={yScaleType} data={data} />
+    </Chart>
+  );
+};

storybook/stories/line/line.stories.tsx

@@ -29,3 +29,4 @@ export { Example as testOrphanDataPoints } from './12_orphan_data_points';
 export { Example as testPathOrdering } from './10_test_path_ordering';
 export { Example as lineWithMarkAccessor } from './13_line_mark_accessor';
 export { Example as pointShapes } from './14_point_shapes';
+export { Example as testNegativePoints } from './15_test_negative_points';