From c428d51b06cdf68e196ff17006cbc8ade63e852c Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Thu, 2 Jun 2022 16:16:11 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=B0=D1=82=D1=8B=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D1=81=D0=BB=D0=B5=D0=B4=D0=BD=D0=B5=D0=B9=20=D1=82=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Display.tsx                    | 15 ++--
 .../Telemetry/TelemetryView/CustomColumn.jsx  | 72 +++++++++++--------
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/components/Display.tsx b/src/components/Display.tsx
index 8ecf5d7..a423bab 100644
--- a/src/components/Display.tsx
+++ b/src/components/Display.tsx
@@ -1,5 +1,5 @@
 import moment from 'moment'
-import { useState, useEffect, memo, ReactNode, useCallback } from 'react'
+import { useState, useEffect, memo, ReactNode } from 'react'
 import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons'
 
 import '@styles/display.less'
@@ -15,7 +15,7 @@ const displayValueStyle = { display: 'flex', flexGrow: 1 }
 export type ValueDisplayProps = {
   prefix?: ReactNode
   suffix?: ReactNode
-  format?: number | string | ((arg: any) => any)
+  format?: number | string | ((arg: string) => ReactNode)
   isArrowVisible?: boolean
   enumeration?: Record<string, string>
   value: string
@@ -27,18 +27,17 @@ export type DisplayProps = ValueDisplayProps & {
 }
 
 export const ValueDisplay = memo<ValueDisplayProps>(({ prefix, value, suffix, isArrowVisible, format, enumeration }) => {
-  const [val, setVal] = useState<string>('---')
+  const [val, setVal] = useState<ReactNode>('---')
   const [arrowState, setArrowState] = useState({
     preVal: NaN,
     preTimestamp: Date.now(),
     direction: 0,
   })
 
-  const fmt = useCallback((arg) => typeof format === 'function' ? format(arg) : format, [format])
-
   useEffect(() => {
     setVal((preVal) => {
       if ((value ?? '-') === '-' || value === '--') return '---'
+      if (typeof format === 'function') return format(enumeration?.[value] ?? value)
       if (enumeration?.[value]) return enumeration[value]
 
       if (Number.isFinite(+value)) {
@@ -56,18 +55,18 @@ export const ValueDisplay = memo<ValueDisplayProps>(({ prefix, value, suffix, is
           })
         }
 
-        return formatNumber(value, Number(fmt(value)))
+        return formatNumber(value, Number(format))
       }
 
       if (value.length > 4) {
         const valueDate = moment(value)
         if (valueDate.isValid())
-          return valueDate.format(String(fmt(value)))
+          return valueDate.format(String(format))
       }
 
       return value
     })
-  },[value, isArrowVisible, arrowState, fmt, enumeration])
+  },[value, isArrowVisible, arrowState, format, enumeration])
 
   let arrow = null
   if(isArrowVisible)
diff --git a/src/pages/Telemetry/TelemetryView/CustomColumn.jsx b/src/pages/Telemetry/TelemetryView/CustomColumn.jsx
index 89c44c4..9bc1cc5 100755
--- a/src/pages/Telemetry/TelemetryView/CustomColumn.jsx
+++ b/src/pages/Telemetry/TelemetryView/CustomColumn.jsx
@@ -1,46 +1,58 @@
 import moment from 'moment'
 import { memo } from 'react'
+import { Tooltip, Typography } from 'antd'
 
 import { Display } from '@components/Display'
 
 import RigMnemo from './RigMnemo'
 
-const getTimeFormat = (date) => moment(date).isSame(new Date(), 'day') ? 'HH:mm:ss' : 'DD.MM.YYYY HH:mm:ss'
+const getTimeFormat = (value) => {
+    const date = moment(value)
+
+    return (
+        <Tooltip title={`Время последних данных: ${date.format('DD.MM.YYYY HH:mm:ss')}`}>
+            {date.isSame(new Date(), 'day') || (
+                <Typography.Text disabled style={{ fontSize: '12px', marginRight: '5px' }}>{date.format('DD.MM.YYYY')}</Typography.Text>
+            )}
+            {date.format('HH:mm:ss')}
+        </Tooltip>
+    )
+}
 
 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: getTimeFormat },
-  { label: 'MSE, %', accessorName: 'mse', format: 2 },
+    { 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: getTimeFormat },
+    { label: 'MSE, %', accessorName: 'mse', format: 2 },
 ]
 
 export const CustomColumn = memo(({ data }) => {
-  const dataLast = data[data.length - 1]
-  params.forEach(param => param.value = dataLast?.[param.accessorName] ?? '-')
+    const dataLast = data[data.length - 1]
+    params.forEach(param => param.value = dataLast?.[param.accessorName] ?? '-')
 
-  return (
-    <>
-      {params.map(param => (
-        <Display
-          className={'border_small display_flex_container'}
-          key={param.label}
-          label={param.label}
-          value={param.value}
-          suffix={param.units}
-          format={param.format}
-          isArrowVisible={param.isArrowVisible}
-        />
-      ))}
-      <RigMnemo
-        wellDepth={dataLast?.wellDepth ?? Number.NaN}
-        bitPosition={dataLast?.bitDepth ?? Number.NaN}
-        blockPosition={dataLast?.blockPosition ?? Number.NaN}
-      />
-    </>
-  )
+    return (
+        <>
+            {params.map(param => (
+                <Display
+                    className={'border_small display_flex_container'}
+                    key={param.label}
+                    label={param.label}
+                    value={param.value}
+                    suffix={param.units}
+                    format={param.format}
+                    isArrowVisible={param.isArrowVisible}
+                />
+            ))}
+            <RigMnemo
+                wellDepth={dataLast?.wellDepth ?? Number.NaN}
+                bitPosition={dataLast?.bitDepth ?? Number.NaN}
+                blockPosition={dataLast?.blockPosition ?? Number.NaN}
+            />
+        </>
+    )
 })
 
 export default CustomColumn