asb_cloud_front/src/components/Display.jsx

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

export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
  const [oldVal, setOldVal] = useState(NaN)

  let val = '---'
  let arrow = null
  if(value)
    if(Number.isFinite(+value)){
      val = (+value).toPrecision(4)??'---'
      if (isArrowVisible)
      {
        arrow = value > oldVal 
          ? <CaretUpOutlined style={{color:"red"}} onClick={!isArrowVisible} /> 
          : <CaretDownOutlined style={{color:"red"}} onClick={!isArrowVisible} />
        setOldVal(value)
      }
    } else
      val = value

  return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</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>
  
}