BUR-63 Добавлен abortSignal для прекращения "не успевших" запросов по тегам при сттарте нового запроса диапзона дат

Reviewed-on: #10

.env.example

@@ -1,6 +1,7 @@
-VITE_CLOUD_API_URL=http://localhost:3101
+branch=
+DEV_API_URL=http://localhost:3101
 VITE_DIAGRAM_API_URL=http://localhost:3002
 VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru
-VITE_KEYCLOAK_URL=
+VITE_KEYCLOAK_URL=https://sso.greact.ru
-VITE_KEYCLOAK_REALM=
+VITE_KEYCLOAK_REALM=toir
-VITE_KEYCLOAK_CLIENT_ID=
+VITE_KEYCLOAK_CLIENT_ID=localhost

.env.local.example

@@ -1,10 +0,0 @@
-VITE_CLOUD_API_URL=http://localhost:3101
-VITE_DIAGRAM_API_URL=http://localhost:3002
-
-# Если эти переменные не заданы, greact.drill.ui работает без SSO для локальной разработки.
-VITE_KEYCLOAK_URL=https://sso.greact.ru
-VITE_KEYCLOAK_REALM=toir
-VITE_KEYCLOAK_CLIENT_ID=drill-ui-frontend
-
-# Origin встроенного ТОиР light. По умолчанию используется https://toir-light.greact.ru.
-VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru

Dockerfile

@@ -7,13 +7,11 @@ FROM node:22-alpine AS build
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ARG VITE_CLOUD_API_URL
 ARG VITE_DIAGRAM_API_URL
 ARG VITE_TOIR_LIGHT_ORIGIN
 ARG VITE_KEYCLOAK_URL
 ARG VITE_KEYCLOAK_REALM
 ARG VITE_KEYCLOAK_CLIENT_ID
-ENV VITE_CLOUD_API_URL=$VITE_CLOUD_API_URL
 ENV VITE_DIAGRAM_API_URL=$VITE_DIAGRAM_API_URL
 ENV VITE_TOIR_LIGHT_ORIGIN=$VITE_TOIR_LIGHT_ORIGIN
 ENV VITE_KEYCLOAK_URL=$VITE_KEYCLOAK_URL

docker-compose.dev.yml

@@ -0,0 +1,19 @@
+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,9 +1,9 @@
 services:
   drill-ui:
+    container_name: container-drill-ui${branch:+-${branch}}
     build:
       context: .
       args:
-        VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL}
         VITE_DIAGRAM_API_URL: ${VITE_DIAGRAM_API_URL}
         VITE_TOIR_LIGHT_ORIGIN: ${VITE_TOIR_LIGHT_ORIGIN}
         VITE_KEYCLOAK_URL: ${VITE_KEYCLOAK_URL}
@@ -11,7 +11,9 @@ services:
         VITE_KEYCLOAK_CLIENT_ID: ${VITE_KEYCLOAK_CLIENT_ID}
     expose:
       - "80"
+    networks:
+      - proxy
 
 networks:
-  external:
+  proxy:
-    true
+    external: true

nginx.conf

@@ -7,5 +7,10 @@ server {
 
   location / {
     try_files $uri $uri/ /index.html;
+
+    # отключаем кеширование вообще пока активная разработка
+    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+    add_header Pragma "no-cache";
+    add_header Expires "0";
   }
 }

src/api/cloud.ts

@@ -5,6 +5,6 @@ export type { EdgeItem, EdgeResponse } from '../entities/edge/types';
 export { getHealth } from '../entities/health/api';
 export type { HealthResponse } from '../entities/health/types';
 export { getHistory } from '../entities/history/api';
-export type { HistoryPoint, HistoryRequest, HistoryResponse, HistorySeries } from '../entities/history/types';
+export type { HistoryPoint, HistoryRequest, HistoryResponse } from '../entities/history/types';
 export { getTags } from '../entities/tag/api';
 export type { TagItem, TagResponse } from '../entities/tag/types';

src/components/MetricWidget.tsx

@@ -0,0 +1,17 @@
+import type { CurrentItem } from '../entities/current/types';
+import { formatNumber } from '../utils/format';
+
+type MetricWidgetProps = {
+  item: CurrentItem;
+};
+
+export function MetricWidget({ item }: MetricWidgetProps) {
+  const title = item.name?.trim() || item.tag;
+
+  return (
+    <article className="metric-widget" title={`${title} (${item.tag})`}>
+      <span className="metric-widget__tag">{title}</span>
+      <strong className="metric-widget__value">{formatNumber(item.value)}</strong>
+    </article>
+  );
+}

src/components/MetricWidgetsContainer.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+type MetricWidgetsContainerProps = PropsWithChildren;
+
+export function MetricWidgetsContainer({ children }: MetricWidgetsContainerProps) {
+  return <div className="metric-widgets-grid">{children}</div>;
+}

