Обновил контракт по получению данных для графика.
This commit is contained in:
@@ -5,6 +5,6 @@ export type { EdgeItem, EdgeResponse } from '../entities/edge/types';
|
|||||||
export { getHealth } from '../entities/health/api';
|
export { getHealth } from '../entities/health/api';
|
||||||
export type { HealthResponse } from '../entities/health/types';
|
export type { HealthResponse } from '../entities/health/types';
|
||||||
export { getHistory } from '../entities/history/api';
|
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 { getTags } from '../entities/tag/api';
|
||||||
export type { TagItem, TagResponse } from '../entities/tag/types';
|
export type { TagItem, TagResponse } from '../entities/tag/types';
|
||||||
|
|||||||
@@ -1,24 +1,13 @@
|
|||||||
export type HistoryPoint = {
|
export type HistoryPoint = {
|
||||||
t: number;
|
time: string;
|
||||||
min: number;
|
min_value: number;
|
||||||
avg: number;
|
avg_value: number;
|
||||||
max: number;
|
max_value: number;
|
||||||
count: number;
|
point_count: number;
|
||||||
};
|
|
||||||
|
|
||||||
export type HistorySeries = {
|
|
||||||
edge: string;
|
|
||||||
tag: string;
|
|
||||||
points: HistoryPoint[];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type HistoryResponse = {
|
export type HistoryResponse = {
|
||||||
edge: string;
|
rows: HistoryPoint[];
|
||||||
tag: string;
|
|
||||||
granulate: string;
|
|
||||||
series: HistorySeries[];
|
|
||||||
from: string;
|
|
||||||
to: string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type HistoryRequest = {
|
export type HistoryRequest = {
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ export function EdgeHistoryPage() {
|
|||||||
selectedTags={selectedTags}
|
selectedTags={selectedTags}
|
||||||
history={history.data}
|
history={history.data}
|
||||||
historyLoading={history.isPending && selectedTags.length > 0}
|
historyLoading={history.isPending && selectedTags.length > 0}
|
||||||
historyGranulate={history.data?.granulate ?? historyGranularity.granulate}
|
historyGranulate={historyGranularity.granulate}
|
||||||
historyAxis={historyGranularity}
|
historyAxis={historyGranularity}
|
||||||
range={range}
|
range={range}
|
||||||
onSearchChange={setSearch}
|
onSearchChange={setSearch}
|
||||||
|
|||||||
@@ -253,6 +253,7 @@ export function ArchiveView({
|
|||||||
to={toIsoFromInput(range.to)}
|
to={toIsoFromInput(range.to)}
|
||||||
tickIntervalMs={historyAxis.tickIntervalMs}
|
tickIntervalMs={historyAxis.tickIntervalMs}
|
||||||
labelFormat={historyAxis.labelFormat}
|
labelFormat={historyAxis.labelFormat}
|
||||||
|
tag={selectedTags[0]}
|
||||||
tagLabels={tagLabels}
|
tagLabels={tagLabels}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -31,6 +31,7 @@ type HistoryChartProps = {
|
|||||||
to?: string;
|
to?: string;
|
||||||
tickIntervalMs?: number;
|
tickIntervalMs?: number;
|
||||||
labelFormat?: HistoryAxisLabelFormat;
|
labelFormat?: HistoryAxisLabelFormat;
|
||||||
|
tag?: string;
|
||||||
tagLabels?: Record<string, string>;
|
tagLabels?: Record<string, string>;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -42,13 +43,12 @@ export function HistoryChart({
|
|||||||
to,
|
to,
|
||||||
tickIntervalMs,
|
tickIntervalMs,
|
||||||
labelFormat,
|
labelFormat,
|
||||||
|
tag,
|
||||||
tagLabels = {},
|
tagLabels = {},
|
||||||
}: HistoryChartProps) {
|
}: HistoryChartProps) {
|
||||||
const dataZoomRef = useRef<DataZoomState | null>(null);
|
const dataZoomRef = useRef<DataZoomState | null>(null);
|
||||||
const legendData = useMemo(
|
const seriesLabel = tag ? tagLabels[tag] ?? tag : '';
|
||||||
() => data?.series.map((series) => tagLabels[series.tag] ?? series.tag) ?? [],
|
const legendData = useMemo(() => (data?.rows.length && seriesLabel ? [seriesLabel] : []), [data?.rows.length, seriesLabel]);
|
||||||
[data?.series, tagLabels],
|
|
||||||
);
|
|
||||||
|
|
||||||
const option = useMemo(
|
const option = useMemo(
|
||||||
() =>
|
() =>
|
||||||
@@ -59,10 +59,10 @@ export function HistoryChart({
|
|||||||
to,
|
to,
|
||||||
labelFormat,
|
labelFormat,
|
||||||
legendData,
|
legendData,
|
||||||
tagLabels,
|
seriesLabel,
|
||||||
tickIntervalMs,
|
tickIntervalMs,
|
||||||
}),
|
}),
|
||||||
[data, from, labelFormat, legendData, tagLabels, tickIntervalMs, to],
|
[data, from, labelFormat, legendData, seriesLabel, tickIntervalMs, to],
|
||||||
);
|
);
|
||||||
|
|
||||||
const onChartEvents = useMemo(
|
const onChartEvents = useMemo(
|
||||||
@@ -84,7 +84,7 @@ export function HistoryChart({
|
|||||||
return <div className="chart-placeholder">Загрузка графика...</div>;
|
return <div className="chart-placeholder">Загрузка графика...</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!data?.series.length) {
|
if (!data?.rows.length) {
|
||||||
return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
|
return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ export type HistoryChartOptionsInput = {
|
|||||||
to?: string;
|
to?: string;
|
||||||
labelFormat?: HistoryAxisLabelFormat;
|
labelFormat?: HistoryAxisLabelFormat;
|
||||||
legendData: string[];
|
legendData: string[];
|
||||||
tagLabels: Record<string, string>;
|
seriesLabel: string;
|
||||||
tickIntervalMs?: number;
|
tickIntervalMs?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -23,7 +23,7 @@ export function createHistoryChartOptions({
|
|||||||
to,
|
to,
|
||||||
labelFormat,
|
labelFormat,
|
||||||
legendData,
|
legendData,
|
||||||
tagLabels,
|
seriesLabel,
|
||||||
tickIntervalMs,
|
tickIntervalMs,
|
||||||
}: HistoryChartOptionsInput): EChartsOption {
|
}: HistoryChartOptionsInput): EChartsOption {
|
||||||
const xMin = from ? new Date(from).getTime() : undefined;
|
const xMin = from ? new Date(from).getTime() : undefined;
|
||||||
@@ -102,9 +102,6 @@ export function createHistoryChartOptions({
|
|||||||
endValue: dataZoomState.endValue,
|
endValue: dataZoomState.endValue,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series:
|
series: data?.rows.length ? createSeriesOptions(data.rows, 0, seriesLabel) : [],
|
||||||
data?.series.flatMap((series, index) =>
|
|
||||||
createSeriesOptions(series, index, tagLabels[series.tag] ?? series.tag),
|
|
||||||
) ?? [],
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import type { SeriesOption } from 'echarts';
|
import type { SeriesOption } from 'echarts';
|
||||||
import type { HistorySeries } from '../../entities/history/types';
|
import type { HistoryPoint } from '../../entities/history/types';
|
||||||
import type { AvgPointValue } from './chartTypes';
|
import type { AvgPointValue } from './chartTypes';
|
||||||
|
|
||||||
export const SERIES_COLORS = [
|
export const SERIES_COLORS = [
|
||||||
@@ -14,20 +14,20 @@ export const SERIES_COLORS = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
/** Создает avg-линию, вертикальные min/max-отрезки и точки экстремумов для одной серии. */
|
/** Создает 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 color = SERIES_COLORS[index % SERIES_COLORS.length];
|
||||||
const avgData: AvgPointValue[] = series.points.map((point) => [
|
const avgData: AvgPointValue[] = points.map((point) => {
|
||||||
point.t,
|
const time = new Date(point.time).getTime();
|
||||||
point.avg,
|
return [time, point.avg_value, point.min_value, point.max_value, point.point_count];
|
||||||
point.min,
|
});
|
||||||
point.max,
|
const spreadData = points.flatMap((point) => {
|
||||||
point.count,
|
const time = new Date(point.time).getTime();
|
||||||
]);
|
return [
|
||||||
const spreadData = series.points.flatMap((point) => [
|
[time, point.min_value],
|
||||||
[point.t, point.min],
|
[time, point.max_value],
|
||||||
[point.t, point.max],
|
[time, null],
|
||||||
[point.t, null],
|
];
|
||||||
]);
|
});
|
||||||
|
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -52,7 +52,7 @@ export function createSeriesOptions(series: HistorySeries, index: number, label:
|
|||||||
{
|
{
|
||||||
name: `${label} min`,
|
name: `${label} min`,
|
||||||
type: 'scatter',
|
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,
|
symbolSize: 4,
|
||||||
silent: true,
|
silent: true,
|
||||||
tooltip: { show: false },
|
tooltip: { show: false },
|
||||||
@@ -68,7 +68,7 @@ export function createSeriesOptions(series: HistorySeries, index: number, label:
|
|||||||
{
|
{
|
||||||
name: `${label} max`,
|
name: `${label} max`,
|
||||||
type: 'scatter',
|
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,
|
symbolSize: 4,
|
||||||
silent: true,
|
silent: true,
|
||||||
tooltip: { show: false },
|
tooltip: { show: false },
|
||||||
|
|||||||
Reference in New Issue
Block a user