Treemap

A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.

$npx shadcn@latest add @silicon-ui/treemap

datachartnew

Installation

$npx shadcn@latest add @silicon-ui/treemap

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/treemap/treemap.tsx
- components/silicon-ui/treemap/treemap.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { Treemap } from "@/components/silicon-ui/treemap/treemap";

Prop	Type	Default
`data*` The root. Its label names the whole in the first breadcrumb.	`TreemapNode`	—
`label*` What the whole is, such as "Revenue". Names the chart for assistive technology.	`string`	—
`formatValue`	`(value: number) => string`	`value => grouped.format(value)`
`colorLabel` Names the shading measure in the tooltip and scale, such as "Growth". Tiles take the hue of their top level branch and grow deeper with the measure. Leave it out to draw every tile at one depth.	`string`	—
`formatColor`	`(value: number) => string`	`value => grouped.format(value)`
`colorDomain` Range of the color measure. Defaults to the range of the leaves.	`[number, number]`	—
`focus` Controlled id of the node that fills the view.	`string`	—
`defaultFocus`	`string`	—
`onFocusChange`	`(id: string) => void`	—
`height` Height of the tiles in pixels.	`number`	`420`
`emptyLabel`	`string`	`"No data yet"`
`ref`	`Ref<HTMLElement>`	—
`className`	`string`	—