Treemap

"use client";

import { TreemapChart } from "@/components/beautiful-charts/themes/instrument/recharts/treemap-chart";

// Area is proportional to value. Zero, negative and missing values can't be areas, so they're named under the chart.
const data = [
  { area: "Compute", item: "Instances", usd: 18400 }, { area: "Compute", item: "Functions", usd: 3200 },
  { area: "Storage", item: "Objects", usd: 6100 }, { area: "Storage", item: "Backups", usd: 2400 },
  { area: "Network", item: "Egress", usd: 4800 }, { area: "Network", item: "Credit", usd: -900 },
];

export function CloudSpend() {
  return <TreemapChart data={data} nameKey="item" valueKey="usd" groupKey="area" valueFormatter={(v) => `$${(v / 1000).toFixed(1)}k`} title="Where the money goes" />;
}

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