Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Treating x axis as category for bar chart

Browse Source 
Summary: Forcing category xaxis type for bar chart when labels are not numerical.

Test Plan: Added new and updated existing

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D4297
This commit is contained in:
Jarosław Sadziński
2024-07-23 14:50:00 +02:00
parent e30a090a4e
commit 8162a6d959
2 changed files with 54 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -106,8 +106,9 @@ type RowPropGetter = (rowId: number) => Datum;
// We convert Grist data to a list of Series first, from which we then construct Plotly traces.
interface Series {
label: string; // Corresponds to the column name.
group?: Datum; // The group value, when grouped.
values: Datum[];
pureType?: string; // The pure type of the column.
group?: Datum; // The group value, when grouped.
isInSortSpec?: boolean; // Whether this series is present in sort spec for this chart.
}
@@ -273,6 +274,7 @@ export class ChartView extends Disposable {
const pureType = field.displayColModel().pureType();
const fullGetter = (pureType === 'Date' || pureType === 'DateTime') ? dateGetter(getter) : getter;
return {
pureType,
label: field.label(),
values: rowIds.map(fullGetter),
isInSortSpec: Boolean(Sort.findCol(this._sortSpec, field.colRef.peek())),
@@ -1121,7 +1123,15 @@ function basicPlot(series: Series[], options: ChartOptions, dataOptions: Data):
export const chartTypes: {[name: string]: ChartFunc} = {
// TODO There is a lot of code duplication across chart types. Some refactoring is in order.
bar(series: Series[], options: ChartOptions): PlotData {
return basicPlot(series, options, {type: 'bar'});
// If the X axis is not from numerical column, treat it as category.
const data = basicPlot(series, options, {type: 'bar'});
const useCategory = series[0]?.pureType && !['Numeric', 'Int', 'Any'].includes(series[0].pureType);
const xaxisName = options.orientation === 'h' ? 'yaxis' : 'xaxis';
if (useCategory && data.layout && data.layout[xaxisName]) {
const axisConfig = data.layout[xaxisName]!;
axisConfig.type = 'category';
}
return data;
},
line(series: Series[], options: ChartOptions): PlotData {
sortByXValues(series);