BUR-64 синхронизировал изменение input date/time полей с масштабированием графика.

Reviewed-on: #17

src/components/CameraView.tsx

@@ -1,3 +1,4 @@
+import mpegts from 'mpegts.js';
 import { useEffect, useRef, useState } from 'react';
 
 type CameraViewProps = {
@@ -11,8 +12,7 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
 
   useEffect(() => {
     const video = videoRef.current;
-    let player: import('mpegts.js').default.Player | null = null;
-    let cancelled = false;
+    let player: ReturnType<typeof mpegts.createPlayer> | null = null;
 
     if (!video) {
       return;
@@ -22,32 +22,27 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
     video.addEventListener('playing', clearError);
     setError(null);
 
-    void import('mpegts.js').then(({ default: mpegts }) => {
-      if (cancelled) {
-        return;
-      }
+    if (!mpegts.isSupported()) {
+      setError('Браузер не поддерживает MPEG-TS поток');
+      return () => {
+        video.removeEventListener('playing', clearError);
+      };
+    }
 
-      if (!mpegts.isSupported()) {
-        setError('Браузер не поддерживает MPEG-TS поток');
-        return;
-      }
+    player = mpegts.createPlayer(
+      { type: 'mpegts', isLive: true, url: wsUrl },
+      { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
+    );
 
-      player = mpegts.createPlayer(
-        { type: 'mpegts', isLive: true, url: wsUrl },
-        { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
-      );
+    player.attachMediaElement(video);
+    player.load();
 
-      player.attachMediaElement(video);
-      player.load();
-
-      const playResult = player.play();
-      if (playResult instanceof Promise) {
-        void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
-      }
-    });
+    const playResult = player.play();
+    if (playResult instanceof Promise) {
+      void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
+    }
 
     return () => {
-      cancelled = true;
       video.removeEventListener('playing', clearError);
       player?.pause();
       player?.unload();

src/features/edge-detail/components/ArchiveView.tsx

@@ -4,8 +4,9 @@ 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 { toIsoFromInput } from '../../../utils/format';
+import { toInputDateTimeValue, toIsoFromInput } from '../../../utils/format';
 import type { HistoryGranularity } from '../../../utils/historyGranularity';
 
 type ArchiveViewProps = {
@@ -108,6 +109,12 @@ 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 (
     <section className="chart-section chart-section--archive">
@@ -263,6 +270,7 @@ export function ArchiveView({
             labelFormat={historyAxis.labelFormat}
             tags={selectedTags}
             tagLabels={tagLabels}
+            onZoomRangeChange={updateRangeFromZoom}
           />
         ) : (
           <div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>

src/features/history-chart/HistoryChart.tsx

@@ -15,6 +15,7 @@ type HistoryChartProps = {
   tickIntervalMs?: number;
   to: string;
   tagLabels?: Record<string, string>;
+  onZoomRangeChange?: (range: HistoryZoomRange) => void;
 };
 
 const ZOOM_REQUEST_DELAY_MS = 350;
@@ -95,6 +96,7 @@ export function HistoryChart({
   tickIntervalMs,
   to,
   tagLabels = {},
+  onZoomRangeChange,
 }: HistoryChartProps) {
   const [zoomRange, setZoomRange] = useState(() =>
     createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
@@ -167,8 +169,9 @@ export function HistoryChart({
     zoomTimerRef.current = setTimeout(() => {
       zoomRangeRef.current = nextRange;
       setZoomRange(nextRange);
+      onZoomRangeChange?.(nextRange);
     }, ZOOM_REQUEST_DELAY_MS);
-  }, []);
+  }, [onZoomRangeChange]);
 
   return (
     <HistoryChartArea

src/features/history-chart/historyChartFormat.ts

@@ -60,7 +60,7 @@ function formatChartValue(value: number): string {
   }).format(value);
 }
 
-/** Показывает одно значение, если min/avg/max визуально совпадают. */
+/** Форматирует значение tooltip: одно число для min=avg=max или среднее с диапазоном. */
 function formatTooltipValue(value: AvgPointValue): string {
   const avg = formatChartValue(value[1]);
   const min = formatChartValue(value[2]);
@@ -70,7 +70,7 @@ function formatTooltipValue(value: AvgPointValue): string {
     return avg;
   }
 
-  return `min ${min} · avg ${avg} · max ${max}`;
+  return `сред. ${avg} (${min} .. ${max})`;
 }
 
 function isAvgPointValue(value: unknown): value is AvgPointValue {