asb_cloud_front/src/components/Display.jsx

import { useState, useEffect, useRef } from 'react';
import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons'

export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
  const [oldVal, setOldVal] = useState(NaN)
  const [val, setVal] = useState('---')
  const arrowRef = useRef(null);

  useEffect(()=>{
    if(value)
      if(Number.isFinite(+value)){
        setVal((+value).toPrecision(4)??'---')
        if (isArrowVisible)
        {
          if (value > oldVal)
            arrowRef.current = (<CaretUpOutlined style={{color:"red"}} />)
          else if (value < oldVal)
            arrowRef.current = (<CaretDownOutlined style={{color:"red"}} />)
          setOldVal(value)
        }
      } else
      setVal(value)
  },[value])

  return(<span className='display_value'>{prefix} {val} {suffix}{arrowRef.current}</span>)
}

export const Display = (props)=>{
  const {label} = props

  return <div className={props.className}>
      <div className='display_label'>{label}</div>        
      <div style={{display:"flex", flexGrow:1}}>
        <ValueDisplay {...props}/>
      </div>
    </div>
  
}