Cause Allocation Treemap
Recharts Treemap that visualises portfolio allocation across cause categories, with proportional cells coloured by the FFG category palette.
Installation
pnpm dlx shadcn@latest add @ffg/cause-allocation-treemapUsage
"use client"
import { CauseAllocationTreemap, type TreemapNode } from "@/components/ui/cause-allocation-treemap"
const data: TreemapNode[] = [
{ name: "Social Justice", size: 40 },
{ name: "Culture", size: 20 },
{ name: "Education", size: 20 },
{ name: "Community", size: 15 },
{ name: "Environment", size: 5 },
]
<CauseAllocationTreemap data={data} />Cell colors are resolved from CATEGORY_ICONS in @ffg/impact-badge. Pass color on a node to override. Cells too small for text show only the color dot; roomier cells add the label. Cell fill uses --card so it inverts cleanly in dark mode.