src/entities/current/api.ts

@@ -1,4 +1,4 @@
-import { getJson } from '../../shared/api/http';
+import { buildApiUrl, getJson } from '../../shared/api/http';
 import { cloudApiUrl } from '../../shared/config/env';
 import type { CurrentResponse } from './types';
 
@@ -9,8 +9,5 @@ export function getCurrent(edge: string, tags?: string[]): Promise<CurrentRespon
 
 /** Формирует URL SSE-потока текущих значений. */
 export function getCurrentEventsUrl(edge: string, tags?: string[]): string {
-  const url = new URL('/current/events', cloudApiUrl);
+  return buildApiUrl(cloudApiUrl, '/current/events', { edge, tags });
-  url.searchParams.set('edge', edge);
-  tags?.forEach((tag) => url.searchParams.append('tags', tag));
-  return url.toString();
 }

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): Promise<HistoryResponse> {
+export function getHistory(params: HistoryRequest, signal?: AbortSignal): Promise<HistoryResponse> {
-  return getJson<HistoryResponse>(cloudApiUrl, '/history', params);
+  return getJson<HistoryResponse>(cloudApiUrl, '/history', params, { signal });
 }

src/entities/history/types.ts

@@ -1,24 +1,13 @@
 export type HistoryPoint = {
-  t: number;
+  time: string;
-  min: number;
+  min_value: number;
-  avg: number;
+  avg_value: number;
-  max: number;
+  max_value: number;
-  count: number;
+  point_count: number;
-};
-
-export type HistorySeries = {
-  edge: string;
-  tag: string;
-  points: HistoryPoint[];
 };
 
 export type HistoryResponse = {
-  edge: string;
+  rows: HistoryPoint[];
-  tag: string;
-  granulate: string;
-  series: HistorySeries[];
-  from: string;
-  to: string;
 };
 
 export type HistoryRequest = {

src/features/edge-detail/EdgeHistoryPage.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { getCurrent } from '../../entities/current/api';
-import { getHistory } from '../../entities/history/api';
 import { toIsoFromInput } from '../../utils/format';
 import { getHistoryGranularity } from '../../utils/historyGranularity';
 import { createCurrentTagLabels, filterCurrentItems } from '../current/model';
@@ -13,6 +12,7 @@ import { EdgePageLayout } from './components/EdgePageLayout';
 
 export function EdgeHistoryPage() {
   const { edgeId = '' } = useParams();
+  const queryClient = useQueryClient();
   const [search, setSearch] = useState('');
   const [range, setRange] = useState(() => createRange(24));
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
@@ -30,23 +30,8 @@ export function EdgeHistoryPage() {
   const from = toIsoFromInput(range.from) as string;
   const to = toIsoFromInput(range.to) as string;
   const historyGranularity = useMemo(() => getHistoryGranularity(from, to), [from, to]);
-  const selectedTag = selectedTags[0];
-  const history = useQuery({
-    queryKey: ['history', edgeId, selectedTag, from, to, historyGranularity.granulate],
-    queryFn: () =>
-      getHistory({
-        edge: edgeId,
-        tag: selectedTag as string,
-        from,
-        to,
-        granulate: historyGranularity.granulate,
-      }),
-    enabled: Boolean(edgeId && selectedTag),
-    refetchInterval: false,
-  });
-
   const toggleTag = (tag: string) => {
-    setSelectedTags((prev) => (prev.includes(tag) ? [] : [tag]));
+    setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((selected) => selected !== tag) : [...prev, tag]));
   };
 
   const selectFirstTags = () => {
@@ -54,7 +39,7 @@ export function EdgeHistoryPage() {
   };
 
   const selectVisibleTags = () => {
-    setSelectedTags(visibleItems[0] ? [visibleItems[0].tag] : []);
+    setSelectedTags((prev) => Array.from(new Set([...prev, ...visibleItems.map((item) => item.tag)])));
   };
 
   const clearVisibleTags = () => {
@@ -69,16 +54,15 @@ export function EdgeHistoryPage() {
       view="archive"
       onRefresh={() => {
         void current.refetch();
-        void history.refetch();
+        void queryClient.invalidateQueries({ queryKey: ['history', edgeId] });
       }}
     >
       <ArchiveView
+        edgeId={edgeId}
         items={visibleItems}
         search={search}
         selectedTags={selectedTags}
-        history={history.data}
+        historyGranulate={historyGranularity.granulate}
-        historyLoading={history.isPending && selectedTags.length > 0}
-        historyGranulate={history.data?.granulate ?? historyGranularity.granulate}
         historyAxis={historyGranularity}
         range={range}
         onSearchChange={setSearch}

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

@@ -1,20 +1,18 @@
 import { useState } from 'react';
 import type { RefObject } from 'react';
 import { useRef } from 'react';
-import { CalendarDays, CalendarClock, ChevronDown, Clock3, DatabaseZap, Search } from 'lucide-react';
+import { CalendarDays, CalendarClock, Check, ChevronDown, Clock3, DatabaseZap, Search } from 'lucide-react';
 import type { CurrentItem } from '../../../entities/current/types';
-import type { HistoryResponse } from '../../../entities/history/types';
 import { HistoryChart } from '../../../features/history-chart/HistoryChart';
 import { RANGE_PRESETS, createRange, type DateRangeState } from '../../../features/history/dateRange';
 import { toIsoFromInput } from '../../../utils/format';
 import type { HistoryGranularity } from '../../../utils/historyGranularity';
 
 type ArchiveViewProps = {
+  edgeId: string;
   getTagLabel: (tag: string) => string;
-  history?: HistoryResponse;
   historyAxis: HistoryGranularity;
   historyGranulate?: string;
-  historyLoading: boolean;
   items: CurrentItem[];
   range: DateRangeState;
   search: string;
@@ -78,11 +76,10 @@ function DateRangeField({ icon, inputRef, type, value, onChange }: DateRangeFiel
 }
 
 export function ArchiveView({
+  edgeId,
   getTagLabel,
-  history,
   historyAxis,
   historyGranulate,
-  historyLoading,
   items,
   range,
   search,
@@ -103,6 +100,8 @@ export function ArchiveView({
   const fromTimeRef = useRef<HTMLInputElement>(null);
   const toDateRef = useRef<HTMLInputElement>(null);
   const toTimeRef = useRef<HTMLInputElement>(null);
+  const fromIso = toIsoFromInput(range.from) as string;
+  const toIso = toIsoFromInput(range.to) as string;
   const updateRangePart = (rangePart: RangePart, inputPart: RangeInputPart, value: string) => {
     onRangeChange({
       ...range,
@@ -185,12 +184,16 @@ export function ArchiveView({
                     className={`tag-select-item ${selected ? 'tag-select-item--selected' : ''}`}
                     title={item.tag}
                     onClick={() => onToggleTag(item.tag)}
+                    aria-pressed={selected}
                   >
                     <span className="tag-select-item__name">
                       <span>{label}</span>
                       {label !== item.tag ? <small>{item.tag}</small> : null}
                     </span>
-                    <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
+                    <span className="tag-select-item__side">
+                      <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
+                      {selected ? <Check size={15} /> : null}
+                    </span>
                   </button>
                 );
               })}
@@ -199,7 +202,12 @@ export function ArchiveView({
         ) : null}
       </div>
 
-      <div className="archive-chart">
+      <div
+        className="archive-chart"
+        onFocusCapture={() => setSelectorOpen(false)}
+        onPointerDown={() => setSelectorOpen(false)}
+        onPointerEnter={() => setSelectorOpen(false)}
+      >
         <div className="toolbar">
           <div className="segmented">
             {RANGE_PRESETS.map((preset) => (
@@ -246,13 +254,14 @@ export function ArchiveView({
 
         {selectedTags.length ? (
           <HistoryChart
-            key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
+            key={`${range.from}:${range.to}:${historyAxis.granulate}`}
-            data={history}
+            edge={edgeId}
-            loading={historyLoading}
+            from={fromIso}
-            from={toIsoFromInput(range.from)}
+            to={toIso}
-            to={toIsoFromInput(range.to)}
+            granulate={historyAxis.granulate}
             tickIntervalMs={historyAxis.tickIntervalMs}
             labelFormat={historyAxis.labelFormat}
+            tags={selectedTags}
             tagLabels={tagLabels}
           />
         ) : (

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

@@ -1,9 +1,7 @@
-import { useMemo, useState } from 'react';
 import { Search } from 'lucide-react';
 import type { CurrentItem } from '../../../entities/current/types';
-import { MetricCard } from '../../../components/MetricCard';
+import { MetricWidget } from '../../../components/MetricWidget';
-import { formatNumber } from '../../../utils/format';
+import { MetricWidgetsContainer } from '../../../components/MetricWidgetsContainer';
-import { getMetricStatus } from '../../../utils/metricStatus';
 
 type IndicatorsViewProps = {
   error: unknown;
@@ -26,19 +24,6 @@ export function IndicatorsView({
   onSearchChange,
   onToggleTag,
 }: IndicatorsViewProps) {
-  const [displayMode, setDisplayMode] = useState<'overview' | 'cards'>('overview');
-  const itemStatuses = useMemo(() => {
-    const now = Date.now();
-    return items.map((item) => ({ item, statusInfo: getMetricStatus(item, now) }));
-  }, [items]);
-  const statusCounts = itemStatuses.reduce(
-    (counts, { statusInfo }) => {
-      counts[statusInfo.status] += 1;
-      return counts;
-    },
-    { normal: 0, warning: 0, critical: 0 },
-  );
-
   return (
     <section className="tags-section">
       <div className="section-header">
@@ -50,22 +35,6 @@ export function IndicatorsView({
           <h2>Текущие значения</h2>
         </div>
         <div className="indicator-controls">
-          <div className="view-switch" aria-label="Режим отображения показателей">
-            <button
-              type="button"
-              className={displayMode === 'overview' ? 'view-switch__button--active' : ''}
-              onClick={() => setDisplayMode('overview')}
-            >
-              Картина
-            </button>
-            <button
-              type="button"
-              className={displayMode === 'cards' ? 'view-switch__button--active' : ''}
-              onClick={() => setDisplayMode('cards')}
-            >
-              Карточки
-            </button>
-          </div>
           <label className="search-box">
             <Search size={16} />
             <input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск показателя" />
@@ -78,18 +47,6 @@ export function IndicatorsView({
           <span>Всего</span>
           <strong>{items.length}</strong>
         </div>
-        <div>
-          <span>В норме</span>
-          <strong>{statusCounts.normal}</strong>
-        </div>
-        <div>
-          <span>Предупреждение</span>
-          <strong>{statusCounts.warning}</strong>
-        </div>
-        <div>
-          <span>Критично</span>
-          <strong>{statusCounts.critical}</strong>
-        </div>
         <div>
           <span>На графике</span>
           <strong>{selectedTags.length}</strong>
@@ -98,35 +55,44 @@ export function IndicatorsView({
 
       {isError ? (
         <div className="empty-panel">Не удалось загрузить текущие значения: {String(error)}</div>
-      ) : displayMode === 'overview' ? (
-        <div className="metric-mosaic">
-          {itemStatuses.map(({ item, statusInfo }) => (
-            <button
-              key={`${item.edge}:${item.tag}`}
-              type="button"
-              className={`metric-tile metric-tile--${statusInfo.status} ${selectedTags.includes(item.tag) ? 'metric-tile--selected' : ''}`}
-              title={`${getTagLabel(item.tag)} (${item.tag}): ${formatNumber(item.value)} · ${statusInfo.label}`}
-              onClick={() => onToggleTag(item.tag)}
-            >
-              <span className="metric-tile__status" />
-              <span className="metric-tile__tag">{getTagLabel(item.tag)}</span>
-              <strong>{formatNumber(item.value)}</strong>
-            </button>
-          ))}
-        </div>
       ) : (
-        <div className="metric-grid">
+        <>
-          {itemStatuses.map(({ item, statusInfo }) => (
+          {/* displayMode === 'overview' ? (
-            <MetricCard
+            <div className="metric-mosaic">
-              key={`${item.edge}:${item.tag}`}
+              {itemStatuses.map(({ item, statusInfo }) => (
-              item={item}
+                <button
-              displayName={getTagLabel(item.tag)}
+                  key={`${item.edge}:${item.tag}`}
-              statusInfo={statusInfo}
+                  type="button"
-              selected={selectedTags.includes(item.tag)}
+                  className={`metric-tile metric-tile--${statusInfo.status} ${selectedTags.includes(item.tag) ? 'metric-tile--selected' : ''}`}
-              onToggle={onToggleTag}
+                  title={`${getTagLabel(item.tag)} (${item.tag}): ${formatNumber(item.value)} · ${statusInfo.label}`}
-            />
+                  onClick={() => onToggleTag(item.tag)}
-          ))}
+                >
-        </div>
+                  <span className="metric-tile__status" />
+                  <span className="metric-tile__tag">{getTagLabel(item.tag)}</span>
+                  <strong>{formatNumber(item.value)}</strong>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="metric-grid">
+              {itemStatuses.map(({ item, statusInfo }) => (
+                <MetricCard
+                  key={`${item.edge}:${item.tag}`}
+                  item={item}
+                  displayName={getTagLabel(item.tag)}
+                  statusInfo={statusInfo}
+                  selected={selectedTags.includes(item.tag)}
+                  onToggle={onToggleTag}
+                />
+              ))}
+            </div>
+          ) */}
+          <MetricWidgetsContainer>
+            {items.map((item) => (
+              <MetricWidget key={item.tag} item={item} />
+            ))}
+          </MetricWidgetsContainer>
+        </>
       )}
     </section>
   );

src/features/history-chart/HistoryChart.tsx

@@ -1,92 +1,79 @@
-import { LineChart, ScatterChart } from 'echarts/charts';
+import { useCallback, useMemo, useRef } from 'react';
-import {
-  DataZoomComponent,
-  GridComponent,
-  LegendComponent,
-  TooltipComponent,
-} from 'echarts/components';
-import * as echarts from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import ReactEChartsCore from 'echarts-for-react/esm/core.js';
-import { useMemo, useRef } from 'react';
-import type { HistoryResponse } from '../../entities/history/types';
 import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
 import type { DataZoomEventBatch, DataZoomState } from './chartTypes';
+import { HistoryChartArea } from './HistoryChartArea';
 import { createHistoryChartOptions } from './historyChartOptions';
-
+import { useHistoryChartQueries } from './useHistoryChartQueries';
-echarts.use([
+import { useHistoryChartSeries } from './useHistoryChartSeries';
-  LineChart,
-  ScatterChart,
-  GridComponent,
-  LegendComponent,
-  TooltipComponent,
-  DataZoomComponent,
-  CanvasRenderer,
-]);
 
 type HistoryChartProps = {
-  data?: HistoryResponse;
+  edge: string;
-  loading: boolean;
+  from: string;
-  from?: string;
+  granulate: string;
-  to?: string;
-  tickIntervalMs?: number;
   labelFormat?: HistoryAxisLabelFormat;
+  tags: string[];
+  tickIntervalMs?: number;
+  to: string;
   tagLabels?: Record<string, string>;
 };
 
-/** Рисует avg-линию, min/max-точки и вертикальный диапазон для агрегированной истории. */
+/** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
+function isXAxisDataZoom(state: DataZoomState): boolean {
+  return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
+}
+
 export function HistoryChart({
-  data,
+  edge,
-  loading,
   from,
-  to,
+  granulate,
-  tickIntervalMs,
   labelFormat,
+  tags,
+  tickIntervalMs,
+  to,
   tagLabels = {},
 }: HistoryChartProps) {
   const dataZoomRef = useRef<DataZoomState | null>(null);
-  const legendData = useMemo(
+  const lines = useHistoryChartQueries({ edge, from, granulate, tags, to, tagLabels });
-    () => data?.series.map((series) => tagLabels[series.tag] ?? series.tag) ?? [],
+  const series = useHistoryChartSeries(lines);
-    [data?.series, tagLabels],
+  const legendData = useMemo(() => lines.map((line) => line.label), [lines]);
-  );
+  const loading = lines.some((line) => line.loading);
 
   const option = useMemo(
     () =>
       createHistoryChartOptions({
-        data,
         dataZoomState: dataZoomRef.current ?? {},
         from,
         to,
         labelFormat,
         legendData,
-        tagLabels,
+        series,
         tickIntervalMs,
       }),
-    [data, from, labelFormat, legendData, tagLabels, tickIntervalMs, to],
+    [from, labelFormat, legendData, series, tickIntervalMs, to],
   );
 
-  const onChartEvents = useMemo(
+  const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
-    () => ({
+    const state = (event.batch ?? [event]).find(isXAxisDataZoom);
-      datazoom: (event: DataZoomEventBatch) => {
+
-        const state = event.batch?.[0] ?? event;
+    if (!state) {
-        dataZoomRef.current = {
+      return;
-          start: state.start,
+    }
-          end: state.end,
+
-          startValue: state.startValue,
+    dataZoomRef.current = {
-          endValue: state.endValue,
+      start: state.start,
-        };
+      end: state.end,
-      },
+      startValue: state.startValue,
-    }),
+      endValue: state.endValue,
-    [],
+    };
+  }, []);
+
+  return (
+    <HistoryChartArea
+      hasData={series.length > 0}
+      hasSelection={tags.length > 0}
+      loading={loading}
+      option={option}
+      onDataZoom={handleDataZoom}
+    />
   );
-
-  if (loading) {
-    return <div className="chart-placeholder">Загрузка графика...</div>;
-  }
-
-  if (!data?.series.length) {
-    return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
-  }
-
-  return <ReactEChartsCore echarts={echarts} option={option} className="history-chart" onEvents={onChartEvents} lazyUpdate />;
 }

src/features/history-chart/HistoryChartArea.tsx

@@ -0,0 +1,43 @@
+import type { EChartsOption } from 'echarts';
+import ReactEChartsCore from 'echarts-for-react/esm/core.js';
+import { useMemo } from 'react';
+import type { DataZoomEventBatch } from './chartTypes';
+import { echarts } from './historyChartEcharts';
+
+type HistoryChartAreaProps = {
+  hasData: boolean;
+  hasSelection: boolean;
+  loading: boolean;
+  option: EChartsOption;
+  onDataZoom: (event: DataZoomEventBatch) => void;
+};
+
+/** Отвечает только за визуальную область графика: placeholder или ECharts canvas. */
+export function HistoryChartArea({
+  hasData,
+  hasSelection,
+  loading,
+  option,
+  onDataZoom,
+}: HistoryChartAreaProps) {
+  const onChartEvents = useMemo(
+    () => ({
+      datazoom: onDataZoom,
+    }),
+    [onDataZoom],
+  );
+
+  if (!hasSelection) {
+    return <div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>;
+  }
+
+  if (loading) {
+    return <div className="chart-placeholder">Загрузка графика...</div>;
+  }
+
+  if (!hasData) {
+    return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
+  }
+
+  return <ReactEChartsCore echarts={echarts} option={option} className="history-chart" onEvents={onChartEvents} lazyUpdate />;
+}

src/features/history-chart/chartTypes.ts

@@ -1,12 +1,15 @@
 export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
 
 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

@@ -0,0 +1,21 @@
+import { LineChart, ScatterChart } from 'echarts/charts';
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  LineChart,
+  ScatterChart,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  CanvasRenderer,
+]);
+
+export { echarts };

src/features/history-chart/historyChartFormat.ts

@@ -60,6 +60,19 @@ function formatChartValue(value: number): string {
   }).format(value);
 }
 
+/** Показывает одно значение, если 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 `min ${min} · avg ${avg} · max ${max}`;
+}
+
 function isAvgPointValue(value: unknown): value is AvgPointValue {
   return Array.isArray(value) && value.length >= 5 && value.every((item) => typeof item === 'number');
 }
@@ -89,9 +102,9 @@ export function formatTooltip(params: unknown): string {
     const value = item.value as AvgPointValue;
     return [
       '<div class="chart-tooltip-row">',
-      `<span>${item.marker ?? ''}${item.seriesName ?? ''}</span>`,
+      `<span class="chart-tooltip-label" style="--chart-tooltip-marker-color:${item.color ?? 'currentColor'};">${item.seriesName ?? ''}</span>`,
       '<strong>',
-      `min ${formatChartValue(value[2])} · avg ${formatChartValue(value[1])} · max ${formatChartValue(value[3])}`,
+      formatTooltipValue(value),
       value[4] > 1 ? ` · ${value[4]} точек` : '',
       '</strong>',
       '</div>',

src/features/history-chart/historyChartOptions.ts

@@ -1,29 +1,27 @@
 import type { EChartsOption } from 'echarts';
-import type { HistoryResponse } from '../../entities/history/types';
+import type { SeriesOption } from 'echarts';
 import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
 import type { DataZoomState } from './chartTypes';
 import { formatAxisDate, formatTooltip } from './historyChartFormat';
-import { createSeriesOptions, SERIES_COLORS } from './historyChartSeries';
+import { SERIES_COLORS } from './historyChartSeries';
 
 export type HistoryChartOptionsInput = {
-  data?: HistoryResponse;
   dataZoomState: DataZoomState;
   from?: string;
   to?: string;
   labelFormat?: HistoryAxisLabelFormat;
   legendData: string[];
-  tagLabels: Record<string, string>;
+  series: SeriesOption[];
   tickIntervalMs?: number;
 };
 
 export function createHistoryChartOptions({
-  data,
   dataZoomState,
   from,
   to,
   labelFormat,
   legendData,
-  tagLabels,
+  series,
   tickIntervalMs,
 }: HistoryChartOptionsInput): EChartsOption {
   const xMin = from ? new Date(from).getTime() : undefined;
@@ -47,13 +45,16 @@ 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: 24,
+      right: 56,
       bottom: 72,
     },
     xAxis: {
@@ -78,7 +79,9 @@ export function createHistoryChartOptions({
     },
     dataZoom: [
       {
+        id: 'history-x-inside',
         type: 'inside',
+        xAxisIndex: 0,
         throttle: 80,
         start: dataZoomState.start,
         end: dataZoomState.end,
@@ -86,7 +89,9 @@ 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)',
@@ -101,10 +106,29 @@ export function createHistoryChartOptions({
         startValue: dataZoomState.startValue,
         endValue: dataZoomState.endValue,
       },
+      {
+        id: 'history-y-inside',
+        type: 'inside',
+        yAxisIndex: 0,
+        filterMode: 'none',
+        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:
+    series,
-      data?.series.flatMap((series, index) =>
-        createSeriesOptions(series, index, tagLabels[series.tag] ?? series.tag),
-      ) ?? [],
   };
 }

src/features/history-chart/historyChartSeries.ts

@@ -1,5 +1,5 @@
 import type { SeriesOption } from 'echarts';
-import type { HistorySeries } from '../../entities/history/types';
+import type { HistoryPoint } from '../../entities/history/types';
 import type { AvgPointValue } from './chartTypes';
 
 export const SERIES_COLORS = [
@@ -14,24 +14,24 @@ export const SERIES_COLORS = [
 ];
 
 /** Создает avg-линию, вертикальные min/max-отрезки и точки экстремумов для одной серии. */
-export function createSeriesOptions(series: HistorySeries, index: number, label: string): SeriesOption[] {
+export function createSeriesOptions(points: HistoryPoint[], index: number, label: string): SeriesOption[] {
   const color = SERIES_COLORS[index % SERIES_COLORS.length];
-  const avgData: AvgPointValue[] = series.points.map((point) => [
+  const avgData: AvgPointValue[] = points.map((point) => {
-    point.t,
+    const time = new Date(point.time).getTime();
-    point.avg,
+    return [time, point.avg_value, point.min_value, point.max_value, point.point_count];
-    point.min,
+  });
-    point.max,
+  const spreadData = points.flatMap((point) => {
-    point.count,
+    const time = new Date(point.time).getTime();
-  ]);
+    return [
-  const spreadData = series.points.flatMap((point) => [
+      [time, point.min_value],
-    [point.t, point.min],
+      [time, point.max_value],
-    [point.t, point.max],
+      [time, null],
-    [point.t, null],
+    ];
-  ]);
+  });
 
   return [
     {
-      name: `${label} min/max`,
+      name: label,
       type: 'line',
       data: spreadData,
       showSymbol: false,
@@ -50,9 +50,9 @@ export function createSeriesOptions(series: HistorySeries, index: number, label:
       z: 1,
     },
     {
-      name: `${label} min`,
+      name: label,
       type: 'scatter',
-      data: series.points.map((point) => [point.t, point.min]),
+      data: points.map((point) => [new Date(point.time).getTime(), point.min_value]),
       symbolSize: 4,
       silent: true,
       tooltip: { show: false },
@@ -66,9 +66,9 @@ export function createSeriesOptions(series: HistorySeries, index: number, label:
       z: 2,
     },
     {
-      name: `${label} max`,
+      name: label,
       type: 'scatter',
-      data: series.points.map((point) => [point.t, point.max]),
+      data: points.map((point) => [new Date(point.time).getTime(), point.max_value]),
       symbolSize: 4,
       silent: true,
       tooltip: { show: false },
@@ -93,7 +93,11 @@ export function createSeriesOptions(series: HistorySeries, index: number, label:
         color,
       },
       emphasis: {
-        focus: 'series',
+        disabled: true,
+        lineStyle: {
+          width: 1.8,
+          color,
+        },
       },
       z: 3,
     },

src/features/history-chart/useHistoryChartQueries.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { useQueries } from '@tanstack/react-query';
+import { getHistory } from '../../entities/history/api';
+import type { HistoryPoint } from '../../entities/history/types';
+
+type UseHistoryChartQueriesParams = {
+  edge: string;
+  from: string;
+  granulate: string;
+  tags: string[];
+  to: string;
+  tagLabels: Record<string, string>;
+};
+
+export type HistoryChartLineData = {
+  index: number;
+  label: string;
+  loading: boolean;
+  rows: HistoryPoint[];
+  tag: string;
+};
+
+export function useHistoryChartQueries({
+  edge,
+  from,
+  granulate,
+  tags,
+  to,
+  tagLabels,
+}: UseHistoryChartQueriesParams): HistoryChartLineData[] {
+  const enabled = Boolean(edge && from && granulate && to);
+
+  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),
+      enabled,
+    })),
+  });
+
+  return useMemo(
+    () =>
+      tags.map((tag, index) => ({
+        index,
+        label: tagLabels[tag] ?? tag,
+        loading: enabled && queries[index].isPending,
+        rows: queries[index].data?.rows ?? [],
+        tag,
+      })),
+    [enabled, queries, tagLabels, tags],
+  );
+}

src/features/history-chart/useHistoryChartSeries.ts

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

src/shared/api/http.ts

@@ -1,5 +1,38 @@
 export type QueryParamValue = string | number | string[] | undefined;
 
+function joinUrl(baseUrl: string, path: string): string {
+  const base = baseUrl.replace(/\/$/, '');
+  const endpoint = path.startsWith('/') ? path : `/${path}`;
+  return `${base}${endpoint}`;
+}
+
+function appendQueryParams(url: string, params?: Record<string, QueryParamValue>): string {
+  const searchParams = new URLSearchParams();
+
+  Object.entries(params ?? {}).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => searchParams.append(key, item));
+      return;
+    }
+
+    if (value !== undefined && value !== '') {
+      searchParams.set(key, String(value));
+    }
+  });
+
+  const query = searchParams.toString();
+  return query ? `${url}?${query}` : url;
+}
+
+/** Собирает URL API из base, пути и query-параметров. */
+export function buildApiUrl(
+  baseUrl: string,
+  path: string,
+  params?: Record<string, QueryParamValue>,
+): string {
+  return appendQueryParams(joinUrl(baseUrl, path), params);
+}
+
 /** Выполняет GET-запрос и добавляет query-параметры в едином формате для всех API. */
 export async function getJson<T>(
   baseUrl: string,
@@ -7,18 +40,7 @@ export async function getJson<T>(
   params?: Record<string, QueryParamValue>,
   init?: RequestInit,
 ): Promise<T> {
-  const url = new URL(path, baseUrl);
+  const url = buildApiUrl(baseUrl, path, params);
-
-  Object.entries(params ?? {}).forEach(([key, value]) => {
-    if (Array.isArray(value)) {
-      value.forEach((item) => url.searchParams.append(key, item));
-      return;
-    }
-
-    if (value !== undefined && value !== '') {
-      url.searchParams.set(key, String(value));
-    }
-  });
 
   const response = await fetch(url, init);
   if (!response.ok) {

src/shared/config/env.ts

@@ -1,4 +1,5 @@
-export const cloudApiUrl = import.meta.env.VITE_CLOUD_API_URL as string;
+/** Базовый путь cloud API; маршрутизация на бэкенд — на уровне реверс-прокси. */
+export const cloudApiUrl = '/api';
 export const diagramApiUrl = import.meta.env.VITE_DIAGRAM_API_URL as string;
 export const toirLightOrigin = import.meta.env.VITE_TOIR_LIGHT_ORIGIN as string;
 export const keycloakUrl = import.meta.env.VITE_KEYCLOAK_URL;

src/styles/charts.css

@@ -36,7 +36,7 @@
   margin-top: 5px;
 }
 
-.chart-tooltip-row span {
+.chart-tooltip-label {
   min-width: 0;
   overflow: hidden;
   color: #cbd5e1;
@@ -44,6 +44,16 @@
   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;

src/styles/components/metrics.css

@@ -4,6 +4,53 @@
   gap: 12px;
 }
 
+.metric-widgets-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 10px;
+}
+
+.metric-widget {
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid rgba(88, 103, 121, 0.42);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
+    linear-gradient(145deg, rgba(6, 9, 14, 0.98), rgba(2, 4, 8, 0.96));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 6px 14px rgba(0, 0, 0, 0.28);
+}
+
+.metric-widget__tag {
+  flex: 0 0 auto;
+  min-width: 0;
+  color: #cbd5e1;
+  font-size: 0.74rem;
+  font-weight: 600;
+  line-height: 1.35;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.metric-widget__value {
+  margin-top: auto;
+  align-self: flex-end;
+  min-width: 0;
+  color: #f8fafc;
+  font-size: 1.1rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+  text-align: right;
+}
+
 .metric-mosaic {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));

src/styles/detail/archive.css

@@ -91,12 +91,21 @@
 }
 
 .tag-selector__tools button:hover,
-.tag-select-item:hover,
+.tag-select-item:hover {
-.tag-select-item--selected {
   border-color: var(--line-strong);
   background: rgba(201, 122, 61, 0.12);
 }
 
+.tag-select-item--selected {
+  border-color: rgba(232, 201, 160, 0.72);
+  background:
+    linear-gradient(135deg, rgba(201, 122, 61, 0.22), rgba(212, 165, 116, 0.08)),
+    rgba(15, 23, 42, 0.62);
+  box-shadow:
+    inset 3px 0 0 var(--accent-soft),
+    0 0 0 1px rgba(201, 122, 61, 0.12);
+}
+
 .selected-tags {
   min-height: 38px;
   display: flex;
@@ -165,10 +174,28 @@
   font-size: 0.76rem;
 }
 
-.tag-select-item--selected span {
+.tag-select-item__side {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 7px;
+  min-width: 0;
+}
+
+.tag-select-item__side svg {
+  flex: 0 0 auto;
+  color: var(--accent-soft);
+}
+
+.tag-select-item--selected .tag-select-item__name span,
+.tag-select-item--selected .tag-select-item__side strong {
   color: #f8fafc;
 }
 
+.tag-select-item--selected .tag-select-item__name small {
+  color: #e8c9a0;
+}
+
 .archive-chart {
   min-width: 0;
   min-height: 0;

src/vite-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_CLOUD_API_URL?: string;
   readonly VITE_DIAGRAM_API_URL?: string;
   readonly VITE_TOIR_LIGHT_ORIGIN?: string;
   readonly VITE_KEYCLOAK_URL?: string;

vite.config.ts

@@ -1,15 +1,23 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [react()],
+  const { DEV_API_URL } = loadEnv(mode, '.', '');
-  build: {
+
-    chunkSizeWarningLimit: 700,
+  return {
-  },
+    plugins: [react()],
-  server: {
+    build: {
-    port: 5173,
+      chunkSizeWarningLimit: 700,
-  },
+    },
-  preview: {
+    server: {
-    port: 4173,
+      port: 5173,
-  },
+      proxy: {
+        '/api': {
+          target: DEV_API_URL,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+      },
+    },
+  };
 });