hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Check for tooltipLabels field to assign tooltip text

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-04-07 15:17:56 +03:00
parent 697846f111
commit 4cf114839d
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/renderer/components/chart/pie-chart.tsx
View File

@ -8,7 +8,7 @@ import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import type { ChartOptions } from "chart.js"; import type { ChartOptions } from "chart.js";
import ChartJS from "chart.js"; import ChartJS from "chart.js";
import type { ChartProps } from "./chart"; import type { ChartData, ChartProps } from "./chart";
import { Chart } from "./chart"; import { Chart } from "./chart";
import { cssNames } from "../../utils"; import { cssNames } from "../../utils";
import { ThemeStore } from "../../theme.store"; import { ThemeStore } from "../../theme.store";
@ -28,15 +28,24 @@ export class PieChart extends React.Component<PieChartProps> {
mode: "index", mode: "index",
callbacks: { callbacks: {
title: () => "", title: () => "",
label: (tooltipItem, data) => { label: (tooltipItem, data: ChartData) => {
const dataset: any = data["datasets"][tooltipItem.datasetIndex]; const dataset = data.datasets[tooltipItem.datasetIndex];
const metaData = Object.values<{ total: number }>(dataset["_meta"])[0]; const datasetData = dataset.data as number[];
const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100); const total = datasetData.reduce((acc, cur) => acc + cur, 0);
const label = dataset["label"]; const percent = Math.round((dataset.data[tooltipItem["index"]] as number / total) * 100);
const percentLabel = isNaN(percent) ? "N/A" : `${percent}%`;
const tooltipLabel = data.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 }) => { filter: ({ datasetIndex, index }, { datasets }) => {