diff --git a/src/pages/Archive/index.jsx b/src/pages/Archive/index.jsx index 2ee941a..da660f4 100644 --- a/src/pages/Archive/index.jsx +++ b/src/pages/Archive/index.jsx @@ -6,12 +6,12 @@ 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' +import { ArchiveDisplay, cutData } from './ArchiveDisplay' const DATA_COUNT = 2048 // Колличество точек на подгрузку графика const ADDITIVE_PAGES = 2 // Дополнительные данные для графиков const LOADING_TRIGGER = 0.5 -const MOUSE_SENSITIVITY = 1 / 530 +const WHEEL_SENSITIVITY = 1 / 530 const getLoadingInterval = (loaded, startDate, interval) => { // Если данные загружены и дата не заходит за тригер дозагрузка не требуется @@ -22,8 +22,8 @@ const getLoadingInterval = (loaded, startDate, interval) => { ) return { loadingStartDate: startDate, newLoaded: loaded, loadingInterval: 0 } - let loadingStartDate = new Date(+startDate - interval * ADDITIVE_PAGES) - let loadingEndDate = new Date(+startDate + interval * (ADDITIVE_PAGES + 1)) + let loadingStartDate = +startDate - interval * ADDITIVE_PAGES + let loadingEndDate = +startDate + interval * (ADDITIVE_PAGES + 1) const newLoaded = { start: loadingStartDate, @@ -32,18 +32,21 @@ const getLoadingInterval = (loaded, startDate, interval) => { if (loaded) { if (loadingStartDate >= loaded.start) - loadingStartDate = new Date(loaded.end) + loadingStartDate = 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)) + loadingEndDate = loaded.start + newLoaded.start = Math.min(loaded.start, loadingStartDate) + newLoaded.end = Math.max(loaded.end, loadingEndDate) } const loadingInterval = Math.trunc((loadingEndDate - loadingStartDate) / 1000) return { - loadingStartDate, - newLoaded, + loadingStartDate: new Date(loadingStartDate), + newLoaded: { + start: new Date(newLoaded.start), + end: new Date(newLoaded.end) + }, loadingInterval } } @@ -54,14 +57,14 @@ export default function Archive({idWell}) { 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 offset = e.deltaY * chartInterval * WHEEL_SENSITIVITY const nextStartDate = new Date(+prevStartDate + offset) - return new Date(Math.max(loaded.start, Math.min(nextStartDate, +loaded.end - chartInterval))) + const lastPossibleDate = new Date(Math.min(loaded.end, new Date()) - chartInterval) + return new Date(Math.max(loaded.start, Math.min(nextStartDate, lastPossibleDate))) }) } } @@ -69,8 +72,12 @@ export default function Archive({idWell}) { 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)) + let startDate + if (dates?.from && dates?.to) + startDate = Math.max(new Date(dates.from), +new Date(dates.to) - chartInterval) + else + startDate = +new Date() - chartInterval + setStartDate(new Date(startDate)) }, setShowLoader, `Не удалось загрузить диапозон телеметрии для скважины "${idWell}"` @@ -78,6 +85,7 @@ export default function Archive({idWell}) { useEffect(() => { setStartDate((startDate) => new Date(Math.min(+new Date() - chartInterval, startDate))) + setDataSaub([]) }, [chartInterval]) useEffect(() => { @@ -97,10 +105,7 @@ export default function Archive({idWell}) { 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 - }) + return cutData(newData, loadedStartDate, loadedEndDate) }) }