gristlabs_grist-core/app/client/lib/chartUtil.ts
Cyprien P cecebded1f (core) Fix bar chart weirdness when x axis has redundant values
Summary:
Bar chart was a bit broken when there were redundant values on the X axis: the bars’s height maps to the sum of all the corresponding y values, when the data that shows up on hover is only the last one.

It seems that plotly does not support redundant values in the x axis and in all Plotly examples (implementation relies on plotly) x values only have unique values.

This diff, fixes by making sure x axis has unique values. If user actually wants to plot groups, they'll have to use a summary charts.

Test Plan: tested manually

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3011
2021-09-01 20:58:29 +02:00

34 lines
1.4 KiB
TypeScript

import {typedCompare} from 'app/common/SortFunc';
import {Datum} from 'plotly.js';
import range = require('lodash/range');
import uniqBy = require('lodash/uniqBy');
/**
* Sort all values in a list of series according to the values in the first one.
*/
export function sortByXValues(series: Array<{values: Datum[]}>): void {
// The order of points matters for graph types that connect points with lines: the lines are
// drawn in order in which the points appear in the data. For the chart types we support, it
// only makes sense to keep the points sorted. (The only downside is that Grist line charts can
// no longer produce arbitrary line drawings.)
if (!series[0]) { return; }
const xValues = series[0].values;
const indices = xValues.map((val, i) => i);
indices.sort((a, b) => typedCompare(xValues[a], xValues[b]));
for (const s of series) {
const values = s.values;
s.values = indices.map((i) => values[i]);
}
}
// creates new version of series that has a duplicate free version of the values in the first one.
export function uniqXValues<T extends {values: Datum[]}>(series: Array<T>): Array<T> {
if (!series[0]) { return []; }
const n = series[0].values.length;
const indexToKeep = new Set(uniqBy(range(n), (i) => series[0].values[i]));
return series.map((line: T) => ({
...line,
values: line.values.filter((_val, i) => indexToKeep.has(i))
}));
}