Обновил контракт по получению данных для графика.

This commit is contained in:
Первов Артем
2026-06-22 03:19:56 +03:00
parent fe7d051d4a
commit 6ab9cd1c75
7 changed files with 35 additions and 48 deletions

View File

@@ -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';

View File

@@ -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 = {

View File

@@ -78,7 +78,7 @@ export function EdgeHistoryPage() {
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}

View File

@@ -253,6 +253,7 @@ export function ArchiveView({
to={toIsoFromInput(range.to)}
tickIntervalMs={historyAxis.tickIntervalMs}
labelFormat={historyAxis.labelFormat}
tag={selectedTags[0]}
tagLabels={tagLabels}
/>
) : (

View File

@@ -31,6 +31,7 @@ type HistoryChartProps = {
to?: string;
tickIntervalMs?: number;
labelFormat?: HistoryAxisLabelFormat;
tag?: string;
tagLabels?: Record<string, string>;
};
@@ -42,13 +43,12 @@ export function HistoryChart({
to,
tickIntervalMs,
labelFormat,
tag,
tagLabels = {},
}: HistoryChartProps) {
const dataZoomRef = useRef<DataZoomState | null>(null);
const legendData = useMemo(
() => data?.series.map((series) => tagLabels[series.tag] ?? series.tag) ?? [],
[data?.series, tagLabels],
);
const seriesLabel = tag ? tagLabels[tag] ?? tag : '';
const legendData = useMemo(() => (data?.rows.length && seriesLabel ? [seriesLabel] : []), [data?.rows.length, seriesLabel]);
const option = useMemo(
() =>
@@ -59,10 +59,10 @@ export function HistoryChart({
to,
labelFormat,
legendData,
tagLabels,
seriesLabel,
tickIntervalMs,
}),
[data, from, labelFormat, legendData, tagLabels, tickIntervalMs, to],
[data, from, labelFormat, legendData, seriesLabel, tickIntervalMs, to],
);
const onChartEvents = useMemo(
@@ -84,7 +84,7 @@ export function HistoryChart({
return <div className="chart-placeholder">Загрузка графика...</div>;
}
if (!data?.series.length) {
if (!data?.rows.length) {
return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
}

View File

@@ -12,7 +12,7 @@ export type HistoryChartOptionsInput = {
to?: string;
labelFormat?: HistoryAxisLabelFormat;
legendData: string[];
tagLabels: Record<string, string>;
seriesLabel: string;
tickIntervalMs?: number;
};
@@ -23,7 +23,7 @@ export function createHistoryChartOptions({
to,
labelFormat,
legendData,
tagLabels,
seriesLabel,
tickIntervalMs,
}: HistoryChartOptionsInput): EChartsOption {
const xMin = from ? new Date(from).getTime() : undefined;
@@ -102,9 +102,6 @@ export function createHistoryChartOptions({
endValue: dataZoomState.endValue,
},
],
series:
data?.series.flatMap((series, index) =>
createSeriesOptions(series, index, tagLabels[series.tag] ?? series.tag),
) ?? [],
series: data?.rows.length ? createSeriesOptions(data.rows, 0, seriesLabel) : [],
};
}

View File

@@ -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,20 +14,20 @@ 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 [
{
@@ -52,7 +52,7 @@ export function createSeriesOptions(series: HistorySeries, index: number, label:
{
name: `${label} min`,
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 },
@@ -68,7 +68,7 @@ export function createSeriesOptions(series: HistorySeries, index: number, label:
{
name: `${label} max`,
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 },