fix(area_charts): correctly represent baseline with negative data points

src/chart_types/xy_chart/rendering/rendering.ts

@@ -191,7 +191,7 @@ type GetRadiusFnReturn = (mark: number | null, defaultRadius?: number) => number
  *
  * @todo add continuous/non-stepped function
  *
- * @param  {Datum[]} radii
+ * @param  {DataSeriesDatum[]} data
  * @param  {number} lineWidth
  * @param  {number=50} markSizeRatio - 0 to 100
  * @internal
@@ -218,8 +218,7 @@ export function getRadiusFn(data: DataSeriesDatum[], lineWidth: number, markSize
     }
     const circleRadius = (mark / 2 - min) / radiusStep;
     const baseMagicNumber = 2;
-    const base = circleRadius ? Math.sqrt(circleRadius + baseMagicNumber) + lineWidth : lineWidth;
-    return base;
+    return circleRadius ? Math.sqrt(circleRadius + baseMagicNumber) + lineWidth : lineWidth;
   };
 }
 
@@ -273,7 +272,7 @@ function renderPoints(
       let radius = getRadius(mark);
       // we fix 0 and negative values at y = 0
       if (yDatum === null || (isLogScale && yDatum <= 0)) {
-        y = yScale.range[0];
+        [y] = yScale.range;
         radius = 0;
       } else {
         y = yScale.scale(yDatum);
@@ -399,7 +398,7 @@ export function renderBars(
       return;
     }
 
-    let y: number | null = 0;
+    let y: number | null;
     let y0Scaled;
     if (yScale.type === ScaleType.Log) {
       y = y1 === 0 || y1 === null ? yScale.range[0] : yScale.scale(y1);
@@ -711,7 +710,16 @@ export function renderArea(
       return yScale.isInverted ? yScale.range[1] : yScale.range[0];
     })
     .y0(({ y0 }) => {
-      return y0 === null || (isLogScale && y0 <= 0) ? yScale.range[0] : yScale.scaleOrThrow(y0);
+      if (y0 === null) {
+        if (isLogScale) {
+          return yScale.scaleOrThrow(1);
+        }
+        return yScale.scaleOrThrow(0);
+      }
+      if (isLogScale) {
+        return yScale.scaleOrThrow(Math.max(1, y0));
+      }
+      return yScale.scaleOrThrow(y0);
     })
     .defined((datum) => {
       const yValue = getYValue(datum);
@@ -816,7 +824,6 @@ export function isDatumFilled({ filled, initialY1 }: DataSeriesDatum) {
  * @param dataset
  * @param xScale
  * @param xScaleOffset
- * @param panel
  * @internal
  */
 export function getClippedRanges(dataset: DataSeriesDatum[], xScale: Scale, xScaleOffset: number): ClippedRanges {

stories/area/17_negative.tsx

@@ -0,0 +1,62 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { AreaSeries, Axis, Chart, Position, ScaleType, timeFormatter } from '../../src';
+import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
+import { SB_SOURCE_PANEL } from '../utils/storybook';
+
+const dateFormatter = timeFormatter('HH:mm');
+
+export const Example = () => (
+  <Chart className="story-chart">
+    <Axis
+      id="bottom"
+      title="timestamp per 1 minute"
+      position={Position.Bottom}
+      showOverlappingTicks
+      tickFormat={dateFormatter}
+    />
+    <Axis
+      id="left"
+      title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
+      position={Position.Left}
+      tickFormat={(d) => Number(d).toFixed(2)}
+    />
+
+    <AreaSeries
+      id="area"
+      xScaleType={ScaleType.Time}
+      yScaleType={ScaleType.Linear}
+      xAccessor={0}
+      yAccessors={[1]}
+      data={KIBANA_METRICS.metrics.kibana_os_load[0].data.map(([x, y]) => {
+        return [x, -y];
+      })}
+    />
+  </Chart>
+);
+
+// storybook configuration
+Example.story = {
+  parameters: {
+    options: { selectedPanel: SB_SOURCE_PANEL },
+  },
+};

stories/area/18_negative_positive.tsx

@@ -0,0 +1,70 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '../../src';
+import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
+import { SB_SOURCE_PANEL } from '../utils/storybook';
+
+const dateFormatter = timeFormatter('HH:mm');
+
+export const Example = () => {
+  const dataset = KIBANA_METRICS.metrics.kibana_os_load[0];
+  return (
+    <Chart className="story-chart">
+      <Settings showLegend />
+      <Axis
+        id="bottom"
+        title="timestamp per 1 minute"
+        position={Position.Bottom}
+        showOverlappingTicks
+        tickFormat={dateFormatter}
+      />
+      <Axis id="left" title={dataset.metric.title} position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
+
+      <AreaSeries
+        id="area1"
+        xScaleType={ScaleType.Time}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        data={dataset.data.map(([x, y], i) => {
+          return [x, i < dataset.data.length / 2 ? -y : y];
+        })}
+      />
+      <AreaSeries
+        id="area2"
+        xScaleType={ScaleType.Time}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        data={dataset.data.map(([x, y], i) => {
+          return [x, i >= dataset.data.length / 2 ? -y : y];
+        })}
+      />
+    </Chart>
+  );
+};
+// storybook configuration
+Example.story = {
+  parameters: {
+    options: { selectedPanel: SB_SOURCE_PANEL },
+  },
+};

stories/area/area.stories.tsx

@@ -40,6 +40,8 @@ export { Example as stackedSameNaming } from './10_stacked_same_naming';
 export { Example as bandArea } from './13_band_area';
 export { Example as stackedBand } from './14_stacked_band';
 export { Example as stackedGrouped } from './15_stacked_grouped';
+export { Example as withNegativeValues } from './17_negative';
+export { Example as withNegativeAndPositive } from './18_negative_positive';
 
 export { Example as testLinear } from './11_test_linear';
 export { Example as testTime } from './12_test_time';