График скорость проходки-интервал

src/components/AnalysisDepthToInterval.jsx

@@ -1,15 +1,35 @@
 import { useParams } from "react-router-dom"
+import { DatePicker } from 'antd'
 import notify from "../components/notify"
 import { useState, useEffect } from 'react'
-import { AnalyticsService } from "../services/api"
+import { AnalyticsService } from '../services/api'
 import { ChartDepthToInterval } from './charts/ChartDepthToInterval'
+import { Select } from 'antd'
 
-const line = {label: 'Данные по глубине скважины за период', y: 'intervalDepthProgress', x: 'intervalStartDate'}
+const { Option } = Select
+
+const timePeriodCollection = [
+  { value: '60', label: '1 минута' },
+  { value: '300', label: '5 минут' },
+  { value: '600', label: '10 минут' },
+  { value: '1800', label: '30 минут' },
+  { value: '3600', label: '1 час' },
+  { value: '21600', label: '6 часов' },
+  { value: '43200', label: '12 часов' },
+  { value: '86400', label: '24 часа' }
+]
+
+const { RangePicker } = DatePicker
+
+const lines = [{ label: 'График скорость проходки-интервал', yAccessorName: "intervalDepthProgress", xAccessorName: "intervalStartDate", color: '#00f' }]
 
 export function AnalysisDepthToInterval() {
   let { id } = useParams()
   const [depthToIntervalData, setDepthToIntervalData] = useState([])
   const [loader, setLoader] = useState(false)
+  const [chartInterval, setChartInterval] = useState(600)
+
+  const children = timePeriodCollection.map((line) => <Option key={line.value}>{line.label}</Option>)
 
   const handleReceiveDepthToIntervalData = (data) => {
     setDepthToIntervalData(data)
@@ -17,7 +37,7 @@ export function AnalysisDepthToInterval() {
 
   useEffect(() => {
     setLoader(true)
-    AnalyticsService.getWellDepthToInterval(id)
+    AnalyticsService.getWellDepthToInterval(id, chartInterval)
       .then(handleReceiveDepthToIntervalData)
       .catch(error => {
         notify(`Не удалось получить данные для Анализа Глубина-День по скважине "${id}"`,
@@ -25,13 +45,16 @@ export function AnalysisDepthToInterval() {
         console.log(error)
       })
       .finally(setLoader(false))
-  }, [id])
+  }, [id, chartInterval])
 
   return (
     <>
+      <Select defaultValue="600" onChange={setChartInterval}>
+        {children}
+      </Select>
       <ChartDepthToInterval
         data={depthToIntervalData}
-        line={line}
+        lines={lines}
       />
     </>
   )

src/components/charts/ChartDepthToDayBase.tsx

@@ -19,7 +19,7 @@ Chart.register(TimeScale, LinearScale, LineController, LineElement, PointElement
 
 const defaultOptions = {
   responsive: true,
-  aspectRatio: 1.45,
+  aspectRatio: 6,
   animation: false,
   tooltips: {
     enabled: true,
@@ -33,7 +33,7 @@ const defaultOptions = {
   scales: {
     x:{
       type: 'time',
-      reverse: true,
+      reverse: false,
       time: {
         stepSize: 20,
         displayFormats: {
@@ -53,7 +53,7 @@ const defaultOptions = {
       },
       ticks: {
         z: 1,
-        display : false,
+        display : true,
         textStrokeColor : "#ffff",
         textStrokeWidth : 2,
         color:"#000",
@@ -78,18 +78,6 @@ const defaultOptions = {
     datalabels: {
       display: false,
     },
-    // zoom: {
-    //   zoom: {
-    //     wheel: {
-    //       enabled: true,
-    //       modifierKey: 'alt',
-    //     },
-    //     pinch: {
-    //       enabled: true
-    //     },
-    //     mode: 'x',
-    //   }
-    // },
   }
 }
 

src/components/charts/ChartDepthToInterval.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { ChartDepthToIntervalBase } from './ChartDepthToIntervalBase'
 import { CreateDataset } from './ChartTimeArchive'
 
-export function ChartDepthToInterval({data, lines}) {
+export const ChartDepthToInterval = ({ lines, data }) => {
   const [depthToIntervalDataParams, setDepthToIntervalDataParams] = useState({ data: { datasets: [] } })
 
   useEffect(() => {
@@ -15,8 +15,8 @@ export function ChartDepthToInterval({data, lines}) {
       if (data.length !== 0)
         datasets.data = data.map(dataItem => {
           return {
-            x: new Date(dataItem[lineCfg.x??'date']),
-            y: dataItem[lineCfg.y],
+            x: new Date(dataItem[lineCfg.xAccessorName ?? 'intervalStartDate']),
+            y: dataItem[lineCfg.yAccessorName ?? 'intervalDepthProgress'],
           }
         })
       return datasets
@@ -29,9 +29,11 @@ export function ChartDepthToInterval({data, lines}) {
       }
     }
     setDepthToIntervalDataParams(newParams)
+
   }, [data, lines])
 
-	return (
+  return (<>
     <ChartDepthToIntervalBase dataParams={depthToIntervalDataParams} />
+  </>
   )
 }

src/components/charts/ChartDepthToIntervalBase.tsx

@@ -8,16 +8,19 @@ import {
   ChartTypeRegistry,
   ChartOptions,
   BarController,
-  BarElement
+  BarElement,
+  TimeSeriesScale,
+  LinearScale,
+  LineController,
 } from 'chart.js'
 import 'chartjs-adapter-moment'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 
-Chart.register(TimeScale, BarController, BarElement, PointElement, Legend, ChartDataLabels)
+Chart.register(TimeScale, BarController, BarElement, PointElement, TimeSeriesScale, LineController, LinearScale, Legend, ChartDataLabels)
 
 const defaultOptions = {
   responsive: true,
-  aspectRatio: 1.45,
+  aspectRatio: 4,
   animation: false,
   tooltips: {
     enabled: true,
@@ -30,8 +33,9 @@ const defaultOptions = {
   events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
   scales: {
     x: {
+      position: 'bottom',
       type: 'time',
-      reverse: true,
+      reverse: false,
       time: {
         stepSize: 20,
         displayFormats: {
@@ -51,15 +55,14 @@ const defaultOptions = {
       },
       ticks: {
         z: 1,
-        display : false,
+        display: true,
         textStrokeColor: "#ffff",
         textStrokeWidth: 2,
         color: "#000",
       }
     },
-    
     y: {
-      beginAtZero: true
+      beginAtZero: true,
     }
   },
   elements: {
@@ -73,7 +76,7 @@ const defaultOptions = {
       display: true,
     },
     datalabels: {
-      display: false,
+      display: true,
     },
   }
 }
@@ -217,5 +220,8 @@ export const ChartDepthToIntervalBase: React.FC<ChartTimeBaseProps> = ({options,
     chart.update()
   }, [chart, dataParams, options])
 
-	return(<canvas ref={chartRef} />)
+  return (<canvas style={{
+    width: "100px",
+    height: "100px"
+  }} ref={chartRef} />)
 }

src/pages/Analysis.jsx

@@ -6,6 +6,7 @@ export default function Analysis() {
   return (
     <>
       <AnalysisDepthToDay />
+      <div style={{ marginTop: '100px' }}>&nbsp;</div>
       <AnalysisDepthToInterval />
     </>
   )

src/pages/Archive.jsx

@@ -15,7 +15,7 @@ import moment from 'moment'
 import notify from '../components/notify'
 import LoaderPortal from '../components/LoaderPortal'
 
-const { RangePicker } = DatePicker;
+const { RangePicker } = DatePicker
 
 const SaveObject = (key, obj) => {
   let json = JSON.stringify(obj)

src/pages/TelemetryView.jsx

@@ -183,6 +183,17 @@ const columns = [
   },
 ];
 
+const timePeriodCollection = [
+  {value: '60', label: '1 минута'},
+  {value: '300', label: '5 минут'},
+  {value: '600', label: '10 минут'},
+  {value: '1800', label: '30 минут'},
+  {value: '3600', label: '1 час'},
+  {value: '21600', label: '6 часов'},
+  {value: '43200', label: '12 часов'},
+  {value: '86400', label: '24 часа'}
+]
+
 export default function TelemetryView(props) {
   let {id} = useParams()
   const [saubData, setSaubData] = useState([])
@@ -191,6 +202,8 @@ export default function TelemetryView(props) {
 
   const [loader, setLoader] = useState(false)  // , setLoader
 
+  const children = timePeriodCollection.map((line) => <Option key={line.value}>{line.label}</Option>)
+
   const handleReceiveDataSaub = (data) => {
     if (data) {
       setSaubData(data)
@@ -248,14 +261,7 @@ export default function TelemetryView(props) {
       <Col>
         Интервал:&nbsp;
         <Select defaultValue="600" onChange={setChartInterval}>
-          <Option value='60'>1 минута</Option>
-          <Option value='300'>5 минут</Option>
-          <Option value='600'>10 минут</Option>
-          <Option value='1800'>30 минут</Option>
-          <Option value='3600'>1 час</Option>
-          <Option value='21600'>6 час</Option>
-          <Option value='43200'>12 часов</Option>
-          <Option value='86400'>1 день</Option>
+          {children}
         </Select>
       </Col>
       <span style={{flexGrow: 1}}>&nbsp;</span>