// SNMP 指标趋势折线图 — 光标拖拽选区 // Logan.Li
import { useMemo } from 'react';
import {
AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
ReferenceArea,
} from 'recharts';
import type { SnmpHistoryPoint } from './helpers';
import { fmtChartTime, fmtMetricValue } from './helpers';
import { MonitorChartTooltip, MONITOR_CHART_GRID, MONITOR_CHART_TICK } from '../shared/monitorChartTheme';
import { useChartRangeZoom } from '../shared/useChartRangeZoom';
import { ChartRangeHint } from '../shared/ChartRangeHint';
interface Props {
data: SnmpHistoryPoint[];
color: string;
unit?: string;
height?: number;
}
export function SnmpMetricTrendChart({ data, color, unit, height = 160 }: Props) {
const chartData = useMemo(
() => data.map((p) => ({ time: fmtChartTime(p.timestamp), value: p.value })),
[data],
);
const {
displayData, refLeft, refRight, selectionLabel, resetZoom, chartHandlers, zoomed,
} = useChartRangeZoom(chartData, 'time');
if (chartData.length === 0) {
return (
暂无趋势数据，等待后台采集
);
}
const gradId = `snmp-grad-${color.replace(/[^a-z]/gi, '')}`;
return (
fmtMetricValue(v, unit)} />} />
{refLeft && refRight && refLeft !== refRight && (
)}
);
}