[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).

Task: 5214007
X-original-commit: d146422

Author: rrahir

packages/o-spreadsheet-engine/src/helpers/figures/charts/chart_js_extension.ts

@@ -0,0 +1,31 @@
+import { Chart } from "chart.js";
+import { Registry } from "../../../registry";
+
+export const chartJsExtensionRegistry = new Registry<{
+  register: (chart: typeof Chart) => void;
+  unregister: (chart: typeof Chart) => void;
+}>();
+
+const getChartJs = () => (globalThis as any).Chart;
+
+export function areChartJSExtensionsLoaded() {
+  return !!getChartJs().registry.plugins.get("chartShowValuesPlugin");
+}
+
+export function registerChartJSExtensions() {
+  if (!getChartJs() || areChartJSExtensionsLoaded()) {
+    return;
+  }
+  for (const registryItem of chartJsExtensionRegistry.getAll()) {
+    registryItem.register(getChartJs());
+  }
+}
+
+export function unregisterChartJsExtensions() {
+  if (!getChartJs()) {
+    return;
+  }
+  for (const registryItem of chartJsExtensionRegistry.getAll()) {
+    registryItem.unregister(getChartJs());
+  }
+}

packages/o-spreadsheet-engine/src/helpers/figures/charts/chart_ui_common.ts

@@ -7,6 +7,11 @@ import {
 } from "../../../types/chart";
 import { Figure } from "../../../types/figure";
 import { deepCopy } from "../../misc";
+import {
+  areChartJSExtensionsLoaded,
+  registerChartJSExtensions,
+  unregisterChartJsExtensions,
+} from "./chart_js_extension";
 import { drawGaugeChart } from "./gauge_chart_rendering";
 import { drawScoreChart } from "./scorecard_chart";
 import { getScorecardConfiguration } from "./scorecard_chart_config_builder";
@@ -35,6 +40,10 @@ export async function chartToImageUrl(
   const canvas = createRenderingSurface(figure.width, figure.height);
   let imageUrl: string | undefined;
   if ("chartJsConfig" in runtime) {
+    const extensionsLoaded = areChartJSExtensionsLoaded();
+    if (!extensionsLoaded) {
+      registerChartJSExtensions();
+    }
     const config = deepCopy(runtime.chartJsConfig);
     config.plugins = [backgroundColorChartJSPlugin];
     const chart = new (globalThis as any).Chart(canvas, config as ChartConfiguration);
@@ -43,6 +52,9 @@ export async function chartToImageUrl(
     } finally {
       chart.destroy();
     }
+    if (!extensionsLoaded) {
+      unregisterChartJsExtensions();
+    }
   }
   // TODO: make a registry of chart types to their rendering functions
   else {
@@ -70,6 +82,10 @@ export async function chartToImageFile(
   const canvas = createRenderingSurface(figure.width, figure.height);
   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 (globalThis as any).Chart(canvas, config as ChartConfiguration);
@@ -78,6 +94,9 @@ export async function chartToImageFile(
     } finally {
       chart.destroy();
     }
+    if (!extensionsLoaded) {
+      unregisterChartJsExtensions();
+    }
   } else {
     if (!globalThis.OffscreenCanvas)
       throw new Error(