feat: wiggle and silhouette stacks

.playground/index.html

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

.playground/playground.tsx

@@ -1,3 +1,4 @@
+
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor
  * license agreements. See the NOTICE file distributed with
@@ -19,13 +20,80 @@
 
 import React from 'react';
 
-import { Example } from '../stories/sunburst/15_single_sunburst';
+import { Chart, AreaSeries, Axis, Position, Settings, StackModes } from '../src';
 
 export class Playground extends React.Component {
   render() {
     return (
       <div className="testing">
-        <div className="chart">{Example()}</div>
+        <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>
     );
   }

api/charts.api.md

@@ -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;

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