import React from 'react';
import ReactSpeedometer from 'react-d3-speedometer';
import React, { useState, useEffect } from 'react';
const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPadding = 0 }) => {
const [deviceSpeed, setDeviceSpeed] = useState(null);
useEffect(() => {
if (position && position.speed !== undefined) {
setDeviceSpeed(position.speed);
} else {
setDeviceSpeed(null);
}
}, [position]);
componentDidUpdate(prevProps) {
if (prevProps.speed !== this.props.speed) {
this.setState({ value: parseFloat(this.props.speed) });
}
};
render(); {
const formattedSpeed = this.state.value.toFixed(2);
return (
<div className="speedometer1 mt-3" style={{ width: '262px' }}>
<ReactSpeedometer
fluidWidth={true}
minValue={0}
maxValue={120}
value={this.state.value}
ringWidth={25}
needleColor="steelblue"
customSegmentStops={[
0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120,
]}
segmentColors={[
"#8cedae", "#8cedae", "#4aed70", "#249c26", "#32801b",
"#ba8f22", "#ba7022", "#ba5222", "#b0050e", "#b0050e",
]}
needleTransitionDuration={9000}
needleTransition="easeElastic"
currentValueText={${formattedSpeed} Km/h}
/>
</div>
);}}
export default Gauge;
speed is not showing the same when fetching the device from the server
anyone has fix to this
Have you converted it to "km/h"?
import React from 'react'; import ReactSpeedometer from 'react-d3-speedometer'; import React, { useState, useEffect } from 'react'; const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPadding = 0 }) => { const [deviceSpeed, setDeviceSpeed] = useState(null); useEffect(() => { if (position && position.speed !== undefined) { setDeviceSpeed(position.speed); } else { setDeviceSpeed(null); } }, [position]); componentDidUpdate(prevProps) { if (prevProps.speed !== this.props.speed) { this.setState({ value: parseFloat(this.props.speed) }); } }; render(); { const formattedSpeed = this.state.value.toFixed(2); return ( <div className="speedometer1 mt-3" style={{ width: '262px' }}> <ReactSpeedometer fluidWidth={true} minValue={0} maxValue={120} value={this.state.value} ringWidth={25} needleColor="steelblue" customSegmentStops={[ 0,10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, ]} segmentColors={[ "#8cedae", "#8cedae", "#4aed70", "#249c26", "#32801b", "#ba8f22", "#ba7022", "#ba5222", "#b0050e", "#b0050e", ]} needleTransitionDuration={9000} needleTransition="easeElastic" currentValueText={${formattedSpeed} Km/h} /> </div> );}} export default Gauge;
speed is not showing the same when fetching the device from the server
anyone has fix to this