TreemapNew in 0.7.0

Usage

import { Treemap } from "@vesture/react";

<Treemap
  width={560}
  height={340}
  data={[
    { key: "eng", label: "Engineering", value: 420 },
    { key: "sales", label: "Sales", value: 260 },
    { key: "ops", label: "Operations", value: 120 },
  ]}
  formatValue={(v) => `$${v}k`}
  gap={4}
  cellRadius={6}
  onCellClick={(d) => setSelected(d.key)}
  selectedKey={selected}
/>

Behavior

• Rectangles are laid out with the squarified algorithm so cells stay close to square, largest first, and tile the whole box exactly. Zero and negative values are dropped.
• Labels hide automatically on cells smaller than minLabelWidth × minLabelHeight; every cell keeps a native tooltip with its label and value.
• Color resolves getColor → datum.color → colors[index] (the 8 chart series by default). selectedKey dims every other cell.
• renderLabel takes over the text of each cell with the cell's rectangle and its percent of the total — good for custom badges or multi-line labels.