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

Add Tooltip support

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-04-05 15:01:28 +03:00
parent 9de6a9f6c8
commit abfd39523a
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/renderer/components/metric-bar/metric-bar.tsx
View File

@ -7,8 +7,9 @@ import styles from "./metric-bar.module.scss";
import React, { HTMLAttributes, ReactNode } from "react"; import React, { HTMLAttributes, ReactNode } from "react";
import { VerticalBar } from "../vertical-bar"; import { VerticalBar } from "../vertical-bar";
import { TooltipDecoratorProps, withTooltip } from "../tooltip";
import { cssNames } from "../../utils"; import { cssNames } from "../../utils";
import { uniqueId } from "lodash";
import { Tooltip, TooltipDecoratorProps } from "../tooltip";
interface BarProps extends HTMLAttributes<HTMLDivElement>, TooltipDecoratorProps { interface BarProps extends HTMLAttributes<HTMLDivElement>, TooltipDecoratorProps {
value: number; value: number;
@ -20,21 +21,31 @@ interface BarProps extends HTMLAttributes<HTMLDivElement>, TooltipDecoratorProps
warningPercentage?: number; warningPercentage?: number;
} }
export const MetricBar = withTooltip((props: BarProps) => { export const MetricBar = (props: BarProps) => {
const { max, min = 0, showPercent = true, changeColorOnWarning = true, warningPercentage = 85, value, height } = props; const {
max,
min = 0,
showPercent = true,
changeColorOnWarning = true,
warningPercentage = 85,
value,
height,
tooltip,
} = props;
const percents = Math.min(100, value / (max - min) * 100); const percents = Math.min(100, value / (max - min) * 100);
const percentsRounded = +percents.toFixed(2); const percentsRounded = +percents.toFixed(2);
const warning = percents > warningPercentage; const warning = percents > warningPercentage;
const id = props.id || uniqueId("tooltip_target_");
return ( return (
<div className={cssNames(styles.metricBar, props.className)} data-testid="metric-bar"> <div className={cssNames(styles.metricBar, props.className)} data-testid="metric-bar" id={id}>
<VerticalBar <VerticalBar
value={percentsRounded} value={percentsRounded}
className={cssNames(styles.bar, { [styles.warning]: warning && changeColorOnWarning })} className={cssNames(styles.bar, { [styles.warning]: warning && changeColorOnWarning })}
style={{ blockSize: height }} style={{ blockSize: height }}
/> />
{showPercent && <span>{percentsRounded}%</span>} {showPercent && <span>{percentsRounded}%</span>}
<Tooltip targetId={id} {...tooltip}/>
</div> </div>
); );
}); };