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'
+      {params.map(param => <Display className='border_small display_flex_container'
-        key={line.label}
+        key={param.label}
-        label={line.label} 
+        label={param.label} 
-        value={line.value} 
+        value={param.value} 
-        suffix={line.units}/>)}
+        suffix={param.units}
+        isArrowVisible = {param.isArrowVisible}        
+        format = {param.format}
+        />)}
       <RigMnemo
         blockPosition={dataLast?.blockPosition??0}
         bitPosition={dataLast?.bitDepth??3200}/>

src/components/Display.jsx

@@ -1,43 +1,70 @@
 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}) =>{
+export const formatNumber = (value, format) => 
-  const [oldVal, setOldVal] = useState(NaN)
+  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(value === undefined || value === null){
-      if(Number.isFinite(+value)){
+      setVal('---')
-        if (isArrowVisible)
+      return
-        {
-          let newArrowState = 0
-          if (value > oldVal)
-            newArrowState = 1
-          if (value < oldVal)
-            newArrowState = -1
-          setArrowState(newArrowState)
-          setOldVal(value)
-        }
-        setVal((+value).toPrecision(4)??'---')
-      }
-      else
-        setVal(value)
     }
 
-  },[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)
-    case 1:
+    switch  (arrowState.direction){
-      arrow = <CaretUpOutlined style={{color:"red"}}/>
+      case 0:
-      break
+        arrow = <CaretRightOutlined style={{color:"#0008"}}/>
-    case -1:
+        break
-      arrow = <CaretDownOutlined style={{color:"red"}}/>
+      case 1:
-      break
+        arrow = <CaretUpOutlined style={{color:"#0008"}}/>
-    default:
+        break
-      break
+      case -1:
-  } 
+        arrow = <CaretDownOutlined style={{color:"#0008"}}/>
+        break
+      default:
+        break
+    } 
 
   return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
 }

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,42 +30,44 @@ export default function Deposit() {
   const [clustersData, setClustersData] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
-  const updateClusters = async()=>{
+  useEffect(()=>{
-    setShowLoader(true) 
+    const updateClusters = async()=>{
-    try{
+      setShowLoader(true) 
-      const data = await ClusterService.getClusters()
+      try{
-      setClustersData(data)
+        const data = await ClusterService.getClusters()
+        setClustersData(data)
+      }
+      catch(ex) {
+        notify(`Не удалось загрузить список кустов`, 'error')
+        console.log(ex)
+      }    
+      setShowLoader(false) 
     }
-    catch(ex) {
+    updateClusters()
-      notify(`Не удалось загрузить список кустов`, 'error')
+  }, [])
-      console.log(ex)
-    }    
-    setShowLoader(false) 
-  }
-
-  useEffect(()=>{updateClusters()}, [])
 
   const viewParams = calcViewParams(clustersData)
 
+  const markers = clustersData.map(cluster =>
+    <Overlay  
+      width={32} 
+      anchor={[cluster.latitude, cluster.longitude]} 
+      key={`${cluster.latitude}  ${cluster.longitude}`}
+      >
+        <Link to={`/cluster/${cluster.id}`}>
+          <img width={40} src={pointer} alt="+"/>
+          <span>{cluster.caption}</span>
+        </Link>
+        
+    </Overlay >)
+
   return (
     <LoaderPortal show={showLoader}>
       <Map 
         height='100vh'
         center={viewParams.center}
-        zoom={viewParams.zoom}
+        zoom={viewParams.zoom}>
-        >
+        {markers}
-        {clustersData.map(cluster =>
-          <Overlay  
-            width={32} 
-            anchor={[cluster.latitude, cluster.longitude]} 
-            key={`${cluster.latitude}  ${cluster.longitude}`}
-            >
-              <Link to={`/cluster/${cluster.id}`}>
-                <img width={40} src={pointer} alt="+"/>
-                <span>{cluster.caption}</span>
-              </Link>
-              
-          </Overlay >)}
       </Map>
     </LoaderPortal>
   );