forked from ddrilling/asb_cloud_front
61 lines
2.0 KiB
JavaScript
61 lines
2.0 KiB
JavaScript
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 { ChartDepthToInterval } from './charts/ChartDepthToInterval'
|
||
import { Select } from 'antd'
|
||
|
||
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)
|
||
}
|
||
|
||
useEffect(() => {
|
||
setLoader(true)
|
||
AnalyticsService.getWellDepthToInterval(id, chartInterval)
|
||
.then(handleReceiveDepthToIntervalData)
|
||
.catch(error => {
|
||
notify(`Не удалось получить данные для Анализа скорость проходки-интервал "${id}"`,
|
||
'warning')
|
||
console.log(error)
|
||
})
|
||
.finally(setLoader(false))
|
||
}, [id, chartInterval])
|
||
|
||
return (
|
||
<>
|
||
<Select defaultValue="600" onChange={setChartInterval}>
|
||
{children}
|
||
</Select>
|
||
<ChartDepthToInterval
|
||
data={depthToIntervalData}
|
||
lines={lines}
|
||
/>
|
||
</>
|
||
)
|
||
} |