Move tooltipLabels prop to PieCharts

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+cluster/cluster-pie-charts.tsx

@@ -12,7 +12,7 @@ import { MetricNodeRole } from "./cluster-overview-store/cluster-overview-store"
 import { Spinner } from "../spinner";
 import { Icon } from "../icon";
 import { nodesStore } from "../+nodes/nodes.store";
-import type { ChartData } from "../chart";
+import type { PieChartData } from "../chart";
 import { PieChart } from "../chart";
 import { ClusterNoMetrics } from "./cluster-no-metrics";
 import { bytesToUnits, cssNames } from "../../utils";
@@ -49,7 +49,7 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
     const defaultColor = ThemeStore.getInstance().activeTheme.colors.pieChartDefaultColor;
 
     if (!memoryCapacity || !cpuCapacity || !podCapacity || !memoryAllocatableCapacity || !cpuAllocatableCapacity || !podAllocatableCapacity) return null;
-    const cpuData: ChartData = {
+    const cpuData: PieChartData = {
       datasets: [
         {
           data: [
@@ -96,7 +96,7 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
         ["Capacity", cpuCapacity],
       ]),
     };
-    const memoryData: ChartData = {
+    const memoryData: PieChartData = {
       datasets: [
         {
           data: [
@@ -143,7 +143,7 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
         `Capacity: ${bytesToUnits(memoryCapacity)}`,
       ],
     };
-    const podsData: ChartData = {
+    const podsData: PieChartData = {
       datasets: [
         {
           data: [

src/renderer/components/+workloads-overview/overview-workload-status.tsx

@@ -8,7 +8,7 @@ import "./overview-workload-status.scss";
 import React from "react";
 import capitalize from "lodash/capitalize";
 import { observer } from "mobx-react";
-import type { ChartData, ChartTooltipLabel } from "../chart";
+import type { DatasetTooltipLabel, PieChartData } from "../chart";
 import { PieChart } from "../chart";
 import { cssVar } from "../../utils";
 import { ThemeStore } from "../../theme.store";
@@ -27,7 +27,7 @@ export class OverviewWorkloadStatus extends React.Component<OverviewWorkloadStat
     }
 
     const cssVars = cssVar(this.elem);
-    const chartData: Required<ChartData> = {
+    const chartData: Required<PieChartData> = {
       labels: [],
       datasets: [],
     };
@@ -43,7 +43,7 @@ export class OverviewWorkloadStatus extends React.Component<OverviewWorkloadStat
     } else {
       const data: number[] = [];
       const backgroundColor: string[] = [];
-      const tooltipLabels: ChartTooltipLabel[] = [];
+      const tooltipLabels: DatasetTooltipLabel[] = [];
 
       for (const [status, value] of statuses) {
         data.push(value);

src/renderer/components/chart/chart.tsx

@@ -18,7 +18,6 @@ export interface ChartData extends ChartJS.ChartData {
 export interface ChartDataSets extends ChartJS.ChartDataSets {
   id?: string;
   tooltip?: string;
-  tooltipLabels?: ChartTooltipLabel[];
 }
 
 export interface ChartProps {
@@ -37,8 +36,6 @@ export interface ChartProps {
   className?: string;
 }
 
-export type ChartTooltipLabel = (percent: string) => string | string;
-
 export enum ChartKind {
   PIE = "pie",
   BAR = "bar",

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

@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import type { ChartOptions } from "chart.js";
 import ChartJS from "chart.js";
-import type { ChartData, ChartProps } from "./chart";
+import type { ChartProps } from "./chart";
 import { Chart } from "./chart";
 import { cssNames } from "../../utils";
 import { ThemeStore } from "../../theme.store";
@@ -16,6 +16,17 @@ import { ThemeStore } from "../../theme.store";
 export interface PieChartProps extends ChartProps {
 }
 
+export interface PieChartData extends ChartJS.ChartData {
+  datasets?: PieChartDataSets[];
+}
+
+export type DatasetTooltipLabel = (percent: string) => string | string;
+
+interface PieChartDataSets extends ChartJS.ChartDataSets {
+  id?: string;
+  tooltipLabels?: DatasetTooltipLabel[];
+}
+
 @observer
 export class PieChart extends React.Component<PieChartProps> {
   render() {
@@ -28,7 +39,7 @@ export class PieChart extends React.Component<PieChartProps> {
         mode: "index",
         callbacks: {
           title: () => "",
-          label: (tooltipItem, data: ChartData) => {
+          label: (tooltipItem, data: PieChartData) => {
             const dataset = data.datasets[tooltipItem.datasetIndex];
             const datasetData = dataset.data as number[];
             const total = datasetData.reduce((acc, cur) => acc + cur, 0);