68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
import React from "react";
|
|
|
|
const ProgressBar = ({
|
|
plannedWork = 100,
|
|
completedWork = 0,
|
|
height = "6px",
|
|
className = "mb-4",
|
|
rounded = true,
|
|
showLabel = true,
|
|
}) => {
|
|
const getProgress = (planned, completed) => {
|
|
if (!planned || planned === 0) return 0;
|
|
return Math.min((completed / planned) * 100, 100);
|
|
};
|
|
|
|
const percentage = getProgress(plannedWork, completedWork);
|
|
|
|
const progressBarStyle = {
|
|
width: ` ${percentage.toFixed(2)}%`,
|
|
transition: "width 0.4s ease",
|
|
};
|
|
|
|
const containerStyle = {
|
|
height,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "8px",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`d-flex align-items-center ${className}`}
|
|
style={containerStyle}
|
|
>
|
|
<div className="flex-grow-1">
|
|
<div
|
|
className={`progress ${rounded ? "rounded" : ""}`}
|
|
style={{ height, backgroundColor: "#f0f0f0" }}
|
|
>
|
|
<div
|
|
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
|
role="progressbar"
|
|
style={progressBarStyle}
|
|
aria-valuenow={completedWork}
|
|
aria-valuemin="0"
|
|
aria-valuemax={plannedWork}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{showLabel && (
|
|
<span
|
|
className="fw-semibold text-secondary"
|
|
style={{
|
|
minWidth: "45px",
|
|
textAlign: "right",
|
|
fontSize: "0.8rem",
|
|
}}
|
|
>
|
|
{percentage.toFixed(2)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProgressBar;
|