feat: wiggle and silhouette stacks

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(
       [