1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Use tooltipLabels inside overview charts

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-04-07 16:12:31 +03:00
parent 4cf114839d
commit 9ee73356c8

View File

@ -8,9 +8,9 @@ import "./overview-workload-status.scss";
import React from "react"; import React from "react";
import capitalize from "lodash/capitalize"; import capitalize from "lodash/capitalize";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import type { ChartData, ChartTooltipLabel } from "../chart";
import { PieChart } from "../chart"; import { PieChart } from "../chart";
import { cssVar } from "../../utils"; import { cssVar } from "../../utils";
import type { ChartData } from "chart.js";
import { ThemeStore } from "../../theme.store"; import { ThemeStore } from "../../theme.store";
export interface OverviewWorkloadStatusProps { export interface OverviewWorkloadStatusProps {
@ -43,10 +43,12 @@ export class OverviewWorkloadStatus extends React.Component<OverviewWorkloadStat
} else { } else {
const data: number[] = []; const data: number[] = [];
const backgroundColor: string[] = []; const backgroundColor: string[] = [];
const tooltipLabels: ChartTooltipLabel[] = [];
for (const [status, value] of statuses) { for (const [status, value] of statuses) {
data.push(value); data.push(value);
backgroundColor.push(cssVars.get(`--workload-status-${status.toLowerCase()}`).toString()); backgroundColor.push(cssVars.get(`--workload-status-${status.toLowerCase()}`).toString());
tooltipLabels.push(percent => `${capitalize(status)}: ${percent}`);
chartData.labels.push(`${capitalize(status)}: ${value}`); chartData.labels.push(`${capitalize(status)}: ${value}`);
} }
@ -54,6 +56,7 @@ export class OverviewWorkloadStatus extends React.Component<OverviewWorkloadStat
data, data,
backgroundColor, backgroundColor,
label: "Status", label: "Status",
tooltipLabels,
}); });
} }