Added TVD to modal window in ClusterWells table

src/pages/Cluster/ClusterWells.jsx

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
-import { Table, Tag, Button } from "antd";
+import { Table, Tag, Button, Modal } from "antd";
 import {
   makeTextColumn,
   makeGroupColumn,
@@ -9,6 +9,9 @@ import {
   makeNumericColumnPlanFact,
   calcAndUpdateStatsBySections,
 } from "../../components/Table";
+import { invokeWebApiWrapperAsync } from '../../components/factory';
+import { WellOperationStatService } from '../../services/api';
+import DepthToDay from '../../components/charts/DepthToDay';
 
 const filtersMinMax = [
   {
@@ -35,6 +38,43 @@ const filtersWellsType = [
 export default function ClusterWells({ clusterData }) {
   let { id } = useParams();
   const [wellsStat, setWellsStat] = useState([]);
+  const [selectedWellId, setSelectedWellId] = useState(0);
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const [dataPlan, setDataPlan] = useState([]);
+  const [dataFact, setDataFact] = useState([]);
+  const [dataForecast, setDataForecast] = useState([]);
+
+  useEffect(() => {
+    invokeWebApiWrapperAsync(
+      async () => {
+        const operations = await WellOperationStatService.getTvd(selectedWellId);
+
+        const planData = operations.map(el => { 
+          return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
+        }).filter(el => el.key)
+
+        setDataPlan(planData)
+
+        const factData = operations.map(el => { 
+          return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
+        }).filter(el => el.key)
+
+        setDataFact(factData)
+
+        const predictData = operations.map(el => { 
+          return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
+        }).filter(el => el.key)
+
+        setDataForecast(predictData)
+      },
+      null,
+      `Не удалось загрузить операции по скважине "${selectedWellId}"`,
+    );
+  }, [selectedWellId]);
+
+  const closeModal = () => {
+    setIsModalVisible(false)
+  }
 
   calcAndUpdateStatsBySections(wellsStat ?? [], [
     "factStart",
@@ -97,7 +137,10 @@ export default function ClusterWells({ clusterData }) {
     makeNumericColumnPlanFact("НПВ, сут", "notProductiveTime", filtersMinMax),
     {
       title: "График глубина-день",
-      render: (_, item) => <Button>Открыть</Button>,
+      render: (_, item) => <Button onClick={()=> {
+        setIsModalVisible(true) 
+        setSelectedWellId(_.id)
+      }}>Открыть</Button>,
     },
     {
       title: "Таблица по операциям",
@@ -113,13 +156,29 @@ export default function ClusterWells({ clusterData }) {
   ];
 
   return (
-    <Table
-      columns={columns}
-      dataSource={wellsStat}
-      size={"small"}
-      bordered
-      pagination={false}
-      rowKey={(record) => record.id}
-    />
+    <div>
+      <Table
+        columns={columns}
+        dataSource={wellsStat}
+        size={"small"}
+        bordered
+        pagination={false}
+        rowKey={(record) => record.id}
+      />
+
+      <Modal
+      title='Modal'
+      centered
+      visible={isModalVisible}
+      onOk={closeModal}
+      onCancel={closeModal}
+      width={800}
+      >
+        <DepthToDay 
+          dataPlan={dataPlan} 
+          dataFact={dataFact} 
+          dataForecast={dataForecast} />
+      </Modal>
+    </div>
   );
 }

src/pages/WellOperations/Tvd.jsx

@@ -40,7 +40,6 @@ export const TVD = ({ idWell }) => {
       <div>
         <h2 className={'mt-20px'}>График Глубина-день</h2>
         <DepthToDay 
-          idWell={idWell} 
           dataPlan={dataPlan} 
           dataFact={dataFact} 
           dataForecast={dataForecast} />