Scatter chart

import { ScatterChart } from "@/components/ui/scatter-chart"

const plans = [
  { id: "starter", label: "Starter" },
  { id: "team", label: "Team" },
  { id: "enterprise", label: "Enterprise" },
];

const accounts = Array.from({ length: 36 }, (_, i) => {
  const seats = 4 + ((i * 37) % 180);
  const segment = seats > 120 ? "enterprise" : seats > 40 ? "team" : "starter";
  return { id: `a${i}`, label: ["Halden", "Ostra", "Northwind", "Sprout", "Lumen", "Kestrel"][i % 6] + ` ${i + 1}`, x: seats, y: Math.max(1200, Math.round(seats * 380 * (0.6 + ((i * 53) % 80) / 100) + ((i * 71) % 9) * 900)), size: 2 + ((i * 7) % 30), group: segment };
});

export function ScatterChartDemo() {
  return (
    <ScatterChart
      label="Accounts by seats and annual revenue"
      points={accounts}
      groups={plans}
      xLabel="Seats"
      yLabel="Revenue"
      sizeLabel="Open tickets"
      formatY={(v) => `$${Math.round(v / 1000)}k`}
      trend
      className="w-full"
    />
  );
}