Treemap

src/charts/Treemap.tsx

Import

import { Treemap } from "@ossrandom/design-system/charts";

Peer dependencies

d3-hierarchy

Example

Resource breakdown

<Treemap
  nodes={{
    id: "all", label: "All",
    children: [
      { id: "compute", label: "Compute", value: 100 },
      { id: "storage", label: "Storage", value: 60 },
      { id: "network", label: "Network", value: 40 },
    ],
  }}
  height={320}
/>

API

extends BaseProps

Prop	Type
`data` required	`TreemapNode`
`height`	`number`
`padding`	`number`
`maxDepth`	`number`
`engine`	`RenderEngine`
`valueFormat`	`(value: number) => string; readonly onNodeClick?: (node: TreemapNode) => void; readonly onNodeHover?: (node: TreemapNode \| null) => void;`

Related types

interface

TreemapNode

Prop	Type
`name` required	`string`
`value`	`number`
`color`	`string`
`children`	`readonly TreemapNode[]`