fix: render stacked bar with stringified values (#488)

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

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,

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}",

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);
+  });
 });

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[]>,