Live Line ChartLive Line Chart

"use client";

import * as React from "react";
import { LiveLineChart } from "@/components/ui/notchset/live-line-chart";

/** Push one sample a second and drop the oldest; the chart scrolls on each change. */
export function LatencyStream({ sample }: { sample: () => number }) {
  const [buffer, setBuffer] = React.useState(() => Array.from({ length: 61 }, () => 150));
  React.useEffect(() => {
    const iv = setInterval(() => setBuffer((b) => [...b.slice(1), sample()]), 1000);
    return () => clearInterval(iv);
  }, [sample]);
  return <LiveLineChart data={buffer} threshold={{ value: 400, label: "SLO 400MS" }} />;
}