[IMP] chart: add zoom interactivity #6046

anhe-odoo · 2025-03-27T13:07:24Z

Task Description

This PR aims to add the possibility to zoom/pan in a chart. Two
ways of manipulating the chart have been add :

By ctrl+scrolling on a chart and then ctrl+click+move
With the dedicated component

The zoom interactivity can be enabled by the config panel on line,
scatter, bar and combo chart. The dedicated component should be
activated with the "zoom" icon on the chart, next to the menu icon,
which is only visible if the "zoom" option is activated in the
config menu.

Related Task

Task: 4609219

robodoo · 2025-03-27T13:07:27Z

src/components/side_panel/chart/scatter_chart/scatter_chart_config_panel.xml

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chartjs.ts

LucasLefevre · 2025-04-28T13:48:44Z

src/components/figures/figure/figure.xml

+          style="margin-right:2.5rem!important">
+          <div class="d-flex">
+            <div class="o-figure-menu-item mx-1" t-on-click="resetZoom">
+              <t t-call="o-spreadsheet-Icon.HOME"/>


I would display this icon only if the chart is zoomed

I totally agree, but (at the moment) the "is zoomed" state is something that is only known in the ZoomableChartJs component, and there is no ways to get the information in the figure as it's not stored in any definition or runtime :/
I can add something to get the information, but I'm not sure it will be clean :/

src/components/figures/figure/figure.xml

src/components/side_panel/chart/bar_chart/bar_chart_config_panel.xml

LucasLefevre · 2025-04-28T13:50:47Z

src/components/side_panel/chart/index.ts

@@ -50,7 +51,7 @@ chartSidePanelComponentRegistry
    design: ChartWithAxisDesignPanel,
  })
  .add("combo", {
-    configuration: GenericChartConfigPanel,
+    configuration: ComboConfigPanel,


would it be worth introducing a GenericZoomableChartConfigPanel?

Not sure, as the only "new" config panel is for the ComboBox, so it will be introducing this one only for one chart type. What do you think ?

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chartjs.ts

src/types/chart/chart.ts

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chartjs.ts

hokolomopo

Heyo 👋

didn't read the test 🙃

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chart_store.ts

hokolomopo · 2025-06-24T06:55:43Z

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chart_store.ts

+    for (const axisId of __ZOOMABLE_AXIS_IDS__) {
+      if (limits[axisId]) {


Suggested change

for (const axisId of __ZOOMABLE_AXIS_IDS__) {

if (limits[axisId]) {

for (const axisId in limits) {

no ?

Updated with an else clause no that limits can be undefined too :)

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chart_store.ts

hokolomopo · 2025-06-24T07:52:51Z

src/components/side_panel/chart/bar_chart/bar_chart_config_panel.ts

+    const zoom = {
+      ...definition.zoom,
+      enabled,
+    };
+    if (enabled) {
+      zoom.sliceable = true;
+    }


ther's no need for both zoom.sliceable and zoom.enable no ? And if there's a need for both, why is there a single checkbox to handle two booleans ?

Because the idea of the zoom.enable if that the dashboard maker decide that this chart should be zoomable or not in the dashboard. The zoom.sliceable is there when the dashboard/spreadsheet decide to show the slicer. So there is one checkbox to handle zoom.enable, and one button on the chart to show the slicer

hokolomopo · 2025-06-24T07:54:08Z

src/components/side_panel/chart/combo_chart/combo_chart_config_panel.xml

+        isInvalid="isLabelInvalid"
+        onSelectionChanged.bind="onLabelRangeChanged"
+        onSelectionConfirmed.bind="onLabelRangeConfirmed"
+        options="this.getLabelRangeOptions()"


shouldn't the checkbox be with the other label range options ? Or in the design panel ?

TBC but this has been discussed with FRGI

src/helpers/figures/charts/bar_chart.ts

src/helpers/figures/charts/runtime/index.ts

src/types/chart/chart.ts

LucasLefevre

partial review because I have a question 😉

I don't really see why we couldn't move all the configuration changes (getDetailChartConfiguration, etc.) and the slicer config to the plugins (within and along side getChartRuntime), with a few UI commands to update the limits.
Is there something based on something chartJs computes that we couldn't give to the plugins ?

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chart_store.ts

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chartjs.ts

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chart_store.ts

src/components/figures/chart/chartJs/zoomable_chart/zoomable_chartjs.ts

src/components/figures/figure/figure.ts

Task Description This PR aims to add the possibility to zoom/pan in a chart, within a dedicated component, in the form of a Master/Detail chart. The zoom interactivity can be enabled in the design panel on line, scatter, bar and combo chart. Related Task Task: 4609219

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch 3 times, most recently from 9a3134f to 00a838f Compare April 2, 2025 08:50

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch from 00a838f to 7b6524f Compare April 4, 2025 08:07

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch 2 times, most recently from 761856b to 2ebab79 Compare April 23, 2025 09:18

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch from 2ebab79 to 0664fd5 Compare April 28, 2025 12:55

LucasLefevre reviewed Apr 28, 2025

View reviewed changes

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch 3 times, most recently from 57d68ed to 6810f8e Compare May 12, 2025 15:21

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch 5 times, most recently from b872295 to 1a4da18 Compare May 19, 2025 11:41

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch 2 times, most recently from 922fea0 to 347b6f2 Compare June 17, 2025 09:22

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch 4 times, most recently from ec29382 to 918ec52 Compare June 23, 2025 08:22

hokolomopo reviewed Jun 24, 2025

View reviewed changes

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch 5 times, most recently from 3f0bcf0 to 80afaa2 Compare July 3, 2025 10:48

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch from 80afaa2 to aef12da Compare July 22, 2025 07:07

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch from aef12da to 972bc19 Compare July 24, 2025 11:49

LucasLefevre reviewed Jul 24, 2025

View reviewed changes

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch 7 times, most recently from 9006818 to a728b19 Compare July 31, 2025 13:38

anhe-odoo force-pushed the master-chart-add_zoom_slider-anhe branch from a728b19 to 1ff1184 Compare August 1, 2025 12:20

		for (const axisId of __ZOOMABLE_AXIS_IDS__) {
		if (limits[axisId]) {

	for (const axisId of __ZOOMABLE_AXIS_IDS__) {
	if (limits[axisId]) {
	for (const axisId in limits) {

[IMP] chart: add zoom interactivity #6046

Are you sure you want to change the base?

[IMP] chart: add zoom interactivity #6046

Uh oh!

Conversation

anhe-odoo commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Task Description

Related Task

Uh oh!

robodoo commented Mar 27, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hokolomopo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

LucasLefevre left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

anhe-odoo commented Mar 27, 2025 •

edited

Loading