Base pages and components for Telemetry analytics charts

src/components/TelemetryAnalysisDepthToDay.jsx

@@ -1,40 +0,0 @@
-import { ChartDepthToDay } from './charts/ChartDepthToDayOldVersion'
-import { notify } from "./factory"
-import { useState, useEffect } from 'react'
-import { TelemetryAnalyticsService } from "../services/api"
-import LoaderPortal from './LoaderPortal'
-
-const lines = [
-  { label: "Глубина забоя", yAccessorName: "wellDepth", color: '#f00' },
-  { label: "Положение инструмента", yAccessorName: "bitDepth", color: '#ff0' }
-]
-
-export function TelemetryAnalysisDepthToDay({idWell}) {
-  const [depthToDayData, setDepthToDayData] = useState([])
-  const [loader, setLoader] = useState(false)
-
-  const handleReceiveDepthToDayData = (data) => {
-    setDepthToDayData(data)
-  }
-
-  useEffect(() => {
-    setLoader(true)
-    TelemetryAnalyticsService.getWellDepthToDay(idWell)
-      .then(handleReceiveDepthToDayData)
-      .catch(error => {
-        notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${idWell}"`,
-          'warning')
-        console.log(error)
-      })
-      .finally(setLoader(false))
-  }, [idWell])
-
-  return (
-    <LoaderPortal show={loader}>
-      <ChartDepthToDay
-        data={depthToDayData}
-        lines={lines}
-      />
-    </LoaderPortal>
-  )
-}

src/components/charts/ChartTelemetryDepthToDay.jsx

@@ -1,13 +1,12 @@
 import { useEffect, useState } from 'react'
-import { ChartDepthToDayBase } from './ChartDepthToDayBaseOldVersion'
+import { ChartTelemetryDepthToDayBase } from './ChartTelemetryDepthToDayBase'
 import { CreateDataset } from './ChartTimeArchive'
 
