chore: add warning when using area charts on mixed polarity datasets

elastic · Dec 9, 2021 · f06db8a · f06db8a
1 parent ff2f537
commit f06db8a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/charts/src/chart_types/xy_chart/utils/series.test.ts b/packages/charts/src/chart_types/xy_chart/utils/series.test.ts
@@ -236,7 +236,7 @@ describe('Series', () => {
       }),
     ];
     const xValues = new Set([1, 2, 3, 4]);
-    const stackedValues = formatStackedDataSeriesValues(dataSeries, xValues);
+    const stackedValues = formatStackedDataSeriesValues(dataSeries, xValues, 'bar');
     expect(stackedValues.map(matchOnlyDataSeriesLegacySnapshot)).toMatchSnapshot();
   });
   test('Can stack unsorted dataseries', () => {
@@ -287,7 +287,7 @@ describe('Series', () => {
       }),
     ];
     const xValues = new Set(new Array(maxArrayItems).fill(0).map((d, i) => i));
-    const stackedValues = formatStackedDataSeriesValues(dataSeries, xValues);
+    const stackedValues = formatStackedDataSeriesValues(dataSeries, xValues, 'bar');
     expect(stackedValues.map(matchOnlyDataSeriesLegacySnapshot)).toMatchSnapshot();
   });
   test('Can stack simple dataseries with scale to extent', () => {

diff --git a/packages/charts/src/chart_types/xy_chart/utils/series.ts b/packages/charts/src/chart_types/xy_chart/utils/series.ts
@@ -332,8 +332,8 @@ export function getFormattedDataSeries(
   );
 
   const fittedAndStackedDataSeries = stackedGroups.reduce<DataSeries[]>((acc, dataSeries) => {
-    const [{ stackMode }] = dataSeries;
-    const formatted = formatStackedDataSeriesValues(dataSeries, xValues, stackMode);
+    const [{ stackMode, seriesType }] = dataSeries;
+    const formatted = formatStackedDataSeriesValues(dataSeries, xValues, seriesType, stackMode);
     return [...acc, ...formatted];
   }, []);
   // get already fitted non stacked dataSeries

diff --git a/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts b/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts
@@ -11,6 +11,7 @@ import { stack as D3Stack, stackOffsetWiggle, stackOrderNone } from 'd3-shape';
 import { SeriesKey } from '../../../common/series_id';
 import { ScaleType } from '../../../scales/constants';
 import { clamp, isDefined } from '../../../utils/common';
+import { Logger } from '../../../utils/logger';
 import {
   diverging,
   divergingPercentage,
@@ -20,7 +21,7 @@ import {
   XValueSeriesDatum,
 } from './diverging_offsets';
 import { DataSeries, DataSeriesDatum } from './series';
-import { StackMode } from './specs';
+import { SeriesType, StackMode } from './specs';
 
 /** @internal */
 export interface StackedValues {
@@ -44,6 +45,7 @@ export const datumXSortPredicate = (xScaleType: ScaleType, sortedXValues?: (stri
 export function formatStackedDataSeriesValues(
   dataSeries: DataSeries[],
   xValues: Set<string | number>,
+  seriesType: SeriesType,
   stackMode?: StackMode,
 ): DataSeries[] {
   const dataSeriesMap = dataSeries.reduce<Map<SeriesKey, DataSeries>>((acc, curr) => {
@@ -68,6 +70,13 @@ export function formatStackedDataSeriesValues(
     });
     xMap.set(xValue, seriesMap);
   });
+
+  if (hasNegative && hasPositive && seriesType === SeriesType.Area) {
+    Logger.warn(
+      `Area series should be avoided with dataset containing positive and negative values. Use a bar series instead.`,
+    );
+  }
+
   const keys = [...dataSeriesMap.keys()].reduce<string[]>((acc, key) => [...acc, `${key}-y0`, key], []);
   const stackOffset = getOffsetBasedOnStackMode(stackMode, hasNegative && !hasPositive);
   const stack = D3Stack<XValueSeriesDatum>()