Scatter chart

"use client";

import { ScatterChart } from "@/components/beautiful-charts/themes/instrument/recharts/scatter-chart";
import type { ChartConfig } from "@/components/beautiful-charts/core/contracts";

const data = [
  { team: "Atlas", cycle: 3.1, bugs: 4, size: 12 }, { team: "Beacon", cycle: 2.2, bugs: 2, size: 7 },
  { team: "Cobalt", cycle: 5.4, bugs: 11, size: 20 }, { team: "Drift", cycle: 2.8, bugs: 3, size: 9 },
  { team: "Ember", cycle: 4.0, bugs: 7, size: 15 }, { team: "Fjord", cycle: null, bugs: 1, size: 5 }, // not drawn, and counted
];

// Entries for the fields set labels and formats; bubbles are sized by area, so twice the people looks twice as big.
const config = {
  cycle: { label: "Cycle time", format: (days: number) => `${days} d` },
  bugs: { label: "Bugs" },
  size: { label: "People" },
} satisfies ChartConfig;

export function CycleTimeAndBugs() {
  return <ScatterChart data={data} xKey="cycle" yKey="bugs" sizeKey="size" nameKey="team" config={config} trend labelPoints="top" title="Longer cycles, more bugs" />;
}

export type Selection<TDatum> = {
  /** Index into the data you passed in, even when a brush shows a subset. */
  dataIndex: number;
  datum: TDatum;
  seriesKey: string | null;
  source: "pointer" | "keyboard" | "table";
  /** For a grouped segment (a donut's "Other"): the indexes of every row it stands for. `dataIndex` is the largest. */
  members?: number[] | undefined;
};

export type TooltipContext<TDatum> = {
  datum: TDatum;
  /** Index into the data you passed in. */
  dataIndex: number;
  /** Visible series at this index. `value` is your raw value; `share` is its part of the row in 100% mode. */
  series: { key: string; label: ReactNode; value: number | null; share?: number | null | undefined; color: string; selected: boolean }[];
};