// 中间件指标趋势图 — 光标拖拽选区 // Logan.Li
import { useMemo } from 'react';
import i18n from '@/i18n';
import {
AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
ReferenceArea,
} from 'recharts';
import { fmtChartTime, fmtHitRate, fmtVal } 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: Array<{ timestamp: number; value: number }>;
color: string;
unit?: string;
percent?: boolean;
formatter?: (v: number) => string;
height?: number;
showRangeHint?: boolean;
}
function fmtValue(v: number, percent?: boolean, formatter?: (v: number) => string, unit?: string): string {
if (formatter) return formatter(v);
if (percent) return fmtHitRate(v);
const base = fmtVal(v, unit ? 1 : 0);
return unit ? `${base} ${unit}` : base;
}
export function MwTrendChart({
data, color, unit, percent, formatter, height = 150, showRangeHint = true,
}: 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 (
{i18n.t('monitor.lbl.noTrendData')}
);
}
const gradId = `mw-grad-${color.replace(/[^a-z]/gi, '')}`;
return (
(percent ? `${(v * 100).toFixed(0)}%` : fmtVal(v, 0))} />
fmtValue(v, percent, formatter, unit)}
/>
)}
/>
{refLeft && refRight && refLeft !== refRight && (
)}
{showRangeHint && (
)}
);
}