54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { Tooltip } from "../tooltip";
|
|
import { cn } from "../../helpers";
|
|
|
|
type Props = {
|
|
data: any;
|
|
noTooltip?: boolean;
|
|
inPercentage?: boolean;
|
|
size?: "sm" | "md" | "lg";
|
|
};
|
|
|
|
export const LinearProgressIndicator: React.FC<Props> = ({
|
|
data,
|
|
noTooltip = false,
|
|
inPercentage = false,
|
|
size = "sm",
|
|
}) => {
|
|
const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
let progress = 0;
|
|
|
|
const bars = data.map((item: any) => {
|
|
const width = `${(item.value / total) * 100}%`;
|
|
if (width === "0%") return <></>;
|
|
const style = {
|
|
width,
|
|
backgroundColor: item.color,
|
|
};
|
|
progress += item.value;
|
|
if (noTooltip) return <div style={style} />;
|
|
else
|
|
return (
|
|
<Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}${inPercentage ? "%" : ""}`}>
|
|
<div style={style} className="first:rounded-l-sm last:rounded-r-sm" />
|
|
</Tooltip>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className={cn("flex w-full items-center justify-between gap-[1px] rounded-sm", {
|
|
"h-2": size === "sm",
|
|
"h-3": size === "md",
|
|
"h-3.5": size === "lg",
|
|
})}
|
|
>
|
|
{total === 0 ? (
|
|
<div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
|
|
) : (
|
|
<div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|