refactor: add d3 stack order and stack mode on stacked charts

BREAKING CHANGE: PointStyleAccessor and BarStyleAccessor now calls the method with a DataSeriesDatum not with a RawDataSeriesDatum
elastic · Jul 22, 2020 · 6220e49 · 6220e49
1 parent d3d9b61
commit 6220e49
Show file tree

Hide file tree

Showing 27 changed files with 4,873 additions and 3,446 deletions.
diff --git a/.playground/data.ts b/.playground/data.ts
diff --git a/.playground/index.html b/.playground/index.html
@@ -16,8 +16,8 @@
         /*display: inline-block;
         position: relative;
         */
-        width: 500px;
-        height: 200px;
+        width: 800px;
+        height: 400px;
         overflow: auto;
       }
 

diff --git a/.playground/playground.tsx b/.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,7 +20,8 @@
 
 import React from 'react';
 
-import { Chart, BarSeries, Axis, Position, ScaleType } from '../src';
+import { Chart, AreaSeries, Axis, Position, ScaleType, Fit, Settings, CurveType, timeFormatter, niceTimeFormatByDay } from '../src';
+import { data } from './data';
 
 export class Playground extends React.Component {
   render() {
@@ -30,22 +32,51 @@ export class Playground extends React.Component {
             <Axis
               id="y"
               position={Position.Left}
-              domain={{ fit: true }}
             />
-            <BarSeries
+            <Axis
+              id="x"
+              position={Position.Bottom}
+              tickFormat={timeFormatter(niceTimeFormatByDay(365 * 10))}
+            />
+            <Settings />
+
+            <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')}
+            />
+
+            {/* <AreaSeries
+              id="spec2"
               yAccessors={['y1']}
               splitSeriesAccessors={['g']}
-              stackAccessors={['x']}
+              // 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: 3, y1: 23, g: 'b' },
+                // { x: 1, y1: 21, g: 'b' },
+                // { x: 2, y1: 5, g: 'b' },
+                // { x: 3, y1: 23, g: 'b' },
               ]}
-            />
+            /> */}
           </Chart>
         </div>
       </div>

diff --git a/src/chart_types/xy_chart/domains/x_domain.test.ts b/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(
       [
         {
@@ -471,7 +471,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -523,7 +523,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -574,7 +574,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -625,7 +625,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
     const mergedDomain = mergeXDomain(
       [
         {
@@ -670,7 +670,7 @@ describe('X Domain', () => {
     };
     const specDataSeries = [ds1, ds2];
 
-    const { xValues } = getSplittedSeries(specDataSeries);
+    const { xValues } = getDataSeriesBySpecId(specDataSeries);
 
     const mergedDomain = mergeXDomain(
       [