asb_cloud_front/src/components/Display.jsx

import moment from 'moment'
import { useState, useEffect, memo } from 'react'
import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons'

import '@styles/display.css'

export const formatNumber = (value, format) =>
  Number.isInteger(format) && Number.isFinite(value)
  ? (+value).toFixed(format)
  : (+value).toPrecision(4)

const iconStyle = { color:'#0008' }
const displayValueStyle = { display: 'flex', flexGrow: 1 }

export const ValueDisplay = ({ prefix, value, suffix, isArrowVisible, format, enumeration }) => {
  const [val, setVal] = useState('---')
  const [arrowState, setArrowState] = useState({
    preVal: NaN,
    preTimestamp: Date.now(),
    direction: 0,
  })

  useEffect(() => {
    setVal((preVal) => {
      if ((value ?? '-') === '-' || value === '--') return '---'
      if (enumeration?.[value]) return enumeration[value]

      if (Number.isFinite(+value)) {
        if (isArrowVisible && (arrowState.preTimestamp + 1000 < Date.now())) {
          let direction = 0
          if (value > arrowState.preVal)
            direction = 1
          if (value < arrowState.preVal)
            direction = -1

          setArrowState({
            preVal: value,
            preTimestamp: Date.now(),
            direction: direction,
          })
        }

        return formatNumber(value, format)
      }

      if (value.length > 4) {
        const valueDate = moment(value)
        if (valueDate.isValid())
          return valueDate.format(format)
      }

      return value
    })
  },[value, isArrowVisible, arrowState, format, enumeration])

  let arrow = null
  if(isArrowVisible)
    switch  (arrowState.direction){
      case 0:
        arrow = <CaretRightOutlined style={iconStyle}/>
        break
      case 1:
        arrow = <CaretUpOutlined style={iconStyle}/>
        break
      case -1:
        arrow = <CaretDownOutlined style={iconStyle}/>
        break
      default:
        break
    }

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

export const Display = memo(({ className, label, ...other })=> (
  <div className={className}>
    <div className={'display_label'}>{label}</div>
    <div style={displayValueStyle}>
      <ValueDisplay {...other}/>
    </div>
  </div>
))