Update WellOperations and Tvd by new model

src/pages/WellOperations/ChartTvD.jsx

@@ -0,0 +1,133 @@
+import {useEffect, useRef, useState} from 'react';
+import {
+	Chart,
+	TimeScale,
+	LinearScale,
+	Legend,
+	LineController,
+	PointElement,
+	LineElement
+} from 'chart.js'
+import 'chartjs-adapter-moment';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import zoomPlugin from 'chartjs-plugin-zoom';
+
+Chart.register(TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels, zoomPlugin);
+
+const defaultOptions = {
+  responsive: true,
+  aspectRatio: 2.6,
+  interaction: {
+    intersect: false,
+    mode: 'index',
+  },
+  scales: {
+    x:{
+      display: true,
+      title: {
+        display: true
+      },
+      type: 'time',
+      time: {
+        unit: 'hour',
+        displayFormats: {
+          'hour': 'MM.DD'
+        }
+      },
+      grid:{
+        drawTicks: true,
+      },
+      ticks: {
+        stepSize:3,
+        major:{enabled:true,},
+        z: 1,
+        display : true,
+        textStrokeColor : "#fff",
+        textStrokeWidth : 2,
+        color:"#000",
+      }
+    },
+    
+    y:{
+      type:'linear',
+      position:'top',
+      reverse:true,
+      display: true,
+      title: {
+        display: false,
+        text: ''
+      },
+    }
+  },
+  parsing: {
+    xAxisKey: 'date',
+    yAxisKey: 'depth'
+  },
+  elements:{
+    point:{
+      radius:1.7,
+      //backgroundColor:'#aaa',
+      //pointStyle:'triangle',
+    },
+  },
+  plugins:{
+    legend:{
+      display: true,
+    },
+    datalabels: {
+      display: false,
+    },
+    tooltip: {
+      enabled: true,
+      callbacks: {
+        label(tooltipItem) {
+          return tooltipItem.yLabel;
+        }
+      }
+    },
+  }
+}
+
+const makeDataset = (data, label, color, width=1.5, dash) => ({
+  label: label,
+  data: data,
+  backgroundColor: color,
+  borderColor: color,
+  borderWidth: width,
+  borderDash: dash,
+})
+
+export default function ChartTvD({dataPlan, dataFact, dataPredict}) {
+	const chartRef = useRef(null)
+	const [chart, setChart] = useState()
+
+	useEffect(() => {
+    let data = {
+      datasets: [
+        makeDataset(dataFact, 'Факт', '#0A0'),
+        makeDataset(dataPredict, 'Прогноз', 'purple', 1, [7,3]),
+        makeDataset(dataPlan, 'План', '#C004', 4),
+      ]
+    }
+
+		if((chartRef.current)&&(!chart)) {
+			let thisOptions = {}
+			Object.assign(thisOptions, defaultOptions)
+
+			let newChart = new Chart(chartRef.current, {
+				type: 'line',
+				plugins: [ChartDataLabels],
+				options: thisOptions,
+				data: data
+			})
+			setChart(newChart)
+
+			return () => chart?.destroy()
+		} else {
+      chart.data = data      
+      chart.update()
+    }
+	}, [chart, dataPlan, dataFact, dataPredict])
+
+  return (<canvas ref={chartRef} />)  
+}

src/pages/WellOperations/Tvd.jsx

@@ -1,4 +1,4 @@
-import ChartDepthToDay from '../../components/charts/ChartDepthToDay';
+import ChartTvD from './ChartTvD';
 import { useState, useEffect } from 'react';
 import { invokeWebApiWrapperAsync } from '../../components/factory';
 import { getOperations } from '../Cluster/functions';
@@ -7,18 +7,15 @@ import { getOperations } from '../Cluster/functions';
 export const Tvd = ({ idWell }) => {
   const [dataPlan, setDataPlan] = useState([]);
   const [dataFact, setDataFact] = useState([]);
-  const [dataForecast, setDataForecast] = useState([]);
+  const [dataPredict, setDataPredict] = useState([]);
 
   useEffect(() => {
     invokeWebApiWrapperAsync(
       async () => {
         const operations = await getOperations(idWell);
-
         setDataPlan(operations.plan)
-
         setDataFact(operations.fact)
-
-        setDataForecast(operations.predict)
+        setDataPredict(operations.predict)
       },
       null,
       `Не удалось загрузить операции по скважине "${idWell}"`,
@@ -29,10 +26,10 @@ export const Tvd = ({ idWell }) => {
     <div className="container">
       <div>
         <h2 className={'mt-20px'}>График Глубина-день</h2>
-        <ChartDepthToDay 
+        <ChartTvD 
           dataPlan={dataPlan} 
           dataFact={dataFact} 
-          dataForecast={dataForecast} />
+          dataPredict={dataPredict} />
       </div>
     </div>
   );

src/pages/WellOperations/WellOperationsEditor.jsx

@@ -6,10 +6,8 @@ import {
   DatePickerWrapper, 
   SelectFromDictionary, 
   makeColumn, 
-  numericColumnOptions, 
-  makeNumericSorter, 
   makeDateSorter,
-  defaultNumericRender } from "../../components/Table"
+  makeNumericColumnOptions} from "../../components/Table"
 import LoaderPortal from '../../components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '../../components/factory'
 import { WellOperationService} from '../../services/api'
@@ -20,20 +18,6 @@ const { TextArea } = Input;
 const basePageSize = 160;
 const format='YYYY.MM.DD HH:mm'
 
-const numericSortColumnOptions = {
-  ...numericColumnOptions,
-  sorter: makeNumericSorter('wellDepth'),
-  render:(value) => 
-  <div className='text-align-r-container'>
-    <span>{value}</span>
-  </div>
-}
-
-const durationFormattedColumnOptions = {
-  ...numericColumnOptions,
-  render: defaultNumericRender
-}
-
 export const WellOperationsEditor = ({idWell, idType}) => {
   const [pageNumAndPageSize, setPageNumAndPageSize] = useState({current:1, pageSize:basePageSize})
   const [paginationTotal, setPaginationTotal] = useState(0)
@@ -81,19 +65,20 @@ export const WellOperationsEditor = ({idWell, idType}) => {
       render:(_, record)=>getByKeyOrReturnKey(dictionaryOperationCategory, record.idCategory)
     }),
     makeColumn('Доп. инфо','categoryInfo', {editable:true, width:300, input:<TextArea/>}),
-    makeColumn('Глубина забоя','wellDepth', numericSortColumnOptions),
-    makeColumn('Время начала','startDate', {
+    makeColumn('Глубина забоя на начало','depthStart', makeNumericColumnOptions(2, 'depthStart')),
+    makeColumn('Глубина забоя при завершении','depthEnd', makeNumericColumnOptions(2, 'depthEnd')),
+    makeColumn('Время начала','dateStart', {
       editable:true, 
       width:200, 
       input:<DatePickerWrapper/>,
       initialValue:moment().format(),
-      sorter: makeDateSorter('startDate'),      
+      sorter: makeDateSorter('dateStart'),      
       render:(_, record) => 
         <div className={'text-align-r-container'}>
-          <span>{moment.utc(record.startDate).local().format(format)}</span>
+          <span>{moment.utc(record.dateStart).local().format(format)}</span>
         </div>
     }),
-    makeColumn('Часы','durationHours', durationFormattedColumnOptions),
+    makeColumn('Часы','durationHours', makeNumericColumnOptions(2, 'durationHours')),
     makeColumn('Комментарий','comment', {editable:true, input:<TextArea/>}),
   ]