удаление docker-compose.dev.yml. Удаление container_name из docker-compose. Удаление branch env переменной.

.env.example

@@ -1,4 +1,3 @@
-branch=
 DEV_API_URL=http://localhost:3101
 VITE_DIAGRAM_API_URL=http://localhost:3002
 VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru

docker-compose.dev.yml

@@ -1,19 +0,0 @@
-services:
-  drill-ui-dev:
-    container_name: container-drill-ui${branch:+-${branch}}
-    build:
-      context: .
-      args:
-        VITE_DIAGRAM_API_URL: ${VITE_DIAGRAM_API_URL}
-        VITE_TOIR_LIGHT_ORIGIN: ${VITE_TOIR_LIGHT_ORIGIN}
-        VITE_KEYCLOAK_URL: ${VITE_KEYCLOAK_URL}
-        VITE_KEYCLOAK_REALM: ${VITE_KEYCLOAK_REALM}
-        VITE_KEYCLOAK_CLIENT_ID: ${VITE_KEYCLOAK_CLIENT_ID}
-    expose:
-      - "80"
-    networks:
-      - proxy
-
-networks:
-  proxy:
-    external: true

docker-compose.yml

@@ -1,6 +1,5 @@
 services:
   drill-ui:
-    container_name: container-drill-ui${branch:+-${branch}}
     build:
       context: .
       args:

package-lock.json

@@ -13,7 +13,6 @@
         "echarts-for-react": "^3.0.2",
         "keycloak-js": "^26.2.3",
         "lucide-react": "^0.468.0",
-        "mpegts.js": "^1.8.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.18.0"
@@ -1235,12 +1234,6 @@
         "react": "^15.0.0 || >=16.0.0"
       }
     },
-    "node_modules/es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "license": "MIT"
-    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2021,16 +2014,6 @@
         "node": "*"
       }
     },
-    "node_modules/mpegts.js": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/mpegts.js/-/mpegts.js-1.8.0.tgz",
-      "integrity": "sha512-ZtujqtmTjWgcDDkoOnLvrOKUTO/MKgLHM432zGDI8oPaJ0S+ebPxg1nEpDpLw6I7KmV/GZgUIrfbWi3qqEircg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "es6-promise": "^4.2.5",
-        "webworkify-webpack": "github:xqq/webworkify-webpack"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2571,11 +2554,6 @@
         }
       }
     },
-    "node_modules/webworkify-webpack": {
-      "version": "2.1.5",
-      "resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
-      "license": "MIT"
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -15,7 +15,6 @@
     "echarts-for-react": "^3.0.2",
     "keycloak-js": "^26.2.3",
     "lucide-react": "^0.468.0",
-    "mpegts.js": "^1.8.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.18.0"

src/app/router.tsx

@@ -2,7 +2,6 @@ import { BrowserRouter, Navigate, Route, Routes, useNavigate } from 'react-route
 import { EdgeCurrentPage } from '../features/edge-detail/EdgeCurrentPage';
 import { EdgeDetailPage } from '../features/edge-detail/EdgeDetailPage';
 import { EdgeHistoryPage } from '../features/edge-detail/EdgeHistoryPage';
-import { EdgeVideoPage } from '../features/edge-detail/EdgeVideoPage';
 import { EdgesDashboard } from '../features/edges-dashboard/EdgesDashboard';
 
 function DashboardRoute() {
@@ -20,7 +19,6 @@ export function AppRouter() {
         <Route path="/edges/:edgeId" element={<EdgeDetailPage />} />
         <Route path="/edges/:edgeId/archive" element={<EdgeHistoryPage />} />
         <Route path="/edges/:edgeId/indicators" element={<EdgeCurrentPage />} />
-        <Route path="/edges/:edgeId/video" element={<EdgeVideoPage />} />
         <Route path="*" element={<Navigate to="/edges" replace />} />
       </Routes>
     </BrowserRouter>

src/components/CameraView.tsx

@@ -1,82 +0,0 @@
-import mpegts from 'mpegts.js';
-import { useEffect, useRef, useState } from 'react';
-
-type CameraViewProps = {
-  title?: string;
-  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);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    let player: ReturnType<typeof mpegts.createPlayer> | null = null;
-    const handlePlayerError = () => setError('Ошибка видеопотока');
-
-    if (!video) {
-      return;
-    }
-
-    const clearError = () => setError(null);
-    video.addEventListener('playing', clearError);
-    setError(null);
-
-    if (!mpegts.isSupported()) {
-      setError('Браузер не поддерживает MPEG-TS поток');
-      return () => {
-        video.removeEventListener('playing', clearError);
-      };
-    }
-
-    player = mpegts.createPlayer(
-      { type: 'mpegts', isLive: true, url: wsUrl, hasAudio: false },
-      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(() => undefined);
-    }
-
-    return () => {
-      video.removeEventListener('playing', clearError);
-      player?.off(mpegts.Events.ERROR, handlePlayerError);
-      player?.pause();
-      player?.unload();
-      player?.detachMediaElement();
-      player?.destroy();
-    };
-  }, [wsUrl]);
-
-  return (
-    <article className="camera-view">
-      <video ref={videoRef} className="camera-view__video" controls autoPlay muted playsInline />
-      <div className="camera-view__caption">
-        <strong>{title}</strong>
-        <span>{wsUrl}</span>
-      </div>
-      {error ? <div className="camera-view__error">{error}</div> : null}
-    </article>
-  );
-}

