[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

src/helpers/figures/charts/chart_ui_common.ts

@@ -0,0 +1,136 @@
+<<<<<<< HEAD
+||||||| MERGE BASE
+=======
+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";
+import { deepCopy } from "../../misc";
+import { drawGaugeChart } from "./gauge_chart_rendering";
+import { drawScoreChart } from "./scorecard_chart";
+import { getScorecardConfiguration } from "./scorecard_chart_config_builder";
+
+export const CHART_COMMON_OPTIONS: ChartOptions = {
+  // https://www.chartjs.org/docs/latest/general/responsive.html
+  responsive: true, // will resize when its container is resized
+  maintainAspectRatio: false, // doesn't maintain the aspect ratio (width/height =2 by default) so the user has the choice of the exact layout
+  elements: {
+    line: {
+      fill: false, // do not fill the area under line charts
+    },
+    point: {
+      hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
+    },
+  },
+  animation: false,
+  events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "mouseup"],
+};
+
+export function chartToImageUrl(
+  runtime: ChartRuntime,
+  figure: Figure,
+  type: ChartType
+): string | undefined {
+  // wrap the canvas in a div with a fixed size because chart.js would
+  // fill the whole page otherwise
+  const div = document.createElement("div");
+  div.style.width = `${figure.width}px`;
+  div.style.height = `${figure.height}px`;
+  const canvas = document.createElement("canvas");
+  div.append(canvas);
+  canvas.setAttribute("width", figure.width.toString());
+  canvas.setAttribute("height", figure.height.toString());
+  let imageContent: string | undefined;
+  // 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);
+    imageContent = canvas.toDataURL();
+  } else if (type === "gauge") {
+    drawGaugeChart(canvas, runtime as GaugeChartRuntime);
+    imageContent = canvas.toDataURL();
+  }
+  div.remove();
+  return imageContent;
+}
+
+export async function chartToImageFile(
+  runtime: ChartRuntime,
+  figure: Figure,
+  type: ChartType
+): Promise<File | undefined> {
+  // wrap the canvas in a div with a fixed size because chart.js would
+  // fill the whole page otherwise
+  const div = document.createElement("div");
+  div.style.width = `${figure.width}px`;
+  div.style.height = `${figure.height}px`;
+  div.style.position = "fixed";
+  div.style.opacity = "0";
+  const canvas = document.createElement("canvas");
+  div.append(canvas);
+  canvas.setAttribute("width", figure.width.toString());
+  canvas.setAttribute("height", figure.height.toString());
+  // we have to add the canvas to the DOM otherwise it won't be rendered
+  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);
+    chartBlob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+  } else if (type === "gauge") {
+    drawGaugeChart(canvas, runtime as GaugeChartRuntime);
+    chartBlob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+  }
+  div.remove();
+  return chartBlob ? new File([chartBlob], "chart.png", { type: "image/png" }) : undefined;
+}
+
+/**
+ * Custom chart.js plugin to set the background color of the canvas
+ * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
+ */
+const backgroundColorChartJSPlugin = {
+  id: "customCanvasBackgroundColor",
+  beforeDraw: (chart) => {
+    const { ctx } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = "destination-over";
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+  },
+};
+
+>>>>>>> FORWARD PORTED