From 963bb94cf8ea22f807e01e5c83319ce6d95e4f50 Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Mon, 9 Dec 2019 10:14:25 +0100
Subject: [PATCH] fix: render stacked bar with stringified values

The stacked bars are computed adding up the previous value with the current one. This works fine if
the passed values are numbers. If the number is codified as a string, the resulting stacked value is
a wrongly concatenated string of values. This commit cast every y value to a number, if NaN or null
it will use null.

fix #487
---
 .../rendering/rendering.areas.test.ts         |  2 +-
 .../utils/__snapshots__/series.test.ts.snap   |  8 +++----
 src/chart_types/xy_chart/utils/series.test.ts | 21 +++++++++++++++++++
 src/chart_types/xy_chart/utils/series.ts      | 19 ++++++++++++++---
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/chart_types/xy_chart/rendering/rendering.areas.test.ts b/src/chart_types/xy_chart/rendering/rendering.areas.test.ts
index ec2736ea9c7..109bce79ae0 100644
--- a/src/chart_types/xy_chart/rendering/rendering.areas.test.ts
+++ b/src/chart_types/xy_chart/rendering/rendering.areas.test.ts
@@ -1001,7 +1001,7 @@ describe('Rendering points - areas', () => {
       expect(renderedArea.areaGeometry.seriesIdentifier.specId).toEqual(SPEC_ID);
       expect(renderedArea.areaGeometry.transform).toEqual({ x: 0, y: 0 });
     });
-    test('Can render points points', () => {
+    test('Can render points', () => {
       const {
         areaGeometry: { points },
         indexedGeometries,
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
index 2c6ab09efde..6484ea9d0cc 100644
--- a/src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap
+++ b/src/chart_types/xy_chart/utils/__snapshots__/series.test.ts.snap
@@ -11,7 +11,7 @@ Array [
         },
         "x": 0,
         "y0": null,
-        "y1": undefined,
+        "y1": null,
       },
     ],
     "key": "spec{spec1}yAccessor{y1}splitAccessors{y-1}",
@@ -34,7 +34,7 @@ Array [
         },
         "x": 1,
         "y0": null,
-        "y1": undefined,
+        "y1": null,
       },
     ],
     "key": "spec{spec1}yAccessor{y1}splitAccessors{y-2}",
@@ -57,7 +57,7 @@ Array [
         },
         "x": 2,
         "y0": null,
-        "y1": undefined,
+        "y1": null,
       },
     ],
     "key": "spec{spec1}yAccessor{y1}splitAccessors{y-10}",
@@ -80,7 +80,7 @@ Array [
         },
         "x": 3,
         "y0": null,
-        "y1": undefined,
+        "y1": null,
       },
     ],
     "key": "spec{spec1}yAccessor{y1}splitAccessors{y-6}",
diff --git a/src/chart_types/xy_chart/utils/series.test.ts b/src/chart_types/xy_chart/utils/series.test.ts
index 8ad65d0cdbd..e49b4246201 100644
--- a/src/chart_types/xy_chart/utils/series.test.ts
+++ b/src/chart_types/xy_chart/utils/series.test.ts
@@ -9,6 +9,7 @@ import {
   RawDataSeries,
   splitSeries,
   SeriesIdentifier,
+  cleanDatum,
 } from './series';
 import { BasicSeriesSpec, LineSeriesSpec, SpecTypes, SeriesTypes } from './specs';
 import { formatStackedDataSeriesValues } from './stacked_series_utils';
@@ -560,4 +561,24 @@ describe('Series', () => {
 
     expect(getSortedDataSeriesColorsValuesMap(seriesCollection)).toEqual(undefinedSortedColorValues);
   });
+  test('clean datum shall parse string as number for y values', () => {
+    let datum = cleanDatum([0, 1, 2], 0, 1, 2);
+    expect(datum.y1).toBe(1);
+    expect(datum.y0).toBe(2);
+    datum = cleanDatum([0, '1', 2], 0, 1, 2);
+    expect(datum.y1).toBe(1);
+    expect(datum.y0).toBe(2);
+
+    datum = cleanDatum([0, '1', '2'], 0, 1, 2);
+    expect(datum.y1).toBe(1);
+    expect(datum.y0).toBe(2);
+
+    datum = cleanDatum([0, 1, '2'], 0, 1, 2);
+    expect(datum.y1).toBe(1);
+    expect(datum.y0).toBe(2);
+
+    datum = cleanDatum([0, 'invalid', 'invalid'], 0, 1, 2);
+    expect(datum.y1).toBe(null);
+    expect(datum.y0).toBe(null);
+  });
 });
diff --git a/src/chart_types/xy_chart/utils/series.ts b/src/chart_types/xy_chart/utils/series.ts
index b4e562d5d01..dc7895aece2 100644
--- a/src/chart_types/xy_chart/utils/series.ts
+++ b/src/chart_types/xy_chart/utils/series.ts
@@ -206,16 +206,29 @@ function getSplitAccessors(datum: Datum, accessors: Accessor[] = []): Map<string
 /**
  * Reformat the datum having only the required x and y property.
  */
-function cleanDatum(datum: Datum, xAccessor: Accessor, yAccessor: Accessor, y0Accessor?: Accessor): RawDataSeriesDatum {
+export function cleanDatum(
+  datum: Datum,
+  xAccessor: Accessor,
+  yAccessor: Accessor,
+  y0Accessor?: Accessor,
+): RawDataSeriesDatum {
   const x = datum[xAccessor];
-  const y1 = datum[yAccessor];
+  const y1 = castToNumber(datum[yAccessor]);
   const cleanedDatum: RawDataSeriesDatum = { x, y1, datum, y0: null };
   if (y0Accessor) {
-    cleanedDatum.y0 = datum[y0Accessor];
+    cleanedDatum.y0 = castToNumber(datum[y0Accessor]);
   }
   return cleanedDatum;
 }
 
+function castToNumber(value: any): number | null {
+  if (value === null || value === undefined) {
+    return null;
+  }
+  const num = Number(value);
+  return isNaN(num) ? null : num;
+}
+
 export function getFormattedDataseries(
   specs: YBasicSeriesSpec[],
   dataSeries: Map<SpecId, RawDataSeries[]>,