[MOV] charts: extract chart animations from Odoo

Extract the code handling chart animation in dashboard from odoo to
o-spreadsheet.

Task: 4787283
Part-of: #6363
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

Author: hokolomopo

src/components/figures/chart/chartJs/chartjs.ts

@@ -1,11 +1,13 @@
 import { Component, onMounted, onWillUnmount, useEffect, useRef } from "@odoo/owl";
 import { Chart, ChartConfiguration } from "chart.js/auto";
 import { ComponentsImportance } from "../../../../constants";
-import { deepCopy } from "../../../../helpers";
+import { deepCopy, deepEquals } from "../../../../helpers";
+import { Store, useStore } from "../../../../store_engine";
 import { FigureUI, SpreadsheetChildEnv } from "../../../../types";
 import { ChartJSRuntime } from "../../../../types/chart/chart";
 import { css } from "../../../helpers";
 import { chartJsExtensionRegistry } from "./chart_js_extension";
+import { ChartAnimationStore } from "./chartjs_animation_store";
 import {
   funnelTooltipPositioner,
   getFunnelChartController,
@@ -70,6 +72,7 @@ export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
   private canvas = useRef("graphContainer");
   private chart?: Chart;
   private currentRuntime!: ChartJSRuntime;
+  private animationStore: Store<ChartAnimationStore> | undefined;
 
   private currentDevicePixelRatio = window.devicePixelRatio;
 
@@ -90,6 +93,9 @@ export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
   }
 
   setup() {
+    if (this.env.model.getters.isDashboard()) {
+      this.animationStore = useStore(ChartAnimationStore);
+    }
     onMounted(() => {
       const runtime = this.chartRuntime;
       this.currentRuntime = runtime;
@@ -115,12 +121,28 @@ export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
   }
 
   private createChart(chartData: ChartConfiguration<any>) {
+    if (this.env.model.getters.isDashboard() && this.animationStore) {
+      const chartType = this.env.model.getters.getChart(this.props.figureUI.id)?.type;
+      if (chartType && this.animationStore.animationPlayed[this.props.figureUI.id] !== chartType) {
+        chartData = this.enableAnimationInChartData(chartData);
+        this.animationStore.disableAnimationForChart(this.props.figureUI.id, chartType);
+      }
+    }
+
     const canvas = this.canvas.el as HTMLCanvasElement;
     const ctx = canvas.getContext("2d")!;
     this.chart = new window.Chart(ctx, chartData);
   }
 
   private updateChartJs(chartData: ChartConfiguration<any>) {
+    if (this.env.model.getters.isDashboard()) {
+      const chartType = this.env.model.getters.getChart(this.props.figureUI.id)?.type;
+      if (chartType && this.hasChartDataChanged() && this.animationStore) {
+        chartData = this.enableAnimationInChartData(chartData);
+        this.animationStore.disableAnimationForChart(this.props.figureUI.id, chartType);
+      }
+    }
+
     if (chartData.data && chartData.data.datasets) {
       this.chart!.data = chartData.data;
       if (chartData.options?.plugins?.title) {
@@ -132,4 +154,18 @@ export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
     this.chart!.config.options = chartData.options;
     this.chart!.update();
   }
+
+  private hasChartDataChanged() {
+    return !deepEquals(
+      this.currentRuntime.chartJsConfig.data,
+      this.chartRuntime.chartJsConfig.data
+    );
+  }
+
+  private enableAnimationInChartData(chartData: ChartConfiguration<any>) {
+    return {
+      ...chartData,
+      options: { ...chartData.options, animation: { animateRotate: true } },
+    };
+  }
 }

src/components/figures/chart/chartJs/chartjs_animation_store.ts

@@ -0,0 +1,13 @@
+import { SpreadsheetStore } from "../../../../stores/spreadsheet_store";
+import { ChartType, UID } from "../../../../types";
+
+export class ChartAnimationStore extends SpreadsheetStore {
+  mutators = ["disableAnimationForChart"] as const;
+
+  animationPlayed = {};
+
+  disableAnimationForChart(chartId: UID, chartType: ChartType) {
+    this.animationPlayed[chartId] = chartType;
+    return "noStateChange";
+  }
+}

tests/figures/chart/chart_animations.test.ts

@@ -0,0 +1,75 @@
+import { Chart } from "chart.js";
+import { Model, readonlyAllowedCommands } from "../../../src";
+import { createChart, setCellContent, updateChart } from "../../test_helpers/commands_helpers";
+import { mockChart, mountSpreadsheet, nextTick } from "../../test_helpers/helpers";
+
+mockChart();
+
+let mockedChart: any;
+beforeEach(() => {
+  jest
+    .spyOn((window as any).Chart.prototype, "constructorMock")
+    .mockImplementation(function (this: Chart) {
+      mockedChart = this;
+    });
+});
+
+describe("Chart animations in dashboard", () => {
+  test("Charts are animated only at first render", async () => {
+    const model = new Model();
+    createChart(model, { type: "bar" });
+    model.updateMode("dashboard");
+
+    await mountSpreadsheet({ model });
+    expect(".o-figure").toHaveCount(1);
+    expect(mockedChart.config.options.animation.animateRotate).toBe(true);
+
+    // Scroll the figure out of the viewport and back in
+    model.dispatch("SET_VIEWPORT_OFFSET", { offsetX: 0, offsetY: 500 });
+    await nextTick();
+    expect(".o-figure").toHaveCount(0);
+
+    model.dispatch("SET_VIEWPORT_OFFSET", { offsetX: 0, offsetY: 0 });
+    await nextTick();
+    expect(".o-figure").toHaveCount(1);
+    expect(mockedChart.config.options.animation).toBe(false);
+  });
+
+  test("Animations are replayed only when chart data changes", async () => {
+    readonlyAllowedCommands.add("UPDATE_CELL");
+
+    const model = new Model();
+    createChart(model, { type: "bar", dataSets: [{ dataRange: "A1:A6" }] });
+    model.updateMode("dashboard");
+    await mountSpreadsheet({ model });
+
+    expect(mockedChart.config.options.animation).toEqual({ animateRotate: true });
+
+    // Dispatch a command that doesn't change the chart data
+    setCellContent(model, "A50", "6");
+    await nextTick();
+    expect(mockedChart.config.options.animation).toBe(false);
+
+    // Change the chart data
+    setCellContent(model, "A2", "6");
+    await nextTick();
+    expect(mockedChart.config.options.animation).toEqual({ animateRotate: true });
+
+    readonlyAllowedCommands.delete("UPDATE_CELL");
+  });
+
+  test("Charts are animated when chart type changes", async () => {
+    const model = new Model();
+    createChart(model, { type: "bar", dataSets: [{ dataRange: "A1:A6" }] }, "chartId");
+    model.updateMode("dashboard");
+    await mountSpreadsheet({ model });
+
+    model.dispatch("EVALUATE_CELLS");
+    await nextTick();
+    expect(mockedChart.config.options.animation).toBe(false);
+
+    updateChart(model, "chartId", { type: "pie" });
+    await nextTick();
+    expect(mockedChart.config.options.animation.animateRotate).toBe(true);
+  });
+});