aiops/frontend/src/pages/monitor/middleware-monitor/MwTrendChart.tsx

// 中间件指标趋势图 — 光标拖拽选区 // 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 (
      <div className="flex items-center justify-center text-xs text-[var(--dg-text-muted)]" style={{ height }}>
        {i18n.t('monitor.lbl.noTrendData')}
      </div>
    );
  }

  const gradId = `mw-grad-${color.replace(/[^a-z]/gi, '')}`;

  return (
    <div>
      <ResponsiveContainer width="100%" height={height}>
        <AreaChart data={displayData} margin={{ top: 4, right: 6, left: 0, bottom: 4 }} {...chartHandlers}>
          <defs>
            <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={color} stopOpacity={0.28} />
              <stop offset="100%" stopColor={color} stopOpacity={0.02} />
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" stroke={MONITOR_CHART_GRID} vertical={false} />
          <XAxis dataKey="time" tick={MONITOR_CHART_TICK} tickLine={false} axisLine={{ stroke: MONITOR_CHART_GRID }} interval="preserveStartEnd" minTickGap={32} />
          <YAxis tick={MONITOR_CHART_TICK} tickLine={false} axisLine={false} width={42} domain={percent ? [0, 1] : ['auto', 'auto']} tickFormatter={(v: number) => (percent ? `${(v * 100).toFixed(0)}%` : fmtVal(v, 0))} />
          <Tooltip
            content={(
              <MonitorChartTooltip
                valueFormatter={(v) => fmtValue(v, percent, formatter, unit)}
              />
            )}
          />
          {refLeft && refRight && refLeft !== refRight && (
            <ReferenceArea x1={refLeft} x2={refRight} strokeOpacity={0.4} fill="var(--dg-blue)" fillOpacity={0.12} />
          )}
          <Area type="monotone" dataKey="value" stroke={color} strokeWidth={2} fill={`url(#${gradId})`} dot={false} activeDot={{ r: 3, fill: color, stroke: 'var(--dg-bg-primary)', strokeWidth: 2 }} isAnimationActive={false} />
        </AreaChart>
      </ResponsiveContainer>
      {showRangeHint && (
        <ChartRangeHint label={selectionLabel} zoomed={zoomed} onReset={resetZoom} />
      )}
    </div>
  );
}