From c119f22aa45742d786ff84440e62b28cc695eae4 Mon Sep 17 00:00:00 2001 From: Alexey Date: Tue, 20 Jul 2021 16:15:44 +0500 Subject: [PATCH] =?UTF-8?q?=D0=93=D1=80=D0=B0=D1=84=D0=B8=D0=BA=20=D1=81?= =?UTF-8?q?=D0=BA=D0=BE=D1=80=D0=BE=D1=81=D1=82=D1=8C=20=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D1=85=D0=BE=D0=B4=D0=BA=D0=B8-=D0=B8=D0=BD=D1=82=D0=B5=D1=80?= =?UTF-8?q?=D0=B2=D0=B0=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AnalysisDepthToInterval.jsx | 33 +++- src/components/charts/ChartDepthToDayBase.tsx | 18 +- .../charts/ChartDepthToInterval.jsx | 20 +- .../charts/ChartDepthToIntervalBase.tsx | 174 +++++++++--------- src/pages/Analysis.jsx | 3 +- src/pages/Archive.jsx | 2 +- src/pages/TelemetryView.jsx | 22 ++- 7 files changed, 149 insertions(+), 123 deletions(-) diff --git a/src/components/AnalysisDepthToInterval.jsx b/src/components/AnalysisDepthToInterval.jsx index cb8019b..c0f846c 100644 --- a/src/components/AnalysisDepthToInterval.jsx +++ b/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) => ) 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 ( <> + ) diff --git a/src/components/charts/ChartDepthToDayBase.tsx b/src/components/charts/ChartDepthToDayBase.tsx index c956ad4..1808adf 100644 --- a/src/components/charts/ChartDepthToDayBase.tsx +++ b/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', - // } - // }, } } diff --git a/src/components/charts/ChartDepthToInterval.jsx b/src/components/charts/ChartDepthToInterval.jsx index 747e1b7..f3cb669 100644 --- a/src/components/charts/ChartDepthToInterval.jsx +++ b/src/components/charts/ChartDepthToInterval.jsx @@ -2,21 +2,21 @@ import { useEffect, useState } from 'react' import { ChartDepthToIntervalBase } from './ChartDepthToIntervalBase' import { CreateDataset } from './ChartTimeArchive' -export function ChartDepthToInterval({data, lines}) { - const [depthToIntervalDataParams, setDepthToIntervalDataParams] = useState({data: {datasets: []}}) +export const ChartDepthToInterval = ({ lines, data }) => { + const [depthToIntervalDataParams, setDepthToIntervalDataParams] = useState({ data: { datasets: [] } }) useEffect(() => { if ((!lines) || (!data)) return - let newDatasets = lines.map(lineCfg => { + let newDatasets = lines.map(lineCfg => { let datasets = CreateDataset(lineCfg) - if(data.length !== 0) + 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 (<> + + + ) } \ No newline at end of file diff --git a/src/components/charts/ChartDepthToIntervalBase.tsx b/src/components/charts/ChartDepthToIntervalBase.tsx index 9c21b20..d08004d 100644 --- a/src/components/charts/ChartDepthToIntervalBase.tsx +++ b/src/components/charts/ChartDepthToIntervalBase.tsx @@ -1,37 +1,41 @@ -import {useEffect, useRef, useState} from 'react' +import { useEffect, useRef, useState } from 'react' import { - Chart, - TimeScale, - Legend, - PointElement, - ChartData, - ChartTypeRegistry, - ChartOptions, + Chart, + TimeScale, + Legend, + PointElement, + ChartData, + 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, callbacks: { - label(tooltipItem:any) { + label(tooltipItem: any) { return tooltipItem.yLabel; } } }, events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'], scales: { - x:{ + x: { + position: 'bottom', type: 'time', - reverse: true, + reverse: false, time: { stepSize: 20, displayFormats: { @@ -46,34 +50,33 @@ const defaultOptions = { year: 'yyyy.MM', }, }, - grid:{ + grid: { drawTicks: false, }, ticks: { z: 1, - display : false, - textStrokeColor : "#ffff", - textStrokeWidth : 2, - color:"#000", + display: true, + textStrokeColor: "#ffff", + textStrokeWidth: 2, + color: "#000", } }, - - y:{ - beginAtZero: true + y: { + beginAtZero: true, } }, - elements:{ - point:{ - radius:0, - hoverRadius:5, + elements: { + point: { + radius: 0, + hoverRadius: 5, }, }, - plugins:{ - legend:{ + plugins: { + legend: { display: true, }, datalabels: { - display: false, + display: true, }, } } @@ -104,39 +107,39 @@ export type TimeParams = { const linesPerInterval = 32 -export const timeUnitByInterval = (intervalSec:number):String => { - if(intervalSec <= 60) +export const timeUnitByInterval = (intervalSec: number): String => { + if (intervalSec <= 60) return 'millisecond' - if(intervalSec <= 32*60) + if (intervalSec <= 32 * 60) return 'second' - if(intervalSec <= 32*60*60) + if (intervalSec <= 32 * 60 * 60) return 'minute' - - if(intervalSec <= 32*12*60*60) + + if (intervalSec <= 32 * 12 * 60 * 60) return 'hour' - - if(intervalSec <= 32*24*60*60) + + if (intervalSec <= 32 * 24 * 60 * 60) return 'day' - if(intervalSec <= 32*7*24*60*60) + if (intervalSec <= 32 * 7 * 24 * 60 * 60) return 'week' - - if(intervalSec <= 32*30.4375*24*60*60) + + if (intervalSec <= 32 * 30.4375 * 24 * 60 * 60) return 'month' - if(intervalSec <= 32*121.75*24*60*60) + if (intervalSec <= 32 * 121.75 * 24 * 60 * 60) return 'quarter' else return 'year' } -export const timeParamsByInterval = (intervalSec:number) :TimeParams => { +export const timeParamsByInterval = (intervalSec: number): TimeParams => { let stepSize = intervalSec let unit = timeUnitByInterval(intervalSec) - switch(unit){ + switch (unit) { case "millisecond": stepSize *= 1000 break; @@ -147,65 +150,65 @@ export const timeParamsByInterval = (intervalSec:number) :TimeParams => { stepSize /= 60 break; case "hour": - stepSize /= 60*60 + stepSize /= 60 * 60 break; case "day": - stepSize /= 24*60*60 + stepSize /= 24 * 60 * 60 break; case "week": - stepSize /= 7*24*60*60 + stepSize /= 7 * 24 * 60 * 60 break; case "month": - stepSize /= 30*24*60*60 + stepSize /= 30 * 24 * 60 * 60 break; case "quarter": - stepSize /= 91*24*60*60 + stepSize /= 91 * 24 * 60 * 60 break; case "year": - stepSize /= 365.25*24*60*60 + stepSize /= 365.25 * 24 * 60 * 60 break; } - - stepSize = Math.round(stepSize/linesPerInterval) + + stepSize = Math.round(stepSize / linesPerInterval) stepSize = stepSize > 0 ? stepSize : 1; - return {unit, stepSize} + return { unit, stepSize } } -export const ChartDepthToIntervalBase: React.FC = ({options, dataParams}) => { - const chartRef = useRef(null) - const [chart, setChart] = useState() +export const ChartDepthToIntervalBase: React.FC = ({ options, dataParams }) => { + const chartRef = useRef(null) + const [chart, setChart] = useState() - useEffect(() => { - if((chartRef.current)&&(!chart)) { - let thisOptions = {} - Object.assign(thisOptions, defaultOptions, options) + useEffect(() => { + if ((chartRef.current) && (!chart)) { + let thisOptions = {} + Object.assign(thisOptions, defaultOptions, options) - let newChart = new Chart(chartRef.current, { - type: 'bar', - plugins: [ChartDataLabels], - options: thisOptions, - data: dataParams.data - }) - setChart(newChart) + let newChart = new Chart(chartRef.current, { + type: 'bar', + plugins: [ChartDataLabels], + options: thisOptions, + data: dataParams.data + }) + setChart(newChart) - return () => chart?.destroy() - } - }, [chart, options, dataParams]) + return () => chart?.destroy() + } + }, [chart, options, dataParams]) - useEffect(() => { - if (!chart) - return + useEffect(() => { + if (!chart) + return - chart.data = dataParams.data - chart.options.aspectRatio = options?.aspectRatio - if (dataParams.xStart) { - let interval = Number(dataParams.xInterval ?? 600) - let start = new Date(dataParams.xStart) - let end = new Date(dataParams.xStart) - end.setSeconds(end.getSeconds() + interval) - let {unit, stepSize} = timeParamsByInterval(interval) + chart.data = dataParams.data + chart.options.aspectRatio = options?.aspectRatio + if (dataParams.xStart) { + let interval = Number(dataParams.xInterval ?? 600) + let start = new Date(dataParams.xStart) + let end = new Date(dataParams.xStart) + end.setSeconds(end.getSeconds() + interval) + let { unit, stepSize } = timeParamsByInterval(interval) - if(chart.options.scales?.x){ + if (chart.options.scales?.x) { chart.options.scales.x.max = end.getTime() chart.options.scales.x.min = start.getTime() chart.options.scales.x.ticks.display = dataParams.displayLabels ?? true @@ -214,8 +217,11 @@ export const ChartDepthToIntervalBase: React.FC = ({options, } } - chart.update() - }, [chart, dataParams, options]) + chart.update() + }, [chart, dataParams, options]) - return() + return () } \ No newline at end of file diff --git a/src/pages/Analysis.jsx b/src/pages/Analysis.jsx index b0a34d7..71c823f 100644 --- a/src/pages/Analysis.jsx +++ b/src/pages/Analysis.jsx @@ -2,10 +2,11 @@ import { AnalysisDepthToDay } from '../components/AnalysisDepthToDay' import { AnalysisDepthToInterval } from '../components/AnalysisDepthToInterval' export default function Analysis() { - + return ( <> +
 
) diff --git a/src/pages/Archive.jsx b/src/pages/Archive.jsx index 6c5d4f0..16af5f2 100644 --- a/src/pages/Archive.jsx +++ b/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) diff --git a/src/pages/TelemetryView.jsx b/src/pages/TelemetryView.jsx index 0d68d4a..2fcefb2 100644 --- a/src/pages/TelemetryView.jsx +++ b/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) => ) + const handleReceiveDataSaub = (data) => { if (data) { setSaubData(data) @@ -248,14 +261,7 @@ export default function TelemetryView(props) { Интервал: