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

Move tooltipLabels prop to PieCharts

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-04-08 10:27:55 +03:00
parent a426daeabb
commit e22f8216e8
4 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/components/+cluster/cluster-pie-charts.tsx
View File

@ -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: [

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

@ -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);

3
src/renderer/components/chart/chart.tsx
View File

@ -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",

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

@ -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);