fix: remove series with undefined splitSeriesAccessor values (elastic#627)

markov00 · nickofthyme · markov00 · commit 59f0f6e718af · 2020-04-14T16:54:55.000+02:00
This commit removes every series generated from a partial datum where all the values accessed by the splitSeriesAccessors array are null or undefined.

Co-authored-by: nickofthyme &lt;nick.ryan.partridge@gmail.com&gt;
diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png
diff --git a/integration/tests/interactions.test.ts b/integration/tests/interactions.test.ts
@@ -18,7 +18,7 @@
 
 import { common } from '../page_objects';
 
-describe.only('Tooltips', () => {
+describe('Tooltips', () => {
   describe('rotation 0', () => {
     it('shows tooltip on first x value - top', async () => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot(
@@ -104,4 +104,13 @@ describe.only('Tooltips', () => {
       );
     });
   });
+  it('should render corrent tooltip for split and y accessors', async () => {
+    await common.expectChartWithMouseAtUrlToMatchScreenshot(
+      'http://localhost:9001/iframe.html?id=bar-chart--bar-chart-2-y-2-g',
+      {
+        x: 330,
+        y: 40,
+      },
+    );
+  });
 });
diff --git a/src/chart_types/xy_chart/state/utils.test.ts b/src/chart_types/xy_chart/state/utils.test.ts
@@ -362,8 +362,8 @@ describe('Chart State utils', () => {
 
     describe('series collection is not empty', () => {
       it('it should return an empty map if no color', () => {
-        const barSpec1 = MockSeriesSpec.bar({ id: specId1, data });
-        const barSpec2 = MockSeriesSpec.bar({ id: specId2, data });
+        const barSpec1 = MockSeriesSpec.bar({ id: specId1, data, splitSeriesAccessors: ['g'] });
+        const barSpec2 = MockSeriesSpec.bar({ id: specId2, data, splitSeriesAccessors: ['g'] });
         const barSeriesSpecs = MockSeriesSpecs.fromSpecs([barSpec1, barSpec2]);
         const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
         const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection);
@@ -384,8 +384,13 @@ describe('Chart State utils', () => {
 
       describe('with customSeriesColors array', () => {
         const customSeriesColors = ['red', 'blue', 'green'];
-        const barSpec1 = MockSeriesSpec.bar({ id: specId1, data, color: customSeriesColors });
-        const barSpec2 = MockSeriesSpec.bar({ id: specId2, data });
+        const barSpec1 = MockSeriesSpec.bar({
+          id: specId1,
+          data,
+          color: customSeriesColors,
+          splitSeriesAccessors: ['g'],
+        });
+        const barSpec2 = MockSeriesSpec.bar({ id: specId2, data, splitSeriesAccessors: ['g'] });
         const barSeriesSpecs = MockSeriesSpecs.fromSpecs([barSpec1, barSpec2]);
         const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
 
@@ -412,8 +417,14 @@ describe('Chart State utils', () => {
 
           return null;
         };
-        const barSpec1 = MockSeriesSpec.bar({ id: specId1, yAccessors: ['y'], data, color });
-        const barSpec2 = MockSeriesSpec.bar({ id: specId2, data });
+        const barSpec1 = MockSeriesSpec.bar({
+          id: specId1,
+          yAccessors: ['y'],
+          data,
+          color,
+          splitSeriesAccessors: ['g'],
+        });
+        const barSpec2 = MockSeriesSpec.bar({ id: specId2, data, splitSeriesAccessors: ['g'] });
         const barSeriesSpecs = MockSeriesSpecs.fromSpecs([barSpec1, barSpec2]);
         const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
 
diff --git a/src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap b/src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap
@@ -19144,6 +19144,99 @@ Array [
 ]
 `;
 
+exports[`Series functional accessors Shall ignore undefined values on splitSeriesAccessors 1`] = `
+Array [
+  Object {
+    "data": Array [
+      Object {
+        "datum": Array [
+          0,
+          1,
+          "a",
+        ],
+        "x": 0,
+        "y0": null,
+        "y1": 1,
+      },
+      Object {
+        "datum": Array [
+          1,
+          1,
+          "a",
+        ],
+        "x": 1,
+        "y0": null,
+        "y1": 1,
+      },
+      Object {
+        "datum": Array [
+          2,
+          1,
+          "a",
+        ],
+        "x": 2,
+        "y0": null,
+        "y1": 1,
+      },
+    ],
+    "key": "spec{spec1}yAccessor{1}splitAccessors{2-a}",
+    "seriesKeys": Array [
+      "a",
+      1,
+    ],
+    "specId": "spec1",
+    "splitAccessors": Map {
+      2 => "a",
+    },
+    "yAccessor": 1,
+  },
+  Object {
+    "data": Array [
+      Object {
+        "datum": Array [
+          0,
+          1,
+          "b",
+        ],
+        "x": 0,
+        "y0": null,
+        "y1": 1,
+      },
+      Object {
+        "datum": Array [
+          1,
+          1,
+          "b",
+        ],
+        "x": 1,
+        "y0": null,
+        "y1": 1,
+      },
+      Object {
+        "datum": Array [
+          2,
+          1,
+          "b",
+        ],
+        "x": 2,
+        "y0": null,
+        "y1": 1,
+      },
+    ],
+    "key": "spec{spec1}yAccessor{1}splitAccessors{2-b}",
+    "seriesKeys": Array [
+      "b",
+      1,
+    ],
+    "specId": "spec1",
+    "splitAccessors": Map {
+      2 => "b",
+    },
+    "yAccessor": 1,
+  },
+]
+`;
+
 exports[`Series should compute data series for stacked specs 1`] = `
 Array [
   Object {
diff --git a/src/chart_types/xy_chart/utils/series.test.ts b/src/chart_types/xy_chart/utils/series.test.ts
@@ -947,5 +947,41 @@ describe('Series', () => {
       expect(splittedSeries.rawDataSeries.length).toBe(1);
       expect(splittedSeries.rawDataSeries).toMatchSnapshot();
     });
+
+    test('Shall ignore undefined values on splitSeriesAccessors', () => {
+      const spec = MockSeriesSpec.bar({
+        data: [
+          [0, 1, 'a'],
+          [1, 1, 'a'],
+          [2, 1, 'a'],
+          [0, 1, 'b'],
+          [1, 1, 'b'],
+          [2, 1, 'b'],
+          [0, 1],
+          [1, 1],
+          [2, 1],
+        ],
+        xAccessor: 0,
+        yAccessors: [1],
+        splitSeriesAccessors: [2],
+      });
+      const splittedSeries = splitSeries(spec);
+      expect(splittedSeries.rawDataSeries.length).toBe(2);
+      expect(splittedSeries.rawDataSeries).toMatchSnapshot();
+    });
+    test('Should ignore series if splitSeriesAccessors are defined but not contained in any datum', () => {
+      const spec = MockSeriesSpec.bar({
+        data: [
+          [0, 1],
+          [1, 1],
+          [2, 1],
+        ],
+        xAccessor: 0,
+        yAccessors: [1],
+        splitSeriesAccessors: [2],
+      });
+      const splittedSeries = splitSeries(spec);
+      expect(splittedSeries.rawDataSeries.length).toBe(0);
+    });
   });
 });
diff --git a/src/chart_types/xy_chart/utils/series.ts b/src/chart_types/xy_chart/utils/series.ts
@@ -144,6 +144,11 @@ export function splitSeries({
 
   data.forEach((datum) => {
     const splitAccessors = getSplitAccessors(datum, splitSeriesAccessors);
+    // if splitSeriesAccessors are defined we should have at least one split value to include datum
+    if (splitSeriesAccessors.length > 0 && splitAccessors.size < 1) {
+      return;
+    }
+
     if (isMultipleY) {
       yAccessors.forEach((accessor, index) => {
         const cleanedDatum = cleanDatum(datum, xAccessor, accessor, y0Accessors && y0Accessors[index]);
diff --git a/src/mocks/specs/specs.ts b/src/mocks/specs/specs.ts
@@ -45,7 +45,6 @@ export class MockSeriesSpec {
     yScaleType: ScaleType.Linear,
     xAccessor: 'x',
     yAccessors: ['y'],
-    splitSeriesAccessors: ['g'],
     yScaleToDataExtent: false,
     hideInLegend: false,
     enableHistogramMode: false,
diff --git a/stories/axes/5_multi_axis_bar_lines.tsx b/stories/axes/5_multi_axis_bar_lines.tsx
@@ -55,7 +55,6 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 3 },
           { x: 1, y: 2 },
diff --git a/stories/axes/6_different_tooltip.tsx b/stories/axes/6_different_tooltip.tsx
@@ -48,7 +48,6 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 5 },
           { x: 1, y: 4 },
@@ -64,7 +63,6 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 2 },
           { x: 1, y: 3 },
diff --git a/stories/axes/9_custom_mixed_domain.tsx b/stories/axes/9_custom_mixed_domain.tsx
@@ -82,7 +82,6 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 3 },
           { x: 1, y: 2 },
diff --git a/stories/bar/23_bar_chart_2y2g.tsx b/stories/bar/23_bar_chart_2y2g.tsx
@@ -18,17 +18,11 @@
 
 import React from 'react';
 
-import { Axis, BarSeries, Chart, Position, ScaleType, Settings, FilterPredicate } from '../../src';
+import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src';
 import * as TestDatasets from '../../src/utils/data_samples/test_dataset';
 import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 export const example = () => {
-  const isVisibleFunction: FilterPredicate = (series) => {
-    return series.splitAccessors.size > 0
-      ? series.specId === 'bars1' && series.yAccessor === 'y1' && series.splitAccessors.get('g1') === 'cloudflare.com'
-      : series.specId === 'bars1' && series.yAccessor === 'y1';
-  };
-
   return (
     <Chart className="story-chart">
       <Settings showLegend showLegendExtra legendPosition={Position.Right} />
@@ -43,7 +37,6 @@ export const example = () => {
         yAccessors={['y1', 'y2']}
         splitSeriesAccessors={['g1', 'g2', 'g3']}
         data={TestDatasets.BARCHART_2Y2G}
-        filterSeriesInTooltip={isVisibleFunction}
       />
     </Chart>
   );
diff --git a/stories/bar/26_single_data_linear.tsx b/stories/bar/26_single_data_linear.tsx
@@ -52,7 +52,6 @@ export const example = () => {
         yScaleType={ScaleType.Linear}
         xAccessor="x"
         yAccessors={['y']}
-        splitSeriesAccessors={['g']}
         data={[{ x: 1, y: 10 }]}
       />
     </Chart>
diff --git a/stories/bar/31_negative_and_positive_x_values.tsx b/stories/bar/31_negative_and_positive_x_values.tsx
@@ -33,7 +33,6 @@ export const example = () => {
         yScaleType={ScaleType.Linear}
         xAccessor="x"
         yAccessors={['y']}
-        splitSeriesAccessors={['g']}
         stackAccessors={['x']}
         data={[
           { x: -3, y: 1 },
diff --git a/stories/bar/32_scale_to_extent.tsx b/stories/bar/32_scale_to_extent.tsx
@@ -63,7 +63,6 @@ export const example = () => {
         yScaleType={ScaleType.Linear}
         xAccessor="x"
         yAccessors={['y']}
-        splitSeriesAccessors={['g']}
         stackAccessors={['x']}
         data={data}
         yScaleToDataExtent={yScaleToDataExtent}
diff --git a/stories/bar/33_band_bar.tsx b/stories/bar/33_band_bar.tsx
@@ -62,8 +62,6 @@ export const example = () => {
         yAccessors={['max']}
         y0Accessors={['min']}
         data={data}
-        // this is a temporary hack to display names for min and max values
-        splitSeriesAccessors={['fake']}
         yScaleToDataExtent={scaleToDataExtent}
       />
 
diff --git a/stories/grids/2_multiple_axes.tsx b/stories/grids/2_multiple_axes.tsx
@@ -119,7 +119,6 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 3 },
           { x: 1, y: 2 },
diff --git a/stories/interactions/4_line_area_bar_clicks.tsx b/stories/interactions/4_line_area_bar_clicks.tsx
@@ -39,7 +39,6 @@ export const example = () => {
         yScaleType={ScaleType.Linear}
         xAccessor="x"
         yAccessors={['y']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 2.3 },
           { x: 1, y: 2 },
diff --git a/stories/interactions/8_clicks_legend_items_mixed.tsx b/stories/interactions/8_clicks_legend_items_mixed.tsx
@@ -54,7 +54,6 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 3 },
           { x: 1, y: 2 },
diff --git a/stories/legend/6_hide_legend.tsx b/stories/legend/6_hide_legend.tsx
@@ -51,7 +51,6 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={['g']}
         data={[
           { x: 0, y: 3 },
           { x: 1, y: 2 },
diff --git a/stories/mixed/3_areas_and_bars.tsx b/stories/mixed/3_areas_and_bars.tsx
@@ -34,7 +34,6 @@ export const example = () => {
         yScaleType={ScaleType.Linear}
         xAccessor="x"
         yAccessors={['y']}
-        splitSeriesAccessors={['g']}
         stackAccessors={['x']}
         data={[
           { x: 0, y: 2 },
