Merge pull request 'Обновление echarts графика.' (#2) from dev into main

Reviewed-on: #2

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/entities/history/types.ts

@@ -1,24 +1,13 @@
 export type HistoryPoint = {
-  t: number;
-  min: number;
-  avg: number;
-  max: number;
-  count: number;
-};
-
-export type HistorySeries = {
-  edge: string;
-  tag: string;
-  points: HistoryPoint[];
+  time: string;
+  min_value: number;
+  avg_value: number;
+  max_value: number;
+  point_count: number;
 };
 
 export type HistoryResponse = {
-  edge: string;
-  tag: string;
-  granulate: string;
-  series: HistorySeries[];
-  from: string;
-  to: string;
+  rows: HistoryPoint[];
 };
 
 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}
-        historyLoading={history.isPending && selectedTags.length > 0}
-        historyGranulate={history.data?.granulate ?? historyGranularity.granulate}
+        historyGranulate={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>
                 );
               })}
@@ -247,12 +250,13 @@ export function ArchiveView({
         {selectedTags.length ? (
           <HistoryChart
             key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
-            data={history}
-            loading={historyLoading}
-            from={toIsoFromInput(range.from)}
-            to={toIsoFromInput(range.to)}
+            edge={edgeId}
+            from={fromIso}
+            to={toIso}
+            granulate={historyAxis.granulate}
             tickIntervalMs={historyAxis.tickIntervalMs}
             labelFormat={historyAxis.labelFormat}
+            tags={selectedTags}
             tagLabels={tagLabels}
           />
         ) : (

src/features/history-chart/HistoryChart.tsx

@@ -1,92 +1,70 @@
-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';
-import ReactEChartsCore from 'echarts-for-react/esm/core.js';
-import { useMemo, useRef } from 'react';
-import type { HistoryResponse } from '../../entities/history/types';
+import { useCallback, useMemo, useRef } from 'react';
 import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
 import type { DataZoomEventBatch, DataZoomState } from './chartTypes';
+import { HistoryChartArea } from './HistoryChartArea';
 import { createHistoryChartOptions } from './historyChartOptions';
-
-echarts.use([
-  LineChart,
-  ScatterChart,
-  GridComponent,
-  LegendComponent,
-  TooltipComponent,
-  DataZoomComponent,
-  CanvasRenderer,
-]);
+import { useHistoryChartQueries } from './useHistoryChartQueries';
+import { useHistoryChartSeries } from './useHistoryChartSeries';
 
 type HistoryChartProps = {
-  data?: HistoryResponse;
-  loading: boolean;
-  from?: string;
-  to?: string;
-  tickIntervalMs?: number;
+  edge: string;
+  from: string;
+  granulate: string;
   labelFormat?: HistoryAxisLabelFormat;
+  tags: string[];
+  tickIntervalMs?: number;
+  to: string;
   tagLabels?: Record<string, string>;
 };
 
-/** Рисует avg-линию, min/max-точки и вертикальный диапазон для агрегированной истории. */
+/** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
 export function HistoryChart({
-  data,
-  loading,
+  edge,
   from,
-  to,
-  tickIntervalMs,
+  granulate,
   labelFormat,
+  tags,
+  tickIntervalMs,
+  to,
   tagLabels = {},
 }: HistoryChartProps) {
   const dataZoomRef = useRef<DataZoomState | null>(null);
-  const legendData = useMemo(
-    () => data?.series.map((series) => tagLabels[series.tag] ?? series.tag) ?? [],
-    [data?.series, tagLabels],
-  );
+  const lines = useHistoryChartQueries({ edge, from, granulate, tags, to, tagLabels });
+  const series = useHistoryChartSeries(lines);
+  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(
-    () => ({
-      datazoom: (event: DataZoomEventBatch) => {
-        const state = event.batch?.[0] ?? event;
-        dataZoomRef.current = {
-          start: state.start,
-          end: state.end,
-          startValue: state.startValue,
-          endValue: state.endValue,
-        };
-      },
-    }),
-    [],
+  const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
+    const state = event.batch?.[0] ?? event;
+    dataZoomRef.current = {
+      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/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/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;
@@ -102,9 +100,6 @@ export function createHistoryChartOptions({
         endValue: dataZoomState.endValue,
       },
     ],
-    series:
-      data?.series.flatMap((series, index) =>
-        createSeriesOptions(series, index, tagLabels[series.tag] ?? series.tag),
-      ) ?? [],
+    series,
   };
 }

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) => [
-    point.t,
-    point.avg,
-    point.min,
-    point.max,
-    point.count,
-  ]);
-  const spreadData = series.points.flatMap((point) => [
-    [point.t, point.min],
-    [point.t, point.max],
-    [point.t, null],
-  ]);
+  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} 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 },

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: () => getHistory({ edge, tag, from, to, granulate }),
+      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/styles/detail/archive.css

@@ -91,12 +91,21 @@
 }
 
 .tag-selector__tools button:hover,
-.tag-select-item:hover,
-.tag-select-item--selected {
+.tag-select-item:hover {
   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;