Skip to content

Commit 803c34e

Browse files
markov00markov00
authored
fix(last_value): compute last value for non stacked series (#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.
1 parent e727605 commit 803c34e

File tree

3 files changed

+37
-26
lines changed

3 files changed

+37
-26
lines changed

‎src/lib/series/series.ts‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -89,15 +89,13 @@ export function splitSeries(
8989
rawDataSeries: RawDataSeries[];
9090
colorsValues: Map<string, any[]>;
9191
xValues: Set<any>;
92-
splitSeriesLastValues: Map<string, any>;
9392
} {
9493
const { xAccessor, yAccessors, y0Accessors, splitSeriesAccessors = [] } = accessors;
9594
const colorAccessors = accessors.colorAccessors ? accessors.colorAccessors : splitSeriesAccessors;
9695
const isMultipleY = yAccessors && yAccessors.length > 1;
9796
const series = new Map<string, RawDataSeries>();
9897
const colorsValues = new Map<string, any[]>();
9998
const xValues = new Set<any>();
100-
const splitSeriesLastValues = new Map<string, any>();
10199

102100
data.forEach((datum) => {
103101
const seriesKey = getAccessorsValues(datum, splitSeriesAccessors);
@@ -107,7 +105,6 @@ export function splitSeries(
107105
const colorValuesKey = getColorValuesAsString(colorValues, specId);
108106
colorsValues.set(colorValuesKey, colorValues);
109107
const cleanedDatum = cleanDatum(datum, xAccessor, accessor, y0Accessors && y0Accessors[index]);
110-
splitSeriesLastValues.set(colorValuesKey, cleanedDatum.y1);
111108
xValues.add(cleanedDatum.x);
112109
updateSeriesMap(series, [...seriesKey, accessor], cleanedDatum, specId, colorValuesKey);
113110
}, {});
@@ -116,17 +113,14 @@ export function splitSeries(
116113
const colorValuesKey = getColorValuesAsString(colorValues, specId);
117114
colorsValues.set(colorValuesKey, colorValues);
118115
const cleanedDatum = cleanDatum(datum, xAccessor, yAccessors[0], y0Accessors && y0Accessors[0]);
119-
splitSeriesLastValues.set(colorValuesKey, cleanedDatum.y1);
120116
xValues.add(cleanedDatum.x);
121117
updateSeriesMap(series, [...seriesKey], cleanedDatum, specId, colorValuesKey);
122118
}
123119
}, {});
124-
125120
return {
126121
rawDataSeries: [...series.values()],
127122
colorsValues,
128123
xValues,
129-
splitSeriesLastValues,
130124
};
131125
}
132126

@@ -318,13 +312,10 @@ export function getSplittedSeries(
318312
splittedSeries.set(specId, currentRawDataSeries);
319313

320314
dataSeries.colorsValues.forEach((colorValues, key) => {
321-
const lastValue = dataSeries.splitSeriesLastValues.get(key);
322-
323315
seriesColors.set(key, {
324316
specId,
325317
specSortIndex: spec.sortIndex,
326318
colorValues,
327-
lastValue,
328319
});
329320
});
330321

‎src/state/utils.ts‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,36 @@ export function getUpdatedCustomSeriesColors(seriesSpecs: Map<SpecId, BasicSerie
9797
return updatedCustomSeriesColors;
9898
}
9999

100+
export function getLastValues(formattedDataSeries: {
101+
stacked: FormattedDataSeries[];
102+
nonStacked: FormattedDataSeries[];
103+
}): Map<string, number> {
104+
const lastValues = new Map<string, number>();
105+
106+
// we need to get the latest
107+
formattedDataSeries.stacked.forEach((ds) => {
108+
ds.dataSeries.forEach((series) => {
109+
if (series.data.length > 0) {
110+
const last = series.data[series.data.length - 1];
111+
if (last !== null && last.initialY1 !== null) {
112+
lastValues.set(series.seriesColorKey, last.initialY1);
113+
}
114+
}
115+
});
116+
});
117+
formattedDataSeries.nonStacked.forEach((ds) => {
118+
ds.dataSeries.forEach((series) => {
119+
if (series.data.length > 0) {
120+
const last = series.data[series.data.length - 1];
121+
if (last !== null && last.initialY1 !== null) {
122+
lastValues.set(series.seriesColorKey, last.initialY1);
123+
}
124+
}
125+
});
126+
});
127+
return lastValues;
128+
}
129+
100130
/**
101131
*
102132
* @param seriesSpecs
@@ -112,29 +142,18 @@ export function computeSeriesDomains(
112142
deselectedDataSeries?: DataSeriesColorsValues[] | null,
113143
): SeriesDomainsAndData {
114144
const { splittedSeries, xValues, seriesColors } = getSplittedSeries(seriesSpecs, deselectedDataSeries);
115-
// tslint:disable-next-line:no-console
116-
// console.log({ splittedSeries, xValues, seriesColors });
145+
117146
const splittedDataSeries = [...splittedSeries.values()];
118147
const specsArray = [...seriesSpecs.values()];
119148

120149
const xDomain = mergeXDomain(specsArray, xValues, customXDomain);
121150
const yDomain = mergeYDomain(splittedSeries, specsArray, domainsByGroupId);
122151

123152
const formattedDataSeries = getFormattedDataseries(specsArray, splittedSeries);
124-
// tslint:disable-next-line:no-console
125-
// console.log({ formattedDataSeries, xDomain, yDomain });\
126-
const lastValues = new Map<string, number>();
127153

128-
formattedDataSeries.stacked.forEach((ds) => {
129-
ds.dataSeries.forEach((series) => {
130-
if (series.data.length > 0) {
131-
const last = series.data[series.data.length - 1];
132-
if (last !== null && last.initialY1 !== null) {
133-
lastValues.set(series.seriesColorKey, last.initialY1);
134-
}
135-
}
136-
});
137-
});
154+
// we need to get the last values from the formatted dataseries
155+
// because we change the format if we are on percentage mode
156+
const lastValues = getLastValues(formattedDataSeries);
138157
const updatedSeriesColors = new Map<string, DataSeriesColorsValues>();
139158
seriesColors.forEach((value, key) => {
140159
const lastValue = lastValues.get(key);

‎stories/bar_chart.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -478,6 +478,7 @@ storiesOf('Bar Chart', module)
478478
.add('stacked as percentage', () => {
479479
const stackedAsPercentage = boolean('stacked as percentage', true);
480480
const clusterBars = boolean('cluster', true);
481+
481482
return (
482483
<Chart className={'story-chart'}>
483484
<Settings showLegend={true} legendPosition={Position.Right} />
@@ -486,7 +487,7 @@ storiesOf('Bar Chart', module)
486487
id={getAxisId('left2')}
487488
title={'Left axis'}
488489
position={Position.Left}
489-
tickFormat={(d) => (stackedAsPercentage && clusterBars ? `${Number(d * 100).toFixed(0)} %` : d)}
490+
tickFormat={(d) => (stackedAsPercentage && !clusterBars ? `${Number(d * 100).toFixed(0)} %` : d)}
490491
/>
491492

492493
<BarSeries
@@ -496,7 +497,7 @@ storiesOf('Bar Chart', module)
496497
xAccessor="x"
497498
yAccessors={['y']}
498499
stackAccessors={clusterBars ? [] : ['x']}
499-
stackAsPercentage={stackedAsPercentage}
500+
stackAsPercentage={clusterBars ? false : stackedAsPercentage}
500501
splitSeriesAccessors={['g']}
501502
data={[
502503
{ x: 0, y: 2, g: 'a' },

0 commit comments

Comments
 (0)