(core) Replace nulls in X-axis of charts with '-' to avoid confusion with missing points

Summary:
Seem in a customer doc where Y-scale was wrong for unclear reasons. The cause
is that null-valued X labels cause the corresponding bar (or point) to be
omitted, but still affect the Y-scale. In this diff, such labels are replaced
with "-", so as to show up normally.

Trivial example that reproduces the problem here:
https://public.getgrist.com/iLPpx9C5i8nk/Null-in-X-Axis

Test Plan: Tested manually.

Reviewers: cyprien

Reviewed By: cyprien

Subscribers: cyprien

Differential Revision: https://phab.getgrist.com/D3442
This commit is contained in:
Dmitry S 2022-05-19 14:56:06 -04:00
parent 8f4f21e94a
commit 9bc04a6e66

View File

@ -1045,7 +1045,7 @@ function basicPlot(series: Series[], options: ChartOptions, dataOptions: Data):
const dataSeries = series.slice(1).map((line: Series): Data => ({
name: getSeriesName(line, series.length > 2),
[axis1]: series[0].values,
[axis1]: replaceEmptyLabels(series[0].values),
[axis2]: line.values,
[`error_${axis2}`]: errorBars.get(line),
orientation: options.orientation,
@ -1129,7 +1129,7 @@ export const chartTypes: {[name: string]: ChartFunc} = {
name: getSeriesName(line, false),
// nulls cause JS errors when pie charts resize, so replace with blanks.
// (a falsy value would cause plotly to show its index, like "2" which is more confusing).
labels: series[0].values.map(v => (v == null || v === "") ? "-" : v),
labels: replaceEmptyLabels(series[0].values),
values: line.values,
...dataOptions,
}]
@ -1202,6 +1202,18 @@ function trimNonNumericData(series: Series[]): void {
}
}
/**
* Replace empty values with "-", which is relevant for labels in Pie Charts and for X-axis in
* other chart types.
*
* In pie charts, nulls cause JS errors. In other types, nulls in X-axis cause that point to be
* omitted (but still affect the Y scale, causing confusion). Replace with "-" rather than blank
* because plotly replaces falsy values by their index (eg "2") in Pie charts, which is confusing.
*/
function replaceEmptyLabels(values: Datum[]): Datum[] {
return values.map(v => (v == null || v === "") ? "-" : v);
}
// Given two parallel arrays, returns an array of series of the form
// {label: category, values: array-of-values}
function groupIntoSeries(categoryList: Datum[], valueList: Datum[]): Series[] {