Fix doughnut graphs on workload overview sometimes not showing (#5727)

src/renderer/components/chart/pie-chart.tsx

@@ -11,9 +11,10 @@ import ChartJS from "chart.js";
 import type { ChartProps } from "./chart";
 import { Chart } from "./chart";
 import { cssNames } from "../../utils";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import themeStoreInjectable from "../../themes/store.injectable";
+import type { IComputedValue } from "mobx";
+import activeThemeInjectable from "../../themes/active.injectable";
 
 export interface PieChartProps extends ChartProps {
 }
@@ -44,18 +45,18 @@ function getCutout(length: number | undefined): number {
 }
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 const NonInjectedPieChart = observer(({
-  themeStore,
+  activeTheme,
   data,
   className,
   options,
   showChart,
   ...chartProps
 }: Dependencies & PieChartProps) => {
-  const { contentColor } = themeStore.activeTheme.colors;
+  const { contentColor } = activeTheme.get().colors;
   const opts: ChartOptions = {
     maintainAspectRatio: false,
     tooltips: {
@@ -68,18 +69,11 @@ const NonInjectedPieChart = observer(({
           const total = datasetData.reduce((acc, cur) => acc + cur, 0);
           const percent = Math.round((datasetData[tooltipItem.index] as number / total) * 100);
           const percentLabel = isNaN(percent) ? "N/A" : `${percent}%`;
-          const tooltipLabel = dataset.tooltipLabels?.[tooltipItem.index];
-          let tooltip = `${dataset.label}: ${percentLabel}`;
+          const tooltipLabelCustomizer = dataset.tooltipLabels?.[tooltipItem.index];
 
-          if (tooltipLabel) {
-            if (typeof tooltipLabel === "function") {
-              tooltip = tooltipLabel(percentLabel);
-            } else {
-              tooltip = tooltipLabel;
-            }
-          }
-
-          return tooltip;
+          return tooltipLabelCustomizer
+            ? tooltipLabelCustomizer(percentLabel)
+            : `${dataset.label}: ${percentLabel}`;
         },
       },
       filter: ({ datasetIndex, index }, { datasets = [] }) => {
@@ -120,7 +114,7 @@ const NonInjectedPieChart = observer(({
 export const PieChart = withInjectables<Dependencies, PieChartProps>(NonInjectedPieChart, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });