diff --git a/src/renderer/components/+cluster/cluster-pie-charts.tsx b/src/renderer/components/+cluster/cluster-pie-charts.tsx index f039c89161..259a0e4741 100644 --- a/src/renderer/components/+cluster/cluster-pie-charts.tsx +++ b/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: [ @@ -156,6 +156,10 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen ], id: "podUsage", label: "Usage", + tooltipLabels: [ + (percent) => `Usage: ${percent}`, + (percent) => `Available: ${percent}`, + ], }, ], labels: [ diff --git a/src/renderer/components/+workloads-overview/overview-workload-status.scss b/src/renderer/components/+workloads-overview/overview-workload-status.scss index 087cd25888..f8b2aadfd5 100644 --- a/src/renderer/components/+workloads-overview/overview-workload-status.scss +++ b/src/renderer/components/+workloads-overview/overview-workload-status.scss @@ -13,10 +13,4 @@ --workload-status-failed: #{$pod-status-failed-color}; --workload-status-terminated: #{$pod-status-terminated-color}; --workload-status-unknown: #{$pod-status-unknown-color}; - - .PieChart { - .chart-container { - width: 110px - } - } } diff --git a/src/renderer/components/+workloads-overview/overview-workload-status.tsx b/src/renderer/components/+workloads-overview/overview-workload-status.tsx index fea3955b6e..e2092e61c0 100644 --- a/src/renderer/components/+workloads-overview/overview-workload-status.tsx +++ b/src/renderer/components/+workloads-overview/overview-workload-status.tsx @@ -8,9 +8,9 @@ import "./overview-workload-status.scss"; import React from "react"; import capitalize from "lodash/capitalize"; import { observer } from "mobx-react"; +import type { DatasetTooltipLabel, PieChartData } from "../chart"; import { PieChart } from "../chart"; import { cssVar } from "../../utils"; -import type { ChartData } from "chart.js"; import { ThemeStore } from "../../theme.store"; export interface OverviewWorkloadStatusProps { @@ -27,7 +27,7 @@ export class OverviewWorkloadStatus extends React.Component = { + const chartData: Required = { labels: [], datasets: [], }; @@ -43,10 +43,12 @@ export class OverviewWorkloadStatus extends React.Component `${capitalize(status)}: ${percent}`); chartData.labels.push(`${capitalize(status)}: ${value}`); } @@ -54,6 +56,7 @@ export class OverviewWorkloadStatus extends React.Component string | string; + +interface PieChartDataSets extends ChartJS.ChartDataSets { + id?: string; + tooltipLabels?: DatasetTooltipLabel[]; +} + @observer export class PieChart extends React.Component { render() { @@ -28,15 +39,24 @@ export class PieChart extends React.Component { mode: "index", callbacks: { title: () => "", - label: (tooltipItem, data) => { - const dataset: any = data["datasets"][tooltipItem.datasetIndex]; - const metaData = Object.values<{ total: number }>(dataset["_meta"])[0]; - const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100); - const label = dataset["label"]; + 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); + 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}`; - if (isNaN(percent)) return `${label}: N/A`; + if (tooltipLabel) { + if (typeof tooltipLabel === "function") { + tooltip = tooltipLabel(percentLabel); + } else { + tooltip = tooltipLabel; + } + } - return `${label}: ${percent}%`; + return tooltip; }, }, filter: ({ datasetIndex, index }, { datasets }) => {