Разрешение конфликта в TelemetryView

package.json

@@ -11,7 +11,7 @@
     "antd": "^4.15.0",
     "chart.js": "^3.0.2",
     "chartjs-adapter-date-fns": "^1.1.0-beta.1",
-    "chartjs-plugin-datalabels": "^2.0.0-beta.1",
+    "chartjs-plugin-datalabels": "^2.0.0-rc.1",
     "craco-less": "^1.17.1",
     "date-fns": "^2.20.0",
     "moment": "^2.29.1",

src/components/Display.jsx

@@ -1,11 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons'
 
 export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
   const [oldVal, setOldVal] = useState(NaN)
   const [val, setVal] = useState('---')
-
+  const arrowRef = useRef(null);
-  let arrow = null
 
   useEffect(()=>{
     if(value)
@@ -14,16 +13,16 @@ export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
         if (isArrowVisible)
         {
           if (value > oldVal)
-            arrow = <CaretUpOutlined style={{color:"red"}} />
+            arrowRef.current = (<CaretUpOutlined style={{color:"red"}} />)
           else if (value < oldVal)
-            arrow = <CaretDownOutlined style={{color:"red"}} />
+            arrowRef.current = (<CaretDownOutlined style={{color:"red"}} />)
           setOldVal(value)
         }
       } else
       setVal(value)
   },[value])
 
-  return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
+  return(<span className='display_value'>{prefix} {val} {suffix}{arrowRef.current}</span>)
 }
 
 export const Display = (props)=>{

src/components/charts/ChartTimeArchive.tsx

@@ -63,6 +63,7 @@ export const ChartTimeArchive: React.FC<ChartTimeProps> = (props) => {
         let points = props.data.map(dataItem => {
           return {
             x: dataItem[lineCfg.xAccessorName],
+            label:0,
             y: new Date(dataItem[lineCfg.yAccessorName])
           }
         })

src/components/charts/ChartTimeBase.tsx

@@ -11,8 +11,9 @@ import {
   ChartTypeRegistry, 
   ChartOptions} from 'chart.js'
 import 'chartjs-adapter-date-fns';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
-Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
+Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels );
 
 const defaultOptions = {
   //maintainAspectRatio: false,
@@ -61,15 +62,11 @@ const defaultOptions = {
       hoverRadius:5,
     },
   },
-  plugins:{
-    legend:{
-      display: false,
-    }
-  }
 }
 
 export type ChartTimeData = ChartData<keyof ChartTypeRegistry, {
   x: number;
+  label: number;
   y: Date;
 }[], unknown>
 
@@ -82,7 +79,8 @@ export type ChartTimeDataParams = {
 
 export type ChartTimeBaseProps = {
   dataParams: ChartTimeDataParams,
-  options?: ChartOptions<keyof ChartTypeRegistry>,
+  // TODO: Create good type for options
+  options?: ChartOptions<keyof ChartTypeRegistry> | any,
 }
 
 const timeUnitByInterval = (intervalSec:number):String =>{
@@ -110,6 +108,7 @@ export const ChartTimeBase: React.FC<ChartTimeBaseProps> = (props) => {
 
       let newChart = new Chart(chartRef.current, {
         type: 'line',      
+        plugins: [ChartDataLabels],
         options: thisOptions,
         data: props.dataParams.data
       })

src/components/charts/ChartTimeOnline.tsx

@@ -19,6 +19,7 @@ function GetOrCreateDatasetByLineConfig  (data: ChartTimeData, lineConfig: LineC
       borderColor: lineConfig.borderColor ?? color,
       borderWidth: lineConfig.borderWidth ?? 1,
       borderDash: lineConfig.dash ?? [],
+      showLine: lineConfig.showLine,
     }
     data.datasets.push(dataset);
   }
@@ -37,6 +38,8 @@ export type LineConfig = {
   borderWidth?: number
   dash?:number[]
   labels?: any[]
+  showLine: boolean
+  xConstValue?: number|null
 }
 
 export type ChartTimeProps = {
@@ -64,7 +67,8 @@ export const ChartTimeOnline: React.FC<ChartTimeProps> = (props) => {
       props.lines.forEach(lineCfg => {
         let dataset = GetOrCreateDatasetByLineConfig(preDataParams.data, lineCfg)      
         let points = props.data.map(dataItem => {return{
-          x: dataItem[lineCfg.xAccessorName],
+          x: lineCfg.xConstValue ?? dataItem[lineCfg.xAccessorName],
+          label: dataItem[lineCfg.xAccessorName],
           y: new Date(dataItem[lineCfg.yAccessorName])}
         })
         //dataset.data = [ ...dataset.data, ...points,].slice(-1024)      
@@ -85,6 +89,31 @@ export const ChartTimeOnline: React.FC<ChartTimeProps> = (props) => {
 
   }, [ props.data, props.lines, props.interval, props.yDisplay])
 
-  return(<ChartTimeBase dataParams = {dataParams} />)
+  const chartPluginsOptions = {
+    plugins:{
+      legend:{
+        display: false,
+      },
+      datalabels: {
+        backgroundColor: 'transparent',
+        borderRadius: 4,
+        color: '#000B',
+        display: function(context:any) {
+          return context.dataset.label === 'wellDepth'
+            ? 'auto'
+            : false
+        },
+        formatter: function(value: any, context: any) {
+          return `${value.y.toLocaleTimeString()} ${value.label.toPrecision(4)}`
+        },
+        padding: 6,
+        align: 'left',
+        anchor: 'center',
+        clip: true
+      }
+    }
+  }
+
+  return(<ChartTimeBase dataParams = {dataParams} options = { chartPluginsOptions }  />)
 }
 

src/pages/TelemetryView.jsx

@@ -21,7 +21,8 @@ const dash = [7, 3]
 const blockHeightGroup = {
   label: "Высота блока",
   yDisplay: false,
-  linePv: {label: "blockHeight", units: 'м', xAccessorName: "blockHeight", yAccessorName: "date", color: '#333'},
+  linePv: { label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333' },
+  lineOther: { label: "wellDepth", units: 'м', xAccessorName: "wellDepth", yAccessorName: "date", color: '#333', showLine: false, xConstValue:30 },
 }
 
 const blockSpeedGroup = {
@@ -119,6 +120,9 @@ export const Column = ({lineGroup, data, interval}) => {
   if (lineGroup.lineSp)
     lines.push(lineGroup.lineSp)
 
+  if (lineGroup.lineOther)
+    lines.push(lineGroup.lineOther)
+
   let dataLast = null
   let pv = null
   if (data?.length > 0) {
@@ -222,6 +226,12 @@ export default function TelemetryView(props) {
     }
   }, [id]);
 
+  useEffect(() => {
+    DataService.getData(id, null, chartInterval)
+      .then(handleReceiveDataSaub)
+      .catch(error => console.error(error))
+  }, [chartInterval]);
+
   const colSpan = 24 / (paramsGroups.length)
 
   return (<div>