-export const ChartDepthToDayOldVersion = ({data, lines}) => {
+export const ChartTelemetryDepthToDay = ({data, lines}) => {
 	const [depthToDayDataParams, setDepthToDayDataParams] = useState({data: {datasets: []}})
 
   useEffect(() => {
-    if ((!lines)
-      || (!data))
+    if (!lines || !data)
       return
 
     let newDatasets = lines.map(lineCfg => {      
@@ -33,6 +32,6 @@ export const ChartDepthToDayOldVersion = ({data, lines}) => {
   }, [data, lines])
 
 	return (
-		<ChartDepthToDayBase dataParams={depthToDayDataParams} />
+		<ChartTelemetryDepthToDayBase dataParams={depthToDayDataParams} />
 	)
 }

src/components/charts/ChartTelemetryDepthToDayBase.tsx

@@ -62,7 +62,8 @@ const defaultOptions = {
     
     y:{
       type:'linear',
-      position:'top'
+      position:'top',
+      reverse: true,
     }
   },
   elements:{
@@ -174,7 +175,7 @@ export const timeParamsByInterval = (intervalSec:number) :TimeParams => {
   return {unit, stepSize}
 }
 
-export const ChartDepthToDayBaseOldVersion: React.FC<ChartTimeBaseProps> = ({options, dataParams}) => {
+export const ChartTelemetryDepthToDayBase: React.FC<ChartTimeBaseProps> = ({options, dataParams}) => {
 	const chartRef = useRef<HTMLCanvasElement>(null)
 	const [chart, setChart] = useState<any>()
 

src/pages/TelemetryAnalysis/OperationsSummary.jsx

@@ -0,0 +1,6 @@
+
+
+export default function OperationsSummary({idWell}){
+
+    return (<>123</>)
+}

src/pages/TelemetryAnalysis/OperationsToInterval.jsx

@@ -0,0 +1,6 @@
+
+
+export default function OperationsToInterval({idWell}){
+
+    return (<>123</>)
+}

src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToDay.jsx

@@ -0,0 +1,35 @@
+import { ChartTelemetryDepthToDay } from '../../components/charts/ChartTelemetryDepthToDay'
+import { useState, useEffect } from 'react'
+import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { TelemetryAnalyticsService } from "../../services/api"
+import LoaderPortal from '../../components/LoaderPortal'
+
+const lines = [
+  { label: "Глубина забоя", yAccessorName: "wellDepth", color: '#f00' },
+  { label: "Положение инструмента", yAccessorName: "bitDepth", color: '#ff0' }
+]
+
+export default function TelemetryAnalysisDepthToDay({idWell}) {
+  const [depthToDayData, setDepthToDayData] = useState([])
+  const [loader, setLoader] = useState(false)
+
+  useEffect(() => {
+    setLoader(true)
+    invokeWebApiWrapperAsync(
+      async () => {
+        const depthToDayData = await TelemetryAnalyticsService.getWellDepthToDay(idWell)
+        setDepthToDayData(depthToDayData)
+      },
+      setLoader, 
+      `Не удалось получить данные для Анализа Глубина-День по скважине "${idWell}"`)
+  }, [idWell])
+
+  return (
+    <LoaderPortal show={loader}>
+      <ChartTelemetryDepthToDay
+        data={depthToDayData}
+        lines={lines}
+      />
+    </LoaderPortal>
+  )
+}

src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx

@@ -1,10 +1,9 @@
-import { useParams } from "react-router-dom"
-import { notify } from "./factory"
+import { notify } from "../../components/factory"
 import { useState, useEffect } from 'react'
-import { TelemetryAnalyticsService } from '../services/api'
-import { ChartDepthToInterval } from './charts/ChartDepthToInterval'
+import { TelemetryAnalyticsService } from '../../services/api'
+import { ChartDepthToInterval } from '../../components/charts/ChartDepthToInterval'
 import { Select } from 'antd'
-import LoaderPortal from './LoaderPortal'
+import LoaderPortal from '../../components/LoaderPortal'
 
 const { Option } = Select
 
@@ -21,8 +20,7 @@ const timePeriodCollection = [
 
 const lines = [{ label: 'График скорость проходки-интервал', yAccessorName: "intervalDepthProgress", xAccessorName: "intervalStartDate", color: '#00f' }]
 
-export function TelemetryAnalysisDepthToInterval() {
-  let { id } = useParams()
+export default function TelemetryAnalysisDepthToInterval({idWell}) {
   const [depthToIntervalData, setDepthToIntervalData] = useState([])
   const [loader, setLoader] = useState(false)
   const [chartInterval, setChartInterval] = useState(600)
@@ -35,15 +33,15 @@ export function TelemetryAnalysisDepthToInterval() {
 
   useEffect(() => {
     setLoader(true)
-    TelemetryAnalyticsService.getWellDepthToInterval(id, chartInterval)
+    TelemetryAnalyticsService.getWellDepthToInterval(idWell, chartInterval)
       .then(handleReceiveDepthToIntervalData)
       .catch(error => {
-        notify(`Не удалось получить данные для Анализа скорость проходки-интервал "${id}"`,
+        notify(`Не удалось получить данные для Анализа скорость проходки-интервал "${idWell}"`,
           'warning')
         console.log(error)
       })
       .finally(setLoader(false))
-  }, [id, chartInterval])
+  }, [idWell, chartInterval])
 
   return (
     <LoaderPortal show={loader}>

src/pages/TelemetryAnalysis/index.jsx

@@ -0,0 +1,53 @@
+import {Layout, Menu} from "antd";
+import {Switch, Link, Route, useParams} from "react-router-dom";
+import { FolderOutlined } from "@ant-design/icons";
+import OperationsSummary from "./OperationsSummary";
+import OperationsToInterval from "./OperationsToInterval";
+import TelemetryAnalysisDepthToDay from './TelemetryAnalysisDepthToDay'
+import TelemetryAnalysisDepthToInterval from './TelemetryAnalysisDepthToInterval'
+
+const { Content } = Layout
+
+export default function TelemetryAnalysis({idWell}) {
+    let {tab} = useParams()
+    const rootPath = `/well/${idWell}/telemetryAnalysis`;
+
+    return (<>
+        <Menu
+            mode="horizontal"
+            selectable={true}
+            className="well_menu"
+            selectedKeys={[tab]}>
+                <Menu.Item key="depthToDay" icon={<FolderOutlined />}>
+                    <Link to={`${rootPath}/depthToDay`}>Глубина-день</Link>
+                </Menu.Item>
+                <Menu.Item key="depthToInterval" icon={<FolderOutlined />}>
+                    <Link to={`${rootPath}/depthToInterval`}>Глубина-интервал</Link>
+                </Menu.Item>
+                <Menu.Item key="operationsSummary" icon={<FolderOutlined />}>
+                    <Link to={`${rootPath}/operationsSummary`}>Все операции</Link>
+                </Menu.Item>        
+                <Menu.Item key="operationsToInterval" icon={<FolderOutlined />}>
+                    <Link to={`${rootPath}/operationsToInterval`}>Операции-интервал</Link>
+                </Menu.Item>
+        </Menu>
+        <Layout>
+            <Content className="site-layout-background">
+            <Switch>            
+                <Route path={`${rootPath}/depthToDay`}>
+                    <TelemetryAnalysisDepthToDay idWell={idWell}/>
+                </Route>
+                <Route path={`${rootPath}/depthToInterval`}>
+                    <TelemetryAnalysisDepthToInterval idWell={idWell}/>
+                </Route>
+                <Route path={`${rootPath}/operationsSummary`}>
+                    <OperationsSummary idWell={idWell}/>
+                </Route>
+                <Route path={`${rootPath}/operationsToInterval`}>
+                    <OperationsToInterval idWell={idWell}/>
+                </Route>
+            </Switch>
+            </Content>
+        </Layout>
+    </>)
+}

src/pages/Well.jsx

@@ -6,6 +6,7 @@ import {
   FilePdfOutlined,
   DatabaseOutlined,
   ExperimentOutlined,
+  FundProjectionScreenOutlined
 } from "@ant-design/icons";
 import { Link, Redirect, Route, Switch, useParams } from "react-router-dom";
 import TelemetryView from "./TelemetryView";
@@ -17,6 +18,7 @@ import Measure from "./Measure";
 import { makeMenuItems } from "./Documents/menuItems";
 import WellOperations from "./WellOperations";
 import DrillingProgram from "./Documents/DrillingProgram";
+import TelemetryAnalysis from "./TelemetryAnalysis"
 import {PrivateMenuItem} from '../components/Private'
 
 const { Content } = Layout;
@@ -49,6 +51,9 @@ export default function Well() {
           <PrivateMenuItem key="archive" icon={<DatabaseOutlined />}>
             <Link to={`${rootPath}/archive`}>Архив</Link>
           </PrivateMenuItem>
+          <PrivateMenuItem key="telemetryAnalysis" icon={<FundProjectionScreenOutlined />}>
+            <Link to={`${rootPath}/telemetryAnalysis/depthToDay`}>Операции по телеметрии</Link>
+          </PrivateMenuItem>
           <SubMenu
             key="document"
             title={
@@ -90,6 +95,9 @@ export default function Well() {
               <Route path="/well/:idWell/archive">
                 <Archive idWell={idWell} />
               </Route>
+              <Route path="/well/:idWell/telemetryAnalysis/:tab">
+                <TelemetryAnalysis idWell={idWell} />
+              </Route>
               <Route path="/well/:idWell/document/:category">
                 <Documents idWell={idWell} />
               </Route>