Serie de monitoreo.

<figure class="ui-sample ui-chart" data-monitoring-series><figcaption><strong>Latencia p95</strong> · últimas 6 horas</figcaption><svg viewBox="0 0 320 120" role="img" aria-label="Latencia estable entre 180 y 240 milisegundos"><path d="M20 100H305M20 15V100"/><polyline points="20,78 78,75 136,60 194,66 252,42 305,48"/></svg><p>Fuente: monitor HTTP · actualizado 17:24 CLT</p><strong>218 ms · bajo umbral</strong></figure>

<figure class="ui-sample ui-chart border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-monitoring-series><figcaption class="text-sm text-slate-600"><strong>Latencia p95</strong> · últimas 6 horas</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" role="img" aria-label="Latencia estable entre 180 y 240 milisegundos"><path d="M20 100H305M20 15V100"/><polyline points="20,78 78,75 136,60 194,66 252,42 305,48"/></svg><p>Fuente: monitor HTTP · actualizado 17:24 CLT</p><strong>218 ms · bajo umbral</strong></figure>

export interface MonitoringSeriesPoint {
  /** Posición horizontal en el `viewBox` de 320 × 120; el eje va de 20 a 305. */
  x: number;
  /** Posición vertical en el `viewBox`; 100 es la base del eje y 15 el tope. */
  y: number;
}

export interface MonitoringSeriesProps {
  /** Métrica monitoreada, en negrita dentro del pie. */
  title?: string;
  /** Ventana de tiempo de la serie, después del título; vacía la oculta. */
  period?: string;
  /** Puntos de la línea en coordenadas del `viewBox`, de izquierda a derecha; sin puntos sólo se dibujan los ejes. */
  points?: MonitoringSeriesPoint[];
  /** Descripción accesible del gráfico: qué hace la serie y en qué rango. */
  alt?: string;
  /** Fuente del dato y hora de actualización; vacía la oculta. */
  source?: string;
  /** Lectura actual y su relación con el umbral; vacía la oculta. */
  status?: string;
  className?: string;
}

const PUNTOS: MonitoringSeriesPoint[] = [
  { x: 20, y: 78 },
  { x: 78, y: 75 },
  { x: 136, y: 60 },
  { x: 194, y: 66 },
  { x: 252, y: 42 },
  { x: 305, y: 48 },
];

/**
 * Serie de monitoreo: línea de una métrica de servicio (latencia, errores, uso) en una ventana reciente, con fuente, hora de actualización y lectura actual frente al umbral; se usa en paneles de operación y páginas de estado de un servicio.
 *
 * El SVG lleva `role="img"` y su descripción en `alt`: cuando la serie cambia, actualiza también `alt` y `status`.
 *
 * @example <MonitoringSeries title="Latencia p95" period="últimas 6 horas" points={[{ x: 20, y: 78 }, { x: 162, y: 60 }, { x: 305, y: 20 }]} alt="Latencia sube a 480 milisegundos" status="480 ms · sobre umbral" />
 */
export function MonitoringSeries({
  title = "Latencia p95",
  period = "últimas 6 horas",
  points = PUNTOS,
  alt = "Latencia estable entre 180 y 240 milisegundos",
  source = "Fuente: monitor HTTP · actualizado 17:24 CLT",
  status = "218 ms · bajo umbral",
  className,
}: MonitoringSeriesProps) {
  return (
    <figure className={["ui-chart", className].filter(Boolean).join(" ")} data-monitoring-series>
      <figcaption>
        <strong>{title}</strong>
        {period ? ` · ${period}` : null}
      </figcaption>
      <svg viewBox="0 0 320 120" role="img" aria-label={alt || undefined}>
        <path d="M20 100H305M20 15V100" />
        {points.length ? <polyline points={points.map((punto) => `${punto.x},${punto.y}`).join(" ")} /> : null}
      </svg>
      {source ? <p>{source}</p> : null}
      {status ? <strong>{status}</strong> : null}
    </figure>
  );
}