feat: wiggle and silhouette stacks

.playground/index.html

@@ -16,8 +16,8 @@
         /*display: inline-block;
         position: relative;
         */
-        width: 800px;
-        height: 400px;
+        width: 500px;
+        height: 200px;
         overflow: auto;
       }
 

.playground/playground.tsx

@@ -1,4 +1,3 @@
-
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor
  * license agreements. See the NOTICE file distributed with
@@ -20,80 +19,13 @@
 
 import React from 'react';
 
-import { Chart, AreaSeries, Axis, Position, Settings, StackModes } from '../src';
+import { Example } from '../stories/sunburst/15_single_sunburst';
 
 export class Playground extends React.Component {
   render() {
     return (
       <div className="testing">
-        <div className="chart">
-          <Chart>
-            <Settings showLegend showLegendExtra />
-
-            <Axis
-              id="y"
-              position={Position.Left}
-            />
-            <Axis
-              id="x"
-              position={Position.Bottom}
-              // tickFormat={timeFormatter(niceTimeFormatByDay(365 * 10))}
-            />
-
-            <AreaSeries
-              id="spec1"
-              // xAccessor="date"
-              // yAccessors={['count']}
-              // // y0Accessors={['metric0']}
-              // splitSeriesAccessors={['series']}
-              // stackAccessors={['date']}
-              // xScaleType={ScaleType.Time}
-              // fit={Fit.Lookahead}
-              // curve={CurveType.CURVE_MONOTONE_X}
-              // // areaSeriesStyle={{ point: { visible: true } }}
-              // // stackAsPercentage
-              // data={data.filter((d) => d.year !== 2006 || d.series !== 'Manufacturing')}
-              stackMode={StackModes.Percentage}
-              splitSeriesAccessors={['g']}
-              yAccessors={['y1']}
-              stackAccessors={['x']}
-              y0Accessors={['y0']}
-              data={[
-                { x: 1, y0: 1, y1: 2, g: 'a' },
-                { x: 2, y0: 2, y1: 2.5, g: 'a' },
-                { x: 3, y0: 1, y1: 4, g: 'a' },
-                { x: 4, y0: 1, y1: 2, g: 'a' },
-                { x: 1, y0: 2, y1: 4, g: 'b' },
-                { x: 2, y0: 2, y1: 5, g: 'b' },
-                { x: 3, y0: 2, y1: 3, g: 'b' },
-                { x: 4, y0: 2, y1: 5, g: 'b' },
-              ]}
-            />
-
-            {/* <AreaSeries
-              id="spec2"
-              yAccessors={['y1']}
-              splitSeriesAccessors={['g']}
-              // stackAccessors={['x']}
-              xScaleType={ScaleType.Linear}
-              fit={Fit.Carry}
-              areaSeriesStyle={{
-                point: {
-                  visible: true,
-                },
-              }}
-              data={[
-                { x: 1, y1: 1, g: 'a' },
-                { x: 2, y1: 2, g: 'a' },
-                { x: 3, y1: 2, g: 'a' },
-                { x: 4, y1: 4, g: 'a' },
-                // { x: 1, y1: 21, g: 'b' },
-                // { x: 2, y1: 5, g: 'b' },
-                // { x: 3, y1: 23, g: 'b' },
-              ]}
-            /> */}
-          </Chart>
-        </div>
+        <div className="chart">{Example()}</div>
       </div>
     );
   }

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;
 };
@@ -1271,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";
@@ -1401,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);
-      });
     });
   });
 });

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

@@ -25,7 +25,7 @@ import { SpecTypes } from '../../../specs/constants';
 import { Position } from '../../../utils/commons';
 import { BARCHART_1Y0G } from '../../../utils/data_samples/test_dataset';
 import { computeSeriesDomainsSelector } from '../state/selectors/compute_series_domains';
