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) Add options to switch chart orientation

Browse Source 
Test Plan: Adds nbrowser tests

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3323
This commit is contained in:
Cyprien P 2022-03-18 11:30:12 +01:00
parent ec8460b772
commit b6f146d755
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,6 +80,7 @@ interface ChartOptions {
showTotal?: boolean; showTotal?: boolean;
textSize?: number; textSize?: number;
isXAxisUndefined?: boolean; isXAxisUndefined?: boolean;
orientation?: 'v'|'h';
} }
// tslint:disable:no-console // tslint:disable:no-console
@ -561,6 +562,14 @@ export class ChartConfig extends GrainJSDisposable {
// These options don't make much sense for a pie chart. // These options don't make much sense for a pie chart.
cssCheckboxRowObs('Group data', this._groupData), cssCheckboxRowObs('Group data', this._groupData),
cssCheckboxRow('Invert Y-axis', this._optionsObj.prop('invertYAxis')), cssCheckboxRow('Invert Y-axis', this._optionsObj.prop('invertYAxis')),
cssRow(
cssRowLabel('Orientation'),
dom('div', linkSelect(fromKoSave(this._optionsObj.prop('orientation')), [
{value: 'v', label: 'Vertical'},
{value: 'h', label: 'Horizontal'}
], {defaultLabel: 'Vertical'})),
testId('orientation'),
),
cssCheckboxRow('Log scale Y-axis', this._optionsObj.prop('logYAxis')), cssCheckboxRow('Log scale Y-axis', this._optionsObj.prop('logYAxis')),
]), ]),
dom.maybeOwned((use) => use(this._section.chartTypeDef) === 'donut', (owner) => [ dom.maybeOwned((use) => use(this._section.chartTypeDef) === 'donut', (owner) => [
@ -900,12 +909,14 @@ function basicPlot(series: Series[], options: ChartOptions, dataOptions: Data):
// unique values for the x-axis. // unique values for the x-axis.
uniqXValues(series); uniqXValues(series);
} }
const [axis1, axis2] = options.orientation === 'h' ? ['y', 'x'] : ['x', 'y'];
const dataSeries = series.slice(1).map((line: Series): Data => ({ const dataSeries = series.slice(1).map((line: Series): Data => ({
name: getSeriesName(line, series.length > 2), name: getSeriesName(line, series.length > 2),
x: series[0].values, [axis1]: series[0].values,
y: line.values, [axis2]: line.values,
error_y: errorBars.get(line), [`error_${axis2}`]: errorBars.get(line),
orientation: options.orientation,
...dataOptions, ...dataOptions,
stackgroup: makeRelativeStackGroup(dataOptions.stackgroup, line.values), stackgroup: makeRelativeStackGroup(dataOptions.stackgroup, line.values),
})); }));
@ -924,12 +935,12 @@ function basicPlot(series: Series[], options: ChartOptions, dataOptions: Data):
return { return {
data: dataSeries, data: dataSeries,
layout: { layout: {
xaxis: series.length > 0 ? {title: series[0].label} : {}, [`${axis1}axis`]: series.length > 0 ? {title: series[0].label} : {},
// Include yaxis title for a single y-value series only (2 series total); // Include yaxis title for a single y-value series only (2 series total);
// If there are fewer than 2 total series, there is no y-series to display. // If there are fewer than 2 total series, there is no y-series to display.
// If there are multiple y-series, a legend will be included instead, and the yaxis title // If there are multiple y-series, a legend will be included instead, and the yaxis title
// is less meaningful, so omit it. // is less meaningful, so omit it.
yaxis: series.length === 2 ? {title: series[1].label} : {}, [`${axis2}axis`]: series.length === 2 ? {title: series[1].label} : {},
}, },
}; };
} }