Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Fix bar chart weirdness when x axis has redundant values

Browse Source 
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
This commit is contained in:
Cyprien P 2021-09-01 11:41:30 +02:00
parent 7e78ebfeeb
commit cecebded1f
2 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/client/components/ChartView.ts
View File

@ -1,6 +1,6 @@
import * as BaseView from 'app/client/components/BaseView';
import {GristDoc} from 'app/client/components/GristDoc';
import {sortByXValues} from 'app/client/lib/chartUtil';
import {sortByXValues, uniqXValues} from 'app/client/lib/chartUtil';
import {Delay} from 'app/client/lib/Delay';
import {Disposable} from 'app/client/lib/dispose';
import {fromKoSave} from 'app/client/lib/fromKoSave';
@ -352,6 +352,15 @@ function cssCheckboxRow(label: string, value: KoSaveableObservable<unknown>, ...
function basicPlot(series: Series[], options: ChartOptions, dataOptions: Partial<Data>): PlotData {
trimNonNumericData(series);
const errorBars = extractErrorBars(series, options);
if (dataOptions.type === 'bar') {
// Plotly has weirdness when redundant values shows up on the x-axis: the values that shows
// up on hover is different than the value on the y-axis. It seems that one is the sum of all
// values with same x-axis value, while the other is the last of them. To fix this, we force
// unique values for the x-axis.
series = uniqXValues(series);
}
return {
data: series.slice(1).map((line: Series): Data => ({
name: getSeriesName(line, series.length > 2),

13
app/client/lib/chartUtil.ts
View File

@ -1,5 +1,7 @@
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.
@ -18,3 +20,14 @@ export function sortByXValues(series: Array<{values: Datum[]}>): void {
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))
}));
}