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

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

@@ -13,11 +13,12 @@ import type { ChartProps } from "./chart";
 import { Chart, ChartKind } from "./chart";
 import { bytesToUnits, cssNames, isObject } from "../../utils";
 import { ZebraStripesPlugin } from "./zebra-stripes.plugin";
-import type { ThemeStore } from "../../themes/store";
+import type { LensTheme } from "../../themes/store";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import assert from "assert";
 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 BarChartProps extends ChartProps {
   name?: string;
@@ -27,11 +28,11 @@ export interface BarChartProps extends ChartProps {
 const getBarColor: Scriptable<string> = ({ dataset }) => Color(dataset?.borderColor).alpha(0.2).string();
 
 interface Dependencies {
-  themeStore: ThemeStore;
+  activeTheme: IComputedValue<LensTheme>;
 }
 
 const NonInjectedBarChart = observer(({
-  themeStore,
+  activeTheme,
   name,
   data,
   className,
@@ -40,7 +41,7 @@ const NonInjectedBarChart = observer(({
   options: customOptions,
   ...settings
 }: Dependencies & BarChartProps) => {
-  const { textColorPrimary, borderFaintColor, chartStripesColor } = themeStore.activeTheme.colors;
+  const { textColorPrimary, borderFaintColor, chartStripesColor } = activeTheme.get().colors;
   const { datasets: rawDatasets = [], ...rest } = data;
   const datasets = rawDatasets
     .filter(set => set.data?.length)
@@ -168,7 +169,7 @@ const NonInjectedBarChart = observer(({
 export const BarChart = withInjectables<Dependencies, BarChartProps>(NonInjectedBarChart, {
   getProps: (di, props) => ({
     ...props,
-    themeStore: di.inject(themeStoreInjectable),
+    activeTheme: di.inject(activeThemeInjectable),
   }),
 });
 

src/renderer/components/chart/chart.tsx

@@ -36,6 +36,7 @@ export interface ChartProps {
   redraw?: boolean;  // If true - recreate chart instance with no animation
   title?: string;
   className?: string;
+  "data-testid"?: string;
 }
 
 export enum ChartKind {
@@ -212,25 +213,26 @@ export class Chart extends React.Component<ChartProps> {
   }
 
   render() {
-    const { width, height, showChart, title, className } = this.props;
+    const { width, height, showChart, title, className, "data-testid": dataTestId } = this.props;
 
     return (
-      <>
-        <div className={cssNames("Chart", className)}>
-          {title && <div className="chart-title">{title}</div>}
-          {showChart && (
-            <div className="chart-container">
-              <canvas
-                ref={this.canvas}
-                width={width}
-                height={height}
-              />
-              <div className="chartjs-tooltip flex column"></div>
-            </div>
-          )}
-          {this.renderLegend()}
-        </div>
-      </>
+      <div
+        className={cssNames("Chart", className)}
+        data-testid={dataTestId}
+      >
+        {title && <div className="chart-title">{title}</div>}
+        {showChart && (
+          <div className="chart-container">
+            <canvas
+              ref={this.canvas}
+              width={width}
+              height={height}
+            />
+            <div className="chartjs-tooltip flex column"></div>
+          </div>
+        )}
+        {this.renderLegend()}
+      </div>
     );
   }
 }

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),
   }),
 });