CF2-19 Настроить формат числовых параметров

CF2-7 В компонент DisplayValue внедрить стрелки роста/убывания значения

src/components/CustomColumn.jsx

@@ -1,29 +1,32 @@
 import {Display} from './Display'
 import RigMnemo from '../components/RigMnemo'
 
+const params = [
+  {label:'Рот., об/мин', accessorName:'rotorSpeed', isArrowVisible:true},
+  {label:'Долото, м', accessorName:'bitDepth', isArrowVisible:true, format:2},
+  {label:'Забой, м', accessorName:'wellDepth', isArrowVisible:true, format:2},
+  {label:'Расход, м³/ч', accessorName:'flow', isArrowVisible:true},
+  {label:'Расход х.х., м³/ч', accessorName:'flowIdle', isArrowVisible:true},
+  {label: 'Время', accessorName: 'date', format:'HH:mm:ss'},
+]
+
 export const CustomColumn = ({data}) => {
   const dataLast = data[data.length -1]
   
-  const lines = [
-    {label:'Рот., об/мин', accessorName:'rotorSpeed'},
-    {label:'Долото, м', accessorName:'bitDepth'},
-    {label:'Забой, м', accessorName:'wellDepth'},
-    {label:'Расход, м³/ч', accessorName:'flow'},
-    {label:'Расход х.х., м³/ч', accessorName:'flowIdle'},
-    {label: 'Отметка времени данных', accessorName: 'date'},
-  ]
-  
   if(dataLast)
-    lines.forEach(line => line.value = dataLast[line.accessorName]?.toPrecision(4)??'-' )
+    params.forEach(param => param.value = dataLast[param.accessorName])
   else
-    lines.forEach(line => line.value = '-' )
+    params.forEach(param => param.value = '-' )
 
     return (<>
-      {lines.map(line => <Display className='border_small display_flex_container'
-        key={line.label}
-        label={line.label} 
-        value={line.value} 
-        suffix={line.units}/>)}
+      {params.map(param => <Display className='border_small display_flex_container'
+        key={param.label}
+        label={param.label} 
+        value={param.value} 
+        suffix={param.units}
+        isArrowVisible = {param.isArrowVisible}        
+        format = {param.format}
+        />)}
       <RigMnemo
         blockPosition={dataLast?.blockPosition??0}
         bitPosition={dataLast?.bitDepth??3200}/>

src/components/Display.jsx

@@ -1,39 +1,66 @@
 import { useState, useEffect } from 'react';
-import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons'
+import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons'
+import moment from 'moment';
 
-export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
-  const [oldVal, setOldVal] = useState(NaN)
+export const formatNumber = (value, format) => 
+  Number.isInteger(format) && Number.isFinite(value)
+  ? (+value).toFixed(format)
+  : (+value).toPrecision(4)
+
+export const ValueDisplay = ({prefix, value, suffix, isArrowVisible, format}) =>{
   const [val, setVal] = useState('---')
-  const [arrowState, setArrowState] = useState(0)
+  const [arrowState, setArrowState] = useState({ 
+    preVal: NaN,
+    preTimestamp: Date.now(),
+    direction: 0,
+  })
 
   useEffect(()=>{
-    if(value){
-      if(Number.isFinite(+value)){
-        if (isArrowVisible)
-        {
-          let newArrowState = 0
-          if (value > oldVal)
-            newArrowState = 1
-          if (value < oldVal)
-            newArrowState = -1
-          setArrowState(newArrowState)
-          setOldVal(value)
-        }
-        setVal((+value).toPrecision(4)??'---')
-      }
-      else
-        setVal(value)
+    if(value === undefined || value === null){
+      setVal('---')
+      return
     }
 
-  },[value, isArrowVisible, oldVal])
+    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,
+        })      
+      }
+
+      setVal(formatNumber(value, format))
+      return
+    }
+
+    let valueDate = moment(value)
+    if(valueDate.isValid()){
+      setVal(valueDate.format(format))
+      return
+    }
+
+    setVal(value)
+  },[value, isArrowVisible, arrowState, format])
 
   let arrow = null
-  switch  (arrowState){
+  if(isArrowVisible)
+    switch  (arrowState.direction){
+      case 0:
+        arrow = <CaretRightOutlined style={{color:"#0008"}}/>
+        break
       case 1:
-      arrow = <CaretUpOutlined style={{color:"red"}}/>
+        arrow = <CaretUpOutlined style={{color:"#0008"}}/>
         break
       case -1:
-      arrow = <CaretDownOutlined style={{color:"red"}}/>
+        arrow = <CaretDownOutlined style={{color:"#0008"}}/>
         break
       default:
         break

src/pages/Deposit.jsx

@@ -7,7 +7,7 @@ import {ClusterService} from '../services/api'
 import notify from '../components/notify'
 
 const calcViewParams = (clusters) => {
-  if (clusters && clusters.length === 0)
+  if (clusters || clusters.length === 0)
     return {center:[60.81226, 70.0562], zoom: 5}
 
   const center = clusters.reduce((sum, cluster) => {
@@ -30,6 +30,7 @@ export default function Deposit() {
   const [clustersData, setClustersData] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
+  useEffect(()=>{
     const updateClusters = async()=>{
       setShowLoader(true) 
       try{
@@ -42,19 +43,12 @@ export default function Deposit() {
       }    
       setShowLoader(false) 
     }
-
-  useEffect(()=>{updateClusters()}, [])
+    updateClusters()
+  }, [])
 
   const viewParams = calcViewParams(clustersData)
 
-  return (
-    <LoaderPortal show={showLoader}>
-      <Map 
-        height='100vh'
-        center={viewParams.center}
-        zoom={viewParams.zoom}
-        >
-        {clustersData.map(cluster =>
+  const markers = clustersData.map(cluster =>
     <Overlay  
       width={32} 
       anchor={[cluster.latitude, cluster.longitude]} 
@@ -65,7 +59,15 @@ export default function Deposit() {
           <span>{cluster.caption}</span>
         </Link>
         
-          </Overlay >)}
+    </Overlay >)
+
+  return (
+    <LoaderPortal show={showLoader}>
+      <Map 
+        height='100vh'
+        center={viewParams.center}
+        zoom={viewParams.zoom}>
+        {markers}
       </Map>
     </LoaderPortal>
   );