[FIX] Charts: Ensure Chart js extension are loaded on chart creation

When calling the method chartToImage, the chartJs extensions might not
be loaded as we load them conditionally when mounting a chart. Hence,
calling `ChartToImage` when there are no visible charts in the viewport
or if we just instantiate a model without loading a component
`Spreadsheet`, the extensions will be missing.

Right now, the plugins/extensions are not fundamental to convert a chart
to an image but this becomes problematic with the arrival of future
charts (for instance Funnel).

This commit adds a check to ensure that the extensisons are loaded and
unloads them after use as they can cause crashes when using the global
`ChartJs` variable elsewhere (see #6076).

closes #7562

Task: 5214007
X-original-commit: d146422
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>

Author: rrahir

src/helpers/figures/charts/chart_ui_common.ts

@@ -1,4 +1,9 @@
 import type { ChartConfiguration, ChartOptions } from "chart.js";
+import {
+  areChartJSExtensionsLoaded,
+  registerChartJSExtensions,
+  unregisterChartJsExtensions,
+} from "../../../components/figures/chart/chartJs/chart_js_extension";
 import { Figure } from "../../../types";
 import { ChartType, GaugeChartRuntime, ScorecardChartRuntime } from "../../../types/chart";
 import { ChartRuntime } from "../../../types/chart/chart";
@@ -41,11 +46,18 @@ export function chartToImageUrl(
   // we have to add the canvas to the DOM otherwise it won't be rendered
   document.body.append(div);
   if ("chartJsConfig" in runtime) {
+    const extensionsLoaded = areChartJSExtensionsLoaded();
+    if (!extensionsLoaded) {
+      registerChartJSExtensions();
+    }
     const config = deepCopy(runtime.chartJsConfig);
     config.plugins = [backgroundColorChartJSPlugin];
     const chart = new window.Chart(canvas, config as ChartConfiguration);
     imageContent = chart.toBase64Image() as string;
     chart.destroy();
+    if (!extensionsLoaded) {
+      unregisterChartJsExtensions();
+    }
   } else if (type === "scorecard") {
     const design = getScorecardConfiguration(figure, runtime as ScorecardChartRuntime);
     drawScoreChart(design, canvas);
@@ -78,11 +90,18 @@ export async function chartToImageFile(
   document.body.append(div);
   let chartBlob: Blob | null = null;
   if ("chartJsConfig" in runtime) {
+    const extensionsLoaded = areChartJSExtensionsLoaded();
+    if (!extensionsLoaded) {
+      registerChartJSExtensions();
+    }
     const config = deepCopy(runtime.chartJsConfig);
     config.plugins = [backgroundColorChartJSPlugin];
     const chart = new window.Chart(canvas, config as ChartConfiguration);
     chartBlob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, "image/png"));
     chart.destroy();
+    if (!extensionsLoaded) {
+      unregisterChartJsExtensions();
+    }
   } else if (type === "scorecard") {
     const design = getScorecardConfiguration(figure, runtime as ScorecardChartRuntime);
     drawScoreChart(design, canvas);