diff --git a/src/pages/WellOperations/Tvd.jsx b/src/pages/WellOperations/Tvd.jsx
new file mode 100644
index 0000000..43bced7
--- /dev/null
+++ b/src/pages/WellOperations/Tvd.jsx
@@ -0,0 +1,143 @@
+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'
+import { invokeWebApiWrapper } from '../../components/factory'
+import LoaderPortal from '../../components/LoaderPortal'
+//import { TvdService} from '../../services/api'
+
+Chart.register(TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels, zoomPlugin)
+
+const defaultOptions = {
+  responsive: true,
+  aspectRatio: 2.35,
+  interaction: {
+    intersect: false,
+    mode: 'index',
+  },
+  scales: {
+    x:{
+      display: true,
+      title: {
+        display: true
+      },
+      type: 'linear', // был 'time' + его конфиг ниже
+      grid:{
+        drawTicks: true,
+      },
+      ticks: {
+        //count:24,
+        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: true,
+        text: 'Value'
+      },
+    }
+  },
+  parsing: {
+    xAxisKey: 'date',
+    yAxisKey: 'depth'
+  },
+  elements:{
+    point:{
+      radius:1.7,
+    },
+  },
+  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 const Tvd = ({idWell}) =>{
+	const chartRef = useRef(null)
+	const [chart, setChart] = useState()
+	const [data, setData] = useState({datasets: []})
+  const [showLoader, setShowLoader] = useState(false)
+
+  useEffect(() => invokeWebApiWrapper(
+    async() => {
+      const dataPlan = []
+      const dataFact = []
+      const dataPredict = []
+      const data = {
+        datasets: [
+          makeDataset(dataPlan, 'План', '#C004', 4),
+          makeDataset(dataFact, 'Факт', '#0A0'),
+          makeDataset(dataPredict, 'Прогноз', 'purple', 1, [7,3]),
+        ]
+      }
+      setData(data)
+    },
+    setShowLoader,
+    `Не удалось загрузить данные TVD по скважине ${idWell}`),
+    [idWell])
+
+	useEffect(() => {
+		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, data])
+
+  return <LoaderPortal show={showLoader}>
+    <canvas ref={chartRef} />
+  </LoaderPortal>
+}
\ No newline at end of file