speed not showing same

mbret8 months ago
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

Anton Tananaev8 months ago

Have you converted it to "km/h"?

mbret8 months ago

Thanks fixed.