src/components/CameraViewsContainer.tsx

@@ -1,7 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-type CameraViewsContainerProps = PropsWithChildren;
-
-export function CameraViewsContainer({ children }: CameraViewsContainerProps) {
-  return <div className="camera-views-grid">{children}</div>;
-}

src/components/MetricWidget.tsx

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

@@ -1,7 +0,0 @@
-import { getJson } from '../../shared/api/http';
-import { cloudApiUrl } from '../../shared/config/env';
-import type { CameraResponse } from './types';
-
-export function getCameras(edge: string): Promise<CameraResponse> {
-  return getJson<CameraResponse>(cloudApiUrl, '/camera', { edge });
-}

src/entities/camera/types.ts

@@ -1,9 +0,0 @@
-export type CameraItem = {
-  protocol: string;
-  source: string;
-};
-
-export type CameraResponse = {
-  edge: string;
-  items: CameraItem[];
-};

src/entities/current/types.ts

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

src/entities/history/api.ts

@@ -3,6 +3,6 @@ import { cloudApiUrl } from '../../shared/config/env';
 import type { HistoryRequest, HistoryResponse } from './types';
 
 /** Запрашивает исторический ряд с avg-линией и min/max-диапазоном для графика. */
-export function getHistory(params: HistoryRequest, signal?: AbortSignal): Promise<HistoryResponse> {
+export function getHistory(params: HistoryRequest): Promise<HistoryResponse> {
-  return getJson<HistoryResponse>(cloudApiUrl, '/history', params, { signal });
+  return getJson<HistoryResponse>(cloudApiUrl, '/history', params);
 }

src/features/edge-detail/EdgeDetailPage.tsx

@@ -39,7 +39,6 @@ export function EdgeDetailPage() {
         latestUpdatedAt={latestUpdatedAt}
         onOpenArchive={() => navigate(`${edgePath}/archive`)}
         onOpenIndicators={() => navigate(`${edgePath}/indicators`)}
-        onOpenVideo={() => navigate(`${edgePath}/video`)}
       />
     </EdgePageLayout>
   );

src/features/edge-detail/EdgeVideoPage.tsx

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'react-router-dom';
-import { getCameras } from '../../entities/camera/api';
-import { EdgePageLayout } from './components/EdgePageLayout';
-import { VideoView } from './components/VideoView';
-
-export function EdgeVideoPage() {
-  const { edgeId = '' } = useParams();
-  const cameras = useQuery({
-    queryKey: ['camera', edgeId],
-    queryFn: () => getCameras(edgeId),
-    enabled: Boolean(edgeId),
-  });
-  const cameraItems = useMemo(() => cameras.data?.items ?? [], [cameras.data?.items]);
-
-  return (
-    <EdgePageLayout
-      currentEventsConnected={false}
-      edgeId={edgeId}
-      view="video"
-      onRefresh={() => void cameras.refetch()}
-    >
-      <VideoView cameras={cameraItems} loading={cameras.isPending} isError={cameras.isError} error={cameras.error} />
-    </EdgePageLayout>
-  );
-}

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

@@ -5,7 +5,7 @@ import { CalendarDays, CalendarClock, Check, ChevronDown, Clock3, DatabaseZap, S
 import type { CurrentItem } from '../../../entities/current/types';
 import { HistoryChart } from '../../../features/history-chart/HistoryChart';
 import { RANGE_PRESETS, createRange, type DateRangeState } from '../../../features/history/dateRange';
-import { formatNumber, toIsoFromInput } from '../../../utils/format';
+import { toIsoFromInput } from '../../../utils/format';
 import type { HistoryGranularity } from '../../../utils/historyGranularity';
 
 type ArchiveViewProps = {
@@ -191,7 +191,7 @@ export function ArchiveView({
                       {label !== item.tag ? <small>{item.tag}</small> : null}
                     </span>
                     <span className="tag-select-item__side">
-                      <strong>{formatNumber(item.value)}</strong>
+                      <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
                       {selected ? <Check size={15} /> : null}
                     </span>
                   </button>
@@ -202,12 +202,7 @@ export function ArchiveView({
         ) : null}
       </div>
 
-      <div
+      <div className="archive-chart">
-        className="archive-chart"
-        onFocusCapture={() => setSelectorOpen(false)}
-        onPointerDown={() => setSelectorOpen(false)}
-        onPointerEnter={() => setSelectorOpen(false)}
-      >
         <div className="toolbar">
           <div className="segmented">
             {RANGE_PRESETS.map((preset) => (
@@ -254,7 +249,7 @@ export function ArchiveView({
 
         {selectedTags.length ? (
           <HistoryChart
-            key={`${range.from}:${range.to}:${historyAxis.granulate}`}
+            key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
             edge={edgeId}
             from={fromIso}
             to={toIso}

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

@@ -1,4 +1,4 @@
-import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen, Video } from 'lucide-react';
+import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import type { DetailView } from '../types';
 
 type EdgeSidebarProps = {
@@ -56,14 +56,6 @@ export function EdgeSidebar({ collapsed, edgePath, view, onNavigate, onToggleCol
           <Activity size={18} />
           <span className="nav-label">Показатели</span>
         </button>
-        <button
-          className={`nav-item nav-item--button ${view === 'video' ? 'nav-item--active' : ''}`}
-          type="button"
-          onClick={() => onNavigate(`${edgePath}/video`)}
-        >
-          <Video size={18} />
-          <span className="nav-label">Видео</span>
-        </button>
       </nav>
     </aside>
   );

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

@@ -1,4 +1,4 @@
-import { Activity, BarChart3, Video } from 'lucide-react';
+import { Activity, BarChart3, CalendarClock } from 'lucide-react';
 import { formatDateTime } from '../../../utils/format';
 
 type OverviewViewProps = {
@@ -8,7 +8,6 @@ type OverviewViewProps = {
   totalTags: number;
   onOpenArchive: () => void;
   onOpenIndicators: () => void;
-  onOpenVideo: () => void;
 };
 
 export function OverviewView({
@@ -18,7 +17,6 @@ export function OverviewView({
   totalTags,
   onOpenArchive,
   onOpenIndicators,
-  onOpenVideo
 }: OverviewViewProps) {
   return (
     <section className="detail-overview">
@@ -55,9 +53,9 @@ export function OverviewView({
             <BarChart3 size={18} />
             Архив и график
           </button>
-          <button type="button" onClick={onOpenVideo}>
+          <button type="button">
-            <Video size={18} />
+            <CalendarClock size={18} />
-            Видео
+            Техническое обслуживание
           </button>
         </div>
       </section>

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

@@ -1,46 +0,0 @@
-import { Video } from 'lucide-react';
-import { CameraView } from '../../../components/CameraView';
-import { CameraViewsContainer } from '../../../components/CameraViewsContainer';
-import type { CameraItem } from '../../../entities/camera/types';
-
-type VideoViewProps = {
-  cameras: CameraItem[];
-  error: unknown;
-  isError: boolean;
-  loading: boolean;
-};
-
-function createWsUrl(camera: CameraItem): string {
-  const protocol = camera.protocol.replace(/:\/?\/?$/, '');
-  const source = camera.source.replace(/^\/\//, '');
-  return `${protocol}://${source}`;
-}
-
-export function VideoView({ cameras, error, isError, loading }: VideoViewProps) {
-  return (
-    <section className="video-section">
-      <div className="section-header">
-        <div>
-          <span className="page-kicker">
-            <Video size={14} />
-            Видео
-          </span>
-          <h2>Видеопотоки буровой</h2>
-        </div>
-      </div>
-
-      {loading ? <div className="empty-panel">Загрузка камер...</div> : null}
-      {isError ? <div className="empty-panel">Не удалось загрузить камеры: {String(error)}</div> : null}
-      {!loading && !isError && cameras.length === 0 ? <div className="empty-panel">Камеры для этой буровой не настроены</div> : null}
-
-      {!loading && !isError && cameras.length > 0 ? (
-        <CameraViewsContainer>
-          {cameras.map((camera, index) => {
-            const wsUrl = createWsUrl(camera);
-            return <CameraView key={`${camera.protocol}:${camera.source}`} title={`Камера ${index + 1}`} wsUrl={wsUrl} />;
-          })}
-        </CameraViewsContainer>
-      ) : null}
-    </section>
-  );
-}

src/features/edge-detail/types.ts

@@ -1 +1 @@
-export type DetailView = 'overview' | 'archive' | 'indicators' | 'video';
+export type DetailView = 'overview' | 'archive' | 'indicators';

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 && alarmValue.value !== null && alarmValue.value !== 0);
+  const alarmActive = Boolean(alarmValue && Number(alarmValue.value) !== 0);
-  const stateActive = Boolean(mainValue && mainValue.value !== null && mainValue.value !== 0);
+  const stateActive = Boolean(mainValue && Number(mainValue.value) !== 0);
   const title = getNodeTitle(node, mainValue);
   const style: CSSProperties = {
     left: node.position.x,

src/features/history-chart/HistoryChart.tsx

@@ -1,7 +1,6 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
-import type { EChartsOption } from 'echarts';
+import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
-import { getHistoryGranularity, type HistoryAxisLabelFormat } from '../../utils/historyGranularity';
+import type { DataZoomEventBatch, DataZoomState } from './chartTypes';
-import type { DataZoomEventBatch, DataZoomState, HistoryZoomRange } from './chartTypes';
 import { HistoryChartArea } from './HistoryChartArea';
 import { createHistoryChartOptions } from './historyChartOptions';
 import { useHistoryChartQueries } from './useHistoryChartQueries';
@@ -18,108 +17,7 @@ type HistoryChartProps = {
   tagLabels?: Record<string, string>;
 };
 
-const ZOOM_REQUEST_DELAY_MS = 350;
+/** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
-
-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;
-}
-
-/** Вычисляет, какую часть верхнеуровневого периода занимает текущий пользовательский 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,
@@ -130,106 +28,42 @@ export function HistoryChart({
   to,
   tagLabels = {},
 }: HistoryChartProps) {
-  const baseRange = useMemo(
+  const dataZoomRef = useRef<DataZoomState | null>(null);
-    () => createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
+  const lines = useHistoryChartQueries({ edge, from, granulate, tags, to, tagLabels });
-    [from, granulate, labelFormat, tickIntervalMs, to],
+  const series = useHistoryChartSeries(lines);
-  );
-  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,
-    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);
-  const hasData = series.length > 0;
-
-  useEffect(() => {
-    baseRangeRef.current = baseRange;
-    zoomRangeRef.current = baseRange;
-    setZoomRange(baseRange);
-  }, [baseRange]);
-
-  useEffect(() => {
-    zoomRangeRef.current = zoomRange;
-  }, [zoomRange]);
-
-  useEffect(
-    () => () => {
-      if (zoomTimerRef.current) {
-        clearTimeout(zoomTimerRef.current);
-      }
-    },
-    [],
-  );
 
   const option = useMemo(
     () =>
       createHistoryChartOptions({
-        dataZoomState: createDataZoomState(baseRange, zoomRange),
+        dataZoomState: dataZoomRef.current ?? {},
-        from: baseRange.from,
+        from,
-        to: baseRange.to,
+        to,
-        labelFormat: zoomRange.labelFormat,
+        labelFormat,
         legendData,
         series,
-        tickIntervalMs: zoomRange.tickIntervalMs,
+        tickIntervalMs,
       }),
-    [baseRange, legendData, series, zoomRange],
+    [from, labelFormat, legendData, series, tickIntervalMs, to],
   );
 
-  // Во время 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);
+    const state = event.batch?.[0] ?? event;
-
+    dataZoomRef.current = {
-    if (!state) {
+      start: state.start,
-      return;
+      end: state.end,
-    }
+      startValue: state.startValue,
-
+      endValue: state.endValue,
-    const baseRange = baseRangeRef.current;
+    };
-    const currentRange = zoomRangeRef.current;
-    const nextRange = getZoomRangeFromEvent(state, baseRange);
-
-    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 (
     <HistoryChartArea
-      hasData={displayHasData}
+      hasData={series.length > 0}
       hasSelection={tags.length > 0}
       loading={loading}
-      option={displayOption}
+      option={option}
       onDataZoom={handleDataZoom}
     />
   );

src/features/history-chart/HistoryChartArea.tsx

@@ -1,7 +1,6 @@
 import type { EChartsOption } from 'echarts';
 import ReactEChartsCore from 'echarts-for-react/esm/core.js';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useMemo } from 'react';
-import type { WheelEvent } from 'react';
 import type { DataZoomEventBatch } from './chartTypes';
 import { echarts } from './historyChartEcharts';
 
@@ -13,21 +12,6 @@ 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,
@@ -36,61 +20,18 @@ 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 (!hasData && loading) {
+  if (loading) {
     return <div className="chart-placeholder">Загрузка графика...</div>;
   }
 
@@ -98,16 +39,5 @@ export function HistoryChartArea({
     return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
   }
 
-  return (
+  return <ReactEChartsCore echarts={echarts} option={option} className="history-chart" onEvents={onChartEvents} lazyUpdate />;
-    <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/chartTypes.ts

@@ -1,27 +1,12 @@
-import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
+export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
-
-export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number, slotMs?: number];
-
-export type HistoryBucketValue = [time: number, avg: number, min: number, max: number, count: number, slotMs: number];
-
-export type HistoryZoomRange = {
-  from: string;
-  to: string;
-  granulate: string;
-  tickIntervalMs?: number;
-  labelFormat?: HistoryAxisLabelFormat;
-};
 
 export type TooltipParam = {
-  color?: string;
   marker?: string;
   seriesName?: string;
   value?: unknown;
 };
 
 export type DataZoomState = {
-  dataZoomId?: string;
-  dataZoomIndex?: number;
   start?: number;
   end?: number;
   startValue?: number;

src/features/history-chart/historyChartEcharts.ts

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

src/features/history-chart/historyChartFormat.ts

@@ -60,71 +60,6 @@ function formatChartValue(value: number): string {
   }).format(value);
 }
 
-/** Форматирует полную дату и время для начала/конца интервала в tooltip. */
-function formatTooltipDateTime(value: number): string {
-  return new Intl.DateTimeFormat('ru-RU', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  }).format(new Date(value));
-}
-
-/** Форматирует только время, когда конец интервала находится в тот же день. */
-function formatTooltipTime(value: number): string {
-  return new Intl.DateTimeFormat('ru-RU', {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  }).format(new Date(value));
-}
-
-/** Проверяет, можно ли показать конец интервала без повторения даты. */
-function isSameDate(first: number, second: number): boolean {
-  const firstDate = new Date(first);
-  const secondDate = new Date(second);
-
-  return (
-    firstDate.getFullYear() === secondDate.getFullYear()
-    && firstDate.getMonth() === secondDate.getMonth()
-    && firstDate.getDate() === secondDate.getDate()
-  );
-}
-
-/** Показывает bucket графика как интервал текущей грануляции, а не как одну точку времени. */
-function formatTooltipInterval(value: AvgPointValue): string {
-  const time = value[0];
-  const slotMs = value[5];
-
-  if (!slotMs) {
-    return formatTooltipDateTime(time);
-  }
-
-  const from = time - slotMs / 2;
-  const to = time + slotMs / 2;
-
-  if (isSameDate(from, to)) {
-    return `${formatTooltipDateTime(from)} — ${formatTooltipTime(to)}`;
-  }
-
-  return `${formatTooltipDateTime(from)} — ${formatTooltipDateTime(to)}`;
-}
-
-/** Форматирует значение tooltip: одно число для min=avg=max или среднее с диапазоном. */
-function formatTooltipValue(value: AvgPointValue): string {
-  const avg = formatChartValue(value[1]);
-  const min = formatChartValue(value[2]);
-  const max = formatChartValue(value[3]);
-
-  if (min === avg && avg === max) {
-    return avg;
-  }
-
-  return `сред. ${avg} (${min} .. ${max})`;
-}
-
 function isAvgPointValue(value: unknown): value is AvgPointValue {
   return Array.isArray(value) && value.length >= 5 && value.every((item) => typeof item === 'number');
 }
@@ -141,15 +76,22 @@ export function formatTooltip(params: unknown): string {
     return '';
   }
 
-  const header = formatTooltipInterval(firstValue);
+  const header = new Intl.DateTimeFormat('ru-RU', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(new Date(firstValue[0]));
 
   const rows = avgItems.map((item) => {
     const value = item.value as AvgPointValue;
     return [
       '<div class="chart-tooltip-row">',
-      `<span class="chart-tooltip-label" style="--chart-tooltip-marker-color:${item.color ?? 'currentColor'};">${item.seriesName ?? ''}</span>`,
+      `<span>${item.marker ?? ''}${item.seriesName ?? ''}</span>`,
       '<strong>',
-      formatTooltipValue(value),
+      `min ${formatChartValue(value[2])} · avg ${formatChartValue(value[1])} · max ${formatChartValue(value[3])}`,
       value[4] > 1 ? ` · ${value[4]} точек` : '',
       '</strong>',
       '</div>',

src/features/history-chart/historyChartOptions.ts

@@ -45,16 +45,13 @@ export function createHistoryChartOptions({
     legend: {
       type: 'scroll',
       top: 0,
-      icon: 'rect',
-      itemWidth: 18,
-      itemHeight: 3,
       data: legendData,
       textStyle: { color: '#cbd5e1' },
     },
     grid: {
       top: 54,
       left: 48,
-      right: 56,
+      right: 24,
       bottom: 72,
     },
     xAxis: {
@@ -79,11 +76,7 @@ export function createHistoryChartOptions({
     },
     dataZoom: [
       {
-        id: 'history-x-inside',
         type: 'inside',
-        xAxisIndex: 0,
-        zoomOnMouseWheel: true,
-        moveOnMouseWheel: false,
         throttle: 80,
         start: dataZoomState.start,
         end: dataZoomState.end,
@@ -91,9 +84,7 @@ export function createHistoryChartOptions({
         endValue: dataZoomState.endValue,
       },
       {
-        id: 'history-x-slider',
         type: 'slider',
-        xAxisIndex: 0,
         bottom: 18,
         height: 28,
         borderColor: 'rgba(148, 163, 184, 0.24)',
@@ -108,30 +99,6 @@ export function createHistoryChartOptions({
         startValue: dataZoomState.startValue,
         endValue: dataZoomState.endValue,
       },
-      {
-        id: 'history-y-inside',
-        type: 'inside',
-        yAxisIndex: 0,
-        filterMode: 'none',
-        zoomOnMouseWheel: 'shift',
-        moveOnMouseWheel: false,
-        throttle: 80,
-      },
-      {
-        id: 'history-y-slider',
-        type: 'slider',
-        yAxisIndex: 0,
-        filterMode: 'none',
-        right: 8,
-        width: 12,
-        borderColor: 'rgba(148, 163, 184, 0.24)',
-        fillerColor: 'rgba(91, 143, 249, 0.18)',
-        handleStyle: {
-          color: '#d4a574',
-          borderColor: '#e8c9a0',
-        },
-        textStyle: { color: '#94a3b8' },
-      },
     ],
     series,
   };

src/features/history-chart/historyChartSeries.ts

@@ -1,13 +1,6 @@
-import type {
+import type { SeriesOption } from 'echarts';
-  CustomSeriesRenderItemAPI,
-  CustomSeriesRenderItemParams,
-  CustomSeriesRenderItemReturn,
-  SeriesOption,
-} from 'echarts';
-import { graphic } from 'echarts/core';
 import type { HistoryPoint } from '../../entities/history/types';
-import { parseGranulateMs } from '../../utils/historyGranularity';
+import type { AvgPointValue } from './chartTypes';
-import type { HistoryBucketValue } from './chartTypes';
 
 export const SERIES_COLORS = [
   '#5B8FF9',
@@ -20,134 +13,89 @@ export const SERIES_COLORS = [
   '#A7B3FF',
 ];
 
-type CartesianCoordSys = {
+/** Создает avg-линию, вертикальные min/max-отрезки и точки экстремумов для одной серии. */
-  x: number;
+export function createSeriesOptions(points: HistoryPoint[], index: number, label: string): SeriesOption[] {
-  y: number;
-  width: number;
-  height: number;
-};
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, value));
-}
-
-function createAvgGradientStops(color: string, avgOffset: number) {
-  const softZone = 0.18;
-
-  return [
-    { offset: 0, color: `${color}00` },
-    { offset: clamp(avgOffset - softZone, 0, 1), color: `${color}22` },
-    { offset: avgOffset, color: `${color}70` },
-    { offset: clamp(avgOffset + softZone, 0, 1), color: `${color}22` },
-    { offset: 1, color: `${color}00` },
-  ].sort((first, second) => first.offset - second.offset);
-}
-
-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;
-    }
-
-    const avgOffset = clamp((avgY - rangeShape.y) / rangeShape.height, 0, 1);
-
-    return {
-      type: 'group',
-      children: [
-        {
-          type: 'rect',
-          shape: rangeShape,
-          style: {
-            fill: new graphic.LinearGradient(0, 0, 0, 1, createAvgGradientStops(color, avgOffset)),
-          },
-        },
-        ...(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 data = createBucketData(points, parseGranulateMs(granulate));
+  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],
+    ];
+  });
 
   return [
     {
       name: label,
-      type: 'custom',
+      type: 'line',
-      data,
+      data: spreadData,
-      renderItem: renderBucket(color),
+      showSymbol: false,
-      encode: {
+      connectNulls: false,
-        x: 0,
+      silent: true,
-        y: [1, 2, 3],
+      tooltip: { show: false },
-      },
+      legendHoverLink: false,
-      itemStyle: {
+      lineStyle: {
+        width: 1,
+        opacity: 0.42,
         color,
       },
       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: {
+        focus: 'series',
+      },
       z: 3,
-    } as SeriesOption,
+    },
   ];
 }

src/features/history-chart/useHistoryChartQueries.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { keepPreviousData, useQueries } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
 import { getHistory } from '../../entities/history/api';
 import type { HistoryPoint } from '../../entities/history/types';
 
@@ -33,9 +33,8 @@ export function useHistoryChartQueries({
   const queries = useQueries({
     queries: tags.map((tag) => ({
       queryKey: ['history', edge, tag, from, to, granulate],
-      queryFn: ({ signal }: { signal: AbortSignal }) => getHistory({ edge, tag, from, to, granulate }, signal),
+      queryFn: () => getHistory({ edge, tag, from, to, granulate }),
       enabled,
-      placeholderData: keepPreviousData,
     })),
   });
 

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[], granulate: string): SeriesOption[] {
+export function useHistoryChartSeries(lines: HistoryChartLineData[]): SeriesOption[] {
   return useMemo(
     () =>
       lines.flatMap((line) =>
-        line.rows.length ? createSeriesOptions(line.rows, line.index, line.label, granulate) : [],
+        line.rows.length ? createSeriesOptions(line.rows, line.index, line.label) : [],
       ),
-    [granulate, lines],
+    [lines],
   );
 }

src/styles/charts.css

@@ -1,14 +1,8 @@
-.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;
@@ -42,7 +36,7 @@
   margin-top: 5px;
 }
 
-.chart-tooltip-label {
+.chart-tooltip-row span {
   min-width: 0;
   overflow: hidden;
   color: #cbd5e1;
@@ -50,16 +44,6 @@
   white-space: nowrap;
 }
 
-.chart-tooltip-label::before {
-  content: '';
-  display: inline-block;
-  width: 18px;
-  height: 3px;
-  margin-right: 6px;
-  vertical-align: middle;
-  background: var(--chart-tooltip-marker-color, currentColor);
-}
-
 .chart-tooltip-row strong {
   color: #f8fafc;
   font-variant-numeric: tabular-nums;
@@ -73,7 +57,6 @@
 }
 
 @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: 5px;
+  gap: 10px;
   padding: 12px;
   border: 1px solid rgba(88, 103, 121, 0.42);
   border-radius: 8px;
@@ -27,74 +27,28 @@
     0 6px 14px rgba(0, 0, 0, 0.28);
 }
 
-.metric-widget__id,
+.metric-widget__tag {
-.metric-widget__name,
+  flex: 0 0 auto;
-.metric-widget__reading,
-.metric-widget__value {
   min-width: 0;
-}
+  color: #cbd5e1;
-
+  font-size: 0.74rem;
-.metric-widget__id,
+  font-weight: 600;
-.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__reading {
+.metric-widget__value {
   margin-top: auto;
   align-self: flex-end;
-  display: inline-flex;
+  min-width: 0;
-  align-items: baseline;
-  justify-content: flex-end;
-  gap: 5px;
-  max-width: 100%;
-  text-align: right;
-}
-
-.metric-widget__value {
   color: #f8fafc;
-  font-size: 1.22rem;
+  font-size: 1.1rem;
-  font-weight: 800;
+  font-weight: 700;
   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/styles/detail.css

@@ -2,5 +2,4 @@
 @import './detail/overview.css';
 @import './detail/indicators.css';
 @import './detail/archive.css';
-@import './detail/video.css';
 @import './detail/electrical.css';

src/styles/detail/video.css

@@ -1,87 +0,0 @@
-.video-section {
-  min-height: 0;
-  padding: 18px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background:
-    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.08), transparent 38%),
-    linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(2, 6, 23, 0.78));
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    0 18px 36px rgba(0, 0, 0, 0.28);
-}
-
-.camera-views-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.camera-view {
-  position: relative;
-  overflow: hidden;
-  min-width: 0;
-  border: 1px solid rgba(88, 103, 121, 0.42);
-  border-radius: 8px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
-    #000;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.05),
-    0 10px 22px rgba(0, 0, 0, 0.32);
-}
-
-.camera-view__video {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  display: block;
-  background: #000;
-  object-fit: contain;
-}
-
-.camera-view__caption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-height: 38px;
-  padding: 0 10px;
-  border-top: 1px solid rgba(148, 163, 184, 0.16);
-  background: rgba(2, 6, 23, 0.88);
-  color: #cbd5e1;
-}
-
-.camera-view__caption strong,
-.camera-view__caption span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.camera-view__caption strong {
-  flex: 0 0 auto;
-  color: #f8fafc;
-  font-size: 0.82rem;
-}
-
-.camera-view__caption span {
-  font-size: 0.72rem;
-}
-
-.camera-view__error {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  padding: 18px;
-  background: rgba(2, 6, 23, 0.82);
-  color: #fca5a5;
-  text-align: center;
-}
-
-@media (max-width: 900px) {
-  .camera-views-grid {
-    grid-template-columns: 1fr;
-  }
-}

src/utils/format.ts

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

src/utils/historyGranularity.ts

@@ -25,19 +25,6 @@ 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;
@@ -73,12 +60,3 @@ 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;
-}

src/utils/metricStatus.ts

@@ -16,9 +16,8 @@ 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 value = item.value;
+  const belowMin = isConfiguredLimit(item.min) && item.value < item.min;
-  const belowMin = isConfiguredLimit(value) && isConfiguredLimit(item.min) && value < item.min;
+  const aboveMax = isConfiguredLimit(item.max) && item.value > item.max;
-  const aboveMax = isConfiguredLimit(value) && isConfiguredLimit(item.max) && value > item.max;
 
   if (belowMin || aboveMax) {
     return { status: 'critical', label: 'за пределами уставки', ageSeconds };