From 55c7ebb425982ece54334fd07a0245ef57071934 Mon Sep 17 00:00:00 2001
From: "Adrien Minne (adrm)" <adrm@odoo.com>
Date: Tue, 24 Mar 2026 11:04:20 +0100
Subject: [PATCH] [FIX] column statistic: chart is sometime missing

If there are no data to show in the column statistic side panel
in the `Distribution` section, going back to the `Count` section
would display a blank chart. It was because we were trying to create
the `Chart` before its canvas was mounted in the DOM.

There was also some missing padding, and we didn't use the generic
`Section` component everywhere.

Task: 6057322
---
 .../column_stats/column_stats_panel.ts        |  4 +--
 .../column_stats/column_stats_panel.xml       | 10 +++----
 .../column_statistics_side_panel.test.ts      | 28 +++++++++++++++++++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/side_panel/column_stats/column_stats_panel.ts b/src/components/side_panel/column_stats/column_stats_panel.ts
index 39dfd4ad39..460c545a6e 100644
--- a/src/components/side_panel/column_stats/column_stats_panel.ts
+++ b/src/components/side_panel/column_stats/column_stats_panel.ts
@@ -44,7 +44,7 @@ export class ColumnStatsPanel extends Component<Props, SpreadsheetChildEnv> {
       () => {
         this.updateChart();
       },
-      () => [this.store.countChartData, this.store.histogramData]
+      () => [this.store.countChartData, this.store.histogramData, this.state.currentChart]
     );
   }
 
@@ -258,8 +258,6 @@ export class ColumnStatsPanel extends Component<Props, SpreadsheetChildEnv> {
 
   switchChart(chartType: string) {
     this.state.currentChart = chartType;
-    this.destroyChart();
-    this.createChart();
   }
 
   switchFrequencyOrder(order: string) {
diff --git a/src/components/side_panel/column_stats/column_stats_panel.xml b/src/components/side_panel/column_stats/column_stats_panel.xml
index 0704a82ea3..922bbdbf67 100644
--- a/src/components/side_panel/column_stats/column_stats_panel.xml
+++ b/src/components/side_panel/column_stats/column_stats_panel.xml
@@ -32,7 +32,7 @@
         </Section>
         <SidePanelCollapsible title.translate="Data visualization" isInitiallyCollapsed="false">
           <t t-set-slot="content">
-            <div class="mx-4 mb-2">
+            <Section class="'pt-0'">
               <BadgeSelection
                 choices="charts"
                 onChange.bind="switchChart"
@@ -44,21 +44,21 @@
                 </div>
               </t>
               <t t-else="">
-                <div class="text-muted mt-4" t-out="chartErrorMessage"/>
+                <div class="o-column-stats-no-data text-muted mt-4" t-out="chartErrorMessage"/>
               </t>
-            </div>
+            </Section>
           </t>
         </SidePanelCollapsible>
         <SidePanelCollapsible title.translate="General statistics" isInitiallyCollapsed="false">
           <t t-set-slot="content">
-            <div class="o-column-global-stats d-flex flex-column gap-2 mb-2">
+            <Section class="'o-column-global-stats d-flex flex-column gap-2 pt-0'">
               <t t-foreach="store.statItems" t-as="stat" t-key="stat.name">
                 <div class="o-column-stats-row d-flex justify-content-between">
                   <span class="text-muted" t-out="stat.name"/>
                   <span class="o-fw-bold" t-att-data-test-id="stat.name" t-out="stat.value"/>
                 </div>
               </t>
-            </div>
+            </Section>
           </t>
         </SidePanelCollapsible>
         <SidePanelCollapsible title.translate="Frequency" isInitiallyCollapsed="true">
diff --git a/tests/column_statistics/column_statistics_side_panel.test.ts b/tests/column_statistics/column_statistics_side_panel.test.ts
index f5276f5313..beec922cd6 100644
--- a/tests/column_statistics/column_statistics_side_panel.test.ts
+++ b/tests/column_statistics/column_statistics_side_panel.test.ts
@@ -1,3 +1,4 @@
+import { ChartConfiguration } from "chart.js";
 import { Model } from "../../src";
 import { ColumnStatisticsStore } from "../../src/components/side_panel/column_stats/column_stats_store";
 import { SidePanels } from "../../src/components/side_panel/side_panels/side_panels";
@@ -126,4 +127,31 @@ describe("column statistics sidePanel component", () => {
     labels = Array.from(fixture.querySelectorAll(".frequency-label")).map((el) => el.textContent);
     expect(labels).toEqual(["c", "b", "a"]);
   });
+
+  test("Chart is re-created when switching from distribution to count when there are no distribution chart to display", async () => {
+    setGrid(model, { A1: "Alice", A2: "Alice" });
+    env.openSidePanel("ColumnStats");
+    const ChartMock = window.Chart;
+    window.Chart = jest
+      .fn()
+      .mockImplementation(function (ctx: CanvasRenderingContext2D, config: ChartConfiguration) {
+        return new ChartMock(ctx, config);
+      }) as any;
+
+    await nextTick();
+
+    expect(".o-column-stats-chart canvas").toHaveCount(1);
+    expect(".o-column-stats-no-data").toHaveCount(0);
+    expect(window.Chart).toHaveBeenCalledTimes(1);
+
+    await click(fixture, '.o-button[data-id="histogram"]');
+    expect(".o-column-stats-chart canvas").toHaveCount(0);
+    expect(".o-column-stats-no-data").toHaveText("No numeric values to display.");
+    expect(window.Chart).toHaveBeenCalledTimes(1);
+
+    await click(fixture, '.o-button[data-id="count"]');
+    expect(".o-column-stats-chart canvas").toHaveCount(1);
+    expect(".o-column-stats-no-data").toHaveCount(0);
+    expect(window.Chart).toHaveBeenCalledTimes(2);
+  });
 });