Обновил контракт по получению данных для графика.
This commit is contained in:
@@ -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';
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -253,6 +253,7 @@ export function ArchiveView({
|
||||
to={toIsoFromInput(range.to)}
|
||||
tickIntervalMs={historyAxis.tickIntervalMs}
|
||||
labelFormat={historyAxis.labelFormat}
|
||||
tag={selectedTags[0]}
|
||||
tagLabels={tagLabels}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -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>;
|
||||
}
|
||||
|
||||
|
||||
@@ -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) : [],
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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 },
|
||||
|
||||
Reference in New Issue
Block a user