BUR-41 MetricWidget обогощен информацией единицы измерения, идентификатором тега, а также выставлены акценты

Reviewed-on: #22

src/components/CameraView.tsx

@@ -6,6 +6,21 @@ type CameraViewProps = {
   wsUrl: string;
 };
 
+const CAMERA_PLAYER_CONFIG = {
+  enableWorker: true,
+  enableStashBuffer: true,
+  stashInitialSize: 512,
+  autoCleanupSourceBuffer: true,
+  autoCleanupMaxBackwardDuration: 10,
+  autoCleanupMinBackwardDuration: 5,
+  liveBufferLatencyChasing: true,
+  liveBufferLatencyMaxLatency: 5.0,
+  liveBufferLatencyMinRemain: 2.0,
+  liveSync: false,
+  lazyLoad: false,
+  deferLoadAfterSourceOpen: false,
+};
+
 export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -13,6 +28,7 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
   useEffect(() => {
     const video = videoRef.current;
     let player: ReturnType<typeof mpegts.createPlayer> | null = null;
+    const handlePlayerError = () => setError('Ошибка видеопотока');
 
     if (!video) {
       return;
@@ -30,20 +46,22 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
     }
 
     player = mpegts.createPlayer(
-      { type: 'mpegts', isLive: true, url: wsUrl },
+      { type: 'mpegts', isLive: true, url: wsUrl, hasAudio: false },
-      { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
+      CAMERA_PLAYER_CONFIG,
     );
 
+    player.on(mpegts.Events.ERROR, handlePlayerError);
     player.attachMediaElement(video);
     player.load();
 
     const playResult = player.play();
     if (playResult instanceof Promise) {
-      void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
+      void playResult.then(() => setError(null)).catch(() => undefined);
     }
 
     return () => {
       video.removeEventListener('playing', clearError);
+      player?.off(mpegts.Events.ERROR, handlePlayerError);
       player?.pause();
       player?.unload();
       player?.detachMediaElement();

src/components/MetricWidget.tsx

@@ -6,12 +6,17 @@ type MetricWidgetProps = {
 };
 
 export function MetricWidget({ item }: MetricWidgetProps) {
-  const title = item.name?.trim() || item.tag;
+  const name = item.name?.trim() || item.tag;
+  const unit = item.unitOfMeasurement?.trim();
 
   return (
-    <article className="metric-widget" title={`${title} (${item.tag})`}>
+    <article className="metric-widget" title={`${name} (${item.tag})`}>
-      <span className="metric-widget__tag">{title}</span>
+      <span className="metric-widget__id">{item.tag}</span>
-      <strong className="metric-widget__value">{formatNumber(item.value)}</strong>
+      <span className="metric-widget__name">{name}</span>
+      <span className="metric-widget__reading">
+        <strong className="metric-widget__value">{formatNumber(item.value)}</strong>
+        {unit ? <span className="metric-widget__unit">{unit}</span> : null}
+      </span>
     </article>
   );
 }

src/entities/current/types.ts

@@ -1,7 +1,7 @@
 export type CurrentItem = {
   edge: string;
   tag: string;
-  value: number;
+  value: number | null;
   createdAt: string;
   updatedAt: string;
   time: string;

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 { formatNumber, 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 (
     <section className="chart-section chart-section--archive">
@@ -198,7 +191,7 @@ export function ArchiveView({
                       {label !== item.tag ? <small>{item.tag}</small> : null}
                     </span>
                     <span className="tag-select-item__side">
-                      <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
+                      <strong>{formatNumber(item.value)}</strong>
                       {selected ? <Check size={15} /> : null}
                     </span>
                   </button>
@@ -270,7 +263,6 @@ export function ArchiveView({
             labelFormat={historyAxis.labelFormat}
             tags={selectedTags}
             tagLabels={tagLabels}
-            onZoomRangeChange={updateRangeFromZoom}
           />
         ) : (
           <div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>

src/features/electrical-schematics/ElectricalNode.tsx

@@ -29,8 +29,8 @@ export function ElectricalNode({ liveValues, node, ownerEdgeId }: ElectricalNode
       ? getLiveValue(liveValues, node.edgeId || ownerEdgeId, node.tagId)
       : getLiveValue(liveValues, bindingEdgeId, bindings?.stateTagId);
   const alarmValue = node.kind === 'decoration' ? getLiveValue(liveValues, bindingEdgeId, bindings?.alarmTagId) : undefined;
-  const alarmActive = Boolean(alarmValue && Number(alarmValue.value) !== 0);
+  const alarmActive = Boolean(alarmValue && alarmValue.value !== null && alarmValue.value !== 0);
-  const stateActive = Boolean(mainValue && Number(mainValue.value) !== 0);
+  const stateActive = Boolean(mainValue && mainValue.value !== null && mainValue.value !== 0);
   const title = getNodeTitle(node, mainValue);
   const style: CSSProperties = {
     left: node.position.x,

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';
@@ -15,7 +16,6 @@ type HistoryChartProps = {
   tickIntervalMs?: number;
   to: string;
   tagLabels?: Record<string, string>;
-  onZoomRangeChange?: (range: HistoryZoomRange) => void;
 };
 
 const ZOOM_REQUEST_DELAY_MS = 350;
@@ -87,6 +87,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,13 +129,18 @@ 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<ReturnType<typeof setTimeout> | null>(null);
+  const lastReadyOptionRef = useRef<EChartsOption | null>(null);
   const lines = useHistoryChartQueries({
     edge,
     from: zoomRange.from,
@@ -114,12 +152,13 @@ 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(() => {
-    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;
@@ -137,17 +176,29 @@ 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],
   );
 
+  // Во время 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);
 
@@ -155,8 +206,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,16 +221,15 @@ export function HistoryChart({
     zoomTimerRef.current = setTimeout(() => {
       zoomRangeRef.current = nextRange;
       setZoomRange(nextRange);
-      onZoomRangeChange?.(nextRange);
     }, ZOOM_REQUEST_DELAY_MS);
-  }, [onZoomRangeChange]);
+  }, []);
 
   return (
     <HistoryChartArea
-      hasData={series.length > 0}
+      hasData={displayHasData}
       hasSelection={tags.length > 0}
       loading={loading}
-      option={option}
+      option={displayOption}
       onDataZoom={handleDataZoom}
     />
   );

src/features/history-chart/HistoryChartArea.tsx

@@ -1,6 +1,7 @@
 import type { EChartsOption } from 'echarts';
 import ReactEChartsCore from 'echarts-for-react/esm/core.js';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import type { WheelEvent } from 'react';
 import type { DataZoomEventBatch } from './chartTypes';
 import { echarts } from './historyChartEcharts';
 
@@ -12,6 +13,21 @@ type HistoryChartAreaProps = {
   onDataZoom: (event: DataZoomEventBatch) => void;
 };
 
+/** Включает или выключает нативный X-зум колесом, чтобы Shift + колесо работал только по Y. */
+function setXAxisWheelZoom(chart: ReturnType<ReactEChartsCore['getEchartsInstance']>, enabled: boolean): void {
+  chart.setOption(
+    {
+      dataZoom: [
+        {
+          id: 'history-x-inside',
+          zoomOnMouseWheel: enabled,
+        },
+      ],
+    },
+    { lazyUpdate: true },
+  );
+}
+
 /** Отвечает только за визуальную область графика: placeholder или ECharts canvas. */
 export function HistoryChartArea({
   hasData,
@@ -20,18 +36,61 @@ export function HistoryChartArea({
   option,
   onDataZoom,
 }: HistoryChartAreaProps) {
+  const chartRef = useRef<InstanceType<typeof ReactEChartsCore> | null>(null);
+  const xWheelZoomEnabledRef = useRef(true);
   const onChartEvents = useMemo(
     () => ({
       datazoom: onDataZoom,
     }),
     [onDataZoom],
   );
+  const updateXAxisWheelZoom = useCallback((enabled: boolean) => {
+    const chart = chartRef.current?.getEchartsInstance();
+
+    if (!chart || xWheelZoomEnabledRef.current === enabled) {
+      return;
+    }
+
+    xWheelZoomEnabledRef.current = enabled;
+    setXAxisWheelZoom(chart, enabled);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Shift') {
+        updateXAxisWheelZoom(false);
+      }
+    };
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === 'Shift') {
+        updateXAxisWheelZoom(true);
+      }
+    };
+    const handleBlur = () => updateXAxisWheelZoom(true);
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('blur', handleBlur);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('blur', handleBlur);
+    };
+  }, [updateXAxisWheelZoom]);
+
+  const handleWheelCapture = useCallback(
+    (event: WheelEvent<HTMLDivElement>) => {
+      updateXAxisWheelZoom(!event.shiftKey);
+    },
+    [updateXAxisWheelZoom],
+  );
 
   if (!hasSelection) {
     return <div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>;
   }
 
-  if (loading) {
+  if (!hasData && loading) {
     return <div className="chart-placeholder">Загрузка графика...</div>;
   }
 
@@ -39,5 +98,16 @@ export function HistoryChartArea({
     return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
   }
 
-  return <ReactEChartsCore echarts={echarts} option={option} className="history-chart" onEvents={onChartEvents} lazyUpdate />;
+  return (
+    <div className="history-chart-shell" onWheelCapture={handleWheelCapture}>
+      <ReactEChartsCore
+        ref={chartRef}
+        echarts={echarts}
+        option={option}
+        className="history-chart"
+        onEvents={onChartEvents}
+        lazyUpdate
+      />
+    </div>
+  );
 }

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,
     })),
   });
 

src/styles/charts.css

@@ -1,8 +1,14 @@
+.history-chart-shell,
 .history-chart {
   width: 100%;
   height: 440px;
 }
 
+.history-chart-shell .history-chart {
+  height: 100%;
+}
+
+.chart-section--archive .history-chart-shell,
 .chart-section--archive .history-chart {
   flex: 1;
   min-height: 520px;
@@ -67,6 +73,7 @@
 }
 
 @media (max-width: 680px) {
+  .chart-section--archive .history-chart-shell,
   .chart-section--archive .history-chart,
   .chart-section--archive .chart-placeholder {
     min-height: 420px;

src/styles/components/metrics.css

@@ -15,7 +15,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 5px;
   padding: 12px;
   border: 1px solid rgba(88, 103, 121, 0.42);
   border-radius: 8px;
@@ -27,28 +27,74 @@
     0 6px 14px rgba(0, 0, 0, 0.28);
 }
 
-.metric-widget__tag {
+.metric-widget__id,
-  flex: 0 0 auto;
+.metric-widget__name,
+.metric-widget__reading,
+.metric-widget__value {
   min-width: 0;
-  color: #cbd5e1;
+}
-  font-size: 0.74rem;
+
-  font-weight: 600;
+.metric-widget__id,
+.metric-widget__name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.metric-widget__id {
+  flex: 0 0 auto;
+  color: #64748b;
+  font-size: 0.62rem;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.metric-widget__name {
+  flex: 0 0 auto;
+  color: #e5e7eb;
+  font-size: 0.82rem;
+  font-weight: 760;
   line-height: 1.35;
   white-space: normal;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 
-.metric-widget__value {
+.metric-widget__reading {
   margin-top: auto;
   align-self: flex-end;
-  min-width: 0;
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 5px;
+  max-width: 100%;
+  text-align: right;
+}
+
+.metric-widget__value {
   color: #f8fafc;
-  font-size: 1.1rem;
+  font-size: 1.22rem;
-  font-weight: 700;
+  font-weight: 800;
   font-variant-numeric: tabular-nums;
   line-height: 1.2;
+  overflow: hidden;
   text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-widget__unit {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: #94a3b8;
+  font-size: 0.72rem;
+  font-weight: 650;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .metric-mosaic {

src/utils/format.ts

@@ -1,7 +1,7 @@
 /** Форматирует числовое значение показателя для карточек и мини-плиток. */
-export function formatNumber(value: number): string {
+export function formatNumber(value: number | null): string {
-  if (!Number.isFinite(value)) {
+  if (value === null || !Number.isFinite(value)) {
-    return '-';
+    return '—';
   }
 
   return new Intl.NumberFormat('ru-RU', {

src/utils/metricStatus.ts

@@ -16,8 +16,9 @@ function isConfiguredLimit(value: number | null): value is number {
 export function getMetricStatus(item: CurrentItem, now = Date.now()): MetricStatusInfo {
   const measuredAt = new Date(item.time).getTime();
   const ageSeconds = Number.isFinite(measuredAt) ? Math.max(0, Math.round((now - measuredAt) / 1000)) : Number.POSITIVE_INFINITY;
-  const belowMin = isConfiguredLimit(item.min) && item.value < item.min;
+  const value = item.value;
-  const aboveMax = isConfiguredLimit(item.max) && item.value > item.max;
+  const belowMin = isConfiguredLimit(value) && isConfiguredLimit(item.min) && value < item.min;
+  const aboveMax = isConfiguredLimit(value) && isConfiguredLimit(item.max) && value > item.max;
 
   if (belowMin || aboveMax) {
     return { status: 'critical', label: 'за пределами уставки', ageSeconds };