Добавлено открытие графика глубина-день

src/components/AnalysisDepthToDay.jsx

@@ -1,5 +1,4 @@
 import { ChartDepthToDay } from './charts/ChartDepthToDay'
-import { useParams } from "react-router-dom"
 import notify from "../components/notify"
 import { useState, useEffect } from 'react'
 import { AnalyticsService } from "../services/api"
@@ -10,8 +9,7 @@ const lines = [
   { label: "Положение инструмента", yAccessorName: "bitDepth", color: '#ff0' }
 ]
 
-export function AnalysisDepthToDay() {
-  let { id } = useParams()
+export function AnalysisDepthToDay({idWell}) {
   const [depthToDayData, setDepthToDayData] = useState([])
   const [loader, setLoader] = useState(false)
 
@@ -21,15 +19,15 @@ export function AnalysisDepthToDay() {
 
   useEffect(() => {
     setLoader(true)
-    AnalyticsService.getWellDepthToDay(id)
+    AnalyticsService.getWellDepthToDay(idWell)
       .then(handleReceiveDepthToDayData)
       .catch(error => {
-        notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${id}"`,
+        notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${idWell}"`,
           'warning')
         console.log(error)
       })
       .finally(setLoader(false))
-  }, [id])
+  }, [idWell])
 
   return (
     <LoaderPortal show={loader}>

src/components/modalWindows/ModalChartDepthToday.jsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import { AnalysisDepthToDay } from '../AnalysisDepthToDay'
+import { Button, Modal } from 'antd'
+
+export default function ModalChartDepthToDay({idWell}) {
+  const [chartVisible, setChartVisible] = useState(false)
+
+  return (<>
+    <Button type="secondary" onClick={() => setChartVisible(true)} style={{ marginLeft: "5px" }}>
+      Открыть
+    </Button>
+    <Modal
+      title='Последние показатели бурового раствора'
+      centered
+      visible={chartVisible}
+      onOk={() => setChartVisible(false)}
+      onCancel={() => setChartVisible(false)}
+      width={1800}
+      okText='Ок'
+      cancelText='Отмена'
+    >
+      <AnalysisDepthToDay idWell={idWell}/>
+    </Modal>
+  </>)
+}

src/pages/Analysis.jsx

@@ -3,7 +3,7 @@ import { AnalysisDepthToInterval } from '../components/AnalysisDepthToInterval'
 import { AnalysisOperationTime } from '../components/AnalysisOperationTime'
 import { Row, Col } from 'antd'
 
-export default function Analysis() {
+export default function Analysis({idWell}) {
 
   return (
     <>
@@ -11,18 +11,18 @@ export default function Analysis() {
       <Row justify="space-around" align="middle">
         <Col span={10}>
           <h2>График Глубина-день</h2>
-          <AnalysisDepthToDay />
+          <AnalysisDepthToDay idWell={idWell}/>
         </Col>
         <Col span={10}>
           <h2>График Глубина за интервал</h2>
-          <AnalysisDepthToInterval />
+          <AnalysisDepthToInterval  idWell={idWell}/>
         </Col>
       </Row >
       <Row><div style={{height: "150px"}}>&nbsp;</div></Row>
       <Row justify="space-around" align="middle">
         <Col span={10}>
           <h2>График Операция за время</h2>
-          <AnalysisOperationTime />
+          <AnalysisOperationTime  idWell={idWell}/>
         </Col>
       </Row>
     </>

src/pages/Cluster.jsx

@@ -5,6 +5,37 @@ import { useState, useEffect } from "react";
 import { ClusterService } from '../services/api'
 import notify from '../components/notify'
 import { Table, Tag, Button } from 'antd';
+import ModalChartDepthToDay from '../components/modalWindows/ModalChartDepthToday'
+
+
+export default function Cluster() {
+  let { id } = useParams()
+  const [clusterTitle, setClusterTitle] = useState("")
+  const [wellsStat, setWellsStat] = useState(null)
+  const [showLoader, setShowLoader] = useState(false)
+
+  useEffect(() => {
+    const updateWellsStat = async () => {
+      setShowLoader(true)
+      try {
+        const msInDay = 1000 * 60 * 60 * 24
+        const data = await ClusterService.getStat(id)
+        const wellsStat = data.wellsStat.map(w => ({
+          ...w,
+          periodPlan: (new Date(w.planEnd) - new Date(w.planStart)) / msInDay,
+          periodFact: (new Date(w.factEnd) - new Date(w.factStart)) / msInDay,
+        }))
+        setWellsStat(wellsStat)
+        setClusterTitle(data.caption)
+      }
+      catch (ex) {
+        notify(`Не удалось загрузить статистику по скважинам куста "${id}"`, 'error')
+        console.log(ex)
+      }
+      setShowLoader(false)
+    }
+    updateWellsStat()
+  }, [id])
 
   const columns = [
     {
@@ -86,7 +117,7 @@ const columns = [
     },
     {
       title: 'График глубина-день',
-    render: _ => (<Button>Открыть</Button>)
+      render: (_, item) => (<ModalChartDepthToDay  idWell={item.id}/>)
     },
     {
       title: 'Таблица по операциям',
@@ -100,34 +131,6 @@ const columns = [
     },
   ];
 
-export default function Cluster() {  
-  let { id } = useParams()
-  const [clusterTitle, setClusterTitle] = useState("")
-  const [wellsStat, setWellsStat] = useState(null)
-  const [showLoader, setShowLoader] = useState(false)
-
-  useEffect(()=>{
-    const updateWellsStat = async() => {
-      setShowLoader(true)
-      try{
-        const msInDay = 1000*60*60*24
-        const data = await ClusterService.getStat(id)
-        const wellsStat = data.wellsStat.map(w=>({...w,
-          periodPlan: (new Date(w.planEnd) - new Date(w.planStart))/msInDay,
-          periodFact: (new Date(w.factEnd) - new Date(w.factStart))/msInDay,
-        }))
-        setWellsStat(wellsStat)
-        setClusterTitle(data.caption)
-      }
-      catch(ex) {
-        notify(`Не удалось загрузить статистику по скважинам куста "${id}"`, 'error')
-        console.log(ex)
-      }
-      setShowLoader(false)
-    }
-    updateWellsStat()
-  },[id])
-
   return (
     <LoaderPortal show={showLoader}>
       <h3>{clusterTitle}</h3>

src/pages/Well.jsx

@@ -95,7 +95,7 @@ export default function Well() {
               <Report/>
             </Route>
             <Route path="/well/:id/analysis">
-              <Analysis/>
+              <Analysis idWell={id}/>
             </Route>
             <Route path="/well/:id/wellAnalysis">
               <WellAnalysis/>