CF2-1: Добавлены отметки глубины для графика 'Положение блока'

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/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

@@ -23,7 +23,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 = {
@@ -84,6 +85,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) {