удаление 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:

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

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

@@ -202,12 +202,7 @@ export function ArchiveView({
         ) : null}
       </div>
 
-      <div
-        className="archive-chart"
-        onFocusCapture={() => setSelectorOpen(false)}
-        onPointerDown={() => setSelectorOpen(false)}
-        onPointerEnter={() => setSelectorOpen(false)}
-      >
+      <div className="archive-chart">
         <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/history-chart/HistoryChart.tsx

@@ -18,10 +18,6 @@ type HistoryChartProps = {
 };
 
 /** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
-function isXAxisDataZoom(state: DataZoomState): boolean {
-  return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
-}
-
 export function HistoryChart({
   edge,
   from,
@@ -53,12 +49,7 @@ export function HistoryChart({
   );
 
   const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
-    const state = (event.batch ?? [event]).find(isXAxisDataZoom);
-
-    if (!state) {
-      return;
-    }
-
+    const state = event.batch?.[0] ?? event;
     dataZoomRef.current = {
       start: state.start,
       end: state.end,

src/features/history-chart/chartTypes.ts

@@ -1,15 +1,12 @@
 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/historyChartFormat.ts

@@ -60,19 +60,6 @@ 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');
 }
@@ -102,9 +89,9 @@ export function formatTooltip(params: unknown): string {
     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,9 +76,7 @@ export function createHistoryChartOptions({
     },
     dataZoom: [
       {
-        id: 'history-x-inside',
         type: 'inside',
-        xAxisIndex: 0,
         throttle: 80,
         start: dataZoomState.start,
         end: dataZoomState.end,
@@ -89,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)',
@@ -106,28 +99,6 @@ 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,
   };

src/features/history-chart/historyChartSeries.ts

@@ -93,11 +93,7 @@ export function createSeriesOptions(points: HistoryPoint[], index: number, label
         color,
       },
       emphasis: {
-        disabled: true,
-        lineStyle: {
-          width: 1.8,
-          color,
-        },
+        focus: 'series',
       },
       z: 3,
     },

src/features/history-chart/useHistoryChartQueries.ts

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

src/styles/charts.css

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