feat: streamgraph and fit functions on stacked charts (#751)

This commit adds the wiggle and silhouette stacks mode as available in vislib that allow the creation of streamgraph. It is also to fix fit functions for stacked charts. The commit also add the following fixes:
- fit functions are now available also on stacked charts
- the legend extra value is now displayed, on-demand, only on charts with a continuous x-axis
- Adjusts slightly the way fitted data is represented in the case of null values and no fit option specified. It renders an empty area in this case
- for zero-based charts (bar and area charts) the fit option doesn't have any effects
- djusts the clipped ranges for ordinal charts, where the lines where wrongly clipped due to a missing translate call when rendering

BREAKING CHANGE: the first parameter of `PointStyleAccessor` and `BarStyleAccessor` callbacks is changed from `RawDataSeriesDatum` to `DataSeriesDatum`. `stackAsPercentage` prop is replaced by `stackMode` that accept one `StackMode`.

fix #766
fix #715
close #450

api/charts.api.md

@@ -80,7 +80,7 @@ export type AreaSeriesSpec = BasicSeriesSpec & HistogramConfig & Postfixes & {
     seriesType: typeof SeriesTypes.Area;
     curve?: CurveType;
     areaSeriesStyle?: RecursivePartial<AreaSeriesStyle>;
-    stackAsPercentage?: boolean;
+    stackMode?: StackMode;
     pointStyleAccessor?: PointStyleAccessor;
     fit?: Exclude<Fit, 'explicit'> | FitConfig;
 };
@@ -208,7 +208,7 @@ export type BarSeriesSpec = BasicSeriesSpec & Postfixes & {
     seriesType: typeof SeriesTypes.Bar;
     enableHistogramMode?: boolean;
     barSeriesStyle?: RecursivePartial<BarSeriesStyle>;
-    stackAsPercentage?: boolean;
+    stackMode?: StackMode;
     styleAccessor?: BarStyleAccessor;
     minBarHeight?: number;
 };
@@ -225,10 +225,8 @@ export interface BarSeriesStyle {
     rectBorder: RectBorderStyle;
 }
 
-// Warning: (ae-forgotten-export) The symbol "RawDataSeriesDatum" needs to be exported by the entry point index.d.ts
-//
 // @public
-export type BarStyleAccessor = (datum: RawDataSeriesDatum, seriesIdentifier: XYChartSeriesIdentifier) => BarStyleOverride;
+export type BarStyleAccessor = (datum: DataSeriesDatum, seriesIdentifier: XYChartSeriesIdentifier) => BarStyleOverride;
 
 // @public (undocumented)
 export type BarStyleOverride = RecursivePartial<BarSeriesStyle> | Color | null;
@@ -460,6 +458,18 @@ export class DataGenerator {
     }[];
     }
 
+// @public (undocumented)
+export interface DataSeriesDatum<T = any> {
+    datum: T;
+    filled?: FilledValues;
+    initialY0: number | null;
+    initialY1: number | null;
+    mark: number | null;
+    x: number | string;
+    y0: number | null;
+    y1: number | null;
+}
+
 // @public (undocumented)
 export type Datum = any;
 
@@ -550,6 +560,13 @@ export interface ExternalPointerEventsSettings {
     };
 }
 
+// @public (undocumented)
+export interface FilledValues {
+    x?: number | string;
+    y0?: number;
+    y1?: number;
+}
+
 // Warning: (ae-missing-release-tag) "FillStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1049,7 +1066,7 @@ export interface PointStyle {
 }
 
 // @public
-export type PointStyleAccessor = (datum: RawDataSeriesDatum, seriesIdentifier: XYChartSeriesIdentifier) => PointStyleOverride;
+export type PointStyleAccessor = (datum: DataSeriesDatum, seriesIdentifier: XYChartSeriesIdentifier) => PointStyleOverride;
 
 // @public (undocumented)
 export type PointStyleOverride = RecursivePartial<PointStyle> | Color | null;
