36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
|
const FleetEfficiency = () => {
|
||
|
|
const progress = 75; // Example progress value (0-100)
|
||
|
|
|
||
|
|
// Calculate the rotation angle for the progress bar
|
||
|
|
const rotationAngle = -90 + progress * 3.6; // Progress starts from the left (-90°)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fleetEfficiency floating">
|
||
|
|
<h2 className="header">Fleet Efficiency</h2>
|
||
|
|
|
||
|
|
<div className="progressContainer">
|
||
|
|
<div className="progress">
|
||
|
|
<div className="barOverflow">
|
||
|
|
{/* Apply dynamic rotation to the bar */}
|
||
|
|
<div
|
||
|
|
className="bar"
|
||
|
|
style={{ transform: `rotate(${rotationAngle}deg)` }}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="scaleLabels">
|
||
|
|
<span>0%</span>
|
||
|
|
<div className="centerText">
|
||
|
|
<div className="percentage">{progress}%</div>
|
||
|
|
<div className="status">Optimal</div>
|
||
|
|
</div>
|
||
|
|
<span>100%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FleetEfficiency;
|