From 45f954add8f693c1f4a814f6f24fb73d04789af2 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Thu, 14 Nov 2024 16:02:29 +0100 Subject: [PATCH] [FIX] chart: center pyramid charts vertical axis MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The vertical axis should be centered in pyramid chart so we can easily compare the values of the left and right sides. closes odoo/o-spreadsheet#5218 Task: 4334617 Signed-off-by: Lucas Lefèvre (lul) --- src/helpers/figures/charts/pyramid_chart.ts | 6 ++++++ .../chart/pyramid_chart_plugin.test.ts | 21 ++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/helpers/figures/charts/pyramid_chart.ts b/src/helpers/figures/charts/pyramid_chart.ts index 037c5b5b52..c1ef3ca919 100644 --- a/src/helpers/figures/charts/pyramid_chart.ts +++ b/src/helpers/figures/charts/pyramid_chart.ts @@ -200,9 +200,15 @@ export function createPyramidChartRuntime( datasets[1].data = datasets[1].data.map((value: number) => (value > 0 ? -value : 0)); } + const maxValue = Math.max( + ...config.data?.datasets.map((dataSet) => Math.max(...dataSet.data.map(Math.abs))) + ); + const scales = config.options!.scales; const scalesXCallback = scales!.x!.ticks!.callback as (value: number) => string; scales!.x!.ticks!.callback = (value: number) => scalesXCallback(Math.abs(value)); + scales!.x!.suggestedMin = -maxValue; + scales!.x!.suggestedMax = maxValue; const tooltipLabelCallback = config.options!.plugins!.tooltip!.callbacks!.label! as any; config.options!.plugins!.tooltip!.callbacks!.label = (item) => { diff --git a/tests/figures/chart/pyramid_chart_plugin.test.ts b/tests/figures/chart/pyramid_chart_plugin.test.ts index f8fac0c065..e014a11b5c 100644 --- a/tests/figures/chart/pyramid_chart_plugin.test.ts +++ b/tests/figures/chart/pyramid_chart_plugin.test.ts @@ -1,4 +1,4 @@ -import { ChartCreationContext, Model } from "../../../src"; +import { ChartCreationContext, ChartJSRuntime, Model } from "../../../src"; import { PyramidChart } from "../../../src/helpers/figures/charts/pyramid_chart"; import { PyramidChartDefinition } from "../../../src/types/chart/pyramid_chart"; import { createChart, setCellContent, setFormat } from "../../test_helpers/commands_helpers"; @@ -101,5 +101,24 @@ describe("population pyramid chart", () => { const tooltip = runtime.chartJsConfig.options?.plugins?.tooltip as any; expect(tooltip?.callbacks?.label(tooltipTestItem)).toBe("dataSetLabel: 10€"); }); + + test("The negative and positive values have the same max value", () => { + setCellContent(model, "A1", "5"); + setCellContent(model, "A2", "33"); + + createChart( + model, + { + type: "pyramid", + dataSets: [{ dataRange: "A1" }, { dataRange: "A2" }], + dataSetsHaveTitle: false, + }, + "id" + ); + const runtime = model.getters.getChartRuntime("id") as ChartJSRuntime; + const options = runtime.chartJsConfig.options; + expect(options?.scales?.x?.suggestedMin).toBe(-33); + expect(options?.scales?.x?.suggestedMax).toBe(33); + }); }); });