[FIX] column statistic: chart is sometime missing

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) {

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">

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);
+  });
 });