fix(last_value): compute last value for non stacked series (opensearc…

…h-project#261)

The percentage stacked mode implies to use the formatted value to be shown in the tooltips and on the legend. I moved the computation from the splittes series to it's own function after the series set is formatted. The commit fix the current status where the last value was computed only for stacked series.

packages/osd-charts/src/lib/series/series.ts

@@ -89,15 +89,13 @@ export function splitSeries(
   rawDataSeries: RawDataSeries[];
   colorsValues: Map<string, any[]>;
   xValues: Set<any>;
-  splitSeriesLastValues: Map<string, any>;
 } {
   const { xAccessor, yAccessors, y0Accessors, splitSeriesAccessors = [] } = accessors;
   const colorAccessors = accessors.colorAccessors ? accessors.colorAccessors : splitSeriesAccessors;
   const isMultipleY = yAccessors && yAccessors.length > 1;
   const series = new Map<string, RawDataSeries>();
   const colorsValues = new Map<string, any[]>();
   const xValues = new Set<any>();
-  const splitSeriesLastValues = new Map<string, any>();
 
   data.forEach((datum) => {
     const seriesKey = getAccessorsValues(datum, splitSeriesAccessors);
@@ -107,7 +105,6 @@ export function splitSeries(
         const colorValuesKey = getColorValuesAsString(colorValues, specId);
         colorsValues.set(colorValuesKey, colorValues);
         const cleanedDatum = cleanDatum(datum, xAccessor, accessor, y0Accessors && y0Accessors[index]);
-        splitSeriesLastValues.set(colorValuesKey, cleanedDatum.y1);
         xValues.add(cleanedDatum.x);
         updateSeriesMap(series, [...seriesKey, accessor], cleanedDatum, specId, colorValuesKey);
       }, {});
@@ -116,17 +113,14 @@ export function splitSeries(
       const colorValuesKey = getColorValuesAsString(colorValues, specId);
       colorsValues.set(colorValuesKey, colorValues);
       const cleanedDatum = cleanDatum(datum, xAccessor, yAccessors[0], y0Accessors && y0Accessors[0]);
-      splitSeriesLastValues.set(colorValuesKey, cleanedDatum.y1);
       xValues.add(cleanedDatum.x);
       updateSeriesMap(series, [...seriesKey], cleanedDatum, specId, colorValuesKey);
     }
   }, {});
-
   return {
     rawDataSeries: [...series.values()],
     colorsValues,
     xValues,
-    splitSeriesLastValues,
   };
 }
 
@@ -318,13 +312,10 @@ export function getSplittedSeries(
     splittedSeries.set(specId, currentRawDataSeries);
 
     dataSeries.colorsValues.forEach((colorValues, key) => {
-      const lastValue = dataSeries.splitSeriesLastValues.get(key);
-
       seriesColors.set(key, {
         specId,
         specSortIndex: spec.sortIndex,
         colorValues,
-        lastValue,
       });
     });
 

packages/osd-charts/src/state/utils.ts

@@ -97,6 +97,36 @@ export function getUpdatedCustomSeriesColors(seriesSpecs: Map<SpecId, BasicSerie
   return updatedCustomSeriesColors;
 }
 
+export function getLastValues(formattedDataSeries: {
+  stacked: FormattedDataSeries[];
+  nonStacked: FormattedDataSeries[];
+}): Map<string, number> {
+  const lastValues = new Map<string, number>();
+
+  // we need to get the latest
+  formattedDataSeries.stacked.forEach((ds) => {
+    ds.dataSeries.forEach((series) => {
+      if (series.data.length > 0) {
+        const last = series.data[series.data.length - 1];
+        if (last !== null && last.initialY1 !== null) {
+          lastValues.set(series.seriesColorKey, last.initialY1);
+        }
+      }
+    });
+  });
+  formattedDataSeries.nonStacked.forEach((ds) => {
+    ds.dataSeries.forEach((series) => {
+      if (series.data.length > 0) {
+        const last = series.data[series.data.length - 1];
+        if (last !== null && last.initialY1 !== null) {
+          lastValues.set(series.seriesColorKey, last.initialY1);
+        }
+      }
+    });
+  });
+  return lastValues;
+}
+
 /**
  *
  * @param seriesSpecs
@@ -112,29 +142,18 @@ export function computeSeriesDomains(
   deselectedDataSeries?: DataSeriesColorsValues[] | null,
 ): SeriesDomainsAndData {
   const { splittedSeries, xValues, seriesColors } = getSplittedSeries(seriesSpecs, deselectedDataSeries);
-  // tslint:disable-next-line:no-console
-  // console.log({ splittedSeries, xValues, seriesColors });
+
   const splittedDataSeries = [...splittedSeries.values()];
   const specsArray = [...seriesSpecs.values()];
 
   const xDomain = mergeXDomain(specsArray, xValues, customXDomain);
   const yDomain = mergeYDomain(splittedSeries, specsArray, domainsByGroupId);
 
   const formattedDataSeries = getFormattedDataseries(specsArray, splittedSeries);
-  // tslint:disable-next-line:no-console
-  // console.log({ formattedDataSeries, xDomain, yDomain });\
-  const lastValues = new Map<string, number>();
 
-  formattedDataSeries.stacked.forEach((ds) => {
-    ds.dataSeries.forEach((series) => {
-      if (series.data.length > 0) {
-        const last = series.data[series.data.length - 1];
-        if (last !== null && last.initialY1 !== null) {
-          lastValues.set(series.seriesColorKey, last.initialY1);
-        }
-      }
-    });
-  });
+  // we need to get the last values from the formatted dataseries
+  // because we change the format if we are on percentage mode
+  const lastValues = getLastValues(formattedDataSeries);
   const updatedSeriesColors = new Map<string, DataSeriesColorsValues>();
   seriesColors.forEach((value, key) => {
     const lastValue = lastValues.get(key);

packages/osd-charts/stories/bar_chart.tsx

@@ -478,6 +478,7 @@ storiesOf('Bar Chart', module)
   .add('stacked as percentage', () => {
     const stackedAsPercentage = boolean('stacked as percentage', true);
     const clusterBars = boolean('cluster', true);
+
     return (
       <Chart className={'story-chart'}>
         <Settings showLegend={true} legendPosition={Position.Right} />
@@ -486,7 +487,7 @@ storiesOf('Bar Chart', module)
           id={getAxisId('left2')}
           title={'Left axis'}
           position={Position.Left}
-          tickFormat={(d) => (stackedAsPercentage && clusterBars ? `${Number(d * 100).toFixed(0)} %` : d)}
+          tickFormat={(d) => (stackedAsPercentage && !clusterBars ? `${Number(d * 100).toFixed(0)} %` : d)}
         />
 
         <BarSeries
@@ -496,7 +497,7 @@ storiesOf('Bar Chart', module)
           xAccessor="x"
           yAccessors={['y']}
           stackAccessors={clusterBars ? [] : ['x']}
-          stackAsPercentage={stackedAsPercentage}
+          stackAsPercentage={clusterBars ? false : stackedAsPercentage}
           splitSeriesAccessors={['g']}
           data={[
             { x: 0, y: 2, g: 'a' },