Waffle chart

A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.

$npx shadcn@latest add @silicon-ui/waffle-chart

datachartnew

Installation

$npx shadcn@latest add @silicon-ui/waffle-chart

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/waffle-chart/waffle-chart.tsx
- components/silicon-ui/waffle-chart/waffle-chart.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 { WaffleChart } from "@/components/silicon-ui/waffle-chart/waffle-chart";

Prop	Type	Default
`data*` Categories in fill order. The first fills from the bottom-left corner, column by column.	`WaffleCategory[]`	—
`label*` What the whole is, such as "Electricity generation, 2023". Names the chart for assistive technology.	`string`	—
`unit` Unit after each raw value in the tooltip and table, such as "TWh".	`string`	`""`
`formatValue`	`(value: number, category: WaffleCategory) => string`	—
`rows` Grid rows. rows × columns cells make the whole; 10 × 10 means one cell per percent.	`number`	`10`
`columns`	`number`	`10`
`accentKey` The category painted in the accent. Pass null to keep every category neutral. Defaults to the first category.	`string \| null`	—
`activeKey` Controlled focused category. Others dim while one is focused.	`string \| null`	—
`defaultActiveKey`	`string \| null`	`null`
`onActiveChange`	`(key: string \| null) => void`	—
`legend` Category list with shares that roll to their new value.	`boolean`	`true`
`decimals` Decimal places for shares.	`number`	`0`
`emptyLabel`	`string`	`"No data"`
`ref`	`Ref<HTMLElement>`	—
`className`	`string`	—