@acronis-platform/ui-react 5.0.0 → 5.1.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/dist/components/ui/area-chart/area-chart.js +191 -85
- package/dist/components/ui/area-chart/area-chart.js.map +1 -1
- package/dist/components/ui/bar-chart/bar-chart.js +288 -225
- package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
- package/dist/components/ui/card-widget-carousel/card-widget-carousel.js +85 -0
- package/dist/components/ui/card-widget-carousel/card-widget-carousel.js.map +1 -0
- package/dist/components/ui/card-widget-carousel/card-widget.js +82 -0
- package/dist/components/ui/card-widget-carousel/card-widget.js.map +1 -0
- package/dist/components/ui/category-bar/category-bar.js.map +1 -1
- package/dist/components/ui/chart/chart-format.js +25 -22
- package/dist/components/ui/chart/chart-format.js.map +1 -1
- package/dist/components/ui/chart/chart-palette.js +9 -8
- package/dist/components/ui/chart/chart-palette.js.map +1 -1
- package/dist/components/ui/chart/chart.js +118 -83
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/line-chart/line-chart.js +194 -86
- package/dist/components/ui/line-chart/line-chart.js.map +1 -1
- package/dist/components/ui/scatter-chart/scatter-chart.js +5 -2
- package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
- package/dist/components/ui/separator/separator.js +52 -10
- package/dist/components/ui/separator/separator.js.map +1 -1
- package/dist/components/ui/sidebar-secondary/sidebar-secondary.js +144 -121
- package/dist/components/ui/sidebar-secondary/sidebar-secondary.js.map +1 -1
- package/dist/components/ui/tree-item/tree-item.js +67 -0
- package/dist/components/ui/tree-item/tree-item.js.map +1 -0
- package/dist/components/ui/treemap/treemap.js +73 -66
- package/dist/components/ui/treemap/treemap.js.map +1 -1
- package/dist/index.js +109 -107
- package/dist/llms/area-chart.md +2 -1
- package/dist/llms/bar-chart.md +132 -33
- package/dist/llms/card-widget-carousel.md +252 -0
- package/dist/llms/category-bar.md +2 -2
- package/dist/llms/line-chart.md +2 -1
- package/dist/llms/metric.md +10 -5
- package/dist/llms/scatter-chart.md +2 -1
- package/dist/llms/separator.md +27 -8
- package/dist/llms/sidebar-secondary.md +235 -4
- package/dist/llms/tree-item.md +359 -0
- package/dist/llms/treemap.md +47 -36
- package/dist/llms.txt +4 -3
- package/dist/react.js +109 -107
- package/dist/src/components/ui/area-chart/area-chart.d.ts +10 -0
- package/dist/src/components/ui/bar-chart/bar-chart.d.ts +75 -10
- package/dist/src/components/ui/bar-chart/bar-chart.docs.d.ts +146 -0
- package/dist/src/components/ui/bar-chart/index.d.ts +1 -1
- package/dist/src/components/ui/card-widget-carousel/card-widget-carousel.d.ts +9 -0
- package/dist/src/components/ui/card-widget-carousel/card-widget.d.ts +43 -0
- package/dist/src/components/ui/card-widget-carousel/index.d.ts +2 -0
- package/dist/src/components/ui/chart/chart-format.d.ts +9 -1
- package/dist/src/components/ui/chart/chart-palette.d.ts +38 -10
- package/dist/src/components/ui/chart/index.d.ts +2 -2
- package/dist/src/components/ui/line-chart/line-chart.d.ts +11 -1
- package/dist/src/components/ui/separator/separator.d.ts +9 -1
- package/dist/src/components/ui/sidebar-secondary/sidebar-secondary.d.ts +23 -3
- package/dist/src/components/ui/tree-item/index.d.ts +1 -0
- package/dist/src/components/ui/tree-item/tree-item.d.ts +64 -0
- package/dist/src/components/ui/treemap/treemap.d.ts +16 -5
- package/dist/src/index.d.ts +2 -1
- package/dist/ui-react.css +1 -1
- package/package.json +3 -3
- package/dist/components/ui/meter/meter.js +0 -79
- package/dist/components/ui/meter/meter.js.map +0 -1
- package/dist/llms/meter.md +0 -177
- package/dist/src/components/ui/meter/index.d.ts +0 -1
- package/dist/src/components/ui/meter/meter.d.ts +0 -25
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"treemap.js","names":[],"sources":["../../../../src/components/ui/treemap/treemap.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Treemap as RechartsTreemap } from 'recharts';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegendContent,\n ChartStyle,\n resolveChartColors,\n CHART_DEFAULT_PALETTE,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n CHART_LABEL_FONT_SIZE,\n type ChartConfig,\n type ChartPalette,\n type ChartAnimationProps,\n type TickFormatter,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. A treemap is\n// the odd one out: a single `Treemap` element with no axes/grid, themed through a\n// custom `content` cell renderer (recharts' default paints every cell the same\n// fill and has no token hooks) — and that renderer, not a `LabelList`, owns the\n// on-cell labels, so the fit/clamp logic lives here. Like Scatter/Composed/\n// RadialBar there's no CVA variant — a treemap's knobs are geometry\n// (`aspectRatio`) and the data, not a visual \"mode\". v1 is a flat treemap (a list\n// of leaves).\n\n/**\n * Where a cell's label block sits inside its rectangle. Named logically, not\n * physically: the corner variants anchor to the tile's *start* edge, so they\n * mirror under `dir=\"rtl\"`. `bottom-start` is the design's placement; `center`\n * is what the chart drew before the block had a second line.\n */\nexport type TreemapLabelAlign = 'bottom-start' | 'top-start' | 'center';\n\n// Cell shape: each tile is inset by the gap on every side, so neighbouring tiles\n// are separated by the surface showing through rather than by a stroke, and the\n// corners are rounded.\nconst CELL_GAP = 2;\nconst CELL_RADIUS = 6;\n\n// Label geometry, in px. The block's own layout is CSS (see the renderer); these\n// are the heights the tile has to clear for a label to fit *without being\n// clipped* — one line, or two.\n//\n// Line boxes, not font sizes: Tailwind's `--text-xs--line-height` is 4/3, so the\n// `text-xs` title renders a 16px line box, and the second line inherits that same\n// ratio (an arbitrary `text-[11px]` sets font-size only) for ~14.7px. Measuring by\n// font size instead would let a tile pass the threshold and still have the block's\n// `overflow-hidden` eat the top of the first line.\nconst CELL_PADDING = 12;\nconst LINE_HEIGHT_RATIO = 4 / 3;\nconst SECONDARY_FONT_SIZE = 11;\nconst TITLE_LINE_HEIGHT = Math.ceil(CHART_LABEL_FONT_SIZE * LINE_HEIGHT_RATIO);\nconst SECONDARY_LINE_HEIGHT = Math.ceil(\n SECONDARY_FONT_SIZE * LINE_HEIGHT_RATIO\n);\n\n// The smallest tile that gets a label at all, and the height a second line\n// additionally needs. Below the first threshold a cell stays blank rather than\n// showing a stub — the label would be wider than the tile it names.\nconst MIN_LABEL_WIDTH = 64;\nconst MIN_LABEL_HEIGHT = CELL_PADDING * 2 + TITLE_LINE_HEIGHT;\nconst MIN_TWO_LINE_HEIGHT = MIN_LABEL_HEIGHT + SECONDARY_LINE_HEIGHT;\n\n/**\n * Compose a cell's second line out of the caller's `secondaryKeys`. Empty and\n * missing fields are skipped rather than printed as a gap, so one row without\n * the field doesn't leave a dangling separator.\n */\nexport function treemapSecondaryLabel(options: {\n row: Record<string, string | number>;\n keys: readonly string[];\n separator: string;\n formatter?: TickFormatter;\n}): string | undefined {\n const { row, keys, separator, formatter } = options;\n const parts = keys.flatMap((key, index) => {\n const value = row[key];\n if (value == null || value === '') return [];\n // Emptiness is re-checked *after* formatting, not just on the raw value: a\n // formatter that blanks a field it doesn't want to show (a zero, a sentinel)\n // would otherwise contribute an empty part and put back the dangling\n // separator this function exists to avoid.\n const part = formatter ? formatter(value, index) : String(value);\n return part === '' ? [] : [part];\n });\n return parts.length ? parts.join(separator) : undefined;\n}\n\ninterface TreemapCellProps {\n x?: number;\n y?: number;\n width?: number;\n height?: number;\n // recharts injects the node's resolved `name` (from nameKey) + value, plus\n // every other field on the row — which is how the two stamped labels arrive.\n name?: string;\n /** The leaf's display name — its `config` label, stamped onto the row by `Treemap`. */\n primaryLabel?: string;\n /** The label's precomputed second line, stamped onto each row by `Treemap`. */\n secondaryLabel?: string;\n showLabels?: boolean;\n labelAlign?: TreemapLabelAlign;\n}\n\n// How the label block sits in its tile. `text-start`/`text-center` and the\n// block-axis `justify-*` are what make the corner-anchored variants mirror under\n// `dir=\"rtl\"` — the same logical utilities every other component uses, which is\n// why the label is HTML in a `foreignObject` rather than SVG `<text>`:\n// `x`/`text-anchor` are physical, so a mirrored label would need the direction\n// read in JS and applied by hand.\n//\n// Every variant leaves the cross axis on the default `items-stretch`, including\n// `center`. Centering the line is `text-center`'s job, not `items-center`'s:\n// `items-center` would size each line to its own text instead of to the tile, and\n// a `truncate` line only ellipsizes when it is the *tile* that constrains it — a\n// shrink-to-fit line is never narrower than its text, so it would silently\n// overflow and be hard-clipped on both edges instead.\nconst LABEL_ALIGN_CLASS: Record<TreemapLabelAlign, string> = {\n 'bottom-start': 'justify-end text-start',\n 'top-start': 'justify-start text-start',\n center: 'justify-center text-center',\n};\n\n// Cell renderer: fill each rounded rect from its `--color-<name>` var, inset it so\n// the surface shows through between tiles, and lay the label block over it — the\n// leaf's name, plus the stamped second line when the tile is tall enough. Passed to\n// `Treemap.content`; recharts clones it with each node's geometry + row fields.\nexport function TreemapCell({\n x = 0,\n y = 0,\n width = 0,\n height = 0,\n name,\n primaryLabel,\n secondaryLabel,\n showLabels = true,\n labelAlign = 'bottom-start',\n}: TreemapCellProps) {\n // recharts invokes `content` for the synthetic root node too (full chart\n // dimensions, empty name). Skip any name-less node — otherwise its rect has no\n // `--color-<name>` fill and paints the SVG-default black behind everything\n // (invisible when leaves cover it, a black box on empty data).\n if (!name) return <g />;\n // The tile, not the node: the label sits inside the inset rect, so the gutter\n // never eats into its padding.\n const tileX = x + CELL_GAP;\n const tileY = y + CELL_GAP;\n const tileWidth = Math.max(0, width - CELL_GAP * 2);\n const tileHeight = Math.max(0, height - CELL_GAP * 2);\n\n // `>=` on the heights: they are exact fits (padding + line boxes), so a tile\n // that measures one of them exactly has room for that label. The width is a\n // judgement call about how narrow a label is still worth reading, not a fit, so\n // it stays a strict `>`.\n const canLabel =\n showLabels && tileWidth > MIN_LABEL_WIDTH && tileHeight >= MIN_LABEL_HEIGHT;\n const secondary =\n canLabel && secondaryLabel && tileHeight >= MIN_TWO_LINE_HEIGHT\n ? secondaryLabel\n : undefined;\n\n return (\n <g>\n <rect\n x={tileX}\n y={tileY}\n width={tileWidth}\n height={tileHeight}\n rx={CELL_RADIUS}\n style={{ fill: `var(--color-${name})` }}\n />\n {canLabel && (\n // Decorative: the hover that opens the tooltip belongs to the tile, so the\n // label must not swallow it.\n <foreignObject\n x={tileX}\n y={tileY}\n width={tileWidth}\n height={tileHeight}\n className=\"pointer-events-none\"\n >\n <div\n className={cn(\n // Each line truncates with a real ellipsis — CSS measures the text,\n // so nothing has to estimate how much of it fits.\n 'flex size-full flex-col overflow-hidden p-3',\n // The design system's \"text on a strong colored surface\" token\n // (constant white in both themes) — reads over the saturated series\n // colors without hardcoding a color. The weight, not a second color,\n // carries the hierarchy over the second line: the on-strong\n // *secondary* text token resolves to a dark grey in dark mode, which\n // a cell's fill stays saturated behind.\n 'text-[var(--ui-text-on-status-strong-neutral)]',\n LABEL_ALIGN_CLASS[labelAlign]\n )}\n >\n <span className=\"truncate text-xs font-semibold\">\n {primaryLabel ?? name}\n </span>\n {secondary && (\n <span className=\"truncate text-[11px]\">{secondary}</span>\n )}\n </div>\n </foreignObject>\n )}\n </g>\n );\n}\n\nexport interface TreemapProps\n extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps {\n /**\n * The dataviz palette this chart's series are painted from. Series that\n * state no `color` of their own take a stop of it. See `ChartPalette`.\n */\n palette?: ChartPalette;\n /**\n * Row-per-leaf data. Each object holds the leaf's `nameKey` label + its\n * `dataKey` numeric size.\n *\n * `fill`, `primaryLabel` and `secondaryLabel` are reserved: the chart stamps\n * them onto a copy of each row to carry the cell color and the two label lines\n * through to the renderer (recharts hands the whole row to `content`, so\n * anything the cell needs has to be on it). A row of your own carrying one of\n * those names may end up driving what the tile paints.\n */\n data: ReadonlyArray<Record<string, string | number>>;\n /**\n * Per-leaf map of `label` / `icon` / `tone`, keyed by the leaf's `nameKey`\n * value (imported from the shared `Chart` primitives). Turned into\n * `--color-<name>` custom properties. Series take their colour from the\n * container's `palette`; each entry maps a key to a `label` and an optional\n * `tone`.\n */\n config: ChartConfig;\n /** Numeric field that sizes each leaf's rectangle. */\n dataKey: string;\n /**\n * Label field that names each leaf (drives the on-cell label, legend, tooltip,\n * and `--color-<name>` lookup). Values should be unique and CSS-safe (they\n * become part of a custom-property name).\n */\n nameKey: string;\n /** Width-to-height ratio the tiling targets. */\n aspectRatio?: number;\n /** Render each leaf's label inside its cell (when it fits). */\n showLabels?: boolean;\n /**\n * Where a cell's label sits. Defaults to `bottom-start` — the design's\n * placement, which keeps the label anchored to a tile corner as the tiling\n * reflows. `top-start` anchors it to the opposite corner; `center` centers the\n * block in the tile. The corner variants are named for the tile's *start* edge\n * because they mirror under `dir=\"rtl\"`.\n */\n labelAlign?: TreemapLabelAlign;\n /**\n * Fields whose values make up a second label line under the leaf's name — e.g.\n * `[dataKey]` for the size, or `['size', 'count']` for a value and a count. The\n * line is dropped on cells too short to hold it.\n */\n secondaryKeys?: readonly string[];\n /**\n * Format each secondary value. Receives the field's index in `secondaryKeys`\n * as its second argument, so one formatter can cover fields of different kinds.\n */\n secondaryFormatter?: TickFormatter;\n /** Separator drawn between multiple secondary values. */\n secondarySeparator?: string;\n showTooltip?: boolean;\n /**\n * Render the legend — one entry per leaf. Off by default: a treemap labels its\n * cells, so the legend is for the case where the tiles are too small to.\n */\n showLegend?: boolean;\n /** Which edge the legend sits on. */\n legendPos?: 'top' | 'bottom';\n /**\n * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n * to customize formatting, per-cell rows, or extra fields without composing\n * recharts yourself. Ignored when `showTooltip` is false.\n */\n tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst Treemap = React.forwardRef<HTMLDivElement, TreemapProps>(\n (\n {\n className,\n config,\n palette,\n data,\n dataKey,\n nameKey,\n aspectRatio = 4 / 3,\n showLabels = true,\n labelAlign = 'bottom-start',\n secondaryKeys,\n secondaryFormatter,\n secondarySeparator = ' · ',\n showTooltip = true,\n showLegend = false,\n legendPos = 'bottom',\n tooltipContent,\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n // hover resolves the cell color in the tooltip — recharts' Treemap carries no\n // per-cell color on the tooltip payload item — and with its `secondaryLabel`,\n // which reaches the cell renderer the same way: recharts hands the whole row\n // to `content`, so a composed label has to be on the row before it gets there.\n const seriesData: Record<string, string | number>[] = React.useMemo(\n () =>\n data.map((row) => {\n const name = String(row[nameKey]);\n const secondaryLabel = secondaryKeys?.length\n ? treemapSecondaryLabel({\n row,\n keys: secondaryKeys,\n separator: secondarySeparator,\n formatter: secondaryFormatter,\n })\n : undefined;\n // The on-cell name is the leaf's `config` label, so a cell reads like its\n // legend entry and tooltip row do. It matters more here than elsewhere:\n // the raw `nameKey` value has to be CSS-safe (it becomes part of\n // `--color-<name>`), so a leaf whose display name has a space in it is\n // keyed by a slug — and the slug is not what belongs on the tile. Only a\n // string label can go in SVG text; a `ReactNode` one falls back to the key.\n const label = config[name]?.label;\n return {\n ...row,\n fill: `var(--color-${name})`,\n ...(typeof label === 'string' ? { primaryLabel: label } : {}),\n ...(secondaryLabel ? { secondaryLabel } : {}),\n };\n }),\n [\n config,\n data,\n nameKey,\n secondaryFormatter,\n secondaryKeys,\n secondarySeparator,\n ]\n );\n\n // recharts 3 builds the legend payload from the graphical item, and `Treemap`\n // — unlike Bar/Line/Area/Pie/Radar/RadialBar/Scatter — never registers one,\n // so a `<Legend>` inside a `Treemap` renders empty. The payload is synthesized\n // from the leaves instead and handed to the shared `ChartLegendContent`, which\n // keeps the treemap on the same legend markers, labels and `config` lookup as\n // every other chart. `payload` carries the row so each entry resolves its own\n // `config` entry via `nameKey`.\n //\n // One entry per *distinct* leaf name: same-named leaves deliberately share a\n // `--color-<name>`/`config` entry, so a second entry would repeat the first\n // verbatim — and `ChartLegendContent` keys its entries on `value`, so it would\n // also be a duplicate React key.\n const legendPayload = React.useMemo<LegendPayload[]>(() => {\n const seen = new Set<string>();\n return seriesData.flatMap((row) => {\n const value = String(row[nameKey]);\n if (seen.has(value)) return [];\n seen.add(value);\n return [\n {\n value,\n dataKey: nameKey,\n type: 'rect' as const,\n color: String(row.fill),\n payload: row,\n },\n ];\n });\n }, [nameKey, seriesData]);\n\n // Every other chart type lets recharts shrink the plot area by the legend's\n // measured size, but recharts' `Treemap` tiles the *full* chart surface and\n // ignores the legend entirely — a `<Legend>` inside one paints over the tiles.\n // So the legend is not a `<Legend>` at all: the shared `ChartLegendContent` is\n // rendered straight into a row of its own beside the plot, on the same markers,\n // labels and `config` lookup as every other chart's legend, and normal flow\n // gives it the height it needs (one row, or several once it wraps) and takes\n // that height off the tiled surface.\n //\n // Rendering it here rather than inside the plot is also what keeps the tiling\n // correct: recharts' `Treemap` reads its container **once** (it opts out of the\n // responsive path, because its own stroke-width rounding makes that loop), and a\n // `<Legend>` can only render after the chart has a size — so the box it read\n // would always be the one from before its own legend existed, a legend-row too\n // tall, and the bottom row of tiles would be laid out under the clip. The row is\n // its final height on the first render instead, so that one read is the right one.\n //\n // The row sits outside `ChartContainer`, so it takes `config` as a prop (the\n // container's context doesn't reach it) and re-emits the `--color-<name>`\n // properties its swatches resolve against under its own `data-chart` id.\n const legendChartId = `chart-${React.useId().replace(/:/g, '')}`;\n const legendRow = showLegend ? (\n <div data-chart={legendChartId} className=\"text-xs\">\n <ChartStyle\n id={legendChartId}\n config={resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE)}\n />\n <ChartLegendContent\n config={config}\n payload={legendPayload}\n verticalAlign={legendPos}\n nameKey={nameKey}\n />\n </div>\n ) : null;\n\n return (\n <div\n ref={ref}\n className={cn(showLegend && 'flex flex-col', className)}\n {...props}\n >\n {legendPos === 'top' && legendRow}\n <ChartContainer\n config={config}\n palette={palette}\n // `size-full` fills the caller's box; with a legend row beside it the\n // height comes from the flex line instead, so the tiles give up exactly\n // the room the legend takes.\n className={showLegend ? 'min-h-0 w-full flex-1' : 'size-full'}\n >\n <RechartsTreemap\n data={seriesData}\n dataKey={dataKey}\n nameKey={nameKey}\n aspectRatio={aspectRatio}\n {...animation}\n content={\n <TreemapCell showLabels={showLabels} labelAlign={labelAlign} />\n }\n >\n {showTooltip && (\n <ChartTooltip\n content={\n tooltipContent ?? (\n <ChartTooltipContent nameKey={nameKey} hideLabel />\n )\n }\n />\n )}\n </RechartsTreemap>\n </ChartContainer>\n {legendPos === 'bottom' && legendRow}\n </div>\n );\n }\n);\nTreemap.displayName = 'Treemap';\n\nexport { Treemap };\n"],"mappings":";;;;;;;;;AA2CA,IAAM,IAAW,GACX,IAAc,GAYd,IAAoB,IAAI,GACxB,IAAsB,IACtB,IAAoB,KAAK,KAAA,KAA6B,CAAiB,GACvE,IAAwB,KAAK,KACjC,IAAsB,CACxB,GAKM,IAAkB,IAClB,IAAmB,KAAmB,GACtC,IAAsB,IAAmB;AAO/C,SAAgB,EAAsB,GAKf;CACrB,IAAM,EAAE,QAAK,SAAM,cAAW,iBAAc,GACtC,IAAQ,EAAK,SAAS,GAAK,MAAU;EACzC,IAAM,IAAQ,EAAI;EAClB,IAAI,KAAS,QAAQ,MAAU,IAAI,OAAO,CAAC;EAK3C,IAAM,IAAO,IAAY,EAAU,GAAO,CAAK,IAAI,OAAO,CAAK;EAC/D,OAAO,MAAS,KAAK,CAAC,IAAI,CAAC,CAAI;CACjC,CAAC;CACD,OAAO,EAAM,SAAS,EAAM,KAAK,CAAS,IAAI,KAAA;AAChD;AA+BA,IAAM,IAAuD;CAC3D,gBAAgB;CAChB,aAAa;CACb,QAAQ;AACV;AAMA,SAAgB,EAAY,EAC1B,OAAI,GACJ,OAAI,GACJ,WAAQ,GACR,YAAS,GACT,SACA,iBACA,mBACA,gBAAa,IACb,gBAAa,kBACM;CAKnB,IAAI,CAAC,GAAM,OAAO,kBAAC,KAAD,CAAI,CAAA;CAGtB,IAAM,IAAQ,IAAI,GACZ,IAAQ,IAAI,GACZ,IAAY,KAAK,IAAI,GAAG,IAAQ,CAAY,GAC5C,IAAa,KAAK,IAAI,GAAG,IAAS,CAAY,GAM9C,IACJ,KAAc,IAAY,KAAmB,KAAc,GACvD,IACJ,KAAY,KAAkB,KAAc,IACxC,IACA,KAAA;CAEN,OACE,kBAAC,KAAD,EAAA,UAAA,CACE,kBAAC,QAAD;EACE,GAAG;EACH,GAAG;EACH,OAAO;EACP,QAAQ;EACR,IAAI;EACJ,OAAO,EAAE,MAAM,eAAe,EAAK,GAAG;CACvC,CAAA,GACA,KAGC,kBAAC,iBAAD;EACE,GAAG;EACH,GAAG;EACH,OAAO;EACP,QAAQ;EACR,WAAU;EAEV,UAAA,kBAAC,OAAD;GACE,WAAW,EAGT,+CAOA,kDACA,EAAkB,EACpB;GAbF,UAAA,CAeE,kBAAC,QAAD;IAAM,WAAU;IACb,UAAA,KAAgB;GACb,CAAA,GACL,KACC,kBAAC,QAAD;IAAM,WAAU;IAAwB,UAAA;GAAgB,CAAA,CAEvD;;CACQ,CAAA,CAEhB,EAAA,CAAA;AAEP;AA8EA,IAAM,IAAU,EAAM,YAElB,EACE,cACA,WACA,YACA,SACA,YACA,YACA,iBAAc,IAAI,GAClB,gBAAa,IACb,gBAAa,gBACb,kBACA,uBACA,wBAAqB,OACrB,iBAAc,IACd,gBAAa,IACb,eAAY,UACZ,mBACA,YACA,sBACA,mBACA,oBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAY,EAAiB;EACjC;EACA;EACA;EACA;CACF,CAAC,GAMK,IAAgD,EAAM,cAExD,EAAK,KAAK,MAAQ;EAChB,IAAM,IAAO,OAAO,EAAI,EAAQ,GAC1B,IAAiB,GAAe,SAClC,EAAsB;GACpB;GACA,MAAM;GACN,WAAW;GACX,WAAW;EACb,CAAC,IACD,KAAA,GAOE,IAAQ,EAAO,EAAK,EAAE;EAC5B,OAAO;GACL,GAAG;GACH,MAAM,eAAe,EAAK;GAC1B,GAAI,OAAO,KAAU,WAAW,EAAE,cAAc,EAAM,IAAI,CAAC;GAC3D,GAAI,IAAiB,EAAE,kBAAe,IAAI,CAAC;EAC7C;CACF,CAAC,GACH;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF,GAcM,IAAgB,EAAM,cAA+B;EACzD,IAAM,oBAAO,IAAI,IAAY;EAC7B,OAAO,EAAW,SAAS,MAAQ;GACjC,IAAM,IAAQ,OAAO,EAAI,EAAQ;GAGjC,OAFI,EAAK,IAAI,CAAK,IAAU,CAAC,KAC7B,EAAK,IAAI,CAAK,GACP,CACL;IACE;IACA,SAAS;IACT,MAAM;IACN,OAAO,OAAO,EAAI,IAAI;IACtB,SAAS;GACX,CACF;EACF,CAAC;CACH,GAAG,CAAC,GAAS,CAAU,CAAC,GAsBlB,IAAgB,SAAS,EAAM,MAAM,CAAC,CAAC,QAAQ,MAAM,EAAE,KACvD,IAAY,IAChB,kBAAC,OAAD;EAAK,cAAY;EAAe,WAAU;EAA1C,UAAA,CACE,kBAAC,GAAD;GACE,IAAI;GACJ,QAAQ,EAAmB,GAAQ,KAAW,CAAqB;EACpE,CAAA,GACD,kBAAC,GAAD;GACU;GACR,SAAS;GACT,eAAe;GACN;EACV,CAAA,CACE;CACH,CAAA,IAAA;CAEJ,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,KAAc,iBAAiB,CAAS;EACtD,GAAI;EAHN,UAAA;GAKG,MAAc,SAAS;GACxB,kBAAC,GAAD;IACU;IACC;IAIT,WAAW,IAAa,0BAA0B;IAElD,UAAA,kBAAC,GAAD;KACE,MAAM;KACG;KACA;KACI;KACb,GAAI;KACJ,SACE,kBAAC,GAAD;MAAyB;MAAwB;KAAa,CAAA;KAG/D,UAAA,KACC,kBAAC,GAAD,EACE,SACE,KACE,kBAAC,GAAD;MAA8B;MAAS,WAAA;KAAW,CAAA,EAGvD,CAAA;IAEY,CAAA;GACH,CAAA;GACf,MAAc,YAAY;EACxB;;AAET,CACF;AACA,EAAQ,cAAc"}
|
|
1
|
+
{"version":3,"file":"treemap.js","names":[],"sources":["../../../../src/components/ui/treemap/treemap.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Treemap as RechartsTreemap } from 'recharts';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegendContent,\n ChartStyle,\n resolveChartColors,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n type ChartConfig,\n type ChartPalette,\n type ChartAnimationProps,\n type TickFormatter,\n} from '../chart';\n\n// Treemap-specific default: the diverging palette shows the two-sided distribution\n// that a treemap is most commonly used for, and its adaptive text (auto-computed\n// from resolved token names below) works correctly out of the box.\nconst TREEMAP_DEFAULT_PALETTE: ChartPalette = { type: 'diverging', pair: 'blue-orange' };\n\n// A typed recharts composition over the shared `Chart` primitives. A treemap is\n// the odd one out: a single `Treemap` element with no axes/grid, themed through a\n// custom `content` cell renderer (recharts' default paints every cell the same\n// fill and has no token hooks) — and that renderer, not a `LabelList`, owns the\n// on-cell labels, so the fit/clamp logic lives here. Like Scatter/Composed/\n// RadialBar there's no CVA variant — a treemap's knobs are geometry\n// (`aspectRatio`) and the data, not a visual \"mode\". v1 is a flat treemap (a list\n// of leaves).\n\n/**\n * Where a cell's label block sits inside its rectangle. Named logically, not\n * physically: the corner variants anchor to the tile's *start* edge, so they\n * mirror under `dir=\"rtl\"`. `bottom-start` is the design's placement; `center`\n * is what the chart drew before the block had a second line.\n */\nexport type TreemapLabelAlign = 'bottom-start' | 'top-start' | 'center';\n\n// Cell shape: each tile is inset by the gap on every side, so neighbouring tiles\n// are separated by the surface showing through rather than by a stroke, and the\n// corners are rounded.\nconst CELL_GAP = 2;\nconst CELL_RADIUS = 0;\n\n// Label geometry, in px. The block's own layout is CSS (see the renderer); these\n// are the heights the tile has to clear for a label to fit *without being\n// clipped* — one line, or two.\n//\n// Line boxes, not font sizes: Tailwind's `--text-sm--line-height` is 4/3, so the\n// `text-sm` title renders a ~19px line box, and the second line inherits that same\n// ratio (an arbitrary `text-[11px]` sets font-size only) for ~14.7px. Measuring by\n// font size instead would let a tile pass the threshold and still have the block's\n// `overflow-hidden` eat the top of the first line.\nconst CELL_PADDING = 12;\nconst LINE_HEIGHT_RATIO = 4 / 3;\nconst TITLE_FONT_SIZE = 14; // text-sm\nconst SECONDARY_FONT_SIZE = 11;\nconst TITLE_LINE_HEIGHT = Math.ceil(TITLE_FONT_SIZE * LINE_HEIGHT_RATIO);\nconst SECONDARY_LINE_HEIGHT = Math.ceil(\n SECONDARY_FONT_SIZE * LINE_HEIGHT_RATIO\n);\n\n// The smallest tile that gets a label at all, and the height a second line\n// additionally needs. Below the first threshold a cell stays blank rather than\n// showing a stub — the label would be wider than the tile it names.\nconst MIN_LABEL_WIDTH = 64;\nconst MIN_LABEL_HEIGHT = CELL_PADDING * 2 + TITLE_LINE_HEIGHT;\nconst MIN_TWO_LINE_HEIGHT = MIN_LABEL_HEIGHT + SECONDARY_LINE_HEIGHT;\n\n/**\n * Compose a cell's second line out of the caller's `secondaryKeys`. Empty and\n * missing fields are skipped rather than printed as a gap, so one row without\n * the field doesn't leave a dangling separator.\n */\nexport function treemapSecondaryLabel(options: {\n row: Record<string, string | number>;\n keys: readonly string[];\n separator: string;\n formatter?: TickFormatter;\n}): string | undefined {\n const { row, keys, separator, formatter } = options;\n const parts = keys.flatMap((key, index) => {\n const value = row[key];\n if (value == null || value === '') return [];\n // Emptiness is re-checked *after* formatting, not just on the raw value: a\n // formatter that blanks a field it doesn't want to show (a zero, a sentinel)\n // would otherwise contribute an empty part and put back the dangling\n // separator this function exists to avoid.\n const part = formatter ? formatter(value, index) : String(value);\n return part === '' ? [] : [part];\n });\n return parts.length ? parts.join(separator) : undefined;\n}\n\ninterface TreemapCellProps {\n x?: number;\n y?: number;\n width?: number;\n height?: number;\n // recharts injects the node's resolved `name` (from nameKey) + value, plus\n // every other field on the row — which is how the two stamped labels arrive.\n name?: string;\n /** The leaf's display name — its `config` label, stamped onto the row by `Treemap`. */\n primaryLabel?: string;\n /** The label's precomputed second line, stamped onto each row by `Treemap`. */\n secondaryLabel?: string;\n showLabels?: boolean;\n labelAlign?: TreemapLabelAlign;\n /**\n * How the leaf's fill relates to text contrast. Stamped by `Treemap` onto each\n * row before recharts hands it to the cell renderer. Auto-computed from the\n * resolved token name suffix:\n *\n * - `'dark'` — saturated/dark in both themes → always white text.\n * - `'pale'` — pale in both themes → always dark text (via theme-adaptive token).\n * - `'inverts'` — dark in light, pale in dark (sequential stops 7–8 whose\n * `light-dark()` values mirror across themes) → white text in light, dark text\n * in dark, achieved by a `light-dark()` color value in CSS.\n */\n fillTone?: 'dark' | 'pale' | 'inverts';\n}\n\n// How the label block sits in its tile. `text-start`/`text-center` and the\n// block-axis `justify-*` are what make the corner-anchored variants mirror under\n// `dir=\"rtl\"` — the same logical utilities every other component uses, which is\n// why the label is HTML in a `foreignObject` rather than SVG `<text>`:\n// `x`/`text-anchor` are physical, so a mirrored label would need the direction\n// read in JS and applied by hand.\n//\n// Every variant leaves the cross axis on the default `items-stretch`, including\n// `center`. Centering the line is `text-center`'s job, not `items-center`'s:\n// `items-center` would size each line to its own text instead of to the tile, and\n// a `truncate` line only ellipsizes when it is the *tile* that constrains it — a\n// shrink-to-fit line is never narrower than its text, so it would silently\n// overflow and be hard-clipped on both edges instead.\nconst LABEL_ALIGN_CLASS: Record<TreemapLabelAlign, string> = {\n 'bottom-start': 'justify-end text-start',\n 'top-start': 'justify-start text-start',\n center: 'justify-center text-center',\n};\n\n// Cell renderer: fill each rounded rect from its `--color-<name>` var, inset it so\n// the surface shows through between tiles, and lay the label block over it — the\n// leaf's name, plus the stamped second line when the tile is tall enough. Passed to\n// `Treemap.content`; recharts clones it with each node's geometry + row fields.\nexport function TreemapCell({\n x = 0,\n y = 0,\n width = 0,\n height = 0,\n name,\n primaryLabel,\n secondaryLabel,\n showLabels = true,\n labelAlign = 'center',\n fillTone = 'dark',\n}: TreemapCellProps) {\n // recharts invokes `content` for the synthetic root node too (full chart\n // dimensions, empty name). Skip any name-less node — otherwise its rect has no\n // `--color-<name>` fill and paints the SVG-default black behind everything\n // (invisible when leaves cover it, a black box on empty data).\n if (!name) return <g />;\n // The tile, not the node: the label sits inside the inset rect, so the gutter\n // never eats into its padding.\n const tileX = x + CELL_GAP;\n const tileY = y + CELL_GAP;\n const tileWidth = Math.max(0, width - CELL_GAP * 2);\n const tileHeight = Math.max(0, height - CELL_GAP * 2);\n\n // `>=` on the heights: they are exact fits (padding + line boxes), so a tile\n // that measures one of them exactly has room for that label. The width is a\n // judgement call about how narrow a label is still worth reading, not a fit, so\n // it stays a strict `>`.\n const canLabel =\n showLabels && tileWidth > MIN_LABEL_WIDTH && tileHeight >= MIN_LABEL_HEIGHT;\n const secondary =\n canLabel && secondaryLabel && tileHeight >= MIN_TWO_LINE_HEIGHT\n ? secondaryLabel\n : undefined;\n\n return (\n <g>\n <rect\n x={tileX}\n y={tileY}\n width={tileWidth}\n height={tileHeight}\n rx={CELL_RADIUS}\n style={{ fill: `var(--color-${name})` }}\n />\n {canLabel && (\n // Decorative: the hover that opens the tooltip belongs to the tile, so the\n // label must not swallow it.\n <foreignObject\n x={tileX}\n y={tileY}\n width={tileWidth}\n height={tileHeight}\n className=\"pointer-events-none\"\n >\n <div\n className={cn(\n // Each line truncates with a real ellipsis — CSS measures the text,\n // so nothing has to estimate how much of it fits.\n 'flex size-full flex-col overflow-hidden p-3',\n // Adaptive text — three tones:\n // • dark: saturated in both themes → white text (on-strong-neutral).\n // • pale: pale in both themes → on-surface-primary (dark↔light).\n // • inverts: dark in light, pale in dark (sequential 7–8 whose\n // light-dark() values mirror) → on-strong-primary, which is\n // light-dark(near-white, near-black) — the exact inverse.\n fillTone === 'pale'\n ? 'text-[var(--ui-text-on-surface-primary)]'\n : fillTone === 'inverts'\n ? 'text-[var(--ui-text-on-status-strong-primary)]'\n : 'text-[var(--ui-text-on-status-strong-neutral)]',\n LABEL_ALIGN_CLASS[labelAlign]\n )}\n >\n <span className=\"truncate text-sm\">\n {primaryLabel ?? name}\n </span>\n {secondary && (\n <span className=\"truncate text-[11px]\">{secondary}</span>\n )}\n </div>\n </foreignObject>\n )}\n </g>\n );\n}\n\nexport interface TreemapProps\n extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps {\n /**\n * The dataviz palette this chart's series are painted from. Series that\n * state no `color` of their own take a stop of it. See `ChartPalette`.\n */\n palette?: ChartPalette;\n /**\n * Row-per-leaf data. Each object holds the leaf's `nameKey` label + its\n * `dataKey` numeric size.\n *\n * `fill`, `primaryLabel` and `secondaryLabel` are reserved: the chart stamps\n * them onto a copy of each row to carry the cell color and the two label lines\n * through to the renderer (recharts hands the whole row to `content`, so\n * anything the cell needs has to be on it). A row of your own carrying one of\n * those names may end up driving what the tile paints.\n */\n data: ReadonlyArray<Record<string, string | number>>;\n /**\n * Per-leaf map of `label` / `icon` / `tone`, keyed by the leaf's `nameKey`\n * value (imported from the shared `Chart` primitives). Turned into\n * `--color-<name>` custom properties. Series take their colour from the\n * container's `palette`; each entry maps a key to a `label` and an optional\n * `tone`.\n */\n config: ChartConfig;\n /** Numeric field that sizes each leaf's rectangle. */\n dataKey: string;\n /**\n * Label field that names each leaf (drives the on-cell label, legend, tooltip,\n * and `--color-<name>` lookup). Values should be unique and CSS-safe (they\n * become part of a custom-property name).\n */\n nameKey: string;\n /** Width-to-height ratio the tiling targets. */\n aspectRatio?: number;\n /** Render each leaf's label inside its cell (when it fits). */\n showLabels?: boolean;\n /**\n * Where a cell's label sits. Defaults to `center` — the Figma-canonical placement.\n * `bottom-start` anchors the block to the tile's bottom start corner; `top-start`\n * to the top start corner. The corner variants are named for the tile's *start* edge\n * because they mirror under `dir=\"rtl\"`.\n */\n labelAlign?: TreemapLabelAlign;\n /**\n * Fields whose values make up a second label line under the leaf's name — e.g.\n * `[dataKey]` for the size, or `['size', 'count']` for a value and a count. The\n * line is dropped on cells too short to hold it.\n */\n secondaryKeys?: readonly string[];\n /**\n * Format each secondary value. Receives the field's index in `secondaryKeys`\n * as its second argument, so one formatter can cover fields of different kinds.\n */\n secondaryFormatter?: TickFormatter;\n /** Separator drawn between multiple secondary values. */\n secondarySeparator?: string;\n showTooltip?: boolean;\n /**\n * Render the legend — one entry per leaf. Off by default: a treemap labels its\n * cells, so the legend is for the case where the tiles are too small to.\n */\n showLegend?: boolean;\n /** Which edge the legend sits on. */\n legendPos?: 'top' | 'bottom';\n /**\n * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n * to customize formatting, per-cell rows, or extra fields without composing\n * recharts yourself. Ignored when `showTooltip` is false.\n */\n tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst Treemap = React.forwardRef<HTMLDivElement, TreemapProps>(\n (\n {\n className,\n config,\n palette = TREEMAP_DEFAULT_PALETTE,\n data,\n dataKey,\n nameKey,\n aspectRatio = 4 / 3,\n showLabels = true,\n labelAlign = 'center',\n secondaryKeys,\n secondaryFormatter,\n secondarySeparator = ' · ',\n showTooltip = true,\n showLegend = false,\n legendPos = 'bottom',\n tooltipContent,\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n // hover resolves the cell color in the tooltip — recharts' Treemap carries no\n // per-cell color on the tooltip payload item — and with its `secondaryLabel`,\n // which reaches the cell renderer the same way: recharts hands the whole row\n // to `content`, so a composed label has to be on the row before it gets there.\n const seriesData: Record<string, string | number | boolean>[] =\n React.useMemo(\n () => {\n // Auto fill-tone detection: resolve each leaf's token name and classify\n // it by suffix. Token values are light-dark() pairs, so a runtime\n // luminance check would be theme-fragile — the suffix is stable.\n const resolvedColors = resolveChartColors(config, palette);\n return data.map((row) => {\n const name = String(row[nameKey]);\n const secondaryLabel = secondaryKeys?.length\n ? treemapSecondaryLabel({\n row,\n keys: secondaryKeys,\n separator: secondarySeparator,\n formatter: secondaryFormatter,\n })\n : undefined;\n // The on-cell name is the leaf's `config` label, so a cell reads like its\n // legend entry and tooltip row do. It matters more here than elsewhere:\n // the raw `nameKey` value has to be CSS-safe (it becomes part of\n // `--color-<name>`), so a leaf whose display name has a space in it is\n // keyed by a slug — and the slug is not what belongs on the tile. Only a\n // string label can go in SVG text; a `ReactNode` one falls back to the key.\n const label = config[name]?.label;\n const rawToken = (resolvedColors[name]?.color ?? '').replace(\n /^var\\(|\\)$/g,\n ''\n );\n // Diverging: a1/a2/b1/b2 are pale; a3/b3 are dark.\n // Sequential: stops 1–2 are pale (in light) / dark (in dark); stops\n // 7–8 invert (dark in light, pale in dark). Stops 3–6 stay dark in\n // both themes.\n const isPale = /-(?:a[12]|b[12]|sequential-[a-z]+-[12])$/.test(rawToken);\n const inverts = /-sequential-[a-z]+-[78]$/.test(rawToken);\n const fillTone: 'dark' | 'pale' | 'inverts' = isPale\n ? 'pale'\n : inverts\n ? 'inverts'\n : 'dark';\n return {\n ...row,\n fill: `var(--color-${name})`,\n fillTone,\n ...(typeof label === 'string' ? { primaryLabel: label } : {}),\n ...(secondaryLabel ? { secondaryLabel } : {}),\n };\n });\n },\n [\n config,\n data,\n nameKey,\n palette,\n secondaryFormatter,\n secondaryKeys,\n secondarySeparator,\n ]\n );\n\n // recharts 3 builds the legend payload from the graphical item, and `Treemap`\n // — unlike Bar/Line/Area/Pie/Radar/RadialBar/Scatter — never registers one,\n // so a `<Legend>` inside a `Treemap` renders empty. The payload is synthesized\n // from the leaves instead and handed to the shared `ChartLegendContent`, which\n // keeps the treemap on the same legend markers, labels and `config` lookup as\n // every other chart. `payload` carries the row so each entry resolves its own\n // `config` entry via `nameKey`.\n //\n // One entry per *distinct* leaf name: same-named leaves deliberately share a\n // `--color-<name>`/`config` entry, so a second entry would repeat the first\n // verbatim — and `ChartLegendContent` keys its entries on `value`, so it would\n // also be a duplicate React key.\n const legendPayload = React.useMemo<LegendPayload[]>(() => {\n const seen = new Set<string>();\n return seriesData.flatMap((row) => {\n const value = String(row[nameKey]);\n if (seen.has(value)) return [];\n seen.add(value);\n return [\n {\n value,\n dataKey: nameKey,\n type: 'rect' as const,\n color: String(row.fill),\n payload: row,\n },\n ];\n });\n }, [nameKey, seriesData]);\n\n // Every other chart type lets recharts shrink the plot area by the legend's\n // measured size, but recharts' `Treemap` tiles the *full* chart surface and\n // ignores the legend entirely — a `<Legend>` inside one paints over the tiles.\n // So the legend is not a `<Legend>` at all: the shared `ChartLegendContent` is\n // rendered straight into a row of its own beside the plot, on the same markers,\n // labels and `config` lookup as every other chart's legend, and normal flow\n // gives it the height it needs (one row, or several once it wraps) and takes\n // that height off the tiled surface.\n //\n // Rendering it here rather than inside the plot is also what keeps the tiling\n // correct: recharts' `Treemap` reads its container **once** (it opts out of the\n // responsive path, because its own stroke-width rounding makes that loop), and a\n // `<Legend>` can only render after the chart has a size — so the box it read\n // would always be the one from before its own legend existed, a legend-row too\n // tall, and the bottom row of tiles would be laid out under the clip. The row is\n // its final height on the first render instead, so that one read is the right one.\n //\n // The row sits outside `ChartContainer`, so it takes `config` as a prop (the\n // container's context doesn't reach it) and re-emits the `--color-<name>`\n // properties its swatches resolve against under its own `data-chart` id.\n const legendChartId = `chart-${React.useId().replace(/:/g, '')}`;\n const legendRow = showLegend ? (\n <div data-chart={legendChartId} className=\"text-xs\">\n <ChartStyle\n id={legendChartId}\n config={resolveChartColors(config, palette)}\n />\n <ChartLegendContent\n config={config}\n payload={legendPayload}\n verticalAlign={legendPos}\n nameKey={nameKey}\n />\n </div>\n ) : null;\n\n return (\n <div\n ref={ref}\n className={cn(showLegend && 'flex flex-col', className)}\n {...props}\n >\n {legendPos === 'top' && legendRow}\n <ChartContainer\n config={config}\n palette={palette}\n // `size-full` fills the caller's box; with a legend row beside it the\n // height comes from the flex line instead, so the tiles give up exactly\n // the room the legend takes.\n className={showLegend ? 'min-h-0 w-full flex-1' : 'size-full'}\n >\n <RechartsTreemap\n data={seriesData}\n dataKey={dataKey}\n nameKey={nameKey}\n aspectRatio={aspectRatio}\n {...animation}\n content={\n <TreemapCell showLabels={showLabels} labelAlign={labelAlign} />\n }\n >\n {showTooltip && (\n <ChartTooltip\n content={\n tooltipContent ?? (\n <ChartTooltipContent nameKey={nameKey} hideLabel />\n )\n }\n />\n )}\n </RechartsTreemap>\n </ChartContainer>\n {legendPos === 'bottom' && legendRow}\n </div>\n );\n }\n);\nTreemap.displayName = 'Treemap';\n\nexport { Treemap };\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -13,113 +13,115 @@ import { Tooltip as d, TooltipContent as f, TooltipProvider as p, TooltipTrigger
|
|
|
13
13
|
import { AppShellChat as h, AppShellChatChat as g, AppShellChatChatBody as _, AppShellChatChatHeader as v, AppShellChatContent as y, AppShellChatContentBody as b, AppShellChatContentHeader as x, AppShellChatSidebar as S, getAppShellChatInitialLayout as C, useAppShellChatInitialLayout as w } from "./components/ui/app-shell-chat/app-shell-chat.js";
|
|
14
14
|
import { CHART_CATEGORICAL_TOKENS as T, CHART_DEFAULT_PALETTE as E, CHART_DIVERGING_TOKENS as D, CHART_SEQUENTIAL_TOKENS as O, CHART_STATUS_TOKENS as k, findDuplicateTones as Te, listPaletteChoices as Ee, listPaletteStops as De, resolveSeriesColor as Oe } from "./components/ui/chart/chart-palette.js";
|
|
15
15
|
import { ChartContainer as ke, ChartLegend as Ae, ChartLegendContent as je, ChartStyle as Me, ChartTooltip as Ne, ChartTooltipContent as Pe, resolveChartColors as Fe } from "./components/ui/chart/chart.js";
|
|
16
|
-
import { CHART_BRUSH_ARIA_LABEL as Ie, CHART_BRUSH_HEIGHT as Le, CHART_LABEL_FILL_CLASS as Re, CHART_LABEL_FILL_ON_SERIES_CLASS as ze, CHART_LABEL_FONT_SIZE as Be, CHART_LABEL_MARGIN as Ve, CHART_REFERENCE_LINE_STROKE as He, createTickFormatter as Ue,
|
|
17
|
-
import { AreaChart as
|
|
18
|
-
import { Avatar as
|
|
19
|
-
import { BarChart as
|
|
20
|
-
import { Breadcrumb as
|
|
21
|
-
import { Button as
|
|
22
|
-
import { ButtonGroup as
|
|
23
|
-
import { ButtonMenu as
|
|
24
|
-
import { Calendar as
|
|
25
|
-
import { DialogFooterDefault as
|
|
26
|
-
import { InputSelect as A, InputSelectContent as j, InputSelectDescription as
|
|
27
|
-
import { CalendarHeader as
|
|
28
|
-
import { ButtonIconInput as
|
|
29
|
-
import { Switch as
|
|
30
|
-
import { Card as
|
|
31
|
-
import { CardFilter as
|
|
32
|
-
import { CardSection as
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
16
|
+
import { CHART_BRUSH_ARIA_LABEL as Ie, CHART_BRUSH_HEIGHT as Le, CHART_LABEL_FILL_CLASS as Re, CHART_LABEL_FILL_ON_SERIES_CLASS as ze, CHART_LABEL_FONT_SIZE as Be, CHART_LABEL_MARGIN as Ve, CHART_REFERENCE_LINE_STROKE as He, createTickFormatter as Ue, dropProjectionPayload as We, formatCompactNumber as Ge, formatPercent as Ke, resolveAnimation as qe, resolveAxisDomain as Je, resolveBrushProps as Ye, resolveCartesianLabelPosition as Xe, resolveCategoryRange as Ze, resolveChartReferenceValue as Qe, resolveLabelFillClass as $e, resolveReferenceLineProps as et, resolveRotatedTickAnchor as tt, resolveXAxisHeight as nt, resolveXAxisTitle as rt, resolveYAxisTitle as it, toLabelFormatter as at, toReferenceLineList as ot } from "./components/ui/chart/chart-format.js";
|
|
17
|
+
import { AreaChart as st, areaChartVariants as ct } from "./components/ui/area-chart/area-chart.js";
|
|
18
|
+
import { Avatar as lt, AvatarFallback as ut, AvatarGroup as dt, AvatarImage as ft, avatarVariants as pt } from "./components/ui/avatar/avatar.js";
|
|
19
|
+
import { BarChart as mt, barChartVariants as ht } from "./components/ui/bar-chart/bar-chart.js";
|
|
20
|
+
import { Breadcrumb as gt, BreadcrumbEllipsis as _t, BreadcrumbItem as vt, BreadcrumbLink as yt, BreadcrumbList as bt, BreadcrumbPage as xt, BreadcrumbSeparator as St } from "./components/ui/breadcrumb/breadcrumb.js";
|
|
21
|
+
import { Button as Ct, buttonVariants as wt } from "./components/ui/button/button.js";
|
|
22
|
+
import { ButtonGroup as Tt, ButtonGroupItem as Et, buttonGroupItemVariants as Dt, buttonGroupVariants as Ot } from "./components/ui/button-group/button-group.js";
|
|
23
|
+
import { ButtonMenu as kt, buttonMenuVariants as At } from "./components/ui/button-menu/button-menu.js";
|
|
24
|
+
import { Calendar as jt, CalendarDayButton as Mt } from "./components/ui/calendar/calendar.js";
|
|
25
|
+
import { DialogFooterDefault as Nt } from "./components/ui/dialog-footer-default/dialog-footer-default.js";
|
|
26
|
+
import { InputSelect as A, InputSelectContent as j, InputSelectDescription as Pt, InputSelectError as Ft, InputSelectExpander as It, InputSelectField as Lt, InputSelectGroup as Rt, InputSelectItem as M, InputSelectLabel as zt, InputSelectSearch as Bt, InputSelectSection as N, InputSelectSectionLabel as P, InputSelectStatus as Vt, InputSelectTrigger as F, InputSelectValue as I, useInputSelectFilter as Ht } from "./components/ui/input-select/input-select.js";
|
|
27
|
+
import { CalendarHeader as Ut, CalendarItem as Wt, CalendarPanel as Gt } from "./components/ui/calendar-panel/calendar-panel.js";
|
|
28
|
+
import { ButtonIconInput as Kt, buttonIconInputVariants as qt } from "./components/ui/button-icon-input/button-icon-input.js";
|
|
29
|
+
import { Switch as Jt } from "./components/ui/switch/switch.js";
|
|
30
|
+
import { Card as Yt, CardContent as Xt, CardFooter as Zt, CardHeader as Qt, cardVariants as $t } from "./components/ui/card/card.js";
|
|
31
|
+
import { CardFilter as en, cardFilterVariants as tn } from "./components/ui/card-filter/card-filter.js";
|
|
32
|
+
import { CardSection as nn, cardSectionVariants as rn } from "./components/ui/card-section/card-section.js";
|
|
33
|
+
import { CardWidgetCarousel as an } from "./components/ui/card-widget-carousel/card-widget-carousel.js";
|
|
34
|
+
import { CardWidget as on } from "./components/ui/card-widget-carousel/card-widget.js";
|
|
35
|
+
import { CategoryBar as sn, categoryBarVariants as cn } from "./components/ui/category-bar/category-bar.js";
|
|
36
|
+
import { CHART_STATE_ILLUSTRATIONS as ln } from "./components/ui/chart-state/chart-state-illustrations.js";
|
|
37
|
+
import { ChartState as un } from "./components/ui/chart-state/chart-state.js";
|
|
38
|
+
import { ChartWidget as dn } from "./components/ui/chart-widget/chart-widget.js";
|
|
39
|
+
import { Checkbox as fn } from "./components/ui/checkbox/checkbox.js";
|
|
40
|
+
import { Chip as pn, chipVariants as mn } from "./components/ui/chip/chip.js";
|
|
41
|
+
import { Combobox as hn, ComboboxContent as gn, ComboboxEmpty as _n, ComboboxGroup as vn, ComboboxGroupLabel as yn, ComboboxInput as bn, ComboboxItem as xn, ComboboxList as Sn } from "./components/ui/combobox/combobox.js";
|
|
42
|
+
import { ComposedChart as Cn, composedChartVariants as wn } from "./components/ui/composed-chart/composed-chart.js";
|
|
43
|
+
import { ConfidenceCone as Tn } from "./components/ui/confidence-cone/confidence-cone.js";
|
|
44
|
+
import { DropdownMenu as En, DropdownMenuCheckboxItem as Dn, DropdownMenuContent as On, DropdownMenuGroup as kn, DropdownMenuItem as An, DropdownMenuLabel as jn, DropdownMenuPortal as Mn, DropdownMenuRadioGroup as Nn, DropdownMenuRadioItem as Pn, DropdownMenuSeparator as Fn, DropdownMenuShortcut as In, DropdownMenuSub as Ln, DropdownMenuSubContent as Rn, DropdownMenuSubTrigger as zn, DropdownMenuTrigger as Bn } from "./components/ui/dropdown-menu/dropdown-menu.js";
|
|
45
|
+
import { Table as Vn, TableActionsCell as Hn, TableBody as Un, TableCaption as Wn, TableCell as Gn, TableFooter as Kn, TableHead as qn, TableHeader as Jn, TableRow as Yn, TableSelectCell as Xn, TableSettingsCell as Zn } from "./components/ui/table/table.js";
|
|
46
|
+
import { TablePagination as Qn } from "./components/ui/table/table-pagination.js";
|
|
47
|
+
import { TableViewOptions as $n } from "./components/ui/table/table-view-options.js";
|
|
48
|
+
import { isBulkSelectionActive as er } from "./components/ui/data-table/data-table-selection.js";
|
|
49
|
+
import { DataTableViewOptions as tr } from "./components/ui/data-table/data-table-view-options.js";
|
|
50
|
+
import { DataTable as nr, getCellStyle as rr, getColumnWidth as ir, getPinnedStyle as ar, reorderColumn as or } from "./components/ui/data-table/data-table.js";
|
|
51
|
+
import { DataTableBulkActionsBar as sr } from "./components/ui/data-table/data-table-bulk-actions-bar.js";
|
|
52
|
+
import { DataTableColumnHeader as cr } from "./components/ui/data-table/data-table-column-header.js";
|
|
53
|
+
import { DataTableExpandTrigger as lr } from "./components/ui/data-table/data-table-expand-trigger.js";
|
|
54
|
+
import { DataTablePagination as ur } from "./components/ui/data-table/data-table-pagination.js";
|
|
55
|
+
import { FilterChips as dr, FilterChipsList as fr, FilterChipsReset as pr } from "./components/ui/filter-chips/filter-chips.js";
|
|
56
|
+
import { Popover as mr, PopoverBody as hr, PopoverContent as gr, PopoverFooter as _r, PopoverPortal as vr, PopoverTrigger as yr } from "./components/ui/popover/popover.js";
|
|
57
|
+
import { FilterSearch as br, FilterSearchActions as xr, FilterSearchAppliedFilters as Sr, FilterSearchFilters as Cr, useFilterSearchFilters as wr } from "./components/ui/filter-search/filter-search.js";
|
|
56
58
|
import { InputSearch as L } from "./components/ui/input-search/input-search.js";
|
|
57
|
-
import { DataTableToolbar as
|
|
58
|
-
import { InputDatePicker as
|
|
59
|
-
import { DateRangePicker as
|
|
60
|
-
import { DescriptionList as
|
|
61
|
-
import { InputBox as
|
|
59
|
+
import { DataTableToolbar as R } from "./components/ui/data-table/data-table-toolbar.js";
|
|
60
|
+
import { InputDatePicker as Tr } from "./components/ui/input-date-picker/input-date-picker.js";
|
|
61
|
+
import { DateRangePicker as Er } from "./components/ui/date-range-picker/date-range-picker.js";
|
|
62
|
+
import { DescriptionList as Dr, DescriptionListActions as Or, DescriptionListItem as kr, DescriptionListLabel as Ar, DescriptionListValue as jr, DescriptionListValueDescription as Mr } from "./components/ui/description-list/description-list.js";
|
|
63
|
+
import { InputBox as Nr } from "./components/ui/input/input.js";
|
|
62
64
|
import { InputText as z } from "./components/ui/input-text/input-text.js";
|
|
63
|
-
import { Loading as
|
|
64
|
-
import { Dialog as
|
|
65
|
-
import { DialogFooterCarousel as
|
|
66
|
-
import { DialogWelcome as
|
|
67
|
-
import { Empty as
|
|
68
|
-
import { EmptyOverlay as
|
|
69
|
-
import { labelClassName as
|
|
70
|
-
import { Separator as
|
|
71
|
-
import { Field as
|
|
72
|
-
import { FittedActions as
|
|
73
|
-
import { FilterCards as
|
|
74
|
-
import { FUNNEL_CHART_DEFAULT_PALETTE as
|
|
75
|
-
import { Grid as
|
|
76
|
-
import { Histogram as
|
|
77
|
-
import { Form as
|
|
78
|
-
import { RadarChart as
|
|
79
|
-
import { RadialBarChart as
|
|
80
|
-
import { Radio as
|
|
81
|
-
import { InputNumPicker as
|
|
82
|
-
import { InputOTP as
|
|
83
|
-
import { InputPassword as
|
|
65
|
+
import { Loading as Pr, loadingVariants as Fr } from "./components/ui/loading/loading.js";
|
|
66
|
+
import { Dialog as Ir, DialogClose as Lr } from "./components/ui/dialog/dialog.js";
|
|
67
|
+
import { DialogFooterCarousel as Rr } from "./components/ui/dialog-footer-carousel/dialog-footer-carousel.js";
|
|
68
|
+
import { DialogWelcome as zr } from "./components/ui/dialog-welcome/dialog-welcome.js";
|
|
69
|
+
import { Empty as Br, EmptyActions as Vr, EmptyDescription as Hr, EmptyHeader as Ur, EmptyIcon as Wr, EmptyLinks as Gr, EmptyTitle as Kr } from "./components/ui/empty/empty.js";
|
|
70
|
+
import { EmptyOverlay as qr, emptyOverlayIconVariants as Jr } from "./components/ui/empty-overlay/empty-overlay.js";
|
|
71
|
+
import { labelClassName as Yr } from "./components/ui/label/label.js";
|
|
72
|
+
import { Separator as Xr } from "./components/ui/separator/separator.js";
|
|
73
|
+
import { Field as Zr, FieldContent as Qr, FieldControl as $r, FieldDescription as ei, FieldError as ti, FieldGroup as ni, FieldLabel as ri, FieldLegend as ii, FieldSeparator as ai, FieldSet as oi, FieldTitle as si } from "./components/ui/field/field.js";
|
|
74
|
+
import { FittedActions as ci, computeFittedVisibleCount as li } from "./components/ui/fitted-actions/fitted-actions.js";
|
|
75
|
+
import { FilterCards as ui } from "./components/ui/filter-cards/filter-cards.js";
|
|
76
|
+
import { FUNNEL_CHART_DEFAULT_PALETTE as di, FunnelChart as fi, funnelChartPercent as pi, funnelChartVariants as mi } from "./components/ui/funnel-chart/funnel-chart.js";
|
|
77
|
+
import { Grid as hi, gridVariants as gi } from "./components/ui/grid/grid.js";
|
|
78
|
+
import { Histogram as _i } from "./components/ui/histogram/histogram.js";
|
|
79
|
+
import { Form as vi } from "./components/ui/form/form.js";
|
|
80
|
+
import { RadarChart as yi, radarChartVariants as bi } from "./components/ui/radar-chart/radar-chart.js";
|
|
81
|
+
import { RadialBarChart as xi } from "./components/ui/radial-bar-chart/radial-bar-chart.js";
|
|
82
|
+
import { Radio as Si, RadioGroup as Ci } from "./components/ui/radio/radio.js";
|
|
83
|
+
import { InputNumPicker as wi } from "./components/ui/input-num-picker/input-num-picker.js";
|
|
84
|
+
import { InputOTP as Ti } from "./components/ui/input-otp/input-otp.js";
|
|
85
|
+
import { InputPassword as Ei } from "./components/ui/input-password/input-password.js";
|
|
84
86
|
import { InputTextArea as B } from "./components/ui/input-text-area/input-text-area.js";
|
|
85
|
-
import { LineChart as
|
|
86
|
-
import { Link as
|
|
87
|
-
import {
|
|
88
|
-
import {
|
|
89
|
-
import {
|
|
90
|
-
import {
|
|
91
|
-
import {
|
|
92
|
-
import {
|
|
93
|
-
import {
|
|
94
|
-
import {
|
|
95
|
-
import {
|
|
96
|
-
import {
|
|
97
|
-
import {
|
|
98
|
-
import {
|
|
99
|
-
import {
|
|
100
|
-
import {
|
|
101
|
-
import {
|
|
102
|
-
import {
|
|
103
|
-
import {
|
|
104
|
-
import {
|
|
105
|
-
import {
|
|
106
|
-
import {
|
|
107
|
-
import {
|
|
108
|
-
import {
|
|
109
|
-
import {
|
|
110
|
-
import {
|
|
111
|
-
import {
|
|
112
|
-
import {
|
|
113
|
-
import {
|
|
114
|
-
import {
|
|
115
|
-
import {
|
|
116
|
-
import {
|
|
117
|
-
import {
|
|
118
|
-
import {
|
|
119
|
-
import {
|
|
120
|
-
import {
|
|
121
|
-
import {
|
|
122
|
-
import { Treemap as
|
|
123
|
-
import { WidgetPlaceholder as
|
|
124
|
-
import { Wizard as
|
|
125
|
-
export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar,
|
|
87
|
+
import { LineChart as Di, lineChartVariants as Oi } from "./components/ui/line-chart/line-chart.js";
|
|
88
|
+
import { Link as ki, linkVariants as Ai } from "./components/ui/link/link.js";
|
|
89
|
+
import { Skeleton as ji } from "./components/ui/skeleton/skeleton.js";
|
|
90
|
+
import { TrendIndicator as Mi, trendIndicatorVariants as Ni } from "./components/ui/trend-indicator/trend-indicator.js";
|
|
91
|
+
import { Metric as Pi } from "./components/ui/metric/metric.js";
|
|
92
|
+
import { NumberField as Fi, NumberFieldDecrement as Ii, NumberFieldGroup as Li, NumberFieldIncrement as Ri, NumberFieldInput as zi } from "./components/ui/number-field/number-field.js";
|
|
93
|
+
import { PageContent as Bi } from "./components/ui/page-content/page-content.js";
|
|
94
|
+
import { Tag as V, tagVariants as Vi } from "./components/ui/tag/tag.js";
|
|
95
|
+
import { PageHeader as Hi, PageHeaderActions as Ui, PageHeaderDescription as Wi, PageHeaderDescriptionRow as Gi, PageHeaderRow as Ki, PageHeaderTags as qi, PageHeaderTitle as Ji } from "./components/ui/page-header/page-header.js";
|
|
96
|
+
import { Pagination as Yi, PaginationContent as Xi, PaginationEllipsis as Zi, PaginationItem as Qi, PaginationLink as $i, PaginationNext as ea, PaginationPrevious as ta } from "./components/ui/pagination/pagination.js";
|
|
97
|
+
import { PieChart as na, pieChartVariants as ra } from "./components/ui/pie-chart/pie-chart.js";
|
|
98
|
+
import { Progress as ia } from "./components/ui/progress/progress.js";
|
|
99
|
+
import { ProgressCircle as aa, progressCircleVariants as oa } from "./components/ui/progress-circle/progress-circle.js";
|
|
100
|
+
import { SankeyChart as sa } from "./components/ui/sankey-chart/sankey-chart.js";
|
|
101
|
+
import { ScatterChart as ca } from "./components/ui/scatter-chart/scatter-chart.js";
|
|
102
|
+
import { ScrollArea as la, ScrollBar as ua } from "./components/ui/scroll-area/scroll-area.js";
|
|
103
|
+
import { Section as da, SectionContent as fa, SectionHeader as pa, sectionVariants as ma, useSectionContext as ha } from "./components/ui/section/section.js";
|
|
104
|
+
import { Sheet as H, SheetBody as U, SheetClose as W, SheetCloseButton as G, SheetContent as K, SheetDescription as q, SheetFooter as J, SheetHeader as Y, SheetOverlay as X, SheetPortal as Z, SheetTitle as Q, SheetTrigger as $, sheetVariants as ga } from "./components/ui/sheet/sheet.js";
|
|
105
|
+
import { SheetDetails as _a } from "./components/ui/sheet/sheet-details.js";
|
|
106
|
+
import { Slider as va } from "./components/ui/slider/slider.js";
|
|
107
|
+
import { Stack as ya, stackVariants as ba } from "./components/ui/stack/stack.js";
|
|
108
|
+
import { Stepper as xa } from "./components/ui/stepper/stepper.js";
|
|
109
|
+
import { StepperItem as Sa, stepperItemVariants as Ca } from "./components/ui/stepper-item/stepper-item.js";
|
|
110
|
+
import { ResizableHandle as wa, ResizablePanel as Ta, ResizablePanelGroup as Ea } from "./components/ui/resizable/resizable.js";
|
|
111
|
+
import { SidebarPrimary as Da, SidebarPrimaryCollapseTrigger as Oa, SidebarPrimaryContent as ka, SidebarPrimaryFooter as Aa, SidebarPrimaryHeader as ja, SidebarPrimaryMenu as Ma, SidebarPrimaryMenuItem as Na, SidebarPrimaryMenuItemExtras as Pa, SidebarPrimarySection as Fa, sidebarPrimaryMenuItemVariants as Ia } from "./components/ui/sidebar-primary/sidebar-primary.js";
|
|
112
|
+
import { SidebarSecondary as La, SidebarSecondaryCollapseTrigger as Ra, SidebarSecondaryContent as za, SidebarSecondaryFooter as Ba, SidebarSecondaryHeader as Va, SidebarSecondaryMenu as Ha, SidebarSecondaryMenuItem as Ua, SidebarSecondaryMenuItemExtras as Wa, SidebarSecondarySection as Ga, SidebarSecondarySectionLabel as Ka, sidebarSecondaryMenuItemVariants as qa } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
|
|
113
|
+
import { ButtonIconMenu as Ja } from "./components/ui/button-icon-menu/button-icon-menu.js";
|
|
114
|
+
import { Tabs as Ya, TabsContent as Xa, TabsList as Za, TabsTrigger as Qa } from "./components/ui/tabs/tabs.js";
|
|
115
|
+
import { Toaster as $a, toast as eo, toastVariants as to } from "./components/ui/toast/toast.js";
|
|
116
|
+
import { Toggle as no, ToggleGroup as ro, ToggleGroupItem as io } from "./components/ui/toggle-group/toggle-group.js";
|
|
117
|
+
import { Toolbar as ao, ToolbarActionList as oo, ToolbarActions as so } from "./components/ui/toolbar/toolbar.js";
|
|
118
|
+
import { middleTruncate as co } from "./components/ui/truncate-text/middle-truncate.js";
|
|
119
|
+
import { measureTextWidth as lo } from "./components/ui/truncate-text/text-width.js";
|
|
120
|
+
import { TruncateText as uo } from "./components/ui/truncate-text/truncate-text.js";
|
|
121
|
+
import { Timeline as fo, TimelineItem as po } from "./components/ui/timeline/timeline.js";
|
|
122
|
+
import { Timer as mo } from "./components/ui/timer/timer.js";
|
|
123
|
+
import { TreeItem as ho } from "./components/ui/tree-item/tree-item.js";
|
|
124
|
+
import { Treemap as go } from "./components/ui/treemap/treemap.js";
|
|
125
|
+
import { WidgetPlaceholder as _o, WidgetPlaceholderAction as vo, WidgetPlaceholderContent as yo, WidgetPlaceholderFooter as bo, WidgetPlaceholderHeader as xo, WidgetPlaceholderIcon as So, WidgetPlaceholderImage as Co, WidgetPlaceholderText as wo, WidgetPlaceholderTitle as To } from "./components/ui/widget-placeholder/widget-placeholder.js";
|
|
126
|
+
import { Wizard as Eo, WizardBody as Do, WizardHeader as Oo, WizardSubtitle as ko } from "./components/ui/wizard/wizard.js";
|
|
127
|
+
export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar, st as AreaChart, lt as Avatar, ut as AvatarFallback, dt as AvatarGroup, ft as AvatarImage, ce as BREAKPOINT_2XL, le as BREAKPOINT_3XL, ue as BREAKPOINT_4XL, de as BREAKPOINT_LG, fe as BREAKPOINT_XL, V as Badge, mt as BarChart, gt as Breadcrumb, _t as BreadcrumbEllipsis, vt as BreadcrumbItem, yt as BreadcrumbLink, bt as BreadcrumbList, xt as BreadcrumbPage, St as BreadcrumbSeparator, Ct as Button, Tt as ButtonGroup, Et as ButtonGroupItem, e as ButtonIcon, Kt as ButtonIconInput, Ja as ButtonIconMenu, kt as ButtonMenu, Ie as CHART_BRUSH_ARIA_LABEL, Le as CHART_BRUSH_HEIGHT, T as CHART_CATEGORICAL_TOKENS, E as CHART_DEFAULT_PALETTE, D as CHART_DIVERGING_TOKENS, Re as CHART_LABEL_FILL_CLASS, ze as CHART_LABEL_FILL_ON_SERIES_CLASS, Be as CHART_LABEL_FONT_SIZE, Ve as CHART_LABEL_MARGIN, He as CHART_REFERENCE_LINE_STROKE, O as CHART_SEQUENTIAL_TOKENS, ln as CHART_STATE_ILLUSTRATIONS, k as CHART_STATUS_TOKENS, jt as Calendar, Mt as CalendarDayButton, Ut as CalendarHeader, Wt as CalendarItem, Gt as CalendarPanel, Yt as Card, Xt as CardContent, en as CardFilter, Zt as CardFooter, Qt as CardHeader, nn as CardSection, on as CardWidget, an as CardWidgetCarousel, sn as CategoryBar, ke as ChartContainer, Ae as ChartLegend, je as ChartLegendContent, un as ChartState, Me as ChartStyle, Ne as ChartTooltip, Pe as ChartTooltipContent, dn as ChartWidget, fn as Checkbox, pn as Chip, hn as Combobox, gn as ComboboxContent, _n as ComboboxEmpty, vn as ComboboxGroup, yn as ComboboxGroupLabel, bn as ComboboxInput, xn as ComboboxItem, Sn as ComboboxList, Cn as ComposedChart, Tn as ConfidenceCone, re as DEFAULT_TABLE_URL_PARAM_KEYS, nr as DataTable, sr as DataTableBulkActionsBar, cr as DataTableColumnHeader, lr as DataTableExpandTrigger, ur as DataTablePagination, R as DataTableToolbar, tr as DataTableViewOptions, Er as DateRangePicker, Dr as DescriptionList, Or as DescriptionListActions, kr as DescriptionListItem, Ar as DescriptionListLabel, jr as DescriptionListValue, Mr as DescriptionListValueDescription, H as Details, U as DetailsBody, W as DetailsClose, G as DetailsCloseButton, K as DetailsContent, q as DetailsDescription, J as DetailsFooter, Y as DetailsHeader, X as DetailsOverlay, Z as DetailsPortal, Q as DetailsTitle, $ as DetailsTrigger, Ir as Dialog, Lr as DialogClose, Rr as DialogFooterCarousel, Nt as DialogFooterDefault, zr as DialogWelcome, En as DropdownMenu, Dn as DropdownMenuCheckboxItem, On as DropdownMenuContent, kn as DropdownMenuGroup, An as DropdownMenuItem, jn as DropdownMenuLabel, Mn as DropdownMenuPortal, Nn as DropdownMenuRadioGroup, Pn as DropdownMenuRadioItem, Fn as DropdownMenuSeparator, In as DropdownMenuShortcut, Ln as DropdownMenuSub, Rn as DropdownMenuSubContent, zn as DropdownMenuSubTrigger, Bn as DropdownMenuTrigger, Br as Empty, Vr as EmptyActions, Hr as EmptyDescription, Ur as EmptyHeader, Wr as EmptyIcon, Gr as EmptyLinks, qr as EmptyOverlay, Kr as EmptyTitle, di as FUNNEL_CHART_DEFAULT_PALETTE, Zr as Field, Qr as FieldContent, $r as FieldControl, ei as FieldDescription, ti as FieldError, ni as FieldGroup, ri as FieldLabel, ii as FieldLegend, ai as FieldSeparator, oi as FieldSet, si as FieldTitle, ui as FilterCards, dr as FilterChips, fr as FilterChipsList, pr as FilterChipsReset, br as FilterSearch, xr as FilterSearchActions, Sr as FilterSearchAppliedFilters, Cr as FilterSearchFilters, ci as FittedActions, vi as Form, fi as FunnelChart, hi as Grid, _i as Histogram, z as Input, Nr as InputBox, Tr as InputDatePicker, wi as InputNumPicker, Ti as InputOTP, Ei as InputPassword, L as InputSearch, A as InputSelect, j as InputSelectContent, Pt as InputSelectDescription, Ft as InputSelectError, It as InputSelectExpander, Lt as InputSelectField, Rt as InputSelectGroup, M as InputSelectItem, zt as InputSelectLabel, Bt as InputSelectSearch, N as InputSelectSection, P as InputSelectSectionLabel, Vt as InputSelectStatus, F as InputSelectTrigger, I as InputSelectValue, z as InputText, B as InputTextArea, Di as LineChart, ki as Link, Pr as Loading, Pi as Metric, Fi as NumberField, Ii as NumberFieldDecrement, Li as NumberFieldGroup, Ri as NumberFieldIncrement, zi as NumberFieldInput, Bi as PageContent, Hi as PageHeader, Ui as PageHeaderActions, Wi as PageHeaderDescription, Gi as PageHeaderDescriptionRow, Ki as PageHeaderRow, qi as PageHeaderTags, Ji as PageHeaderTitle, Yi as Pagination, Xi as PaginationContent, Zi as PaginationEllipsis, Qi as PaginationItem, $i as PaginationLink, ea as PaginationNext, ta as PaginationPrevious, na as PieChart, mr as Popover, hr as PopoverBody, gr as PopoverContent, _r as PopoverFooter, vr as PopoverPortal, yr as PopoverTrigger, he as PortalContainerProvider, ia as Progress, aa as ProgressCircle, pe as ROOT_FONT_SIZE_PX, yi as RadarChart, xi as RadialBarChart, Si as Radio, Ci as RadioGroup, wa as ResizableHandle, Ta as ResizablePanel, Ea as ResizablePanelGroup, sa as SankeyChart, ca as ScatterChart, la as ScrollArea, ua as ScrollBar, L as Search, da as Section, fa as SectionContent, pa as SectionHeader, A as Select, j as SelectContent, N as SelectGroup, P as SelectGroupLabel, M as SelectItem, F as SelectTrigger, I as SelectValue, Xr as Separator, H as Sheet, U as SheetBody, W as SheetClose, G as SheetCloseButton, K as SheetContent, q as SheetDescription, _a as SheetDetails, J as SheetFooter, Y as SheetHeader, X as SheetOverlay, Z as SheetPortal, Q as SheetTitle, $ as SheetTrigger, Da as SidebarPrimary, Oa as SidebarPrimaryCollapseTrigger, ka as SidebarPrimaryContent, Aa as SidebarPrimaryFooter, ja as SidebarPrimaryHeader, Ma as SidebarPrimaryMenu, Na as SidebarPrimaryMenuItem, Pa as SidebarPrimaryMenuItemExtras, Fa as SidebarPrimarySection, La as SidebarSecondary, Ra as SidebarSecondaryCollapseTrigger, za as SidebarSecondaryContent, Ba as SidebarSecondaryFooter, Va as SidebarSecondaryHeader, Ha as SidebarSecondaryMenu, Ua as SidebarSecondaryMenuItem, Wa as SidebarSecondaryMenuItemExtras, Ga as SidebarSecondarySection, Ka as SidebarSecondarySectionLabel, ji as Skeleton, va as Slider, ya as Stack, xa as Stepper, Sa as StepperItem, Jt as Switch, Vn as Table, Hn as TableActionsCell, Un as TableBody, Wn as TableCaption, Gn as TableCell, Kn as TableFooter, qn as TableHead, Jn as TableHeader, Qn as TablePagination, Yn as TableRow, Xn as TableSelectCell, Zn as TableSettingsCell, $n as TableViewOptions, Ya as Tabs, Xa as TabsContent, Za as TabsList, Qa as TabsTrigger, V as Tag, B as Textarea, fo as Timeline, po as TimelineItem, mo as Timer, $a as Toaster, no as Toggle, ro as ToggleGroup, io as ToggleGroupItem, ao as Toolbar, oo as ToolbarActionList, so as ToolbarActions, d as Tooltip, f as TooltipContent, p as TooltipProvider, m as TooltipTrigger, ho as TreeItem, go as Treemap, Mi as TrendIndicator, uo as TruncateText, _o as WidgetPlaceholder, vo as WidgetPlaceholderAction, yo as WidgetPlaceholderContent, bo as WidgetPlaceholderFooter, xo as WidgetPlaceholderHeader, So as WidgetPlaceholderIcon, Co as WidgetPlaceholderImage, wo as WidgetPlaceholderText, To as WidgetPlaceholderTitle, Eo as Wizard, Do as WizardBody, Oo as WizardHeader, ko as WizardSubtitle, u as alertVariants, ct as areaChartVariants, pt as avatarVariants, ht as barChartVariants, Dt as buttonGroupItemVariants, Ot as buttonGroupVariants, qt as buttonIconInputVariants, t as buttonIconVariants, At as buttonMenuVariants, wt as buttonVariants, tn as cardFilterVariants, rn as cardSectionVariants, $t as cardVariants, cn as categoryBarVariants, mn as chipVariants, ee as cn, wn as composedChartVariants, li as computeFittedVisibleCount, Ue as createTickFormatter, We as dropProjectionPayload, Jr as emptyOverlayIconVariants, Te as findDuplicateTones, Ge as formatCompactNumber, Ke as formatPercent, pi as funnelChartPercent, mi as funnelChartVariants, C as getAppShellChatInitialLayout, rr as getCellStyle, ir as getColumnWidth, ar as getPinnedStyle, me as getViewportWidth, gi as gridVariants, er as isBulkSelectionActive, Yr as labelClassName, Oi as lineChartVariants, Ai as linkVariants, Ee as listPaletteChoices, De as listPaletteStops, Fr as loadingVariants, lo as measureTextWidth, co as middleTruncate, ie as parseTableUrlState, ra as pieChartVariants, oa as progressCircleVariants, bi as radarChartVariants, or as reorderColumn, qe as resolveAnimation, Je as resolveAxisDomain, Ye as resolveBrushProps, Xe as resolveCartesianLabelPosition, Ze as resolveCategoryRange, Fe as resolveChartColors, Qe as resolveChartReferenceValue, $e as resolveLabelFillClass, et as resolveReferenceLineProps, tt as resolveRotatedTickAnchor, Oe as resolveSeriesColor, nt as resolveXAxisHeight, rt as resolveXAxisTitle, it as resolveYAxisTitle, ma as sectionVariants, ae as serializeTableUrlState, ga as sheetVariants, Ia as sidebarPrimaryMenuItemVariants, qa as sidebarSecondaryMenuItemVariants, ba as stackVariants, Ca as stepperItemVariants, Vi as tagVariants, at as toLabelFormatter, ot as toReferenceLineList, eo as toast, to as toastVariants, Ni as trendIndicatorVariants, we as useAccordionContainerContext, w as useAppShellChatInitialLayout, wr as useFilterSearchFilters, Ht as useInputSelectFilter, ne as useIntersectionObserver, ge as usePortalContainer, ha as useSectionContext, te as useSortState, oe as useTableUrlState, se as useWizard };
|
package/dist/llms/area-chart.md
CHANGED
|
@@ -98,7 +98,7 @@ across brands until the real data-viz palette lands.
|
|
|
98
98
|
| Prop | Type | Default | Required | Description |
|
|
99
99
|
|------|------|---------|----------|-------------|
|
|
100
100
|
| `layout` | `'single' | 'stacked'` | `'single'` | no | How multiple series are arranged. `single` = areas overlap independently; `stacked` = areas share a `stackId` and sum into one band. |
|
|
101
|
-
| `fill` | `'solid' | 'gradient'` | `'
|
|
101
|
+
| `fill` | `'solid' | 'gradient'` | `'solid'` | no | How each area is filled. `solid` = a flat translucent fill (`fillOpacity`); `gradient` = a vertical top-opaque → bottom-transparent gradient. |
|
|
102
102
|
| `data` | `ReadonlyArray<Record<string, string | number | null>>` | — | yes | Row-per-point data — each row holds `xKey` plus one numeric field per series. A `null` breaks the area at that point unless `connectNulls`. |
|
|
103
103
|
| `config` | `ChartConfig` | — | yes | Series take their colour from the container's `palette`; each entry maps a data key to a `label` and an optional `tone`. Resolved into the `--color-<key>` custom properties the areas stroke and fill from. |
|
|
104
104
|
| `dataKeys` | `string[]` | — | yes | Series to plot — one area per key. Each must exist in `config` and every data row. |
|
|
@@ -115,6 +115,7 @@ across brands until the real data-viz palette lands.
|
|
|
115
115
|
| `areaSettings` | `Record<string, { color?: string; strokeWidth?: number; dashed?: boolean; curveType?: CurveType; fillOpacity?: number; showDots?: boolean; dotSize?: number; showLabel?: boolean; labelPosition?: LabelPosition }>` | — | no | Per-series style override keyed by `dataKeys` entry — anything unset falls back to the chart-wide prop, so an entry states only what differs (e.g. a faint dashed projection beside solid actuals). `color` also recolors that series' gradient stops; under `fill="gradient"` a `fillOpacity` scales the gradient's own alpha rather than replacing it. |
|
|
116
116
|
| `referenceLine` | `Line | Line[] where Line = { value?: number; average?: boolean | string; label?: string; labelPosition?: 'top' | 'insideTopLeft' | 'insideTopRight' | 'insideBottomLeft' | 'insideBottomRight' }` | — | no | One or more dashed reference/average lines on the value axis. Pass a single object or an array. Per line, a fixed `value` wins; otherwise the mean of one series (`average: '<key>'`) or of every plotted series (`average: true`). An optional `label` captions each, at the rule's top right unless `labelPosition` moves it away from a series it would sit on. On a stacked chart the value is read against the stack's axis, which measures stack totals — `average` still means the mean of the individual series' values, so pass an explicit `value` when the rule should compare against the stacked total. The same config shape as `BarChart` / `LineChart`. |
|
|
117
117
|
| `connectNulls` | `boolean` | `false` | no | Bridge `null` gaps in the data instead of breaking the area. |
|
|
118
|
+
| `projectionStart` | `string | number` | — | no | The category value (matching an `xKey` entry) at which the projection zone starts. Ticks from this point onward render in the disabled text color. The actual series are clipped to the left of the boundary; a dashed, dot-less projection continuation renders on the right. |
|
|
118
119
|
| `showGrid` | `boolean` | `true` | no | Render the CartesianGrid. |
|
|
119
120
|
| `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
|
|
120
121
|
| `showLegend` | `boolean` | `true` | no | Render the legend. |
|