From f4cefe376cc8d8c8450d46e83d4accb0d37de123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B2=D0=BE=D0=B2=20=D0=90=D1=80=D1=82?= =?UTF-8?q?=D0=B5=D0=BC?= Date: Sun, 5 Jul 2026 16:01:13 +0300 Subject: [PATCH 1/2] =?UTF-8?q?BUR-64=20=D0=A1=D0=BA=D0=BE=D1=80=D1=80?= =?UTF-8?q?=D0=B5=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=20=D0=B7?= =?UTF-8?q?=D1=83=D0=BC-=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20?= =?UTF-8?q?=D1=81=20=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=D0=BC=20=D0=B8=D0=B7=D0=BD=D0=B0=D1=87=D0=B0=D0=BB=D1=8C?= =?UTF-8?q?=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BF=D0=B5=D1=80=D0=B8=D0=BE=D0=B4?= =?UTF-8?q?=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edge-detail/components/ArchiveView.tsx | 10 +-- src/features/history-chart/HistoryChart.tsx | 62 +++++++++++++++---- 2 files changed, 50 insertions(+), 22 deletions(-) diff --git a/src/features/edge-detail/components/ArchiveView.tsx b/src/features/edge-detail/components/ArchiveView.tsx index d19bfe6..9c5909d 100644 --- a/src/features/edge-detail/components/ArchiveView.tsx +++ b/src/features/edge-detail/components/ArchiveView.tsx @@ -4,9 +4,8 @@ import { useRef } from 'react'; import { CalendarDays, CalendarClock, Check, ChevronDown, Clock3, DatabaseZap, Search } from 'lucide-react'; import type { CurrentItem } from '../../../entities/current/types'; import { HistoryChart } from '../../../features/history-chart/HistoryChart'; -import type { HistoryZoomRange } from '../../../features/history-chart/chartTypes'; import { RANGE_PRESETS, createRange, type DateRangeState } from '../../../features/history/dateRange'; -import { toInputDateTimeValue, toIsoFromInput } from '../../../utils/format'; +import { toIsoFromInput } from '../../../utils/format'; import type { HistoryGranularity } from '../../../utils/historyGranularity'; type ArchiveViewProps = { @@ -109,12 +108,6 @@ export function ArchiveView({ [rangePart]: updateRangeInputPart(range[rangePart], inputPart, value), }); }; - const updateRangeFromZoom = (nextRange: HistoryZoomRange) => { - onRangeChange({ - from: toInputDateTimeValue(new Date(nextRange.from)), - to: toInputDateTimeValue(new Date(nextRange.to)), - }); - }; return (
@@ -270,7 +263,6 @@ export function ArchiveView({ labelFormat={historyAxis.labelFormat} tags={selectedTags} tagLabels={tagLabels} - onZoomRangeChange={updateRangeFromZoom} /> ) : (
Разверните список показателей и выберите серию для графика
diff --git a/src/features/history-chart/HistoryChart.tsx b/src/features/history-chart/HistoryChart.tsx index 45b9e6c..9bd53aa 100644 --- a/src/features/history-chart/HistoryChart.tsx +++ b/src/features/history-chart/HistoryChart.tsx @@ -15,7 +15,6 @@ type HistoryChartProps = { tickIntervalMs?: number; to: string; tagLabels?: Record; - onZoomRangeChange?: (range: HistoryZoomRange) => void; }; const ZOOM_REQUEST_DELAY_MS = 350; @@ -87,6 +86,39 @@ function isSameZoomRange(left: HistoryZoomRange, right: HistoryZoomRange): boole return left.from === right.from && left.to === right.to && left.granulate === right.granulate; } +/** Вычисляет, какую часть верхнеуровневого периода занимает текущий пользовательский zoom. */ +function createDataZoomState(baseRange: HistoryZoomRange, zoomRange: HistoryZoomRange): DataZoomState { + // Верхнеуровневый период берём из инпутов "С/По" и считаем его полными 0..100%. + const baseFromMs = new Date(baseRange.from).getTime(); + const baseToMs = new Date(baseRange.to).getTime(); + + // Пользовательский zoom живёт внутри верхнеуровневого периода и должен быть выделен на нижней шкале. + const zoomFromMs = new Date(zoomRange.from).getTime(); + const zoomToMs = new Date(zoomRange.to).getTime(); + const baseSpanMs = baseToMs - baseFromMs; + + // Если даты некорректны, показываем весь период, чтобы не ломать управление графиком. + if ( + !Number.isFinite(baseFromMs) || + !Number.isFinite(baseToMs) || + !Number.isFinite(zoomFromMs) || + !Number.isFinite(zoomToMs) || + baseSpanMs <= 0 + ) { + return { start: 0, end: 100 }; + } + + // Переводим абсолютные даты zoom-а в проценты относительно верхнеуровневого периода. + const start = ((zoomFromMs - baseFromMs) / baseSpanMs) * 100; + const end = ((zoomToMs - baseFromMs) / baseSpanMs) * 100; + + // Ограничиваем значения диапазоном 0..100, чтобы ECharts не получил выход за шкалу. + return { + start: Math.max(0, Math.min(100, start)), + end: Math.max(0, Math.min(100, end)), + }; +} + export function HistoryChart({ edge, from, @@ -96,11 +128,15 @@ export function HistoryChart({ tickIntervalMs, to, tagLabels = {}, - onZoomRangeChange, }: HistoryChartProps) { + const baseRange = useMemo( + () => createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }), + [from, granulate, labelFormat, tickIntervalMs, to], + ); const [zoomRange, setZoomRange] = useState(() => createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }), ); + const baseRangeRef = useRef(baseRange); const zoomRangeRef = useRef(zoomRange); const zoomTimerRef = useRef | null>(null); const lines = useHistoryChartQueries({ @@ -116,10 +152,10 @@ export function HistoryChart({ const loading = lines.some((line) => line.loading); useEffect(() => { - const nextRange = createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }); - zoomRangeRef.current = nextRange; - setZoomRange(nextRange); - }, [from, granulate, labelFormat, tickIntervalMs, to]); + baseRangeRef.current = baseRange; + zoomRangeRef.current = baseRange; + setZoomRange(baseRange); + }, [baseRange]); useEffect(() => { zoomRangeRef.current = zoomRange; @@ -137,15 +173,15 @@ export function HistoryChart({ const option = useMemo( () => createHistoryChartOptions({ - dataZoomState: { start: 0, end: 100 }, - from: zoomRange.from, - to: zoomRange.to, + dataZoomState: createDataZoomState(baseRange, zoomRange), + from: baseRange.from, + to: baseRange.to, labelFormat: zoomRange.labelFormat, legendData, series, tickIntervalMs: zoomRange.tickIntervalMs, }), - [legendData, series, zoomRange], + [baseRange, legendData, series, zoomRange], ); const handleDataZoom = useCallback((event: DataZoomEventBatch) => { @@ -155,8 +191,9 @@ export function HistoryChart({ return; } + const baseRange = baseRangeRef.current; const currentRange = zoomRangeRef.current; - const nextRange = getZoomRangeFromEvent(state, currentRange); + const nextRange = getZoomRangeFromEvent(state, baseRange); if (!nextRange || isSameZoomRange(nextRange, currentRange)) { return; @@ -169,9 +206,8 @@ export function HistoryChart({ zoomTimerRef.current = setTimeout(() => { zoomRangeRef.current = nextRange; setZoomRange(nextRange); - onZoomRangeChange?.(nextRange); }, ZOOM_REQUEST_DELAY_MS); - }, [onZoomRangeChange]); + }, []); return ( Date: Sun, 5 Jul 2026 16:24:46 +0300 Subject: [PATCH 2/2] =?UTF-8?q?BUR-64=20=D0=A3=D0=B1=D1=80=D0=B0=D0=BD=20l?= =?UTF-8?q?oader=20=D1=81=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0.=20?= =?UTF-8?q?=D0=92=D0=BE=20=D0=B2=D1=80=D0=B5=D0=BC=D1=8F=20=D0=B7=D1=83?= =?UTF-8?q?=D0=BC=D0=B0=20=D1=85=D1=80=D0=B0=D0=BD=D0=B8=D0=BC=20=D0=BF?= =?UTF-8?q?=D1=80=D0=B5=D0=B4=D1=8B=D0=B4=D1=83=D1=89=D0=B5=D0=B5=20=D1=81?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=BE?= =?UTF-8?q?=20=D1=82=D0=B5=D1=85=20=D0=BF=D0=BE=D1=80,=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=BD=D0=B5=20=D0=BF=D1=80=D0=B8=D1=88=D0=BB?= =?UTF-8?q?=D0=B0=20=D0=BD=D0=BE=D0=B2=D0=B0=D1=8F=20=D1=81=D0=B5=D1=80?= =?UTF-8?q?=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/history-chart/HistoryChart.tsx | 19 +++++++++++++++++-- .../history-chart/HistoryChartArea.tsx | 2 +- .../history-chart/useHistoryChartQueries.ts | 3 ++- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/features/history-chart/HistoryChart.tsx b/src/features/history-chart/HistoryChart.tsx index 9bd53aa..0bc6795 100644 --- a/src/features/history-chart/HistoryChart.tsx +++ b/src/features/history-chart/HistoryChart.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import type { EChartsOption } from 'echarts'; import { getHistoryGranularity, type HistoryAxisLabelFormat } from '../../utils/historyGranularity'; import type { DataZoomEventBatch, DataZoomState, HistoryZoomRange } from './chartTypes'; import { HistoryChartArea } from './HistoryChartArea'; @@ -139,6 +140,7 @@ export function HistoryChart({ const baseRangeRef = useRef(baseRange); const zoomRangeRef = useRef(zoomRange); const zoomTimerRef = useRef | null>(null); + const lastReadyOptionRef = useRef(null); const lines = useHistoryChartQueries({ edge, from: zoomRange.from, @@ -150,6 +152,7 @@ export function HistoryChart({ const series = useHistoryChartSeries(lines, zoomRange.granulate); const legendData = useMemo(() => lines.map((line) => line.label), [lines]); const loading = lines.some((line) => line.loading); + const hasData = series.length > 0; useEffect(() => { baseRangeRef.current = baseRange; @@ -184,6 +187,18 @@ export function HistoryChart({ [baseRange, legendData, series, zoomRange], ); + // Во время lazy-загрузки нового zoom-диапазона оставляем на экране последний готовый график. + // Так canvas не заменяется loader-ом и пользователь не теряет визуальный контекст. + const fallbackOption = loading && !hasData ? lastReadyOptionRef.current : null; + const displayOption = fallbackOption ?? option; + const displayHasData = hasData || Boolean(fallbackOption); + + useEffect(() => { + if (hasData) { + lastReadyOptionRef.current = option; + } + }, [hasData, option]); + const handleDataZoom = useCallback((event: DataZoomEventBatch) => { const state = (event.batch ?? [event]).find(isXAxisDataZoom); @@ -211,10 +226,10 @@ export function HistoryChart({ return ( 0} + hasData={displayHasData} hasSelection={tags.length > 0} loading={loading} - option={option} + option={displayOption} onDataZoom={handleDataZoom} /> ); diff --git a/src/features/history-chart/HistoryChartArea.tsx b/src/features/history-chart/HistoryChartArea.tsx index 9b23950..2649a14 100644 --- a/src/features/history-chart/HistoryChartArea.tsx +++ b/src/features/history-chart/HistoryChartArea.tsx @@ -31,7 +31,7 @@ export function HistoryChartArea({ return
Разверните список показателей и выберите серию для графика
; } - if (loading) { + if (!hasData && loading) { return
Загрузка графика...
; } diff --git a/src/features/history-chart/useHistoryChartQueries.ts b/src/features/history-chart/useHistoryChartQueries.ts index 67046de..017846d 100644 --- a/src/features/history-chart/useHistoryChartQueries.ts +++ b/src/features/history-chart/useHistoryChartQueries.ts @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { useQueries } from '@tanstack/react-query'; +import { keepPreviousData, useQueries } from '@tanstack/react-query'; import { getHistory } from '../../entities/history/api'; import type { HistoryPoint } from '../../entities/history/types'; @@ -35,6 +35,7 @@ export function useHistoryChartQueries({ queryKey: ['history', edge, tag, from, to, granulate], queryFn: ({ signal }: { signal: AbortSignal }) => getHistory({ edge, tag, from, to, granulate }, signal), enabled, + placeholderData: keepPreviousData, })), });