forked from github/plane
786816ed41
* feat: short date helper function * feat: linear progress indicator added * style: new cyce list and cycle card design * feat: short date function improve * feat: linear progress indicator improvement * style: cycle card and progress indicator * fix: helper date function and progress indicator fix * fix: build error --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
33 lines
829 B
TypeScript
33 lines
829 B
TypeScript
import React from "react";
|
|
import { Tooltip } from "./tooltip";
|
|
|
|
type Props = {
|
|
data: any;
|
|
};
|
|
|
|
export const LinearProgressIndicator: React.FC<Props> = ({ data }) => {
|
|
const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
|
|
let progress = 0;
|
|
|
|
const bars = data.map((item: any) => {
|
|
const width = `${(item.value / total) * 100}%`;
|
|
const style = {
|
|
width,
|
|
backgroundColor: item.color,
|
|
};
|
|
progress += item.value;
|
|
|
|
return (
|
|
<Tooltip tooltipContent={`${item.name} ${item.value}%`}>
|
|
<div key={item.id} className="bar" style={style} />
|
|
</Tooltip>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="flex h-1 w-full items-center justify-between gap-1">
|
|
{total === 0 ? " - 0%" : <div className="flex h-full w-full gap-1 rounded-md">{bars}</div>}
|
|
</div>
|
|
);
|
|
};
|