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] =?UTF-8?q?BUR-64=20=D0=A1=D0=BA=D0=BE=D1=80=D1=80=D0=B5?= =?UTF-8?q?=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=20=D0=B7=D1=83?= =?UTF-8?q?=D0=BC-=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20=D1=81=20?= =?UTF-8?q?=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=D0=BC=20=D0=B8=D0=B7=D0=BD=D0=B0=D1=87=D0=B0=D0=BB=D1=8C=D0=BD?= =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D0=BF=D0=B5=D1=80=D0=B8=D0=BE=D0=B4=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 (