[IMP] charts: update gauge/scorecard on resize

src/components/figures/chart/gauge/gauge_chart_component.ts

@@ -1,4 +1,4 @@
-import { Component, useEffect, useRef } from "@odoo/owl";
+import { Component, onMounted, onWillUnmount, useEffect, useRef } from "@odoo/owl";
 import { drawGaugeChart } from "../../../../helpers/figures/charts/gauge_chart_rendering";
 import { deepEquals } from "../../../../helpers/misc";
 import { EASING_FN } from "../../../../registries/cell_animation_registry";
@@ -67,6 +67,15 @@ export class GaugeChartComponent extends Component<Props, SpreadsheetChildEnv> {
         return [rect.width, rect.height, this.runtime, this.canvas.el, window.devicePixelRatio];
       }
     );
+    const resizeObserver = new ResizeObserver(() => {
+      if (animation) {
+        animation.stop();
+        animation = null;
+      }
+      drawGaugeChart(this.canvasEl, this.runtime, this.env.model.getters.getViewportZoomLevel());
+    });
+    onMounted(() => resizeObserver.observe(this.canvas.el as HTMLCanvasElement));
+    onWillUnmount(() => resizeObserver.disconnect());
   }
 
   drawGaugeWithAnimation() {

src/components/figures/chart/scorecard/chart_scorecard.ts

@@ -1,4 +1,4 @@
-import { Component, useEffect, useRef } from "@odoo/owl";
+import { Component, onMounted, onWillUnmount, useEffect, useRef } from "@odoo/owl";
 import { drawScoreChart } from "../../../../helpers/figures/charts/scorecard_chart";
 import { getScorecardConfiguration } from "../../../../helpers/figures/charts/scorecard_chart_config_builder";
 import { ScorecardChartRuntime } from "../../../../types/chart/scorecard_chart";
@@ -34,6 +34,9 @@ export class ScorecardChart extends Component<Props, SpreadsheetChildEnv> {
       const rect = canvas.getBoundingClientRect();
       return [rect.width, rect.height, this.runtime, this.canvas.el, window.devicePixelRatio];
     });
+    const resizeObserver = new ResizeObserver(() => this.createChart());
+    onMounted(() => resizeObserver.observe(this.canvas.el as HTMLCanvasElement));
+    onWillUnmount(() => resizeObserver.disconnect());
   }
 
   private createChart() {

tests/figures/chart/gauge/gauge_rendering.test.ts

@@ -293,3 +293,19 @@ describe("Gauge chart component animation", () => {
     readonlyAllowedCommands.delete("UPDATE_CELL");
   });
 });
+
+test("Gauge is re-render on element size change", async () => {
+  const model = new Model();
+  createGaugeChart(model, {});
+  const { fixture } = await mountSpreadsheet({ model });
+
+  const canvas = fixture.querySelector<HTMLCanvasElement>("canvas.o-gauge-chart")!;
+  const ctx = canvas.getContext("2d")!;
+
+  const spy = jest.spyOn(ctx, "scale"); // ctx.scale is the first thing the gauge rendering process calls
+  window.resizers.resize();
+  expect(spy).toHaveBeenCalledTimes(1);
+
+  window.resizers.resize();
+  expect(spy).toHaveBeenCalledTimes(2);
+});

tests/figures/chart/scorecard/scorecard_chart_component.test.ts

@@ -32,7 +32,11 @@ import {
 } from "../../../test_helpers/commands_helpers";
 import { FR_LOCALE } from "../../../test_helpers/constants";
 import { getCellContent } from "../../../test_helpers/getters_helpers";
-import { mountComponentWithPortalTarget, nextTick } from "../../../test_helpers/helpers";
+import {
+  mountComponentWithPortalTarget,
+  mountSpreadsheet,
+  nextTick,
+} from "../../../test_helpers/helpers";
 
 let model: Model;
 let chartId: string;
@@ -767,3 +771,19 @@ describe("Scorecard charts rendering", () => {
     expect(scorecardChartStyle.baseline.bold).not.toEqual(true);
   });
 });
+
+test("Scorecard is re-render on element size change", async () => {
+  const model = new Model();
+  createScorecardChart(model, {});
+  const { fixture } = await mountSpreadsheet({ model });
+
+  const canvas = fixture.querySelector<HTMLCanvasElement>("canvas.o-scorecard")!;
+  const ctx = canvas.getContext("2d")!;
+
+  const spy = jest.spyOn(ctx, "scale"); // ctx.scale is the first thing the scorecard rendering process calls
+  window.resizers.resize();
+  expect(spy).toHaveBeenCalledTimes(1);
+
+  window.resizers.resize();
+  expect(spy).toHaveBeenCalledTimes(2);
+});

tests/setup/canvas.mock.ts

@@ -40,8 +40,12 @@ export class MockCanvasRenderingContext2D {
 }
 
 const patch = {
+  _mockContext: null as MockCanvasRenderingContext2D | null,
   getContext: function () {
-    return new MockCanvasRenderingContext2D() as any as CanvasRenderingContext2D;
+    if (!this._mockContext) {
+      this._mockContext = new MockCanvasRenderingContext2D();
+    }
+    return this._mockContext;
   },
   toDataURL: function () {
     return "data:image/png;base64,randomDataThatIsActuallyABase64Image";