Composed chart

"use client";

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

const data = [
  { quarter: "Q1", revenue: 420, margin: 0.31 },
  { quarter: "Q2", revenue: 510, margin: 0.34 },
  { quarter: "Q3", revenue: 480, margin: 0.29 },
  { quarter: "Q4", revenue: 620, margin: 0.36 },
];

// Bars on the left axis, a line on the right axis with its own formatter.
const config = {
  revenue: { label: "Revenue", type: "bar", axis: "left", color: "var(--chart-1)", format: (v: number) => `$${v}k` },
  margin: { label: "Margin", type: "line", axis: "right", color: "var(--chart-2)", format: (v: number) => `${Math.round(v * 100)}%` },
} satisfies ChartConfig;

export function RevenueAndMargin() {
  return <ComposedChart data={data} xKey="quarter" config={config} title="Revenue and margin" />;
}

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;
};

/** A range of rows shown in the plot, as indexes into your data (inclusive). */
export type RangeValue = { startIndex: number; endIndex: number };

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 }[];
};