@@ -1254,8 +1271,6 @@ export interface SeriesSpec extends Spec {
 // @public (undocumented)
 export type SeriesSpecs<S extends BasicSeriesSpec = BasicSeriesSpec> = Array<S>;
 
-// Warning: (ae-missing-release-tag) "SeriesTypes" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const SeriesTypes: Readonly<{
     Area: "area";
@@ -1384,6 +1399,16 @@ export const SpecTypes: Readonly<{
 // @public (undocumented)
 export type SpecTypes = $Values<typeof SpecTypes>;
 
+// @public
+export const StackMode: Readonly<{
+    Percentage: "percentage";
+    Wiggle: "wiggle";
+    Silhouette: "silhouette";
+}>;
+
+// @public
+export type StackMode = $Values<typeof StackMode>;
+
 // @public
 export interface StrokeDashArray {
     dash: number[];

integration/tests/area_stories.test.ts

@@ -40,10 +40,6 @@ describe('Area series stories', () => {
       it('should show correct extents - Banded', async() => {
         await common.expectChartAtUrlToMatchScreenshot(trueUrl);
       });
-
-      it('should show correct extents - stacked', async() => {
-        await common.expectChartAtUrlToMatchScreenshot(trueUrl);
-      });
     });
 
     describe('domain.fit is false', () => {
@@ -52,10 +48,6 @@ describe('Area series stories', () => {
       it('should show correct extents - Banded', async() => {
         await common.expectChartAtUrlToMatchScreenshot(falseUrl);
       });
-
-      it('should show correct extents - stacked', async() => {
-        await common.expectChartAtUrlToMatchScreenshot(falseUrl);
-      });
     });
   });
 });

integration/tests/mixed_stories.test.ts

@@ -26,7 +26,7 @@ describe('Mixed series stories', () => {
       Object.values(Fit).forEach((fitType) => {
         it(`should display correct fit for type - ${fitType}`, async() => {
           await common.expectChartAtUrlToMatchScreenshot(
-            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit valuve (using Fit.Explicit)=8`,
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit value (using Fit.Explicit)=8`,
           );
         });
       });
@@ -36,7 +36,7 @@ describe('Mixed series stories', () => {
       Object.values(Fit).forEach((fitType) => {
         it(`should display correct fit for type - ${fitType}`, async() => {
           await common.expectChartAtUrlToMatchScreenshot(
-            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=2&knob-Explicit valuve (using Fit.Explicit)=8`,
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=2&knob-Explicit value (using Fit.Explicit)=8`,
           );
         });
       });
@@ -46,7 +46,7 @@ describe('Mixed series stories', () => {
       Object.values(Fit).forEach((fitType) => {
         it(`should display correct fit for type - ${fitType}`, async() => {
           await common.expectChartAtUrlToMatchScreenshot(
-            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=nearest&knob-Explicit valuve (using Fit.Explicit)=8`,
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=nearest&knob-Explicit value (using Fit.Explicit)=8`,
           );
         });
       });
@@ -56,7 +56,7 @@ describe('Mixed series stories', () => {
       Object.values(Fit).forEach((fitType) => {
         it(`should display correct fit for type - ${fitType}`, async() => {
           await common.expectChartAtUrlToMatchScreenshot(
-            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=1&knob-End value=2&knob-Explicit valuve (using Fit.Explicit)=8`,
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=1&knob-End value=2&knob-Explicit value (using Fit.Explicit)=8`,
           );
         });
       });
@@ -66,7 +66,7 @@ describe('Mixed series stories', () => {
       Object.values(Fit).forEach((fitType) => {
         it(`should display correct fit for type - ${fitType}`, async() => {
           await common.expectChartAtUrlToMatchScreenshot(
-            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=ordinal&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit valuve (using Fit.Explicit)=8`,
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=area&knob-dataset=ordinal&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit value (using Fit.Explicit)=8`,
           );
         });
       });
@@ -76,7 +76,7 @@ describe('Mixed series stories', () => {
       Object.values(Fit).forEach((fitType) => {
         it(`should display correct fit for type - ${fitType}`, async() => {
           await common.expectChartAtUrlToMatchScreenshot(
-            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit valuve (using Fit.Explicit)=8`,
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit value (using Fit.Explicit)=8`,
           );
         });
       });
@@ -86,7 +86,7 @@ describe('Mixed series stories', () => {
       Object.values(Fit).forEach((fitType) => {
         it(`should display correct fit for type - ${fitType}`, async() => {
           await common.expectChartAtUrlToMatchScreenshot(
-            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=2&knob-Explicit valuve (using Fit.Explicit)=8`,
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=2&knob-Explicit value (using Fit.Explicit)=8`,
           );
         });
       });
@@ -96,7 +96,112 @@ describe('Mixed series stories', () => {
       Object.values(Fit).forEach((fitType) => {
         it(`should display correct fit for type - ${fitType}`, async() => {
           await common.expectChartAtUrlToMatchScreenshot(
-            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=1&knob-End value=2&knob-Explicit valuve (using Fit.Explicit)=8`,
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-non-stacked-series&knob-seriesType=line&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=1&knob-End value=2&knob-Explicit value (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+  });
+
+
+  describe('Fitting functions - Stacked charts', () => {
+    describe('Area charts - no endValue', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit value (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - endValue set to 2', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=2&knob-Explicit value (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - endValue set to "nearest"', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=nearest&knob-Explicit value (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - with curved - endValue set to 2', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=1&knob-End value=2&knob-Explicit value (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - Ordinal dataset - no endValue', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=ordinal&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit value (using Fit.Explicit)=8`,
+          );
+        });
+      });
+    });
+  });
+
+  describe('Fitting functions - Stacked charts - as percentage', () => {
+    describe('Area charts - no endValue', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit value (using Fit.Explicit)=8&knob-stackMode=percentage`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - endValue set to 2', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=2&knob-Explicit value (using Fit.Explicit)=8&knob-stackMode=percentage`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - endValue set to "nearest"', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=nearest&knob-Explicit value (using Fit.Explicit)=8&knob-stackMode=percentage`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - with curved - endValue set to 2', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=all&knob-fitting function=${fitType}&knob-Curve=1&knob-End value=2&knob-Explicit value (using Fit.Explicit)=8&knob-stackMode=percentage`,
+          );
+        });
+      });
+    });
+
+    describe('Area charts - Ordinal dataset - no endValue', () => {
+      Object.values(Fit).forEach((fitType) => {
+        it(`should display correct fit for type - ${fitType}`, async() => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/mixed-charts--fitting-functions-stacked-series&knob-seriesType=area&knob-dataset=ordinal&knob-fitting function=${fitType}&knob-Curve=0&knob-End value=none&knob-Explicit value (using Fit.Explicit)=8&knob-stackMode=percentage`,
           );
         });
       });

src/chart_types/xy_chart/domains/x_domain.test.ts

@@ -20,7 +20,7 @@
 import { ChartTypes } from '../..';
 import { ScaleType } from '../../../scales/constants';
 import { SpecTypes } from '../../../specs/constants';
-import { getSplittedSeries } from '../utils/series';
+import { getDataSeriesBySpecId } from '../utils/series';
 import { BasicSeriesSpec, SeriesTypes } from '../utils/specs';
 import { convertXScaleTypes, findMinInterval, mergeXDomain } from './x_domain';
 
@@ -221,7 +221,7 @@ describe('X Domain', () => {
       ],
     };
     const specDataSeries: BasicSeriesSpec[] = [ds1, ds2];
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -268,7 +268,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -315,7 +315,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -366,7 +366,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -417,7 +417,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -474,7 +474,7 @@ describe('X Domain', () => {
       min: 0,
     };
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const getResult = () => mergeXDomain(
       [
         {
@@ -533,7 +533,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -584,7 +584,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -635,7 +635,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -680,7 +680,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
 
     const mergedDomain = mergeXDomain(
       [