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

Reviewed-on: #10

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

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

@@ -202,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) => (
@@ -249,7 +254,7 @@ export function ArchiveView({
 
         {selectedTags.length ? (
           <HistoryChart
-            key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
+            key={`${range.from}:${range.to}:${historyAxis.granulate}`}
             edge={edgeId}
             from={fromIso}
             to={toIso}

src/features/history-chart/HistoryChart.tsx

@@ -18,6 +18,10 @@ 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,
@@ -49,7 +53,12 @@ export function HistoryChart({
   );
 
   const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
-    const state = event.batch?.[0] ?? event;
+    const state = (event.batch ?? [event]).find(isXAxisDataZoom);
+
+    if (!state) {
+      return;
+    }
+
     dataZoomRef.current = {
       start: state.start,
       end: state.end,

src/features/history-chart/chartTypes.ts

@@ -8,6 +8,8 @@ export type TooltipParam = {
 };
 
 export type DataZoomState = {
+  dataZoomId?: string;
+  dataZoomIndex?: number;
   start?: number;
   end?: number;
   startValue?: number;

src/features/history-chart/historyChartOptions.ts

@@ -54,7 +54,7 @@ export function createHistoryChartOptions({
     grid: {
       top: 54,
       left: 48,
-      right: 24,
+      right: 56,
       bottom: 72,
     },
     xAxis: {
@@ -79,7 +79,9 @@ export function createHistoryChartOptions({
     },
     dataZoom: [
       {
+        id: 'history-x-inside',
         type: 'inside',
+        xAxisIndex: 0,
         throttle: 80,
         start: dataZoomState.start,
         end: dataZoomState.end,
@@ -87,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)',
@@ -102,6 +106,28 @@ 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/useHistoryChartQueries.ts

@@ -33,7 +33,7 @@ export function useHistoryChartQueries({
   const queries = useQueries({
     queries: tags.map((tag) => ({
       queryKey: ['history', edge, tag, from, to, granulate],
-      queryFn: () => getHistory({ edge, tag, from, to, granulate }),
+      queryFn: ({ signal }: { signal: AbortSignal }) => getHistory({ edge, tag, from, to, granulate }, signal),
       enabled,
     })),
   });