BUR-64 Скорректирован зум-графика с сохранением изначального периода

Reviewed-on: #18

src/features/history-chart/HistoryChart.tsx

@@ -86,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,9 +129,14 @@ export function HistoryChart({
   to,
   tagLabels = {},
 }: 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<ReturnType<typeof setTimeout> | null>(null);
   const lines = useHistoryChartQueries({
@@ -114,10 +152,10 @@ export function HistoryChart({
   const loading = lines.some((line) => line.loading);
 
   useEffect(() => {
-    const nextRange = createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to });
+    baseRangeRef.current = baseRange;
-    zoomRangeRef.current = nextRange;
+    zoomRangeRef.current = baseRange;
-    setZoomRange(nextRange);
+    setZoomRange(baseRange);
-  }, [from, granulate, labelFormat, tickIntervalMs, to]);
+  }, [baseRange]);
 
   useEffect(() => {
     zoomRangeRef.current = zoomRange;
@@ -135,15 +173,15 @@ export function HistoryChart({
   const option = useMemo(
     () =>
       createHistoryChartOptions({
-        dataZoomState: { start: 0, end: 100 },
+        dataZoomState: createDataZoomState(baseRange, zoomRange),
-        from: zoomRange.from,
+        from: baseRange.from,
-        to: zoomRange.to,
+        to: baseRange.to,
         labelFormat: zoomRange.labelFormat,
         legendData,
         series,
         tickIntervalMs: zoomRange.tickIntervalMs,
       }),
-    [legendData, series, zoomRange],
+    [baseRange, legendData, series, zoomRange],
   );
 
   const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
@@ -153,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;