[IMP] chart: add animation to calendar chart

Add a color fade-in animation to calendar chart when it is created
or updated.

closes #7211

Task: 5123652
Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>

Author: hokolomopo

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

@@ -7,6 +7,7 @@ import { Store, useStore } from "../../../../store_engine";
 import { UID } from "../../../../types";
 import { chartJsExtensionRegistry, registerChartJSExtensions } from "./chart_js_extension";
 import { ChartAnimationStore } from "./chartjs_animation_store";
+import { getCalendarChartController } from "./chartjs_calendar_chart";
 import { chartColorScalePlugin } from "./chartjs_colorscale_plugin";
 import {
   funnelTooltipPositioner,
@@ -57,6 +58,10 @@ chartJsExtensionRegistry.add("chartColorScalePlugin", {
   register: (Chart) => Chart.register(chartColorScalePlugin),
   unregister: (Chart) => Chart.unregister(chartColorScalePlugin),
 });
+chartJsExtensionRegistry.add("calendarController", {
+  register: (Chart) => Chart.register(getCalendarChartController()),
+  unregister: (Chart) => Chart.unregister(getCalendarChartController()),
+});
 
 export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ChartJsComponent";

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

@@ -0,0 +1,51 @@
+import {
+  BarController,
+  BarControllerChartOptions,
+  BarControllerDatasetOptions,
+  CartesianParsedData,
+  CartesianScaleTypeRegistry,
+  Chart,
+  ChartComponent,
+} from "chart.js";
+
+export function getCalendarChartController(): ChartComponent & {
+  prototype: BarController;
+  new (chart: Chart, datasetIndex: number): BarController;
+} {
+  return class CalendarChartController extends window.Chart.BarController {
+    static id = "calendar";
+    static defaults = {
+      ...window.Chart?.BarController.defaults,
+      dataElementType: "bar",
+      animations: {
+        numbers: { type: "number", properties: [] }, // Disable number animations (width, height, ...)
+      },
+    };
+
+    updateElements(rects, start, count, mode) {
+      super.updateElements(rects, start, count, mode);
+
+      // Remove the element background at the start of an animation
+      const chartBackground = (this.chart.config as any).options?.chartBackground;
+      const backgroundColor = chartBackground || "#ffffff";
+      for (let i = start; i < start + count; i++) {
+        if (mode === "reset") {
+          this.updateElement(rects[i], i, { options: { backgroundColor } }, mode);
+        }
+      }
+    }
+  };
+}
+
+declare module "chart.js" {
+  interface ChartTypeRegistry {
+    calendar: {
+      chartOptions: BarControllerChartOptions & { chartBackground: string };
+      datasetOptions: BarControllerDatasetOptions & { values: number[] };
+      defaultDataPoint: number | null;
+      metaExtensions: {};
+      parsedDataType: CartesianParsedData;
+      scales: keyof CartesianScaleTypeRegistry;
+    };
+  }
+}

src/helpers/figures/charts/calendar_chart.ts

@@ -14,7 +14,6 @@ import { CHART_COMMON_OPTIONS } from "@odoo/o-spreadsheet-engine/helpers/figures
 import { createValidRange } from "@odoo/o-spreadsheet-engine/helpers/range";
 import {
   BarChartDefinition,
-  BarChartRuntime,
   ChartCreationContext,
   CustomizedDataSet,
   ExcelChartDefinition,
@@ -24,6 +23,7 @@ import {
   CALENDAR_CHART_GRANULARITIES,
   CalendarChartDefinition,
   CalendarChartGranularity,
+  CalendarChartRuntime,
 } from "@odoo/o-spreadsheet-engine/types/chart/calendar_chart";
 import type { ChartConfiguration } from "chart.js";
 import {
@@ -217,13 +217,13 @@ export class CalendarChart extends AbstractChart {
 export function createCalendarChartRuntime(
   chart: CalendarChart,
   getters: Getters
-): BarChartRuntime {
+): CalendarChartRuntime {
   const definition = chart.getDefinition();
   const chartData = getCalendarChartData(definition, chart.dataSets, chart.labelRange, getters);
   const { labels, datasets } = getCalendarChartDatasetAndLabels(definition, chartData);
 
-  const config: ChartConfiguration<"bar"> = {
-    type: "bar",
+  const config: ChartConfiguration<"calendar"> = {
+    type: "calendar",
     data: {
       labels,
       datasets,
@@ -240,6 +240,7 @@ export function createCalendarChartRuntime(
         chartShowValuesPlugin: getCalendarChartShowValues(definition, chartData),
         chartColorScalePlugin: getCalendarColorScale(definition, chartData),
       },
+      chartBackground: definition.background || BACKGROUND_CHART_COLOR,
     },
   };
 

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

@@ -111,7 +111,7 @@ export function getCalendarChartDatasetAndLabels(
   definition: CalendarChartDefinition,
   args: ChartRuntimeGenerationArgs
 ): {
-  datasets: (ChartDataset<"bar"> & { values: number[] })[];
+  datasets: ChartDataset<"calendar">[];
   labels: string[];
 } {
   const { labels, dataSetsValues } = args;
@@ -129,7 +129,7 @@ export function getCalendarChartDatasetAndLabels(
     maxValue
   );
 
-  const dataSets: (ChartDataset<"bar"> & { values: number[] })[] = [];
+  const dataSets: ChartDataset<"calendar">[] = [];
   for (const dataSetValues of dataSetsValues) {
     dataSets.push({
       label: dataSetValues.label,

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

@@ -94,7 +94,7 @@ export function getBarChartScales(
 export function getCalendarChartScales(
   definition: GenericDefinition<BarChartDefinition>,
   datasets: ChartDataset[]
-): DeepPartial<ScaleChartOptions<"line" | "bar">["scales"]> {
+): DeepPartial<ScaleChartOptions<"calendar">["scales"]> {
   const yLabels = datasets.map((dataset) => dataset.label || "");
   const fontColor = chartFontColor(definition.background);
   return {

tests/figures/chart/charts_component.test.ts

@@ -2454,7 +2454,7 @@ test("ChartJS charts extensions are loaded when mounting a spreadsheet, are only
   const spyUnregister = jest.spyOn(window.Chart, "unregister");
   createChart(model, { type: "bar" }, chartId);
   await mountSpreadsheet();
-  expect(spyRegister).toHaveBeenCalledTimes(8);
+  expect(spyRegister).toHaveBeenCalledTimes(9);
   expect(window.Chart.registry.plugins["items"].map((i) => i.id)).toMatchObject([
     "chartShowValuesPlugin",
     "waterfallLinesPlugin",
@@ -2463,16 +2463,17 @@ test("ChartJS charts extensions are loaded when mounting a spreadsheet, are only
     "sunburstLabelsPlugin",
     "sunburstHoverPlugin",
     "chartColorScalePlugin",
+    "calendar", // Calendar controller
     "zoomWindowPlugin",
   ]);
 
   createChart(model, { type: "line" }, "chart2");
   await nextTick();
-  expect(spyRegister).toHaveBeenCalledTimes(8);
+  expect(spyRegister).toHaveBeenCalledTimes(9);
 
   app.destroy();
   await nextTick();
-  expect(spyUnregister).toHaveBeenCalledTimes(8);
+  expect(spyUnregister).toHaveBeenCalledTimes(9);
   expect(window.Chart.registry.plugins["items"]).toEqual([]);
 });