ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alexey 2021-07-20 16:15:44 +05:00
parent f62b280ee5
commit c119f22aa4
7 changed files with 149 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/AnalysisDepthToInterval.jsx
View File

@ -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}
/>
</>
)

18
src/components/charts/ChartDepthToDayBase.tsx
View File

@ -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',
// }
// },
}
}

18
src/components/charts/ChartDepthToInterval.jsx
View File

@ -2,8 +2,8 @@ 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)
@ -12,11 +12,11 @@ export function ChartDepthToInterval({data, lines}) {
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 (
<ChartDepthToIntervalBase dataParams={depthToIntervalDataParams} />
)
return (<>
<ChartDepthToIntervalBase dataParams={depthToIntervalDataParams} />
</>
)
}

166
src/components/charts/ChartDepthToIntervalBase.tsx
View File

@ -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<ChartTimeBaseProps> = ({options, dataParams}) => {
const chartRef = useRef<HTMLCanvasElement>(null)
const [chart, setChart] = useState<any>()
export const ChartDepthToIntervalBase: React.FC<ChartTimeBaseProps> = ({ options, dataParams }) => {
const chartRef = useRef<HTMLCanvasElement>(null)
const [chart, setChart] = useState<any>()
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<ChartTimeBaseProps> = ({options,
}
}
chart.update()
}, [chart, dataParams, options])
chart.update()
}, [chart, dataParams, options])
return(<canvas ref={chartRef} />)
return (<canvas style={{
width: "100px",
height: "100px"
}} ref={chartRef} />)
}

1
src/pages/Analysis.jsx
View File

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

2
src/pages/Archive.jsx
View File

@ -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)

22
src/pages/TelemetryView.jsx
View File

@ -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>