BUR-37 привел тултип к шаблону "сред. ${avg} (${min} .. ${max})"

Reviewed-on: #16

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/history-chart/HistoryChart.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useMemo, useRef } from 'react';
-import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
-import type { DataZoomEventBatch, DataZoomState } from './chartTypes';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getHistoryGranularity, type HistoryAxisLabelFormat } from '../../utils/historyGranularity';
+import type { DataZoomEventBatch, DataZoomState, HistoryZoomRange } from './chartTypes';
 import { HistoryChartArea } from './HistoryChartArea';
 import { createHistoryChartOptions } from './historyChartOptions';
 import { useHistoryChartQueries } from './useHistoryChartQueries';
@@ -17,11 +17,75 @@ type HistoryChartProps = {
   tagLabels?: Record<string, string>;
 };
 
-/** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
+const ZOOM_REQUEST_DELAY_MS = 350;
+
 function isXAxisDataZoom(state: DataZoomState): boolean {
   return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
 }
 
+/** Собирает начальный zoom-диапазон из внешних props графика. */
+function createInitialZoomRange({
+  from,
+  granulate,
+  labelFormat,
+  tickIntervalMs,
+  to,
+}: Pick<HistoryChartProps, 'from' | 'granulate' | 'labelFormat' | 'tickIntervalMs' | 'to'>): HistoryZoomRange {
+  return { from, to, granulate, labelFormat, tickIntervalMs };
+}
+
+/** Создает zoom-диапазон из миллисекунд и подбирает для него грануляцию. */
+function createZoomRange(fromMs: number, toMs: number): HistoryZoomRange {
+  const from = new Date(fromMs).toISOString();
+  const to = new Date(toMs).toISOString();
+
+  return {
+    from,
+    to,
+    ...getHistoryGranularity(from, to),
+  };
+}
+
+/** Достает подинтервал X-зума из события ECharts. */
+function getZoomRangeFromEvent(state: DataZoomState, baseRange: HistoryZoomRange): HistoryZoomRange | null {
+  const baseFromMs = new Date(baseRange.from).getTime();
+  const baseToMs = new Date(baseRange.to).getTime();
+  const baseSpanMs = baseToMs - baseFromMs;
+
+  if (!Number.isFinite(baseFromMs) || !Number.isFinite(baseToMs) || baseSpanMs <= 0) {
+    return null;
+  }
+
+  const startValue = Number(state.startValue);
+  const endValue = Number(state.endValue);
+  let nextFromMs = Number.isFinite(startValue) ? startValue : undefined;
+  let nextToMs = Number.isFinite(endValue) ? endValue : undefined;
+  
+  // ECharts иногда не передает startValue/endValue, поэтому используем start/end.
+  if (nextFromMs === undefined || nextToMs === undefined) {
+    const start = Number(state.start);
+    const end = Number(state.end);
+
+    if (!Number.isFinite(start) || !Number.isFinite(end)) {
+      return null;
+    }
+
+    nextFromMs = baseFromMs + (baseSpanMs * start) / 100;
+    nextToMs = baseFromMs + (baseSpanMs * end) / 100;
+  }
+
+  // Проверка на выход из диапазона 
+  const fromMs = Math.max(baseFromMs, Math.min(nextFromMs, nextToMs));
+  const toMs = Math.min(baseToMs, Math.max(nextFromMs, nextToMs));
+
+  return toMs > fromMs ? createZoomRange(fromMs, toMs) : null;
+}
+
+/** Проверяет, что lazy zoom не пытается повторно применить тот же диапазон. */
+function isSameZoomRange(left: HistoryZoomRange, right: HistoryZoomRange): boolean {
+  return left.from === right.from && left.to === right.to && left.granulate === right.granulate;
+}
+
 export function HistoryChart({
   edge,
   from,
@@ -32,24 +96,54 @@ export function HistoryChart({
   to,
   tagLabels = {},
 }: HistoryChartProps) {
-  const dataZoomRef = useRef<DataZoomState | null>(null);
-  const lines = useHistoryChartQueries({ edge, from, granulate, tags, to, tagLabels });
-  const series = useHistoryChartSeries(lines);
+  const [zoomRange, setZoomRange] = useState(() =>
+    createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
+  );
+  const zoomRangeRef = useRef(zoomRange);
+  const zoomTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lines = useHistoryChartQueries({
+    edge,
+    from: zoomRange.from,
+    granulate: zoomRange.granulate,
+    tags,
+    to: zoomRange.to,
+    tagLabels,
+  });
+  const series = useHistoryChartSeries(lines, zoomRange.granulate);
   const legendData = useMemo(() => lines.map((line) => line.label), [lines]);
   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]);
+
+  useEffect(() => {
+    zoomRangeRef.current = zoomRange;
+  }, [zoomRange]);
+
+  useEffect(
+    () => () => {
+      if (zoomTimerRef.current) {
+        clearTimeout(zoomTimerRef.current);
+      }
+    },
+    [],
+  );
+
   const option = useMemo(
     () =>
       createHistoryChartOptions({
-        dataZoomState: dataZoomRef.current ?? {},
-        from,
-        to,
-        labelFormat,
+        dataZoomState: { start: 0, end: 100 },
+        from: zoomRange.from,
+        to: zoomRange.to,
+        labelFormat: zoomRange.labelFormat,
         legendData,
         series,
-        tickIntervalMs,
+        tickIntervalMs: zoomRange.tickIntervalMs,
       }),
-    [from, labelFormat, legendData, series, tickIntervalMs, to],
+    [legendData, series, zoomRange],
   );
 
   const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
@@ -59,12 +153,21 @@ export function HistoryChart({
       return;
     }
 
-    dataZoomRef.current = {
-      start: state.start,
-      end: state.end,
-      startValue: state.startValue,
-      endValue: state.endValue,
-    };
+    const currentRange = zoomRangeRef.current;
+    const nextRange = getZoomRangeFromEvent(state, currentRange);
+
+    if (!nextRange || isSameZoomRange(nextRange, currentRange)) {
+      return;
+    }
+
+    if (zoomTimerRef.current) {
+      clearTimeout(zoomTimerRef.current);
+    }
+
+    zoomTimerRef.current = setTimeout(() => {
+      zoomRangeRef.current = nextRange;
+      setZoomRange(nextRange);
+    }, ZOOM_REQUEST_DELAY_MS);
   }, []);
 
   return (

src/features/history-chart/chartTypes.ts

@@ -1,5 +1,17 @@
+import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
+
 export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
 
+export type HistoryBucketValue = [...AvgPointValue, slotMs: number];
+
+export type HistoryZoomRange = {
+  from: string;
+  to: string;
+  granulate: string;
+  tickIntervalMs?: number;
+  labelFormat?: HistoryAxisLabelFormat;
+};
+
 export type TooltipParam = {
   color?: string;
   marker?: string;

src/features/history-chart/historyChartEcharts.ts

@@ -1,4 +1,4 @@
-import { LineChart, ScatterChart } from 'echarts/charts';
+import { CustomChart } from 'echarts/charts';
 import {
   DataZoomComponent,
   GridComponent,
@@ -9,8 +9,7 @@ import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 
 echarts.use([
-  LineChart,
-  ScatterChart,
+  CustomChart,
   GridComponent,
   LegendComponent,
   TooltipComponent,

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 {

src/features/history-chart/historyChartOptions.ts

@@ -82,6 +82,8 @@ export function createHistoryChartOptions({
         id: 'history-x-inside',
         type: 'inside',
         xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        moveOnMouseWheel: false,
         throttle: 80,
         start: dataZoomState.start,
         end: dataZoomState.end,
@@ -111,6 +113,8 @@ export function createHistoryChartOptions({
         type: 'inside',
         yAxisIndex: 0,
         filterMode: 'none',
+        zoomOnMouseWheel: 'shift',
+        moveOnMouseWheel: false,
         throttle: 80,
       },
       {

src/features/history-chart/historyChartSeries.ts

@@ -1,6 +1,13 @@
-import type { SeriesOption } from 'echarts';
+import type {
+  CustomSeriesRenderItemAPI,
+  CustomSeriesRenderItemParams,
+  CustomSeriesRenderItemReturn,
+  SeriesOption,
+} from 'echarts';
+import { graphic } from 'echarts/core';
 import type { HistoryPoint } from '../../entities/history/types';
-import type { AvgPointValue } from './chartTypes';
+import { parseGranulateMs } from '../../utils/historyGranularity';
+import type { HistoryBucketValue } from './chartTypes';
 
 export const SERIES_COLORS = [
   '#5B8FF9',
@@ -13,93 +20,120 @@ export const SERIES_COLORS = [
   '#A7B3FF',
 ];
 
-/** Создает avg-линию, вертикальные min/max-отрезки и точки экстремумов для одной серии. */
-export function createSeriesOptions(points: HistoryPoint[], index: number, label: string): SeriesOption[] {
+type CartesianCoordSys = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+function isFinitePoint(point: HistoryPoint): boolean {
+  return [point.avg_value, point.min_value, point.max_value].every(Number.isFinite);
+}
+
+/** Упаковывает один bucket API в компактный tuple для custom series ECharts. */
+function createBucketData(points: HistoryPoint[], slotMs: number): HistoryBucketValue[] {
+  return points.filter(isFinitePoint).map((point) => [
+    new Date(point.time).getTime(),
+    point.avg_value,
+    point.min_value,
+    point.max_value,
+    point.point_count,
+    slotMs,
+  ]);
+}
+
+/** Рисует один bucket как временной слот: затухающий min..max и яркий маркер avg. */
+function renderBucket(color: string) {
+  return (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn => {
+    const time = Number(api.value(0));
+    const avg = Number(api.value(1));
+    const min = Number(api.value(2));
+    const max = Number(api.value(3));
+    const slotMs = Number(api.value(5));
+
+    // ECharts отдает размеры области графика в runtime, но в публичных типах
+    // они не описаны. Поэтому держим cast локально рядом с clipping-логикой.
+    const coordSys = params.coordSys as unknown as CartesianCoordSys;
+
+    // Переводим координаты данных (time/value) в пиксели canvas.
+    const avgPoint = api.coord([time, avg]);
+    const minPoint = api.coord([time, min]);
+    const maxPoint = api.coord([time, max]);
+    const slotStart = api.coord([time - slotMs / 2, avg]);
+    const slotEnd = api.coord([time + slotMs / 2, avg]);
+
+    // Слот занимает один интервал грануляции по X и диапазон min..max по Y.
+    const x = Math.min(slotStart[0], slotEnd[0]);
+    const rawHeight = Math.abs(maxPoint[1] - minPoint[1]);
+    const width = Math.max(2, Math.abs(slotEnd[0] - slotStart[0]));
+    const height = Math.max(2, rawHeight);
+    const y = Math.min(minPoint[1], maxPoint[1]) - (height - rawHeight) / 2;
+    const avgY = avgPoint[1];
+    const chartArea = { x: coordSys.x, y: coordSys.y, width: coordSys.width, height: coordSys.height };
+
+    // Обрезаем фигуры, чтобы при Y-зуме они не выходили за область графика.
+    const rangeShape = graphic.clipRectByRect(
+      { x, y, width, height },
+      chartArea,
+    );
+    const avgShape = graphic.clipRectByRect(
+      { x, y: avgY - 1, width, height: 2 },
+      chartArea,
+    );
+
+    if (!rangeShape) {
+      return null;
+    }
+
+    return {
+      type: 'group',
+      children: [
+        {
+          type: 'rect',
+          shape: rangeShape,
+          style: {
+            fill: new graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: `${color}00` },
+              { offset: 0.5, color: `${color}66` },
+              { offset: 1, color: `${color}00` },
+            ]),
+          },
+        },
+        ...(avgShape ? [{
+          type: 'rect' as const,
+          shape: avgShape,
+          style: {
+            fill: color,
+          },
+        }] : []),
+      ],
+    };
+  };
+}
+
+/** Создает отдельный временной слот min..max с акцентом на avg для каждой точки history. */
+export function createSeriesOptions(points: HistoryPoint[], index: number, label: string, granulate: string): SeriesOption[] {
   const color = SERIES_COLORS[index % SERIES_COLORS.length];
-  const avgData: AvgPointValue[] = points.map((point) => {
-    const time = new Date(point.time).getTime();
-    return [time, point.avg_value, point.min_value, point.max_value, point.point_count];
-  });
-  const spreadData = points.flatMap((point) => {
-    const time = new Date(point.time).getTime();
-    return [
-      [time, point.min_value],
-      [time, point.max_value],
-      [time, null],
-    ];
-  });
+  const data = createBucketData(points, parseGranulateMs(granulate));
 
   return [
     {
       name: label,
-      type: 'line',
-      data: spreadData,
-      showSymbol: false,
-      connectNulls: false,
-      silent: true,
-      tooltip: { show: false },
-      legendHoverLink: false,
-      lineStyle: {
-        width: 1,
-        opacity: 0.42,
-        color,
+      type: 'custom',
+      data,
+      renderItem: renderBucket(color),
+      encode: {
+        x: 0,
+        y: [1, 2, 3],
       },
-      emphasis: {
-        disabled: true,
-      },
-      z: 1,
-    },
-    {
-      name: label,
-      type: 'scatter',
-      data: points.map((point) => [new Date(point.time).getTime(), point.min_value]),
-      symbolSize: 4,
-      silent: true,
-      tooltip: { show: false },
       itemStyle: {
         color,
-        opacity: 0.72,
       },
       emphasis: {
         disabled: true,
       },
-      z: 2,
-    },
-    {
-      name: label,
-      type: 'scatter',
-      data: points.map((point) => [new Date(point.time).getTime(), point.max_value]),
-      symbolSize: 4,
-      silent: true,
-      tooltip: { show: false },
-      itemStyle: {
-        color,
-        opacity: 0.72,
-      },
-      emphasis: {
-        disabled: true,
-      },
-      z: 2,
-    },
-    {
-      name: label,
-      type: 'line',
-      showSymbol: false,
-      smooth: false,
-      sampling: 'lttb',
-      data: avgData,
-      lineStyle: {
-        width: 1.8,
-        color,
-      },
-      emphasis: {
-        disabled: true,
-        lineStyle: {
-          width: 1.8,
-          color,
-        },
-      },
       z: 3,
-    },
+    } as SeriesOption,
   ];
 }

src/features/history-chart/useHistoryChartSeries.ts

@@ -3,12 +3,12 @@ import type { SeriesOption } from 'echarts';
 import { createSeriesOptions } from './historyChartSeries';
 import type { HistoryChartLineData } from './useHistoryChartQueries';
 
-export function useHistoryChartSeries(lines: HistoryChartLineData[]): SeriesOption[] {
+export function useHistoryChartSeries(lines: HistoryChartLineData[], granulate: string): SeriesOption[] {
   return useMemo(
     () =>
       lines.flatMap((line) =>
-        line.rows.length ? createSeriesOptions(line.rows, line.index, line.label) : [],
+        line.rows.length ? createSeriesOptions(line.rows, line.index, line.label, granulate) : [],
       ),
-    [lines],
+    [granulate, lines],
   );
 }

src/utils/historyGranularity.ts

@@ -25,6 +25,19 @@ const WEEK = 7 * DAY;
 const MONTH = 30 * DAY;
 const YEAR = 365 * DAY;
 
+const GRANULATE_UNIT_MS: Record<string, number> = {
+  second: SECOND,
+  seconds: SECOND,
+  minute: MINUTE,
+  minutes: MINUTE,
+  hour: HOUR,
+  hours: HOUR,
+  day: DAY,
+  days: DAY,
+  week: WEEK,
+  weeks: WEEK,
+};
+
 type Rule = {
   maxMs: number;
   granulate: string;
@@ -60,3 +73,12 @@ export function getHistoryGranularity(from: string, to: string): HistoryGranular
     }
   );
 }
+
+/** Переводит текст грануляции API вроде "10 minutes" в миллисекунды. */
+export function parseGranulateMs(granulate: string): number {
+  const [amountText, unit = ''] = granulate.trim().split(/\s+/);
+  const amount = Number(amountText);
+  const unitMs = GRANULATE_UNIT_MS[unit.toLowerCase()];
+
+  return Number.isFinite(amount) && unitMs ? amount * unitMs : MINUTE;
+}