Added 'Operations summary' doghnut chart

src/components/charts/ChartTelemetryDepthToInterval.jsx

@@ -22,7 +22,7 @@ const defaultOptions = {
   }
 }
 
-export const ChartDepthToInterval = ({ depthToIntervalData }) => {
+export const ChartTelemetryDepthToInterval = ({ depthToIntervalData }) => {
   const chartRef = useRef(null)
   const [chart, setChart] = useState()
 

src/components/charts/ChartTelemetryOperationsSummary.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from 'react'
+import { Chart, registerables } from 'chart.js';
+
+Chart.register(...registerables);
+
+const defaultOptions = {
+  responsive: true,
+  aspectRatio: 2.8
+}
+
+const secondsToTimeString = (seconds) => {
+    if(seconds < 60)
+        return seconds + ' сек.'
+    else if (seconds < 3600)
+        return Math.floor(3600 / seconds) + ' мин.' + (3600 % seconds).toFixed(2) + ' сек.'  
+}
+
+export const ChartTelemetryOperationsSummary = ({ operationsData }) => {
+  const chartRef = useRef(null)
+  const [chart, setChart] = useState()
+
+  useEffect(() => {
+
+    const namesData = operationsData?.map(el => el.operationName) ?? ['Нет операций']
+    const durationsData = operationsData?.map(el => el.duration) ?? [1]
+
+    let chartPartsColors = [
+        '#54a60c', '#0ca68a', '#0c8aa6', '#0c57a6', '#0c33a6', 
+        '#6f10d5', '#d510a1', '#f1bc41', '#c5f141', '#41f196', 
+        '#41cbf1', '#4196f1', '#bf41f1', '#41f1c5', '#cbf141', 
+        '#f1ce41', '#f17f41', '#f14141', '#34b40e', '#420eb4'
+    ]
+
+    let data = {
+      labels: namesData,
+      datasets: [
+        {
+          label: 'Скорость проходки за интервал',
+          data: durationsData,
+          borderColor: chartPartsColors,
+          backgroundColor: chartPartsColors,
+        }
+      ]
+    }
+
+    let thisOptions = {}
+    Object.assign(thisOptions, defaultOptions)
+
+    if ((chartRef.current) && (!chart)) {
+      let newChart = new Chart(chartRef.current, {
+        type: 'doughnut',
+        options: thisOptions,
+        data: data
+      })
+      setChart(newChart)
+    } else {
+      chart.data = data      
+      chart.options = thisOptions
+      chart.update()
+    }
+  }, [chart, operationsData])
+
+  return (<canvas ref={chartRef} />)
+}

src/pages/TelemetryAnalysis/OperationsSummary.jsx

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

src/pages/TelemetryAnalysis/OperationsToInterval.jsx

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

src/pages/TelemetryAnalysis/TelemetryAnalysisDepthToInterval.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { TelemetryAnalyticsService } from '../../services/api'
 import { invokeWebApiWrapperAsync } from '../../components/factory'
-import { ChartDepthToInterval } from '../../components/charts/ChartDepthToInterval'
+import { ChartTelemetryDepthToInterval } from '../../components/charts/ChartTelemetryDepthToInterval'
 import { Select } from 'antd'
 import LoaderPortal from '../../components/LoaderPortal'
 
@@ -49,7 +49,7 @@ export default function TelemetryAnalysisDepthToInterval({idWell}) {
         >
           {children}
         </Select>
-        <ChartDepthToInterval
+        <ChartTelemetryDepthToInterval
           depthToIntervalData={depthToIntervalData}
         />
       </div>

src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsSummary.jsx

@@ -0,0 +1,70 @@
+import { ChartTelemetryOperationsSummary } from '../../components/charts/ChartTelemetryOperationsSummary'
+import { useState, useEffect } from 'react'
+import moment from "moment"
+import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { TelemetryAnalyticsService } from '../../services/api'
+import { Form, DatePicker } from "antd"
+import LoaderPortal from '../../components/LoaderPortal'
+
+const { RangePicker } = DatePicker
+
+export default function TelemetryAnalysisOperationsSummary({idWell}){
+    const [avilableDatesRange, setAviableDatesRange] = useState([moment(),moment()])
+    const [filterDateRange, setFilterDateRange] = useState([moment().subtract(1, "days"),moment()])
+    const [operationsData, setOperationsData] = useState([])
+    const [loader, setLoader] = useState(false)
+
+    const disabledDate = (current) =>
+        current < avilableDatesRange[0] || current > avilableDatesRange[1]
+  
+    useEffect(() => invokeWebApiWrapperAsync(async() => {
+        const datesRange = await TelemetryAnalyticsService.getOperationsDateRange(idWell)
+        setAviableDatesRange(datesRange)
+      }), [idWell])
+
+    useEffect(() => {
+      setLoader(true)
+      invokeWebApiWrapperAsync(
+        async () => {
+          const operationsSummaryData = await TelemetryAnalyticsService.getOperationsSummary(idWell,
+            filterDateRange[0].toISOString(), filterDateRange[1].toISOString())
+  
+          setOperationsData(operationsSummaryData)
+        },
+        setLoader, 
+        `Не удалось получить данные для анализа операций по скважине "${idWell}"`)
+    }, [idWell, filterDateRange])
+  
+    return (
+        <LoaderPortal show={loader}>
+            <div className="w-100 mt-20px">
+                <Form
+                    layout="vertical"
+                    name="operationsForm"
+                    initialValues={{ remember: true }}
+                >
+                    <div className={"d-flex"}>
+                        <Form.Item
+                            label="Диапазон дат графика:"
+                            name="period"
+                            initialValue={filterDateRange}
+                            className='ml-30px'
+                        >
+                            <RangePicker
+                                disabledDate={disabledDate}
+                                allowClear={false}
+                                onCalendarChange={(dates) => {
+                                    setFilterDateRange(dates)
+                                }}
+                                showTime
+                            />
+                        </Form.Item>
+                    </div>
+                </Form>
+            </div>
+            <ChartTelemetryOperationsSummary
+                operationsData={operationsData}
+            />
+        </LoaderPortal>
+    )
+}

src/pages/TelemetryAnalysis/TelemetryAnalysisOperationsToInterval.jsx

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

src/pages/TelemetryAnalysis/index.jsx

@@ -1,8 +1,8 @@
 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 TelemetryAnalysisOperationsSummary from "./TelemetryAnalysisOperationsSummary";
-import OperationsToInterval from "./OperationsToInterval";
+import TelemetryAnalysisOperationsToInterval from "./TelemetryAnalysisOperationsToInterval";
 import TelemetryAnalysisDepthToDay from './TelemetryAnalysisDepthToDay'
 import TelemetryAnalysisDepthToInterval from './TelemetryAnalysisDepthToInterval'
 
@@ -41,10 +41,10 @@ export default function TelemetryAnalysis({idWell}) {
                     <TelemetryAnalysisDepthToInterval idWell={idWell}/>
                 </Route>
                 <Route path={`${rootPath}/operationsSummary`}>
-                    <OperationsSummary idWell={idWell}/>
+                    <TelemetryAnalysisOperationsSummary idWell={idWell}/>
                 </Route>
                 <Route path={`${rootPath}/operationsToInterval`}>
-                    <OperationsToInterval idWell={idWell}/>
+                    <TelemetryAnalysisOperationsToInterval idWell={idWell}/>
                 </Route>
             </Switch>
             </Content>