Dwinzo_dev/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx

import React,{ useEffect, useState} from 'react'

const FleetEfficiencyComponent = ({object}: any) => {
    const [ progress, setProgress ] = useState<any>(0)

    // Calculate the rotation angle for the progress bar
    const rotationAngle = 45 + progress * 1.8;
  
    return (
        <>
            <h2 className="header">Fleet Efficiency</h2>
            <div className="progressContainer">
                <div className="progress">
                    <div className="barOverflow">
                        <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>
        </>
    )
}

export default FleetEfficiencyComponent