-import { BasicSeriesSpec, SeriesTypes, DEFAULT_GLOBAL_ID, StackModes } from '../utils/specs';
+import { BasicSeriesSpec, SeriesTypes, DEFAULT_GLOBAL_ID, StackMode } from '../utils/specs';
 import {
   coerceYScaleTypes,
   splitSpecsByGroupId,
@@ -486,7 +486,7 @@ describe('Y Domain', () => {
     MockStore.addSpecs([
       MockSeriesSpec.area({
         ...DEMO_AREA_SPEC_1,
-        stackMode: StackModes.Percentage,
+        stackMode: StackMode.Percentage,
       }),
       MockSeriesSpec.area({
         ...DEMO_AREA_SPEC_2,
@@ -517,7 +517,7 @@ describe('Y Domain', () => {
       }),
       MockSeriesSpec.area({
         ...DEMO_AREA_SPEC_1,
-        stackMode: StackModes.Percentage,
+        stackMode: StackMode.Percentage,
       }),
     ], store);
     const { yDomain } = computeSeriesDomainsSelector(store.getState());

src/chart_types/xy_chart/domains/y_domain.ts

@@ -25,16 +25,16 @@ import { GroupId } from '../../../utils/ids';
 import { Logger } from '../../../utils/logger';
 import { isCompleteBound, isLowerBound, isUpperBound } from '../utils/axis_type_utils';
 import { DataSeries, FormattedDataSeries } from '../utils/series';
-import { BasicSeriesSpec, YDomainRange, DEFAULT_GLOBAL_ID, SeriesTypes, StackModes } from '../utils/specs';
+import { BasicSeriesSpec, YDomainRange, DEFAULT_GLOBAL_ID, SeriesTypes, StackMode } from '../utils/specs';
 import { YDomain } from './types';
 
 export type YBasicSeriesSpec = Pick<
   BasicSeriesSpec,
   'id' | 'seriesType' | 'yScaleType' | 'groupId' | 'stackAccessors' | 'yScaleToDataExtent' | 'useDefaultGroupDomain'
-> & { stackMode?: StackModes; enableHistogramMode?: boolean };
+> & { stackMode?: StackMode; enableHistogramMode?: boolean };
 
 interface GroupSpecs {
-  stackMode?: StackModes;
+  stackMode?: StackMode;
   stacked: YBasicSeriesSpec[];
   nonStacked: YBasicSeriesSpec[];
 }
@@ -102,7 +102,7 @@ function mergeYDomainForGroup(
   const { stackMode } = groupSpecs;
 
   let domain: number[];
-  if (stackMode === StackModes.Percentage) {
+  if (stackMode === StackMode.Percentage) {
     domain = computeContinuousDataDomain([0, 1], identity, customDomain);
   } else {
     // TODO remove when removing yScaleToDataExtent
@@ -174,7 +174,7 @@ function computeYDomain(dataseries: DataSeries[], hasZeroBaselineSpecs: boolean)
 export function splitSpecsByGroupId(specs: YBasicSeriesSpec[]) {
   const specsByGroupIds = new Map<
     GroupId,
-    { stackMode: StackModes | undefined; stacked: YBasicSeriesSpec[]; nonStacked: YBasicSeriesSpec[] }
+    { stackMode: StackMode | undefined; stacked: YBasicSeriesSpec[]; nonStacked: YBasicSeriesSpec[] }
   >();
   // After mobx->redux https://github.com/elastic/elastic-charts/pull/281 we keep the specs untouched on mount
   // in MobX version, the stackAccessors was programmatically added to every histogram specs

src/chart_types/xy_chart/rendering/rendering.areas.test.ts

@@ -27,7 +27,7 @@ import { LIGHT_THEME } from '../../../utils/themes/light_theme';
 import { computeSeriesDomains } from '../state/utils/utils';
 import { IndexedGeometryMap } from '../utils/indexed_geometry_map';
 import { computeXScale, computeYScales } from '../utils/scales';
-import { AreaSeriesSpec, SeriesTypes, StackModes } from '../utils/specs';
+import { AreaSeriesSpec, SeriesTypes, StackMode } from '../utils/specs';
 import { renderArea } from './rendering';
 
 const SPEC_ID = 'spec_1';
@@ -1136,7 +1136,7 @@ describe('Rendering points - areas', () => {
       xScaleType: ScaleType.Time,
       yScaleType: ScaleType.Linear,
       stackAccessors: [0],
-      stackMode: StackModes.Percentage,
+      stackMode: StackMode.Percentage,
     });
     const pointSeriesSpec2: AreaSeriesSpec = MockSeriesSpec.area({
       id: 'spec_2',
@@ -1149,7 +1149,7 @@ describe('Rendering points - areas', () => {
       xScaleType: ScaleType.Time,
       yScaleType: ScaleType.Linear,
       stackAccessors: [0],
-      stackMode: StackModes.Percentage,
+      stackMode: StackMode.Percentage,
     });
     const pointSeriesDomains = computeSeriesDomains([pointSeriesSpec1, pointSeriesSpec2]);
     expect(pointSeriesDomains.formattedDataSeries.stacked[0].dataSeries[0].data).toMatchObject([

src/chart_types/xy_chart/rendering/rendering.test.ts

@@ -384,7 +384,7 @@ describe('Rendering utils', () => {
     });
   });
 
-  describe.skip('getClippedRanges', () => {
+  describe('getClippedRanges', () => {
     const dataSeries = MockDataSeries.fitFunction({ shuffle: false });
 
     const xScale = MockScale.default({

src/chart_types/xy_chart/rendering/rendering.ts

@@ -23,7 +23,7 @@ import { LegendItem } from '../../../commons/legend';
 import { Scale } from '../../../scales';
 import { ScaleType } from '../../../scales/constants';
 import { isLogarithmicScale } from '../../../scales/types';
-import { MarkBuffer, StackModes } from '../../../specs';
+import { MarkBuffer, StackMode } from '../../../specs';
 import { CanvasTextBBoxCalculator } from '../../../utils/bbox/canvas_text_bbox_calculator';
 import { mergePartial, Color, getDistance } from '../../../utils/commons';
 import { CurveType, getCurveFactory } from '../../../utils/curves';
@@ -172,7 +172,7 @@ function renderPoints(
   markSizeOptions: MarkSizeOptions,
   styleAccessor?: PointStyleAccessor,
   spatial = false,
-  stackMode?: StackModes,
+  stackMode?: StackMode,
 ): {
   pointGeometries: PointGeometry[];
   indexedGeometryMap: IndexedGeometryMap;
@@ -223,9 +223,9 @@ function renderPoints(
       // const hasY0 = hasY0Accessors && index === 0;
       let originalY: null | number = null;
       if (hasY0Accessors) {
-        originalY = stackMode === StackModes.Percentage ? (index === 0 ? y0 : y1) : (index === 0 ? initialY0 : initialY1);
+        originalY = stackMode === StackMode.Percentage ? (index === 0 ? y0 : y1) : (index === 0 ? initialY0 : initialY1);
       } else {
-        originalY = stackMode === StackModes.Percentage ? (y1 - (y0 ?? 0)) : initialY1;
+        originalY = stackMode === StackMode.Percentage ? (y1 - (y0 ?? 0)) : initialY1;
       }
       // const originalY = hasY0Accessors && index === 0 ? initialY0 : initialY1;
       const seriesIdentifier: XYChartSeriesIdentifier = {
@@ -280,7 +280,7 @@ export function renderBars(
   displayValueSettings?: DisplayValueSpec,
   styleAccessor?: BarStyleAccessor,
   minBarHeight?: number,
-  stackMode?: StackModes,
+  stackMode?: StackMode,
 ): {
   barGeometries: BarGeometry[];
   indexedGeometryMap: IndexedGeometryMap;
@@ -351,7 +351,7 @@ export function renderBars(
 
     const x = xScaled + xScale.bandwidth * orderIndex;
     const width = xScale.bandwidth;
-    const originalY1Value = stackMode === StackModes.Percentage ? (y1 - (y0 ?? 0)) : initialY1;
+    const originalY1Value = stackMode === StackMode.Percentage ? (y1 - (y0 ?? 0)) : initialY1;
     const formattedDisplayValue = displayValueSettings && displayValueSettings.valueFormatter
       ? displayValueSettings.valueFormatter(originalY1Value)
       : undefined;
@@ -567,7 +567,7 @@ export function renderArea(
   isStacked = false,
   pointStyleAccessor?: PointStyleAccessor,
   hasFit?: boolean,
-  stackMode?: StackModes
+  stackMode?: StackMode
 ): {
   areaGeometry: AreaGeometry;
   indexedGeometryMap: IndexedGeometryMap;

src/chart_types/xy_chart/state/utils/__snapshots__/utils.test.ts.snap

@@ -297,6 +297,7 @@ Array [
       },
     ],
     "groupId": "group2",
+    "stackMode": undefined,
   },
 ]
 `;

src/chart_types/xy_chart/state/utils/utils.ts

@@ -59,7 +59,7 @@ import {
   isBubbleSeriesSpec,
   YDomainRange,
   SeriesTypes,
-  StackModes,
+  StackMode,
   hasOffsetDifferentThanZero,
 } from '../../utils/specs';
 import { getSpecsById, getAxesSpecForSpecId } from './spec';
@@ -145,7 +145,7 @@ function getLastValues(formattedDataSeries: {
         if (last !== null) {
           let y0: null | number = last.initialY0;
           let y1: null | number = last.initialY1;
-          if (stackMode === StackModes.Percentage) {
+          if (stackMode === StackMode.Percentage) {
             y1 = (last.y1 ?? 0) - (last.y0 ?? 0);
             y0 = last.y0;
           }
@@ -357,7 +357,7 @@ export function computeSeriesGeometries(
       chartTheme,
       enableHistogramMode,
     );
-    orderIndex = counts.barSeries > 0 ? orderIndex + counts.barSeries : orderIndex;
+    orderIndex = counts[SeriesTypes.Bar] > 0 ? orderIndex + counts[SeriesTypes.Bar] : orderIndex;
 
     areas.push(...geometries.areas);
     lines.push(...geometries.lines);
@@ -457,7 +457,7 @@ function renderGeometries(
   axesSpecs: AxisSpec[],
   chartTheme: Theme,
   enableHistogramMode: boolean,
-  stackMode?: StackModes,
+  stackMode?: StackMode,
 ): {
   points: PointGeometry[];
   bars: BarGeometry[];

src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap

@@ -24113,6 +24113,7 @@ Array [
       },
     ],
     "groupId": "group2",
+    "stackMode": undefined,
   },
 ]
 `;

src/chart_types/xy_chart/utils/nonstacked_series_utils.test.ts

@@ -23,7 +23,7 @@ import { MockStore } from '../../../mocks/store';
 import { ScaleType } from '../../../scales/constants';
 import { computeSeriesDomainsSelector } from '../state/selectors/compute_series_domains';
 import * as fitFunctionModule from './fit_function';
-import * as testModule from './nonstacked_series_utils';
+import * as testModule from './fit_function_utils';
 import { Fit } from './specs';
 
 const EMPTY_DATA_SET = MockSeriesSpec.area({