= ({options, dataParams
}
chart.update()
- }, [chart, dataParams, options])
+ }, [chart, dataParams])
return()
}
diff --git a/src/components/charts/Column.jsx b/src/components/charts/Column.jsx
new file mode 100644
index 0000000..a278b7e
--- /dev/null
+++ b/src/components/charts/Column.jsx
@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react'
+import { ChartTimeBase } from './ChartTimeBase'
+
+const chartPluginsOptions = {
+ plugins: {
+ datalabels: {
+ backgroundColor: 'transparent',
+ borderRadius: 4,
+ color: '#000B',
+ display: context => (context.dataset.label === 'wellDepth') && 'auto',
+ formatter: value => `${value.y.toLocaleTimeString()} ${value.label.toPrecision(4)}`,
+ padding: 6,
+ align: 'left',
+ anchor: 'center',
+ clip: true
+ },
+ legend: { display: false },
+ tooltip: { enable: true }
+ }
+}
+
+const GetRandomColor = () => '#' + Math.floor(Math.random()*(16**6-1)).toString(16)
+
+export const GetOrCreateDatasetByLineConfig = (data, lineConfig) => {
+ let dataset = data?.datasets.find(d => d.label === lineConfig.label)
+ if(!dataset) {
+ let color = lineConfig.borderColor
+ ?? lineConfig.backgroundColor
+ ?? lineConfig.color
+ ?? GetRandomColor()
+
+ dataset = {
+ label: lineConfig.label,
+ data: [],
+ backgroundColor: lineConfig.backgroundColor ?? color,
+ borderColor: lineConfig.borderColor ?? color,
+ borderWidth: lineConfig.borderWidth ?? 1,
+ borderDash: lineConfig.dash ?? [],
+ showLine: lineConfig.showLine ?? !lineConfig.isShape,
+ fill: lineConfig.fill ?? (lineConfig.isShape ? 'shape' : 'none')
+ }
+
+ data.datasets.push(dataset)
+ }
+ return dataset
+}
+
+export const Column = ({ lineGroup, data, postParsing, interval, yDisplay, yStart, pointCount, savePreviousData }) => {
+ const [dataParams, setDataParams] = useState({data: {datasets:[]}, yStart, })
+
+ useEffect(()=>{
+ if((lineGroup.length === 0) || (data.length === 0)) return
+
+ setDataParams((preDataParams) => {
+ lineGroup.forEach(lineCfg => {
+ const dataset = GetOrCreateDatasetByLineConfig(preDataParams.data, lineCfg)
+ let points = data.map(dataItem => ({
+ x: lineCfg.xConstValue ?? dataItem[lineCfg.xAccessorName],
+ label: dataItem[lineCfg.xAccessorName],
+ y: new Date(dataItem[lineCfg.yAccessorName]),
+ depth: dataItem.wellDepth
+ })).filter(point => (point.x ?? null) !== null && (point.y ?? null) !== null)
+
+ if (savePreviousData)
+ points = [...dataset.data, ...points]
+
+ if(points?.length > 2)
+ points.sort((a,b) => a.y > b.y ? 1 : -1)
+ if(points.length > pointCount)
+ points.splice(0, (pointCount - points.length))
+
+ dataset.data = points
+ })
+
+ preDataParams.yStart = yStart
+ preDataParams.yInterval = interval
+ preDataParams.displayLabels = yDisplay
+
+ postParsing?.(preDataParams)
+ return {...preDataParams}
+ })
+
+ }, [data, lineGroup, interval, yDisplay, yStart, postParsing, pointCount, savePreviousData])
+
+ return
+}
+
+Column.defaultProps = {
+ pointCount: 2048,
+ savePreviousData: false
+}
diff --git a/src/pages/Archive.jsx b/src/pages/Archive.jsx
deleted file mode 100644
index 8abd9de..0000000
--- a/src/pages/Archive.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useState, useEffect } from 'react'
-import { DatePicker } from 'antd'
-import { TelemetryDataSaubService } from '../services/api'
-import moment from 'moment'
-import { invokeWebApiWrapperAsync } from "../components/factory"
-import LoaderPortal from '../components/LoaderPortal'
-import { Grid, GridItem } from '../components/Grid'
-import { Column } from './TelemetryView/Column'
-import { paramsGroups } from './TelemetryView'
-
-const { RangePicker } = DatePicker
-
-export default function Archive({idWell}) {
- const [dataSaub, setDataSaub] = useState([])
- const [rangeDate, setRangeDate] = useState([moment().subtract(3,'hours'), moment()])
- const [showLoader, setShowLoader] = useState(false)
- const [chartInterval, setChartInterval] = useState(600)
-
- const onChangeRange = (range) => {
- setRangeDate(range)
- }
-
- useEffect(() => invokeWebApiWrapperAsync(
- async () => {
- const interval = (rangeDate[1] - rangeDate[0]) / 1000
- let startDate = rangeDate[0].toISOString()
-
- const data = await TelemetryDataSaubService.getData(idWell, startDate, interval, 2048)
- data?.sort((a, b) => a.date > b.date ? 1 : -1)
- setDataSaub(data ?? [])
- setChartInterval(interval)
- },
- setShowLoader,
- `Не удалось загрузить данные по скважине "${idWell}" c ${rangeDate[0]} по ${rangeDate[1]}`
- ), [idWell, rangeDate])
-
- return (
- <>
-
-
- console.log(e)}>
- {paramsGroups.map((group, index) => (
-
-
-
- ))}
-
-
-
- )
-}
diff --git a/src/pages/Archive/ArchiveColumn.jsx b/src/pages/Archive/ArchiveColumn.jsx
new file mode 100644
index 0000000..b3e7909
--- /dev/null
+++ b/src/pages/Archive/ArchiveColumn.jsx
@@ -0,0 +1,29 @@
+import { Grid, GridItem } from '../../components/Grid'
+import { Column } from '../../components/charts/Column'
+
+export const ArchiveColumn = ({ lineGroup, data, interval, style, headerHeight, yStart }) => {
+ const dataLast = data?.[data.length - 1]
+ const pv = lineGroup.filter(line => line.showLabels).map(line => ({
+ color: line.color,
+ label: line.label,
+ unit: line.units,
+ value: dataLast?.[line.xAccessorName]
+ }))
+
+ return (
+
+
+ {pv?.map((v, idx) => (
+ {v.label}
+ ))}
+
+
+
+ )
+}
diff --git a/src/pages/Archive/ArchiveDisplay.jsx b/src/pages/Archive/ArchiveDisplay.jsx
new file mode 100644
index 0000000..54db8b7
--- /dev/null
+++ b/src/pages/Archive/ArchiveDisplay.jsx
@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+import { Grid, GridItem } from '../../components/Grid'
+import { ArchiveColumn } from './ArchiveColumn'
+import { paramsGroups } from '../TelemetryView'
+
+export const ArchiveDisplay = ({data, startDate, interval, onWheel}) => {
+ const [chartData, setChartData] = useState([])
+
+ useEffect(() => {
+ const endDate = new Date(+startDate + interval)
+ setChartData(data.filter(elm => elm.date >= startDate && elm.date <= endDate))
+ }, [data, startDate, interval])
+
+ return (
+
+ {paramsGroups.map((group, index) => (
+
+
+
+ ))}
+
+ )
+}
diff --git a/src/pages/Archive/index.jsx b/src/pages/Archive/index.jsx
new file mode 100644
index 0000000..2ee941a
--- /dev/null
+++ b/src/pages/Archive/index.jsx
@@ -0,0 +1,140 @@
+import moment from 'moment'
+import { DatePicker } from 'antd'
+import { useState, useEffect } from 'react'
+import { TelemetryDataSaubService } from '../../services/api'
+import { invokeWebApiWrapperAsync } from '../../components/factory'
+import LoaderPortal from '../../components/LoaderPortal'
+import { Flex } from '../../components/Grid'
+import { PeriodPicker, defaultPeriod } from '../../components/PeriodPicker'
+import { ArchiveDisplay } from './ArchiveDisplay'
+
+const DATA_COUNT = 2048 // Колличество точек на подгрузку графика
+const ADDITIVE_PAGES = 2 // Дополнительные данные для графиков
+const LOADING_TRIGGER = 0.5
+const MOUSE_SENSITIVITY = 1 / 530
+
+const getLoadingInterval = (loaded, startDate, interval) => {
+ // Если данные загружены и дата не заходит за тригер дозагрузка не требуется
+ if (
+ loaded &&
+ +startDate - interval * LOADING_TRIGGER > loaded.start &&
+ +startDate + interval * (LOADING_TRIGGER + 1) < loaded.end
+ )
+ return { loadingStartDate: startDate, newLoaded: loaded, loadingInterval: 0 }
+
+ let loadingStartDate = new Date(+startDate - interval * ADDITIVE_PAGES)
+ let loadingEndDate = new Date(+startDate + interval * (ADDITIVE_PAGES + 1))
+
+ const newLoaded = {
+ start: loadingStartDate,
+ end: loadingEndDate
+ }
+
+ if (loaded) {
+ if (loadingStartDate >= loaded.start)
+ loadingStartDate = new Date(loaded.end)
+ if (loadingEndDate <= loaded.end)
+ loadingEndDate = new Date(loaded.start)
+ newLoaded.start = new Date(Math.min(loaded.start, loadingStartDate))
+ newLoaded.end = new Date(Math.max(loaded.end, loadingEndDate))
+ }
+
+ const loadingInterval = Math.trunc((loadingEndDate - loadingStartDate) / 1000)
+
+ return {
+ loadingStartDate,
+ newLoaded,
+ loadingInterval
+ }
+}
+
+export default function Archive({idWell}) {
+ const [dataSaub, setDataSaub] = useState([])
+ const [chartInterval, setChartInterval] = useState(parseInt(defaultPeriod) * 1000)
+ const [startDate, setStartDate] = useState(new Date(+new Date() - chartInterval))
+ const [showLoader, setShowLoader] = useState(false)
+ const [loaded, setLoaded] = useState(null)
+ const [dateMinLimit, setDateMinLimit] = useState(0)
+
+ const onGraphWheel = (e) => {
+ if (loaded) {
+ setStartDate((prevStartDate) => {
+ const offset = e.deltaY * chartInterval * MOUSE_SENSITIVITY
+ const nextStartDate = new Date(+prevStartDate + offset)
+ return new Date(Math.max(loaded.start, Math.min(nextStartDate, +loaded.end - chartInterval)))
+ })
+ }
+ }
+
+ useEffect(() => invokeWebApiWrapperAsync(
+ async () => {
+ const dates = await TelemetryDataSaubService.getDataDatesRange(idWell)
+ setDateMinLimit(new Date(dates?.from ?? 0))
+ setStartDate(new Date(+new Date(dates?.to ?? new Date()) - chartInterval))
+ },
+ setShowLoader,
+ `Не удалось загрузить диапозон телеметрии для скважины "${idWell}"`
+ ), [])
+
+ useEffect(() => {
+ setStartDate((startDate) => new Date(Math.min(+new Date() - chartInterval, startDate)))
+ }, [chartInterval])
+
+ useEffect(() => {
+ if (showLoader) return
+ const { loadingStartDate, loadingInterval, newLoaded } = getLoadingInterval(loaded, startDate, chartInterval)
+ if (loadingInterval <= 0) return
+ invokeWebApiWrapperAsync(
+ async () => {
+ const data = await TelemetryDataSaubService.getData(idWell, loadingStartDate.toISOString(), loadingInterval, DATA_COUNT)
+
+ const loadedStartDate = new Date(Math.max(+newLoaded.start, +startDate - chartInterval * ADDITIVE_PAGES))
+ const loadedEndDate = new Date(Math.min(+newLoaded.end, +startDate + chartInterval * (ADDITIVE_PAGES + 1)))
+ setLoaded({ start: loadedStartDate, end: loadedEndDate })
+
+ if (data) {
+ data.forEach(elm => elm.date = new Date(elm.date))
+ setDataSaub((prevDataSaub) => {
+ const newData = [...prevDataSaub, ...data]
+ newData.sort((a, b) => a.date > b.date ? 1 : -1)
+ return newData.filter(val => {
+ const date = new Date(val.date)
+ return loadedStartDate < date && date < loadedEndDate
+ })
+ })
+ }
+
+ },
+ setShowLoader,
+ `Не удалось загрузить данные по скважине "${idWell}" c ${startDate.toISOString()} по ${new Date(+startDate + chartInterval).toISOString()}`
+ )
+ }, [idWell, chartInterval, loaded, startDate])
+
+ return (
+ <>
+
+
+ Начальная дата:
+ setStartDate(new Date(startDate))}
+ value={moment(startDate)}
+ />
+
+
+ Период:
+
setChartInterval(parseInt(val) * 1000)} />
+
-
- {pv?.map((v, idx) => (
- {v.label}
- ))}
-
-
- {showLastValues && (
-
- {pv?.map((v, idx) => (
- {v.value?.toFixed(2) ?? '--'} {v.unit}
- ))}
-
- )}
-
-
- {showLastValues && (
-
- )}
-
+
+ {pv?.map((v, idx) => (
+ {v.label}
+ ))}
+
+
+
+ {pv?.map((v, idx) => (
+ {v.value?.toFixed(2) ?? '--'} {v.unit}
+ ))}
+
+
+
+
+
Интервал:
-
+
Статус:
@@ -406,7 +390,7 @@ export default function TelemetryView({ idWell }) {
{paramsGroups.map((group, index) =>
-
+ showBorder={getIndexOfDrillingBy(dataSaub) === index}
+ />
)}