38 lines
832 B
JavaScript
38 lines
832 B
JavaScript
import React from "react";
|
|
|
|
const ProgressBar = ({
|
|
plannedWork = 100,
|
|
completedWork = 0,
|
|
height = "8px",
|
|
className = "mb-4",
|
|
rounded = true,
|
|
}) => {
|
|
const getProgress = (planned, completed) => {
|
|
if (!planned || planned === 0) return "0%";
|
|
return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
|
|
};
|
|
|
|
const progressStyle = {
|
|
width: getProgress(plannedWork, completedWork),
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`progress ${className} ${rounded ? "rounded" : ""}`}
|
|
style={{ height }}
|
|
>
|
|
<div
|
|
className={`progress-bar ${rounded ? "rounded" : ""}`}
|
|
role="progressbar"
|
|
style={progressStyle}
|
|
aria-valuenow={completedWork}
|
|
aria-valuemin="0"
|
|
aria-valuemax={plannedWork}
|
|
></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProgressBar;
|
|
|