@giddaa-housing/ui 0.1.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -6
- package/css/base.css +37 -0
- package/css/components.css +135 -0
- package/css/generated/shared.css +1 -0
- package/css/giddaa.css +402 -0
- package/css/preset.css +77 -0
- package/css/styles.css +2 -0
- package/css/theme.css +255 -0
- package/dist/accordion.js +5 -35
- package/dist/accordion.js.map +1 -1
- package/dist/activity-timeline.d.ts +33 -0
- package/dist/activity-timeline.js +212 -0
- package/dist/activity-timeline.js.map +1 -0
- package/dist/alert.js +5 -35
- package/dist/alert.js.map +1 -1
- package/dist/auth-layout.d.ts +23 -0
- package/dist/auth-layout.js +304 -0
- package/dist/auth-layout.js.map +1 -0
- package/dist/avatar.js +10 -142
- package/dist/avatar.js.map +1 -1
- package/dist/badge.d.ts +3 -2
- package/dist/badge.js +6 -114
- package/dist/badge.js.map +1 -1
- package/dist/bar-chart.d.ts +101 -77
- package/dist/bar-chart.js +142 -220
- package/dist/bar-chart.js.map +1 -1
- package/dist/breadcrumb.js +5 -35
- package/dist/breadcrumb.js.map +1 -1
- package/dist/bullet-chart.js +15 -48
- package/dist/bullet-chart.js.map +1 -1
- package/dist/button-group.js +14 -90
- package/dist/button-group.js.map +1 -1
- package/dist/button.d.ts +5 -5
- package/dist/button.js +7 -140
- package/dist/button.js.map +1 -1
- package/dist/calendar.js +12 -287
- package/dist/calendar.js.map +1 -1
- package/dist/card.js +5 -35
- package/dist/card.js.map +1 -1
- package/dist/carousel.js +12 -386
- package/dist/carousel.js.map +1 -1
- package/dist/chart.js +16 -480
- package/dist/chart.js.map +1 -1
- package/dist/checkbox.d.ts +1 -1
- package/dist/checkbox.js +13 -48
- package/dist/checkbox.js.map +1 -1
- package/dist/chunk-322YCNVL.js +278 -0
- package/dist/chunk-322YCNVL.js.map +1 -0
- package/dist/chunk-3ACQVT7A.js +25 -0
- package/dist/chunk-3ACQVT7A.js.map +1 -0
- package/dist/chunk-3T65TLJX.js +334 -0
- package/dist/chunk-3T65TLJX.js.map +1 -0
- package/dist/chunk-6ZSGQHH2.js +192 -0
- package/dist/chunk-6ZSGQHH2.js.map +1 -0
- package/dist/chunk-7TBMLFGW.js +41 -0
- package/dist/chunk-7TBMLFGW.js.map +1 -0
- package/dist/chunk-B4H6RNDH.js +135 -0
- package/dist/chunk-B4H6RNDH.js.map +1 -0
- package/dist/chunk-BUXCGZ6X.js +219 -0
- package/dist/chunk-BUXCGZ6X.js.map +1 -0
- package/dist/chunk-CHII2QHH.js +58 -0
- package/dist/chunk-CHII2QHH.js.map +1 -0
- package/dist/chunk-DMNOXRRW.js +147 -0
- package/dist/chunk-DMNOXRRW.js.map +1 -0
- package/dist/chunk-EFSOSSIC.js +130 -0
- package/dist/chunk-EFSOSSIC.js.map +1 -0
- package/dist/chunk-FZDSVMKY.js +363 -0
- package/dist/chunk-FZDSVMKY.js.map +1 -0
- package/dist/chunk-GJOFIJS3.js +246 -0
- package/dist/chunk-GJOFIJS3.js.map +1 -0
- package/dist/chunk-HL3ZSYES.js +23 -0
- package/dist/chunk-HL3ZSYES.js.map +1 -0
- package/dist/chunk-JVLUBAPB.js +129 -0
- package/dist/chunk-JVLUBAPB.js.map +1 -0
- package/dist/chunk-KDPYSOYZ.js +64 -0
- package/dist/chunk-KDPYSOYZ.js.map +1 -0
- package/dist/chunk-KSMDANKI.js +43 -0
- package/dist/chunk-KSMDANKI.js.map +1 -0
- package/dist/chunk-MEKCCOP5.js +46 -0
- package/dist/chunk-MEKCCOP5.js.map +1 -0
- package/dist/chunk-NOFXVRWL.js +451 -0
- package/dist/chunk-NOFXVRWL.js.map +1 -0
- package/dist/chunk-PC5MHNVA.js +171 -0
- package/dist/chunk-PC5MHNVA.js.map +1 -0
- package/dist/chunk-QKAQZ2GU.js +122 -0
- package/dist/chunk-QKAQZ2GU.js.map +1 -0
- package/dist/chunk-QZHSHSVV.js +26 -0
- package/dist/chunk-QZHSHSVV.js.map +1 -0
- package/dist/chunk-RBMK26XD.js +19 -0
- package/dist/chunk-RBMK26XD.js.map +1 -0
- package/dist/chunk-SFNJGF6M.js +262 -0
- package/dist/chunk-SFNJGF6M.js.map +1 -0
- package/dist/chunk-UJJNLGTM.js +112 -0
- package/dist/chunk-UJJNLGTM.js.map +1 -0
- package/dist/chunk-VGR4ZWJ3.js +418 -0
- package/dist/chunk-VGR4ZWJ3.js.map +1 -0
- package/dist/chunk-XG47P6D4.js +99 -0
- package/dist/chunk-XG47P6D4.js.map +1 -0
- package/dist/chunk-XZZAHNVM.js +21 -0
- package/dist/chunk-XZZAHNVM.js.map +1 -0
- package/dist/chunk-Y4TTYVNE.js +36 -0
- package/dist/chunk-Y4TTYVNE.js.map +1 -0
- package/dist/chunk-YDWIHW6Q.js +69 -0
- package/dist/chunk-YDWIHW6Q.js.map +1 -0
- package/dist/collapsible.js +6 -35
- package/dist/collapsible.js.map +1 -1
- package/dist/combobox.js +26 -694
- package/dist/combobox.js.map +1 -1
- package/dist/cta.d.ts +66 -0
- package/dist/cta.js +358 -0
- package/dist/cta.js.map +1 -0
- package/dist/currency-selector.d.ts +42 -0
- package/dist/currency-selector.js +192 -0
- package/dist/currency-selector.js.map +1 -0
- package/dist/date-picker.d.ts +18 -10
- package/dist/date-picker.js +105 -430
- package/dist/date-picker.js.map +1 -1
- package/dist/details-card.d.ts +19 -0
- package/dist/details-card.js +267 -0
- package/dist/details-card.js.map +1 -0
- package/dist/dialog.js +36 -146
- package/dist/dialog.js.map +1 -1
- package/dist/dropdown-menu.d.ts +1 -1
- package/dist/dropdown-menu.js +20 -358
- package/dist/dropdown-menu.js.map +1 -1
- package/dist/dropzone.js +13 -40
- package/dist/dropzone.js.map +1 -1
- package/dist/editorial-card.d.ts +29 -0
- package/dist/editorial-card.js +311 -0
- package/dist/editorial-card.js.map +1 -0
- package/dist/empty-state.js +5 -35
- package/dist/empty-state.js.map +1 -1
- package/dist/field.js +30 -135
- package/dist/field.js.map +1 -1
- package/dist/footer.d.ts +47 -0
- package/dist/footer.js +430 -0
- package/dist/footer.js.map +1 -0
- package/dist/funnel-chart.js +42 -415
- package/dist/funnel-chart.js.map +1 -1
- package/dist/gallery-indicator.d.ts +18 -0
- package/dist/gallery-indicator.js +12 -0
- package/dist/gallery-indicator.js.map +1 -0
- package/dist/heatmap-chart.d.ts +98 -0
- package/dist/heatmap-chart.js +248 -0
- package/dist/heatmap-chart.js.map +1 -0
- package/dist/infotip.d.ts +11 -0
- package/dist/infotip.js +66 -0
- package/dist/infotip.js.map +1 -0
- package/dist/input-group.d.ts +2 -1
- package/dist/input-group.js +15 -371
- package/dist/input-group.js.map +1 -1
- package/dist/input-size-context.js +5 -19
- package/dist/input-size-context.js.map +1 -1
- package/dist/input.js +6 -78
- package/dist/input.js.map +1 -1
- package/dist/item.js +5 -35
- package/dist/item.js.map +1 -1
- package/dist/kpi-card.js +12 -52
- package/dist/kpi-card.js.map +1 -1
- package/dist/label.js +5 -64
- package/dist/label.js.map +1 -1
- package/dist/line-chart.js +9 -166
- package/dist/line-chart.js.map +1 -1
- package/dist/logo.js +4 -141
- package/dist/logo.js.map +1 -1
- package/dist/map-indicator.d.ts +13 -0
- package/dist/map-indicator.js +109 -0
- package/dist/map-indicator.js.map +1 -0
- package/dist/match.d.ts +16 -0
- package/dist/match.js +113 -0
- package/dist/match.js.map +1 -0
- package/dist/media-gallery-hero.d.ts +60 -0
- package/dist/media-gallery-hero.js +362 -0
- package/dist/media-gallery-hero.js.map +1 -0
- package/dist/media-player.d.ts +60 -0
- package/dist/media-player.js +1394 -0
- package/dist/media-player.js.map +1 -0
- package/dist/number-input.js +30 -325
- package/dist/number-input.js.map +1 -1
- package/dist/page-header.js +4 -32
- package/dist/page-header.js.map +1 -1
- package/dist/pagination.d.ts +1 -0
- package/dist/pagination.js +27 -161
- package/dist/pagination.js.map +1 -1
- package/dist/password-input.d.ts +1 -0
- package/dist/password-input.js +21 -319
- package/dist/password-input.js.map +1 -1
- package/dist/phone-input.d.ts +2 -1
- package/dist/phone-input.js +148 -359
- package/dist/phone-input.js.map +1 -1
- package/dist/photo-gallery.d.ts +1 -1
- package/dist/photo-gallery.js +97 -393
- package/dist/photo-gallery.js.map +1 -1
- package/dist/pie-chart.js +17 -52
- package/dist/pie-chart.js.map +1 -1
- package/dist/popover.js +13 -158
- package/dist/popover.js.map +1 -1
- package/dist/price-tag.d.ts +35 -0
- package/dist/price-tag.js +178 -0
- package/dist/price-tag.js.map +1 -0
- package/dist/progress.d.ts +5 -2
- package/dist/progress.js +14 -303
- package/dist/progress.js.map +1 -1
- package/dist/property-listing-card.d.ts +32 -0
- package/dist/property-listing-card.js +235 -0
- package/dist/property-listing-card.js.map +1 -0
- package/dist/radar-chart.d.ts +110 -0
- package/dist/radar-chart.js +147 -0
- package/dist/radar-chart.js.map +1 -0
- package/dist/radio-group.js +15 -50
- package/dist/radio-group.js.map +1 -1
- package/dist/review-block.d.ts +20 -0
- package/dist/review-block.js +10 -0
- package/dist/review-block.js.map +1 -0
- package/dist/rich-text-editor.js +172 -433
- package/dist/rich-text-editor.js.map +1 -1
- package/dist/scatter-chart.d.ts +142 -0
- package/dist/scatter-chart.js +252 -0
- package/dist/scatter-chart.js.map +1 -0
- package/dist/search-input.d.ts +1 -0
- package/dist/search-input.js +22 -320
- package/dist/search-input.js.map +1 -1
- package/dist/select.js +15 -292
- package/dist/select.js.map +1 -1
- package/dist/separator.js +5 -68
- package/dist/separator.js.map +1 -1
- package/dist/sheet.js +14 -271
- package/dist/sheet.js.map +1 -1
- package/dist/sidebar.d.ts +1 -1
- package/dist/sidebar.js +89 -494
- package/dist/sidebar.js.map +1 -1
- package/dist/size-context.js +5 -17
- package/dist/size-context.js.map +1 -1
- package/dist/skeleton.js +4 -44
- package/dist/skeleton.js.map +1 -1
- package/dist/slider.d.ts +28 -0
- package/dist/slider.js +152 -0
- package/dist/slider.js.map +1 -0
- package/dist/sparkline.js +33 -341
- package/dist/sparkline.js.map +1 -1
- package/dist/stepper.js +5 -35
- package/dist/stepper.js.map +1 -1
- package/dist/styles.css +9593 -2
- package/dist/switch.js +13 -48
- package/dist/switch.js.map +1 -1
- package/dist/tab-list.js +35 -306
- package/dist/tab-list.js.map +1 -1
- package/dist/table.js +5 -32
- package/dist/table.js.map +1 -1
- package/dist/tabs.js +10 -150
- package/dist/tabs.js.map +1 -1
- package/dist/tag.d.ts +7 -6
- package/dist/tag.js +101 -97
- package/dist/tag.js.map +1 -1
- package/dist/testimonial-block.d.ts +34 -0
- package/dist/testimonial-block.js +377 -0
- package/dist/testimonial-block.js.map +1 -0
- package/dist/textarea.js +6 -73
- package/dist/textarea.js.map +1 -1
- package/dist/time-picker.js +119 -279
- package/dist/time-picker.js.map +1 -1
- package/dist/toast.js +27 -132
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.d.ts +5 -5
- package/dist/tooltip.js +7 -90
- package/dist/tooltip.js.map +1 -1
- package/dist/tree-map.js +41 -414
- package/dist/tree-map.js.map +1 -1
- package/dist/waterfall-chart.d.ts +129 -0
- package/dist/waterfall-chart.js +577 -0
- package/dist/waterfall-chart.js.map +1 -0
- package/package.json +98 -28
- package/dist/base.css +0 -32
- package/dist/files/red-hat-display-latin-300-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-300-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-300-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-300-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-400-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-400-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-400-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-400-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-500-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-500-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-500-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-500-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-600-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-600-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-600-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-600-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-700-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-700-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-700-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-700-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-800-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-800-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-800-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-800-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-900-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-900-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-900-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-900-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-300-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-300-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-300-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-300-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-400-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-400-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-400-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-400-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-500-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-500-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-500-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-500-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-600-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-600-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-600-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-600-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-700-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-700-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-700-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-700-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-800-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-800-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-800-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-800-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-900-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-900-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-900-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-900-normal.woff2 +0 -0
- package/dist/index.d.ts +0 -87
- package/dist/index.js +0 -10448
- package/dist/index.js.map +0 -1
- package/dist/red-hat-display.css +0 -2
- package/dist/theme/giddaa.css +0 -2
package/dist/tree-map.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ui/tree-map.tsx","../src/lib/cn.ts","../src/components/ui/chart.tsx","../src/components/ui/size-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Treemap as RechartsTreemap, type TreemapNode } from \"recharts\";\nimport { cn } from \"../../lib/cn\";\nimport {\n\tChartCard,\n\ttype ChartConfig,\n\tChartContainer,\n\tChartDescription,\n\tChartHeader,\n\tChartTitle,\n\tChartTooltip,\n\tChartTooltipContent,\n\ttype ChartValueType,\n} from \"./chart\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * A treemap — part-to-whole composition drawn as proportionally sized, nested\n * rectangles. Reach for one to compare category shares at a glance (portfolio\n * mix, holdings by type, regional distribution).\n *\n * Two shapes share one component: `flat` lays out a single level of categories;\n * `nested` groups subcategories beneath a shared group colour (each leaf inherits\n * its group's colour unless it sets its own `fill`). Both reuse the same palette,\n * in-tile labels, legend, frame, and tooltip — only the data depth differs.\n *\n * Per the chart architecture the recharts `Treemap` primitive is rendered\n * directly here; only the giddaa frame, palette, tile content, and legend are\n * supplied around it. Tiles are sized by `value`; the in-tile label (name + share\n * of the whole) is hidden on tiles too small to fit it.\n *\n * @example\n * <TreeMap\n * data={[\n * { label: \"Lekki\", value: 40 },\n * { label: \"Ikoyi\", value: 30 },\n * { label: \"V.I.\", value: 18 },\n * { label: \"Yaba\", value: 12 },\n * ]}\n * title=\"Portfolio mix\"\n * description=\"Share of holdings by location\"\n * tooltip\n * />\n *\n * @example\n * // Nested — subcategories grouped under a shared group colour\n * <TreeMap\n * data={[\n * { label: \"Residential\", children: [\n * { label: \"Apartments\", value: 27 },\n * { label: \"Duplexes\", value: 21 },\n * ] },\n * { label: \"Commercial\", children: [\n * { label: \"Offices\", value: 17 },\n * { label: \"Retail\", value: 13 },\n * ] },\n * { label: \"Land\", children: [{ label: \"Plots\", value: 14 }] },\n * ]}\n * title=\"Portfolio mix\"\n * description=\"Holdings by category & type\"\n * />\n */\n\n/** Treemap sizes line up with the three shared `ComponentSize` values. */\ntype TreeMapSize = ComponentSize;\n\n/** Where the colour-key legend sits relative to the plot. */\ntype TreeMapLegendPlacement = \"right\" | \"bottom\";\n\ntype TreeMapDatum = {\n\t/** Category name, shown in the tile label, legend, and tooltip. */\n\tlabel: string;\n\t/** Tile value — drives the tile's area. Omit on a group with `children`. */\n\tvalue?: number;\n\t/** Tile/group colour; defaults to the palette in order. Leaves inherit it. */\n\tfill?: string;\n\t/** Subcategories for a `nested` treemap. */\n\tchildren?: TreeMapDatum[];\n};\n\n/**\n * Tile palette, ordered by share: forest → brass → moss → clay → stone. Each\n * entry pairs a tile `fill` with the `text` colour that reads on it (a tonal\n * tint of the same scale). Giddaa has no `chart-1`…`chart-N` tokens yet, so these\n * map to the brand scales; assign by order, or override per datum with `fill`.\n */\nconst TREE_MAP_PALETTE = [\n\t{ fill: \"var(--color-forest-700)\", text: \"var(--color-forest-100)\" },\n\t{ fill: \"var(--color-brass-500)\", text: \"var(--color-brass-900)\" },\n\t{ fill: \"var(--color-moss-600)\", text: \"var(--color-moss-100)\" },\n\t{ fill: \"var(--color-clay-500)\", text: \"var(--color-clay-50)\" },\n\t{ fill: \"var(--color-stone-500)\", text: \"var(--color-stone-50)\" },\n] as const;\n\ntype TreeMapLayout = {\n\t/** Plot box height in px. Width stays fluid via the ResponsiveContainer. */\n\theight: number;\n\t/** Inset around every tile in px — straddles edges to read as a gap. */\n\tgap: number;\n\t/** Tile corner radius in px. */\n\tradius: number;\n\t/** Tile label padding from the top-left corner in px. */\n\tlabelPadding: number;\n\t/** Tile label (name) font size in px. */\n\tnameFontSize: number;\n\t/** Tile label (share) font size in px. */\n\tshareFontSize: number;\n\t/** Smallest tile width/height in px that still shows its label. */\n\tlabelMinSide: number;\n};\n\nconst TREE_MAP_LAYOUT: Record<TreeMapSize, TreeMapLayout> = {\n\tsm: {\n\t\theight: 180,\n\t\tgap: 3,\n\t\tradius: 4,\n\t\tlabelPadding: 8,\n\t\tnameFontSize: 11,\n\t\tshareFontSize: 10,\n\t\tlabelMinSide: 44,\n\t},\n\tmd: {\n\t\theight: 240,\n\t\tgap: 4,\n\t\tradius: 6,\n\t\tlabelPadding: 10,\n\t\tnameFontSize: 12,\n\t\tshareFontSize: 11,\n\t\tlabelMinSide: 52,\n\t},\n\tlg: {\n\t\theight: 300,\n\t\tgap: 5,\n\t\tradius: 8,\n\t\tlabelPadding: 12,\n\t\tnameFontSize: 14,\n\t\tshareFontSize: 12,\n\t\tlabelMinSide: 60,\n\t},\n};\n\n/** Vertical legend column / value list — shared with the right-hand legend. */\nconst treeMapLegendVariants = cva(\"flex min-w-0\", {\n\tvariants: {\n\t\tplacement: {\n\t\t\tright: \"flex-col\",\n\t\t\tbottom: \"flex-row flex-wrap items-center\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{ placement: \"right\", size: \"sm\", className: \"gap-2\" },\n\t\t{ placement: \"right\", size: \"md\", className: \"gap-3\" },\n\t\t{ placement: \"right\", size: \"lg\", className: \"gap-3.5\" },\n\t\t{ placement: \"bottom\", className: \"gap-x-4 gap-y-2\" },\n\t],\n\tdefaultVariants: { placement: \"right\", size: \"md\" },\n});\n\nconst treeMapLegendDotVariants = cva(\"shrink-0 rounded-full\", {\n\tvariants: {\n\t\tsize: { sm: \"size-2\", md: \"size-2.5\", lg: \"size-3\" },\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\n/** A tile / group resolved with its palette colours, ready to render. */\ntype ResolvedDatum = {\n\tlabel: string;\n\tvalue?: number;\n\tfill: string;\n\ttext: string;\n\tchildren?: ResolvedDatum[];\n};\n\n/**\n * Walk the data, assigning each top-level entry a palette colour (by order) that\n * its leaves inherit, and summing the leaf values into a grand total. Top-level\n * entries become the legend keys: tiles in `flat`, groups in `nested`.\n */\nfunction resolveData(data: TreeMapDatum[]): {\n\tresolved: ResolvedDatum[];\n\ttotal: number;\n} {\n\tlet total = 0;\n\n\tconst resolve = (\n\t\tdatum: TreeMapDatum,\n\t\tpalette: { fill: string; text: string },\n\t): ResolvedDatum => {\n\t\tconst fill = datum.fill ?? palette.fill;\n\t\tconst text = palette.text;\n\n\t\tif (datum.children?.length) {\n\t\t\treturn {\n\t\t\t\tlabel: datum.label,\n\t\t\t\tfill,\n\t\t\t\ttext,\n\t\t\t\tchildren: datum.children.map((child) => resolve(child, { fill, text })),\n\t\t\t};\n\t\t}\n\n\t\ttotal += datum.value ?? 0;\n\t\treturn { label: datum.label, value: datum.value, fill, text };\n\t};\n\n\tconst resolved = data.map((datum, i) =>\n\t\tresolve(datum, TREE_MAP_PALETTE[i % TREE_MAP_PALETTE.length]),\n\t);\n\n\treturn { resolved, total };\n}\n\ntype TreeMapProps = Omit<\n\tReact.ComponentProps<typeof ChartCard>,\n\t\"size\" | \"children\"\n> & {\n\t/** Categories — flat leaves, or groups carrying `children` (nested). */\n\tdata: TreeMapDatum[];\n\t/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */\n\tsize?: TreeMapSize;\n\t/** Chart heading. Omit to hide the title. */\n\ttitle?: React.ReactNode;\n\t/** Supporting metadata (period, source). Omit to hide the description. */\n\tdescription?: React.ReactNode;\n\t/** Enable the hover value tooltip. Default false. */\n\ttooltip?: boolean;\n\t/** Legend placement — a right column or a wrapped bottom row. Default right. */\n\tlegend?: TreeMapLegendPlacement;\n\t/** Format the tile value in the tooltip. Defaults to a localised number. */\n\tvalueFormatter?: (value: number) => string;\n\t/** Value formatting for the tooltip. Defaults to `number`. */\n\tvalueType?: ChartValueType;\n};\n\nfunction TreeMap({\n\tdata,\n\tsize,\n\ttitle,\n\tdescription,\n\ttooltip = false,\n\tlegend = \"right\",\n\tvalueFormatter,\n\tvalueType = \"number\",\n\tclassName,\n\t...props\n}: TreeMapProps) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst layout = TREE_MAP_LAYOUT[resolvedSize];\n\tconst { resolved, total } = resolveData(data);\n\n\t// recharts reads `value`/`label`/`children`/`fill` straight off each node;\n\t// the custom content below pulls `fill`, `text`, and the share from them.\n\tconst config = Object.fromEntries(\n\t\tresolved.map((datum) => [\n\t\t\tdatum.label,\n\t\t\t{ label: datum.label, color: datum.fill },\n\t\t]),\n\t) satisfies ChartConfig;\n\n\tconst tooltipNode = tooltip ? (\n\t\t<ChartTooltip\n\t\t\tcontent={\n\t\t\t\t<ChartTooltipContent\n\t\t\t\t\tnameKey=\"label\"\n\t\t\t\t\tvalueType={valueType}\n\t\t\t\t\tformatter={\n\t\t\t\t\t\tvalueFormatter\n\t\t\t\t\t\t\t? (value) =>\n\t\t\t\t\t\t\t\t\ttypeof value === \"number\" ? valueFormatter(value) : value\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t) : null;\n\n\tconst legendNode = (\n\t\t<ul\n\t\t\tclassName={cn(\n\t\t\t\ttreeMapLegendVariants({ placement: legend, size: resolvedSize }),\n\t\t\t)}\n\t\t>\n\t\t\t{resolved.map((datum) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={datum.label}\n\t\t\t\t\tclassName=\"flex items-center gap-2 text-fg-primary\"\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={cn(treeMapLegendDotVariants({ size: resolvedSize }))}\n\t\t\t\t\t\tstyle={{ backgroundColor: datum.fill }}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"min-w-0 truncate\">{datum.label}</span>\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ul>\n\t);\n\n\treturn (\n\t\t<ChartCard size={resolvedSize} className={className} {...props}>\n\t\t\t{(title != null || description != null) && (\n\t\t\t\t<ChartHeader>\n\t\t\t\t\t{title != null && <ChartTitle>{title}</ChartTitle>}\n\t\t\t\t\t{description != null && (\n\t\t\t\t\t\t<ChartDescription>{description}</ChartDescription>\n\t\t\t\t\t)}\n\t\t\t\t</ChartHeader>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex gap-4\",\n\t\t\t\t\tlegend === \"right\" ? \"flex-row items-stretch\" : \"flex-col\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={config}\n\t\t\t\t\tclassName=\"aspect-auto min-w-0 flex-1\"\n\t\t\t\t\tstyle={{ height: layout.height }}\n\t\t\t\t>\n\t\t\t\t\t<RechartsTreemap\n\t\t\t\t\t\tdata={resolved}\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tnameKey=\"label\"\n\t\t\t\t\t\ttype=\"flat\"\n\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t\tcontent={<TreeMapTile total={total} layout={layout} />}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tooltipNode}\n\t\t\t\t\t</RechartsTreemap>\n\t\t\t\t</ChartContainer>\n\t\t\t\t{legendNode}\n\t\t\t</div>\n\t\t</ChartCard>\n\t);\n}\n\n/**\n * Custom recharts `Treemap` tile. recharts calls it for every node (root, groups,\n * leaves); only leaves carry a value and tile the whole plot, so non-leaves draw\n * nothing. A leaf renders an inset, rounded rectangle in its colour with an\n * in-tile label (name over its share of the whole), dropped when the tile is too\n * small to fit it.\n */\ntype TreeMapTileProps = Partial<TreemapNode> & {\n\ttotal: number;\n\tlayout: TreeMapLayout;\n\t/** Resolved tile colours, attached to each datum by `resolveData`. */\n\tfill?: string;\n\ttext?: string;\n};\n\nfunction TreeMapTile({\n\ttotal,\n\tlayout,\n\tx,\n\ty,\n\twidth,\n\theight,\n\tvalue,\n\tname,\n\tchildren,\n\tfill,\n\ttext,\n}: TreeMapTileProps) {\n\t// Non-leaf nodes (root, groups) are pure containers — their leaves cover them.\n\tif (\n\t\tchildren != null ||\n\t\tx == null ||\n\t\ty == null ||\n\t\twidth == null ||\n\t\theight == null\n\t) {\n\t\treturn <g />;\n\t}\n\n\tconst tileX = x + layout.gap / 2;\n\tconst tileY = y + layout.gap / 2;\n\tconst tileW = Math.max(0, width - layout.gap);\n\tconst tileH = Math.max(0, height - layout.gap);\n\n\tconst showLabel =\n\t\ttileW >= layout.labelMinSide && tileH >= layout.labelMinSide;\n\tconst share = total > 0 ? Math.round(((value ?? 0) / total) * 100) : 0;\n\n\treturn (\n\t\t<g>\n\t\t\t<rect\n\t\t\t\tx={tileX}\n\t\t\t\ty={tileY}\n\t\t\t\twidth={tileW}\n\t\t\t\theight={tileH}\n\t\t\t\trx={layout.radius}\n\t\t\t\try={layout.radius}\n\t\t\t\tfill={fill}\n\t\t\t/>\n\t\t\t{showLabel && (\n\t\t\t\t<text\n\t\t\t\t\tx={tileX + layout.labelPadding}\n\t\t\t\t\ty={tileY + layout.labelPadding}\n\t\t\t\t\tfill={text}\n\t\t\t\t\tdominantBaseline=\"hanging\"\n\t\t\t\t>\n\t\t\t\t\t<tspan\n\t\t\t\t\t\tx={tileX + layout.labelPadding}\n\t\t\t\t\t\tclassName=\"font-semibold\"\n\t\t\t\t\t\tstyle={{ fontSize: layout.nameFontSize }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</tspan>\n\t\t\t\t\t<tspan\n\t\t\t\t\t\tx={tileX + layout.labelPadding}\n\t\t\t\t\t\tdy={layout.nameFontSize + 4}\n\t\t\t\t\t\tclassName=\"tabular-nums\"\n\t\t\t\t\t\tstyle={{ fontSize: layout.shareFontSize }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{share}%\n\t\t\t\t\t</tspan>\n\t\t\t\t</text>\n\t\t\t)}\n\t\t</g>\n\t);\n}\n\nexport { TREE_MAP_LAYOUT, TREE_MAP_PALETTE, TreeMap };\nexport type {\n\tTreeMapDatum,\n\tTreeMapLayout,\n\tTreeMapLegendPlacement,\n\tTreeMapProps,\n\tTreeMapSize,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"../../lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Markers use `--color-surface-brand` as a placeholder. Giddaa has no\n * categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each\n * series (its legend marker and tooltip dot) to its own colour once they exist.\n * Until then any series without an explicit colour paints brand-green.\n */\nconst SERIES_COLOR_PLACEHOLDER = \"var(--color-surface-brand)\";\n\n/** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */\nexport type ChartValueType = \"number\" | \"percentage\" | \"currency\";\n\nfunction formatChartValue(\n\tvalue: TooltipValueType | undefined,\n\ttype: ChartValueType,\n) {\n\tif (Array.isArray(value)) {\n\t\treturn value.join(\", \");\n\t}\n\n\tif (typeof value !== \"number\") {\n\t\treturn value == null ? \"\" : String(value);\n\t}\n\n\tswitch (type) {\n\t\tcase \"currency\":\n\t\t\treturn `₦${value.toLocaleString(\"en-NG\")}`;\n\t\tcase \"percentage\":\n\t\t\treturn `${value.toLocaleString(\"en-NG\", {\n\t\t\t\tminimumFractionDigits: 1,\n\t\t\t\tmaximumFractionDigits: 1,\n\t\t\t})}%`;\n\t\tdefault:\n\t\t\treturn value.toLocaleString(\"en-NG\");\n\t}\n}\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n\tstring,\n\t{\n\t\tlabel?: React.ReactNode;\n\t\ticon?: React.ComponentType;\n\t} & (\n\t\t| { color?: string; theme?: never }\n\t\t| { color?: never; theme: Record<keyof typeof THEMES, string> }\n\t)\n>;\n\ntype ChartContextProps = {\n\tconfig: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n\tconst context = React.useContext(ChartContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useChart must be used within a <ChartContainer />\");\n\t}\n\n\treturn context;\n}\n\n/**\n * Shared chart frame — the chrome that surrounds the plot of any chart type\n * (bar, line, area, pie). These are presentational, domain-free, and size-aware:\n * a `size` flows through `SizeProvider` so the plot and its labels can scale\n * with the card. Compose them with the plot primitives:\n *\n * <ChartCard size=\"md\">\n * <ChartHeader>\n * <ChartTitle>Revenue Overview</ChartTitle>\n * <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n * </ChartHeader>\n * <ChartContainer config={config}>{/* recharts plot *\\/}</ChartContainer>\n * </ChartCard>\n */\nconst chartCardVariants = cva(\n\t\"flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-3 p-4\",\n\t\t\t\tmd: \"gap-4 p-5\",\n\t\t\t\tlg: \"gap-5 p-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartCard({\n\tclassName,\n\tsize,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"section\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<section\n\t\t\t\tdata-slot=\"chart-card\"\n\t\t\t\tclassName={cn(chartCardVariants({ size: resolvedSize }), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</section>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction ChartHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart-header\"\n\t\t\tclassName={cn(\"flex min-w-0 flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartTitleVariants = cva(\"min-w-0 font-bold text-fg-primary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-md\",\n\t\t\tmd: \"text-gdt-lg\",\n\t\t\tlg: \"text-gdt-h5\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartTitle({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"h3\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<h3\n\t\t\tdata-slot=\"chart-title\"\n\t\t\tclassName={cn(chartTitleVariants({ size: resolvedSize }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartDescriptionVariants = cva(\"min-w-0 font-normal text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartDescription({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"p\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"chart-description\"\n\t\t\tclassName={cn(\n\t\t\t\tchartDescriptionVariants({ size: resolvedSize }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ChartContainer({\n\tid,\n\tclassName,\n\tchildren,\n\tconfig,\n\tinitialDimension = INITIAL_DIMENSION,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tconfig: ChartConfig;\n\tchildren: React.ComponentProps<\n\t\ttypeof RechartsPrimitive.ResponsiveContainer\n\t>[\"children\"];\n\tinitialDimension?: {\n\t\twidth: number;\n\t\theight: number;\n\t};\n}) {\n\tconst uniqueId = React.useId();\n\tconst chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n\treturn (\n\t\t<ChartContext.Provider value={{ config }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart\"\n\t\t\t\tdata-chart={chartId}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChartStyle id={chartId} config={config} />\n\t\t\t\t<RechartsPrimitive.ResponsiveContainer\n\t\t\t\t\tinitialDimension={initialDimension}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</RechartsPrimitive.ResponsiveContainer>\n\t\t\t</div>\n\t\t</ChartContext.Provider>\n\t);\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n\tconst colorConfig = Object.entries(config).filter(\n\t\t([, config]) => config.theme ?? config.color,\n\t);\n\n\tif (!colorConfig.length) {\n\t\treturn null;\n\t}\n\n\tconst styleContent = Object.entries(THEMES)\n\t\t.map(\n\t\t\t([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n\t.map(([key, itemConfig]) => {\n\t\tconst color =\n\t\t\titemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n\t\t\titemConfig.color;\n\t\treturn color ? ` --color-${key}: ${color};` : null;\n\t})\n\t.join(\"\\n\")}\n}\n`,\n\t\t)\n\t\t.join(\"\\n\");\n\n\treturn <style>{styleContent}</style>;\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Hover tooltip for a chart data point. It surfaces a single precise value with\n * type-appropriate formatting — grouped integers, percentages, or ₦-prefixed\n * currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,\n * 1px border-subtle) so users can read exact figures without leaving the chart.\n *\n * Anatomy: series dot · metric label · hero value · period caption.\n */\nconst chartTooltipVariants = cva(\n\t\"flex flex-col bg-surface-overlay border border-line-subtle shadow-2\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"gap-0.5 rounded-md p-2\",\n\t\t\t\tsm: \"gap-0.5 rounded-md p-2.5\",\n\t\t\t\tmd: \"gap-1 rounded-lg p-3\",\n\t\t\t\tlg: \"gap-1 rounded-xl p-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst chartTooltipDotVariants = cva(\"shrink-0 rounded-full\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"size-1.5\",\n\t\t\tsm: \"size-2\",\n\t\t\tmd: \"size-2.5\",\n\t\t\tlg: \"size-2.5\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst chartTooltipLabelVariants = cva(\"font-medium text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-gdt-xs\",\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nconst chartTooltipValueVariants = cva(\n\t\"font-extrabold text-fg-primary tabular-nums\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"text-gdt-sm\",\n\t\t\t\tsm: \"text-gdt-md\",\n\t\t\t\tmd: \"text-gdt-lg\",\n\t\t\t\tlg: \"text-gdt-xl\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartTooltipContent({\n\tactive,\n\tpayload,\n\tclassName,\n\thideIndicator = false,\n\tlabel,\n\tlabelFormatter,\n\tformatter,\n\tcolor,\n\tnameKey,\n\tvalueType = \"number\",\n\tsize = \"md\",\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n\tReact.ComponentProps<\"div\"> & {\n\t\thideIndicator?: boolean;\n\t\tnameKey?: string;\n\t\tvalueType?: ChartValueType;\n\t} & VariantProps<typeof chartTooltipVariants> &\n\tOmit<\n\t\tRechartsPrimitive.DefaultTooltipContentProps<\n\t\t\tTooltipValueType,\n\t\t\tTooltipNameType\n\t\t>,\n\t\t\"accessibilityLayer\"\n\t>) {\n\tconst { config } = useChart();\n\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst [item] = payload.filter((entry) => entry.type !== \"none\");\n\n\tif (!item) {\n\t\treturn null;\n\t}\n\n\tconst key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\tconst dotColor =\n\t\tcolor ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;\n\n\t// Metric label — the short name of the series being read, e.g. \"Total Revenue\".\n\tconst metricLabel = itemConfig?.label ?? item.name;\n\t// Hero value — the precise, formatted figure, the visual focus of the tooltip.\n\tconst heroValue = formatter\n\t\t? formatter(item.value, item.name ?? \"\", item, 0, item.payload)\n\t\t: formatChartValue(item.value, valueType);\n\t// Period caption — the time context for the value, e.g. \"March 2026\".\n\tconst periodCaption = labelFormatter\n\t\t? labelFormatter(label, payload)\n\t\t: ((typeof label === \"string\" ? config[label]?.label : null) ?? label);\n\n\treturn (\n\t\t<div className={cn(chartTooltipVariants({ size }), className)}>\n\t\t\t{metricLabel != null && (\n\t\t\t\t<div className=\"flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0\">\n\t\t\t\t\t{!hideIndicator &&\n\t\t\t\t\t\t(itemConfig?.icon ? (\n\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName={cn(chartTooltipDotVariants({ size }))}\n\t\t\t\t\t\t\t\tstyle={{ backgroundColor: dotColor }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t<span className={cn(chartTooltipLabelVariants({ size }))}>\n\t\t\t\t\t\t{metricLabel}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<p className={cn(chartTooltipValueVariants({ size }))}>{heroValue}</p>\n\t\t\t{periodCaption != null && periodCaption !== \"\" && (\n\t\t\t\t<p className=\"text-gdt-xs text-fg-caption-placeholder\">\n\t\t\t\t\t{periodCaption}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Marker shape that ties a legend item to its series. */\ntype ChartLegendMarker = \"dot\" | \"square\" | \"line\";\n\nconst chartLegendItemVariants = cva(\n\t\"group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3\",\n\t\t\t\tmd: \"gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5\",\n\t\t\t},\n\t\t\tinteractive: {\n\t\t\t\ttrue: \"cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t\tinactive: {\n\t\t\t\ttrue: \"text-fg-caption-placeholder line-through\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tinteractive: false,\n\t\t\tinactive: false,\n\t\t},\n\t},\n);\n\nconst chartLegendMarkerSizeVariants = cva(\"shrink-0\", {\n\tvariants: {\n\t\tmarker: {\n\t\t\tdot: \"rounded-full\",\n\t\t\tsquare: \"rounded-[2px]\",\n\t\t\tline: \"rounded-full\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"\",\n\t\t\tmd: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{ marker: [\"dot\", \"square\"], size: \"sm\", className: \"size-2\" },\n\t\t{ marker: [\"dot\", \"square\"], size: \"md\", className: \"size-2.5\" },\n\t\t{ marker: \"line\", size: \"sm\", className: \"h-[3px] w-3\" },\n\t\t{ marker: \"line\", size: \"md\", className: \"h-[3px] w-3.5\" },\n\t],\n\tdefaultVariants: { marker: \"dot\", size: \"md\" },\n});\n\n/**\n * A shared legend for all chart types. Each item pairs a series marker with a\n * label and can be toggled to hide or show its series — the inactive state mutes\n * the marker and strikes through the label. Items compose into horizontal rows\n * or vertical columns, in two sizes, with dot, square, or line markers.\n *\n * Toggling: pass `onToggle` to make items interactive. Inactive items are read\n * from each payload entry's `inactive` flag (recharts sets this when wired) or\n * the controlled `inactiveKeys` set.\n */\nfunction ChartLegendContent({\n\tclassName,\n\thideIcon = false,\n\tpayload,\n\tverticalAlign = \"bottom\",\n\tnameKey,\n\tmarker = \"dot\",\n\tsize = \"md\",\n\torientation = \"horizontal\",\n\tinactiveKeys,\n\tonToggle,\n}: React.ComponentProps<\"div\"> & {\n\thideIcon?: boolean;\n\tnameKey?: string;\n\tmarker?: ChartLegendMarker;\n\tsize?: \"sm\" | \"md\";\n\torientation?: \"horizontal\" | \"vertical\";\n\tinactiveKeys?: Iterable<string>;\n\tonToggle?: (key: string) => void;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n\tconst { config } = useChart();\n\n\tif (!payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst inactiveSet = inactiveKeys ? new Set(inactiveKeys) : undefined;\n\tconst interactive = Boolean(onToggle);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex\",\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"flex-col items-start gap-0.5\"\n\t\t\t\t\t: \"flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5\",\n\t\t\t\tverticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{payload\n\t\t\t\t.filter((item) => item.type !== \"none\")\n\t\t\t\t.map((item, index) => {\n\t\t\t\t\tconst key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n\t\t\t\t\tconst itemKey = `${item.dataKey ?? item.value ?? index}`;\n\t\t\t\t\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\t\t\t\t\tconst inactive =\n\t\t\t\t\t\t(inactiveSet?.has(key) ?? false) || Boolean(item.inactive);\n\t\t\t\t\tconst markerColor = inactive\n\t\t\t\t\t\t? \"var(--color-fg-caption-placeholder)\"\n\t\t\t\t\t\t: (item.color ?? SERIES_COLOR_PLACEHOLDER);\n\n\t\t\t\t\tconst content = (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{itemConfig?.icon && !hideIcon ? (\n\t\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\tchartLegendMarkerSizeVariants({ marker, size }),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: markerColor }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{itemConfig?.label ?? item.value}\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\n\t\t\t\t\tif (interactive) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-pressed={!inactive}\n\t\t\t\t\t\t\t\tonClick={() => onToggle?.(key)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t</div>\n\t);\n}\n\n/** The size-scaled layout numbers a cartesian chart needs to build axis props. */\ntype CartesianAxisLayout = {\n\ttickMargin: number;\n\ttickFontSize: number;\n\tyAxisWidth: number;\n};\n\n/**\n * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick\n * or axis lines, a size-scaled tick font, and a reserved value-axis width) that\n * every bar and line chart would otherwise repeat per axis. Spread the result\n * onto the recharts axis, then add the chart-specific props (`dataKey`,\n * `domain`, `ticks`, a `width`/`type` override, …):\n *\n * const chart = useBarChartLayout();\n * <XAxis dataKey=\"month\" {...chart.xAxis} />\n * <YAxis domain={[0, 120]} {...chart.yAxis} />\n */\nfunction cartesianAxisProps(layout: CartesianAxisLayout) {\n\tconst tick = { fontSize: layout.tickFontSize };\n\treturn {\n\t\txAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\ttickMargin: layout.tickMargin,\n\t\t\ttick,\n\t\t},\n\t\tyAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\twidth: layout.yAxisWidth,\n\t\t\ttick,\n\t\t},\n\t} as const;\n}\n\nfunction getPayloadConfigFromPayload(\n\tconfig: ChartConfig,\n\tpayload: unknown,\n\tkey: string,\n) {\n\tif (typeof payload !== \"object\" || payload === null) {\n\t\treturn undefined;\n\t}\n\n\tconst payloadPayload =\n\t\t\"payload\" in payload &&\n\t\ttypeof payload.payload === \"object\" &&\n\t\tpayload.payload !== null\n\t\t\t? payload.payload\n\t\t\t: undefined;\n\n\tlet configLabelKey: string = key;\n\n\tif (\n\t\tkey in payload &&\n\t\ttypeof payload[key as keyof typeof payload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payload[key as keyof typeof payload] as string;\n\t} else if (\n\t\tpayloadPayload &&\n\t\tkey in payloadPayload &&\n\t\ttypeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payloadPayload[\n\t\t\tkey as keyof typeof payloadPayload\n\t\t] as string;\n\t}\n\n\treturn configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n\tcartesianAxisProps,\n\tChartCard,\n\tChartContainer,\n\tChartDescription,\n\tChartHeader,\n\tChartLegend,\n\tChartLegendContent,\n\tChartStyle,\n\tChartTitle,\n\tChartTooltip,\n\tChartTooltipContent,\n};\nexport type { CartesianAxisLayout };\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":"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","names":["cva","Fragment","jsx","config","jsx","jsxs","cva"]}
|
|
1
|
+
{"version":3,"sources":["../src/tree-map.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Treemap as RechartsTreemap, type TreemapNode } from \"recharts\";\nimport {\n\tChartCard,\n\ttype ChartConfig,\n\tChartContainer,\n\tChartDescription,\n\tChartHeader,\n\tChartTitle,\n\tChartTooltip,\n\tChartTooltipContent,\n\ttype ChartValueType,\n} from \"./chart\";\nimport { cn } from \"./lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * A treemap — part-to-whole composition drawn as proportionally sized, nested\n * rectangles. Reach for one to compare category shares at a glance (portfolio\n * mix, holdings by type, regional distribution).\n *\n * Two shapes share one component: `flat` lays out a single level of categories;\n * `nested` groups subcategories beneath a shared group colour (each leaf inherits\n * its group's colour unless it sets its own `fill`). Both reuse the same palette,\n * in-tile labels, legend, frame, and tooltip — only the data depth differs.\n *\n * Per the chart architecture the recharts `Treemap` primitive is rendered\n * directly here; only the giddaa frame, palette, tile content, and legend are\n * supplied around it. Tiles are sized by `value`; the in-tile label (name + share\n * of the whole) is hidden on tiles too small to fit it.\n *\n * @example\n * <TreeMap\n * data={[\n * { label: \"Lekki\", value: 40 },\n * { label: \"Ikoyi\", value: 30 },\n * { label: \"V.I.\", value: 18 },\n * { label: \"Yaba\", value: 12 },\n * ]}\n * title=\"Portfolio mix\"\n * description=\"Share of holdings by location\"\n * tooltip\n * />\n *\n * @example\n * // Nested — subcategories grouped under a shared group colour\n * <TreeMap\n * data={[\n * { label: \"Residential\", children: [\n * { label: \"Apartments\", value: 27 },\n * { label: \"Duplexes\", value: 21 },\n * ] },\n * { label: \"Commercial\", children: [\n * { label: \"Offices\", value: 17 },\n * { label: \"Retail\", value: 13 },\n * ] },\n * { label: \"Land\", children: [{ label: \"Plots\", value: 14 }] },\n * ]}\n * title=\"Portfolio mix\"\n * description=\"Holdings by category & type\"\n * />\n */\n\n/** Treemap sizes line up with the three shared `ComponentSize` values. */\ntype TreeMapSize = ComponentSize;\n\n/** Where the colour-key legend sits relative to the plot. */\ntype TreeMapLegendPlacement = \"right\" | \"bottom\";\n\ntype TreeMapDatum = {\n\t/** Category name, shown in the tile label, legend, and tooltip. */\n\tlabel: string;\n\t/** Tile value — drives the tile's area. Omit on a group with `children`. */\n\tvalue?: number;\n\t/** Tile/group colour; defaults to the palette in order. Leaves inherit it. */\n\tfill?: string;\n\t/** Subcategories for a `nested` treemap. */\n\tchildren?: TreeMapDatum[];\n};\n\n/**\n * Tile palette, ordered by share: forest → brass → moss → clay → stone. Each\n * entry pairs a tile `fill` with the `text` colour that reads on it (a tonal\n * tint of the same scale). Giddaa has no `chart-1`…`chart-N` tokens yet, so these\n * map to the brand scales; assign by order, or override per datum with `fill`.\n */\nconst TREE_MAP_PALETTE = [\n\t{ fill: \"var(--color-forest-700)\", text: \"var(--color-forest-100)\" },\n\t{ fill: \"var(--color-brass-500)\", text: \"var(--color-brass-900)\" },\n\t{ fill: \"var(--color-moss-600)\", text: \"var(--color-moss-100)\" },\n\t{ fill: \"var(--color-clay-500)\", text: \"var(--color-clay-50)\" },\n\t{ fill: \"var(--color-stone-500)\", text: \"var(--color-stone-50)\" },\n] as const;\n\ntype TreeMapLayout = {\n\t/** Plot box height in px. Width stays fluid via the ResponsiveContainer. */\n\theight: number;\n\t/** Inset around every tile in px — straddles edges to read as a gap. */\n\tgap: number;\n\t/** Tile corner radius in px. */\n\tradius: number;\n\t/** Tile label padding from the top-left corner in px. */\n\tlabelPadding: number;\n\t/** Tile label (name) font size in px. */\n\tnameFontSize: number;\n\t/** Tile label (share) font size in px. */\n\tshareFontSize: number;\n\t/** Smallest tile width/height in px that still shows its label. */\n\tlabelMinSide: number;\n};\n\nconst TREE_MAP_LAYOUT: Record<TreeMapSize, TreeMapLayout> = {\n\tsm: {\n\t\theight: 180,\n\t\tgap: 3,\n\t\tradius: 4,\n\t\tlabelPadding: 8,\n\t\tnameFontSize: 11,\n\t\tshareFontSize: 10,\n\t\tlabelMinSide: 44,\n\t},\n\tmd: {\n\t\theight: 240,\n\t\tgap: 4,\n\t\tradius: 6,\n\t\tlabelPadding: 10,\n\t\tnameFontSize: 12,\n\t\tshareFontSize: 11,\n\t\tlabelMinSide: 52,\n\t},\n\tlg: {\n\t\theight: 300,\n\t\tgap: 5,\n\t\tradius: 8,\n\t\tlabelPadding: 12,\n\t\tnameFontSize: 14,\n\t\tshareFontSize: 12,\n\t\tlabelMinSide: 60,\n\t},\n};\n\n/** Vertical legend column / value list — shared with the right-hand legend. */\nconst treeMapLegendVariants = cva(\"flex min-w-0\", {\n\tvariants: {\n\t\tplacement: {\n\t\t\tright: \"flex-col\",\n\t\t\tbottom: \"flex-row flex-wrap items-center\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{ placement: \"right\", size: \"sm\", className: \"gap-2\" },\n\t\t{ placement: \"right\", size: \"md\", className: \"gap-3\" },\n\t\t{ placement: \"right\", size: \"lg\", className: \"gap-3.5\" },\n\t\t{ placement: \"bottom\", className: \"gap-x-4 gap-y-2\" },\n\t],\n\tdefaultVariants: { placement: \"right\", size: \"md\" },\n});\n\nconst treeMapLegendDotVariants = cva(\"shrink-0 rounded-full\", {\n\tvariants: {\n\t\tsize: { sm: \"size-2\", md: \"size-2.5\", lg: \"size-3\" },\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\n/** A tile / group resolved with its palette colours, ready to render. */\ntype ResolvedDatum = {\n\tlabel: string;\n\tvalue?: number;\n\tfill: string;\n\ttext: string;\n\tchildren?: ResolvedDatum[];\n};\n\n/**\n * Walk the data, assigning each top-level entry a palette colour (by order) that\n * its leaves inherit, and summing the leaf values into a grand total. Top-level\n * entries become the legend keys: tiles in `flat`, groups in `nested`.\n */\nfunction resolveData(data: TreeMapDatum[]): {\n\tresolved: ResolvedDatum[];\n\ttotal: number;\n} {\n\tlet total = 0;\n\n\tconst resolve = (\n\t\tdatum: TreeMapDatum,\n\t\tpalette: { fill: string; text: string },\n\t): ResolvedDatum => {\n\t\tconst fill = datum.fill ?? palette.fill;\n\t\tconst text = palette.text;\n\n\t\tif (datum.children?.length) {\n\t\t\treturn {\n\t\t\t\tlabel: datum.label,\n\t\t\t\tfill,\n\t\t\t\ttext,\n\t\t\t\tchildren: datum.children.map((child) => resolve(child, { fill, text })),\n\t\t\t};\n\t\t}\n\n\t\ttotal += datum.value ?? 0;\n\t\treturn { label: datum.label, value: datum.value, fill, text };\n\t};\n\n\tconst resolved = data.map((datum, i) =>\n\t\tresolve(datum, TREE_MAP_PALETTE[i % TREE_MAP_PALETTE.length]),\n\t);\n\n\treturn { resolved, total };\n}\n\ntype TreeMapProps = Omit<\n\tReact.ComponentProps<typeof ChartCard>,\n\t\"size\" | \"children\"\n> & {\n\t/** Categories — flat leaves, or groups carrying `children` (nested). */\n\tdata: TreeMapDatum[];\n\t/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */\n\tsize?: TreeMapSize;\n\t/** Chart heading. Omit to hide the title. */\n\ttitle?: React.ReactNode;\n\t/** Supporting metadata (period, source). Omit to hide the description. */\n\tdescription?: React.ReactNode;\n\t/** Enable the hover value tooltip. Default false. */\n\ttooltip?: boolean;\n\t/** Legend placement — a right column or a wrapped bottom row. Default right. */\n\tlegend?: TreeMapLegendPlacement;\n\t/** Format the tile value in the tooltip. Defaults to a localised number. */\n\tvalueFormatter?: (value: number) => string;\n\t/** Value formatting for the tooltip. Defaults to `number`. */\n\tvalueType?: ChartValueType;\n};\n\nfunction TreeMap({\n\tdata,\n\tsize,\n\ttitle,\n\tdescription,\n\ttooltip = false,\n\tlegend = \"right\",\n\tvalueFormatter,\n\tvalueType = \"number\",\n\tclassName,\n\t...props\n}: TreeMapProps) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst layout = TREE_MAP_LAYOUT[resolvedSize];\n\tconst { resolved, total } = resolveData(data);\n\n\t// recharts reads `value`/`label`/`children`/`fill` straight off each node;\n\t// the custom content below pulls `fill`, `text`, and the share from them.\n\tconst config = Object.fromEntries(\n\t\tresolved.map((datum) => [\n\t\t\tdatum.label,\n\t\t\t{ label: datum.label, color: datum.fill },\n\t\t]),\n\t) satisfies ChartConfig;\n\n\tconst tooltipNode = tooltip ? (\n\t\t<ChartTooltip\n\t\t\tcontent={\n\t\t\t\t<ChartTooltipContent\n\t\t\t\t\tnameKey=\"label\"\n\t\t\t\t\tvalueType={valueType}\n\t\t\t\t\tformatter={\n\t\t\t\t\t\tvalueFormatter\n\t\t\t\t\t\t\t? (value) =>\n\t\t\t\t\t\t\t\t\ttypeof value === \"number\" ? valueFormatter(value) : value\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t) : null;\n\n\tconst legendNode = (\n\t\t<ul\n\t\t\tclassName={cn(\n\t\t\t\ttreeMapLegendVariants({ placement: legend, size: resolvedSize }),\n\t\t\t)}\n\t\t>\n\t\t\t{resolved.map((datum) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={datum.label}\n\t\t\t\t\tclassName=\"flex items-center gap-2 text-fg-primary\"\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={cn(treeMapLegendDotVariants({ size: resolvedSize }))}\n\t\t\t\t\t\tstyle={{ backgroundColor: datum.fill }}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"min-w-0 truncate\">{datum.label}</span>\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ul>\n\t);\n\n\treturn (\n\t\t<ChartCard size={resolvedSize} className={className} {...props}>\n\t\t\t{(title != null || description != null) && (\n\t\t\t\t<ChartHeader>\n\t\t\t\t\t{title != null && <ChartTitle>{title}</ChartTitle>}\n\t\t\t\t\t{description != null && (\n\t\t\t\t\t\t<ChartDescription>{description}</ChartDescription>\n\t\t\t\t\t)}\n\t\t\t\t</ChartHeader>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex gap-4\",\n\t\t\t\t\tlegend === \"right\" ? \"flex-row items-stretch\" : \"flex-col\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ChartContainer\n\t\t\t\t\tconfig={config}\n\t\t\t\t\tclassName=\"aspect-auto min-w-0 flex-1\"\n\t\t\t\t\tstyle={{ height: layout.height }}\n\t\t\t\t>\n\t\t\t\t\t<RechartsTreemap\n\t\t\t\t\t\tdata={resolved}\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tnameKey=\"label\"\n\t\t\t\t\t\ttype=\"flat\"\n\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t\tcontent={<TreeMapTile total={total} layout={layout} />}\n\t\t\t\t\t>\n\t\t\t\t\t\t{tooltipNode}\n\t\t\t\t\t</RechartsTreemap>\n\t\t\t\t</ChartContainer>\n\t\t\t\t{legendNode}\n\t\t\t</div>\n\t\t</ChartCard>\n\t);\n}\n\n/**\n * Custom recharts `Treemap` tile. recharts calls it for every node (root, groups,\n * leaves); only leaves carry a value and tile the whole plot, so non-leaves draw\n * nothing. A leaf renders an inset, rounded rectangle in its colour with an\n * in-tile label (name over its share of the whole), dropped when the tile is too\n * small to fit it.\n */\ntype TreeMapTileProps = Partial<TreemapNode> & {\n\ttotal: number;\n\tlayout: TreeMapLayout;\n\t/** Resolved tile colours, attached to each datum by `resolveData`. */\n\tfill?: string;\n\ttext?: string;\n};\n\nfunction TreeMapTile({\n\ttotal,\n\tlayout,\n\tx,\n\ty,\n\twidth,\n\theight,\n\tvalue,\n\tname,\n\tchildren,\n\tfill,\n\ttext,\n}: TreeMapTileProps) {\n\t// Non-leaf nodes (root, groups) are pure containers — their leaves cover them.\n\tif (\n\t\tchildren != null ||\n\t\tx == null ||\n\t\ty == null ||\n\t\twidth == null ||\n\t\theight == null\n\t) {\n\t\treturn <g />;\n\t}\n\n\tconst tileX = x + layout.gap / 2;\n\tconst tileY = y + layout.gap / 2;\n\tconst tileW = Math.max(0, width - layout.gap);\n\tconst tileH = Math.max(0, height - layout.gap);\n\n\tconst showLabel =\n\t\ttileW >= layout.labelMinSide && tileH >= layout.labelMinSide;\n\tconst share = total > 0 ? Math.round(((value ?? 0) / total) * 100) : 0;\n\n\treturn (\n\t\t<g>\n\t\t\t<rect\n\t\t\t\tx={tileX}\n\t\t\t\ty={tileY}\n\t\t\t\twidth={tileW}\n\t\t\t\theight={tileH}\n\t\t\t\trx={layout.radius}\n\t\t\t\try={layout.radius}\n\t\t\t\tfill={fill}\n\t\t\t/>\n\t\t\t{showLabel && (\n\t\t\t\t<text\n\t\t\t\t\tx={tileX + layout.labelPadding}\n\t\t\t\t\ty={tileY + layout.labelPadding}\n\t\t\t\t\tfill={text}\n\t\t\t\t\tdominantBaseline=\"hanging\"\n\t\t\t\t>\n\t\t\t\t\t<tspan\n\t\t\t\t\t\tx={tileX + layout.labelPadding}\n\t\t\t\t\t\tclassName=\"font-semibold\"\n\t\t\t\t\t\tstyle={{ fontSize: layout.nameFontSize }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</tspan>\n\t\t\t\t\t<tspan\n\t\t\t\t\t\tx={tileX + layout.labelPadding}\n\t\t\t\t\t\tdy={layout.nameFontSize + 4}\n\t\t\t\t\t\tclassName=\"tabular-nums\"\n\t\t\t\t\t\tstyle={{ fontSize: layout.shareFontSize }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{share}%\n\t\t\t\t\t</tspan>\n\t\t\t\t</text>\n\t\t\t)}\n\t\t</g>\n\t);\n}\n\nexport { TREE_MAP_LAYOUT, TREE_MAP_PALETTE, TreeMap };\nexport type {\n\tTreeMapDatum,\n\tTreeMapLayout,\n\tTreeMapLegendPlacement,\n\tTreeMapProps,\n\tTreeMapSize,\n};\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ChartCard, ChartValueType } from './chart.js';
|
|
3
|
+
import { ComponentSize } from './size-context.js';
|
|
4
|
+
import 'class-variance-authority/types';
|
|
5
|
+
import 'class-variance-authority';
|
|
6
|
+
import 'recharts';
|
|
7
|
+
|
|
8
|
+
type WaterfallChartOrientation = "vertical" | "horizontal";
|
|
9
|
+
type WaterfallChartLegendPlacement = "right" | "bottom";
|
|
10
|
+
type WaterfallChartStepType = "auto" | "increase" | "decrease" | "total";
|
|
11
|
+
type WaterfallChartDatum = {
|
|
12
|
+
/** Step label shown on the category axis, legend/tooltip context, and value label context. */
|
|
13
|
+
label: string;
|
|
14
|
+
/** Absolute subtotal for `type="total"`; delta amount for increase/decrease steps. */
|
|
15
|
+
value: number;
|
|
16
|
+
/** Defaults to `total` for the first/last datum and `auto` for middle data. */
|
|
17
|
+
type?: WaterfallChartStepType;
|
|
18
|
+
/** Optional fill override for this step. Defaults to semantic status tokens. */
|
|
19
|
+
fill?: string;
|
|
20
|
+
};
|
|
21
|
+
type ResolvedWaterfallStep = {
|
|
22
|
+
label: string;
|
|
23
|
+
value: number;
|
|
24
|
+
start: number;
|
|
25
|
+
end: number;
|
|
26
|
+
range: [number, number];
|
|
27
|
+
type: Exclude<WaterfallChartStepType, "auto">;
|
|
28
|
+
fill: string;
|
|
29
|
+
};
|
|
30
|
+
type WaterfallChartLayout = {
|
|
31
|
+
height: number;
|
|
32
|
+
horizontalHeight: number;
|
|
33
|
+
margin: {
|
|
34
|
+
top: number;
|
|
35
|
+
right: number;
|
|
36
|
+
bottom: number;
|
|
37
|
+
left: number;
|
|
38
|
+
};
|
|
39
|
+
horizontalMargin: {
|
|
40
|
+
top: number;
|
|
41
|
+
right: number;
|
|
42
|
+
bottom: number;
|
|
43
|
+
left: number;
|
|
44
|
+
};
|
|
45
|
+
barSize: number;
|
|
46
|
+
barRadius: number;
|
|
47
|
+
connectorWidth: number;
|
|
48
|
+
valueGap: number;
|
|
49
|
+
tickFontSize: number;
|
|
50
|
+
yAxisWidth: number;
|
|
51
|
+
xAxisHeight: number;
|
|
52
|
+
};
|
|
53
|
+
type WaterfallChartFormatContext = {
|
|
54
|
+
datum: WaterfallChartDatum;
|
|
55
|
+
step: ResolvedWaterfallStep;
|
|
56
|
+
index: number;
|
|
57
|
+
};
|
|
58
|
+
type WaterfallChartPlotProps = Omit<React.ComponentProps<"div">, "children"> & {
|
|
59
|
+
data: WaterfallChartDatum[];
|
|
60
|
+
size?: ComponentSize;
|
|
61
|
+
orientation?: WaterfallChartOrientation;
|
|
62
|
+
legend?: WaterfallChartLegendPlacement | false;
|
|
63
|
+
showValues?: boolean;
|
|
64
|
+
showTooltip?: boolean;
|
|
65
|
+
valueType?: ChartValueType;
|
|
66
|
+
valueFormatter?: (value: number, context: WaterfallChartFormatContext) => React.ReactNode;
|
|
67
|
+
categoryFormatter?: (label: string, datum: WaterfallChartDatum) => string;
|
|
68
|
+
domain?: [number, number] | [number, "auto"];
|
|
69
|
+
ariaLabel?: string;
|
|
70
|
+
};
|
|
71
|
+
type WaterfallChartLegendProps = Omit<React.ComponentProps<"div">, "children"> & {
|
|
72
|
+
size?: ComponentSize;
|
|
73
|
+
placement?: WaterfallChartLegendPlacement;
|
|
74
|
+
items?: WaterfallChartLegendItem[];
|
|
75
|
+
};
|
|
76
|
+
type WaterfallChartLegendItem = {
|
|
77
|
+
label: string;
|
|
78
|
+
color: string;
|
|
79
|
+
};
|
|
80
|
+
type WaterfallChartProps = Omit<React.ComponentProps<typeof ChartCard>, "children" | "size"> & WaterfallChartPlotProps & {
|
|
81
|
+
title?: React.ReactNode;
|
|
82
|
+
description?: React.ReactNode;
|
|
83
|
+
};
|
|
84
|
+
declare const WATERFALL_CHART_COLORS: {
|
|
85
|
+
readonly total: "var(--color-status-info)";
|
|
86
|
+
readonly increase: "var(--color-status-success)";
|
|
87
|
+
readonly decrease: "var(--color-status-danger)";
|
|
88
|
+
readonly connector: "var(--color-line-strong)";
|
|
89
|
+
readonly baseline: "var(--color-line)";
|
|
90
|
+
};
|
|
91
|
+
declare const WATERFALL_CHART_LEGEND_ITEMS: WaterfallChartLegendItem[];
|
|
92
|
+
declare const WATERFALL_CHART_CONFIG: {
|
|
93
|
+
increase: {
|
|
94
|
+
label: string;
|
|
95
|
+
color: "var(--color-status-success)";
|
|
96
|
+
};
|
|
97
|
+
decrease: {
|
|
98
|
+
label: string;
|
|
99
|
+
color: "var(--color-status-danger)";
|
|
100
|
+
};
|
|
101
|
+
total: {
|
|
102
|
+
label: string;
|
|
103
|
+
color: "var(--color-status-info)";
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
declare const WATERFALL_CHART_LAYOUT: Record<ComponentSize, WaterfallChartLayout>;
|
|
107
|
+
declare function resolveWaterfallData(data: WaterfallChartDatum[]): ({
|
|
108
|
+
label: string;
|
|
109
|
+
value: number;
|
|
110
|
+
start: number;
|
|
111
|
+
end: number;
|
|
112
|
+
range: [number, number];
|
|
113
|
+
type: "total";
|
|
114
|
+
fill: string;
|
|
115
|
+
} | {
|
|
116
|
+
label: string;
|
|
117
|
+
value: number;
|
|
118
|
+
start: number;
|
|
119
|
+
end: number;
|
|
120
|
+
range: [number, number];
|
|
121
|
+
type: "increase" | "decrease";
|
|
122
|
+
fill: string;
|
|
123
|
+
})[];
|
|
124
|
+
declare function WaterfallChartLegend({ className, size, placement, items, ...props }: WaterfallChartLegendProps): React.JSX.Element;
|
|
125
|
+
declare function WaterfallChartPlot({ data, size, orientation, legend, showValues, showTooltip, valueType, valueFormatter, categoryFormatter, domain, ariaLabel, className, ...props }: WaterfallChartPlotProps): React.JSX.Element | null;
|
|
126
|
+
declare function WaterfallChart({ data, size, orientation, title, description, legend, showValues, showTooltip, valueType, valueFormatter, categoryFormatter, domain, ariaLabel, className, ...props }: WaterfallChartProps): React.JSX.Element;
|
|
127
|
+
declare const WaterfallChartCard: typeof WaterfallChart;
|
|
128
|
+
|
|
129
|
+
export { type ResolvedWaterfallStep, WATERFALL_CHART_COLORS, WATERFALL_CHART_CONFIG, WATERFALL_CHART_LAYOUT, WATERFALL_CHART_LEGEND_ITEMS, WaterfallChart, WaterfallChartCard, type WaterfallChartDatum, type WaterfallChartFormatContext, type WaterfallChartLayout, WaterfallChartLegend, type WaterfallChartLegendItem, type WaterfallChartLegendPlacement, type WaterfallChartOrientation, WaterfallChartPlot, type WaterfallChartPlotProps, type WaterfallChartProps, type WaterfallChartStepType, resolveWaterfallData };
|