diff --git a/src/renderer/components/+cluster/cluster-pie-charts.tsx b/src/renderer/components/+cluster/cluster-pie-charts.tsx index b7b84c817d..2dc4b25971 100644 --- a/src/renderer/components/+cluster/cluster-pie-charts.tsx +++ b/src/renderer/components/+cluster/cluster-pie-charts.tsx @@ -64,7 +64,8 @@ export const ClusterPieCharts = observer(() => { "#c93dce", defaultColor, ], - id: "cpuUsage" + id: "cpuUsage", + label: "Usage" }, { data: [ @@ -75,7 +76,8 @@ export const ClusterPieCharts = observer(() => { "#4caf50", defaultColor, ], - id: "cpuRequests" + id: "cpuRequests", + label: "Requests" }, { data: [ @@ -86,7 +88,8 @@ export const ClusterPieCharts = observer(() => { "#3d90ce", defaultColor, ], - id: "cpuLimits" + id: "cpuLimits", + label: "Limits" }, ], labels: [ @@ -107,7 +110,8 @@ export const ClusterPieCharts = observer(() => { "#c93dce", defaultColor, ], - id: "memoryUsage" + id: "memoryUsage", + label: "Usage" }, { data: [ @@ -118,7 +122,8 @@ export const ClusterPieCharts = observer(() => { "#4caf50", defaultColor, ], - id: "memoryRequests" + id: "memoryRequests", + label: "Requests" }, { data: [ @@ -129,7 +134,8 @@ export const ClusterPieCharts = observer(() => { "#3d90ce", defaultColor, ], - id: "memoryLimits" + id: "memoryLimits", + label: "Limits" }, ], labels: [ @@ -150,7 +156,8 @@ export const ClusterPieCharts = observer(() => { "#4caf50", defaultColor, ], - id: "podUsage" + id: "podUsage", + label: "Usage" }, ], labels: [ diff --git a/src/renderer/components/chart/pie-chart.tsx b/src/renderer/components/chart/pie-chart.tsx index da8128214c..e725912658 100644 --- a/src/renderer/components/chart/pie-chart.tsx +++ b/src/renderer/components/chart/pie-chart.tsx @@ -46,10 +46,11 @@ export class PieChart extends React.Component { 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"]; - if (isNaN(percent)) return "N/A"; + if (isNaN(percent)) return `${label}: N/A`; - return `${percent}%`; + return `${label}: ${percent}%`; }, }, filter: ({ datasetIndex, index }, { datasets }) => {