File size: 2,370 Bytes
e7185a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import {React, useState,useEffect} from "react";
import ReactSpeedometer from "react-d3-speedometer";
const CustomSpeedometer = ({value,w}) => {
const [width, setWidth] = useState(window.innerWidth);
const [fontValue, setFontValue] = useState(width < 560 ? "10px" : "16px");
useEffect(() => {
const handleResize = () => {
setWidth(window.innerWidth);
setFontValue(window.innerWidth < 560 ? "10px" : "16px");
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
value = Math.round(value * 100) / 100;
return(<div style={{ width: "100%", maxWidth: "500px",minHeight:"300px", margin: "0 auto", display: 'flex', aliginItems: 'center' }}>
<ReactSpeedometer
maxValue={100}
value={value} // Set needle position
needleColor="steelblue" // Light blue needle
segments={5} // Five segments
labelFontSize={fontValue}
segmentColors={[
"#ff4b33", // Very Bad
"rgb(254, 186, 0)", // Bad
"rgb(255, 237, 44)", // Ok (Yellow)
"rgb(174, 226, 40)", // Good (Light Green)
"rgb(106, 215, 45)", // Very Good
]}
customSegmentLabels={[
{ text: "Highly Biased", position: "INSIDE", color: "black" },
{ text: "Biased", position: "INSIDE", color: "black" },
{ text: "Borderline Fair", position: "INSIDE", color: "black" },
{ text: "Fair", position: "INSIDE", color: "black" },
{ text: "Highly Fair", position: "INSIDE", color: "black" },
]}
textColor="#606060" // Light gray text color
ringWidth={50} // Adjust the thickness of the gauge
// width={width < 600 ? 300 : 500} // ✅ Responsive width
// height={width < 600 ? 200 : 300} // ✅ Responsive height
// width={width/3} // Size of the gauge
// height={width/3} // Height of the gauge
forceRender={true}
needleHeightRatio={0.77}
fluidWidth={true}
currentValueText={`% Fairness Score : ${value}`}
/>
</div>
)};
export default CustomSpeedometer;
|