[IMP] chart: highlight children of hovered item in sunburst

With this commit, the children of the hovered item in the sunburst
chart are highlighted in addition to the hovered item, and the other
elements are dimmed.

This is done by adding a new plugin to the `ChartJS`. The plugin
`sunburstHoverPlugin` make the children of the hovered item
`active`, so they get the hovered offset and color.

Task: 4575651

Author: hokolomopo

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

@@ -0,0 +1,85 @@
+import { ActiveDataPoint, ChartType, Plugin } from "chart.js";
+import { lightenColor } from "../../../../helpers";
+import { GHOST_SUNBURST_VALUE } from "../../../../helpers/figures/charts/runtime";
+import { SunburstChartRawData } from "../../../../types/chart";
+
+export interface ChartSunburstHoverPluginOptions {
+  enabled: boolean;
+}
+
+declare module "chart.js" {
+  interface PluginOptionsByType<TType extends ChartType> {
+    sunburstHoverPlugin?: ChartSunburstHoverPluginOptions;
+  }
+}
+
+/**
+ * When a chart element is hovered (active), this plugin also activates all of its child elements and
+ * lightens the color of the other elements.
+ */
+export const sunburstHoverPlugin: Plugin = {
+  id: "sunburstHoverPlugin",
+  afterEvent(chart, args, options: ChartSunburstHoverPluginOptions) {
+    if (!options.enabled) {
+      return;
+    }
+    const chartActiveElements = chart.getActiveElements();
+    let activeDataPoints: ActiveDataPoint[] = chartActiveElements.map((el) => ({
+      datasetIndex: el.datasetIndex,
+      index: el.index,
+    }));
+
+    for (const activeEl of chartActiveElements) {
+      const activeDataset = chart.data.datasets[activeEl.datasetIndex];
+      const activeData = activeDataset.data[activeEl.index] as unknown as SunburstChartRawData;
+
+      for (let datasetIndex = 0; datasetIndex < chart.data.datasets.length; datasetIndex++) {
+        const dataset = chart.data.datasets[datasetIndex];
+        for (let index = 0; index < dataset.data.length; index++) {
+          const data = dataset.data[index] as unknown as SunburstChartRawData;
+          if (isChildGroup(activeData.groups, data.groups)) {
+            activeDataPoints.push({ datasetIndex, index });
+          }
+        }
+      }
+    }
+
+    activeDataPoints = activeDataPoints.filter((point) => {
+      const { datasetIndex, index } = point;
+      const data = chart.data.datasets[datasetIndex].data[index] as unknown as SunburstChartRawData;
+      return data.label !== GHOST_SUNBURST_VALUE;
+    });
+
+    chart.setActiveElements(activeDataPoints);
+
+    for (const metaSet of chart.getSortedVisibleDatasetMetas()) {
+      for (const arcElement of metaSet.data) {
+        const context = arcElement["$context"];
+        const { datasetIndex, index, dataset, raw } = context;
+        if (raw.label === GHOST_SUNBURST_VALUE) {
+          continue;
+        }
+
+        const originalBackgroundColor =
+          typeof dataset.backgroundColor === "function"
+            ? dataset.backgroundColor(context)
+            : dataset.backgroundColor;
+        if (
+          activeDataPoints.length &&
+          !activeDataPoints.some((el) => el.datasetIndex === datasetIndex && el.index === index)
+        ) {
+          arcElement.options.backgroundColor = lightenColor(originalBackgroundColor, 0.5);
+        } else {
+          arcElement.options.backgroundColor = originalBackgroundColor;
+        }
+      }
+    }
+  },
+};
+
+function isChildGroup(parentGroup: string[], childGroup: string[]) {
+  return (
+    childGroup.length > parentGroup.length &&
+    parentGroup.every((group, i) => group === childGroup[i])
+  );
+}

src/helpers/figures/charts/chart_ui_common.ts

@@ -5,6 +5,7 @@ import {
   getFunnelChartElement,
 } from "../../../components/figures/chart/chartJs/chartjs_funnel_chart";
 import { chartShowValuesPlugin } from "../../../components/figures/chart/chartJs/chartjs_show_values_plugin";
+import { sunburstHoverPlugin } from "../../../components/figures/chart/chartJs/chartjs_sunburst_hover_plugin";
 import { sunburstLabelsPlugin } from "../../../components/figures/chart/chartJs/chartjs_sunburst_labels_plugin";
 import { waterfallLinesPlugin } from "../../../components/figures/chart/chartJs/chartjs_waterfall_plugin";
 import { Figure } from "../../../types";
@@ -125,7 +126,8 @@ export function getChartJSConstructor() {
       waterfallLinesPlugin,
       getFunnelChartController(),
       getFunnelChartElement(),
-      sunburstLabelsPlugin
+      sunburstLabelsPlugin,
+      sunburstHoverPlugin
     );
     window.Chart.Tooltip.positioners.funnelTooltipPositioner = funnelTooltipPositioner;
   }

src/helpers/figures/charts/sunburst_chart.ts

@@ -203,6 +203,7 @@ export function createSunburstChartRuntime(
         legend: getSunburstChartLegend(definition, chartData),
         tooltip: getSunburstChartTooltip(definition, chartData),
         sunburstLabelsPlugin: getSunburstShowValues(definition, chartData),
+        sunburstHoverPlugin: { enabled: true },
       },
     },
   };

tests/figures/chart/charts_component.test.ts

@@ -2158,6 +2158,7 @@ test("ChartJS charts extensions are loaded when mounting a chart, and are only l
     "funnel",
     "funnel",
     "sunburstLabelsPlugin",
+    "sunburstHoverPlugin",
   ]);
 
   createChart(model, { type: "line" }, "chart2");

tests/figures/chart/sunburst/sunburst_chart_plugin.test.ts

@@ -390,4 +390,12 @@ describe("Sunburst chart chart", () => {
     });
     expect(config.options?.plugins?.sunburstLabelsPlugin?.callback?.(10, "y")).toBe("10 ( •⩊• )");
   });
+
+  test("Sunburst hover plugin is enabled", () => {
+    const chartId = createSunburstChart(model);
+    const config = getSunburstRuntime(chartId).chartJsConfig;
+    expect(config.options?.plugins?.sunburstHoverPlugin).toMatchObject({
+      enabled: true,
+    });
+  });
 });