{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chart", "title": "Chart", "description": "Chart from the Get IT Done design system.", "dependencies": [ "lucide-react@^0.379.0" ], "registryDependencies": [ "https://zero-design.itdone.de/r/data-state-panel.json", "https://zero-design.itdone.de/r/labels-context.json", "https://zero-design.itdone.de/r/recipes.json", "https://zero-design.itdone.de/r/utils.json", "https://zero-design.itdone.de/r/theme.json" ], "files": [ { "path": "registry/ui/chart.tsx", "content": "'use client';\n\nimport { BarChart3 } from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type HTMLAttributes, type ReactNode, type RefObject } from 'react';\n\nimport { overlaySurface } from '@/lib/recipes';\nimport { cn } from '@/lib/utils';\nimport { DataStatePanel, SkeletonBar } from '@/components/ui/data-state-panel';\nimport { useLabels, useLocale, usePreset, type DesignSystemLocale } from '@/components/ui/labels-context';\n\n// Tones\n\n// Full class strings so Tailwind's content scan finds every chart token.\nconst toneText = {\n 1: 'text-chart-1',\n 2: 'text-chart-2',\n 3: 'text-chart-3',\n 4: 'text-chart-4',\n 5: 'text-chart-5',\n 6: 'text-chart-6',\n 7: 'text-chart-7',\n 8: 'text-chart-8',\n brand: 'text-chart-brand',\n 'brand-1': 'text-chart-brand-1',\n 'brand-2': 'text-chart-brand-2',\n 'brand-3': 'text-chart-brand-3',\n 'brand-4': 'text-chart-brand-4',\n 'brand-5': 'text-chart-brand-5',\n 'brand-6': 'text-chart-brand-6',\n 'brand-7': 'text-chart-brand-7',\n neutral: 'text-chart-neutral',\n success: 'text-chart-success',\n destructive: 'text-chart-destructive',\n warning: 'text-text-warning',\n} as const;\n\nconst toneStroke = {\n 1: 'stroke-chart-1',\n 2: 'stroke-chart-2',\n 3: 'stroke-chart-3',\n 4: 'stroke-chart-4',\n 5: 'stroke-chart-5',\n 6: 'stroke-chart-6',\n 7: 'stroke-chart-7',\n 8: 'stroke-chart-8',\n brand: 'stroke-chart-brand',\n 'brand-1': 'stroke-chart-brand-1',\n 'brand-2': 'stroke-chart-brand-2',\n 'brand-3': 'stroke-chart-brand-3',\n 'brand-4': 'stroke-chart-brand-4',\n 'brand-5': 'stroke-chart-brand-5',\n 'brand-6': 'stroke-chart-brand-6',\n 'brand-7': 'stroke-chart-brand-7',\n neutral: 'stroke-chart-neutral',\n success: 'stroke-chart-success',\n destructive: 'stroke-chart-destructive',\n warning: 'stroke-text-warning',\n} as const;\n\nconst toneBg = {\n 1: 'bg-chart-1',\n 2: 'bg-chart-2',\n 3: 'bg-chart-3',\n 4: 'bg-chart-4',\n 5: 'bg-chart-5',\n 6: 'bg-chart-6',\n 7: 'bg-chart-7',\n 8: 'bg-chart-8',\n brand: 'bg-chart-brand',\n 'brand-1': 'bg-chart-brand-1',\n 'brand-2': 'bg-chart-brand-2',\n 'brand-3': 'bg-chart-brand-3',\n 'brand-4': 'bg-chart-brand-4',\n 'brand-5': 'bg-chart-brand-5',\n 'brand-6': 'bg-chart-brand-6',\n 'brand-7': 'bg-chart-brand-7',\n neutral: 'bg-chart-neutral',\n success: 'bg-chart-success',\n destructive: 'bg-chart-destructive',\n warning: 'bg-chart-warning',\n} as const;\n\n// Label colour for text drawn on a chart fill (the `-on` roles of the chart tokens), keyed like toneBg.\nconst toneOn = {\n 1: 'text-chart-1-on',\n 2: 'text-chart-2-on',\n 3: 'text-chart-3-on',\n 4: 'text-chart-4-on',\n 5: 'text-chart-5-on',\n 6: 'text-chart-6-on',\n 7: 'text-chart-7-on',\n 8: 'text-chart-8-on',\n brand: 'text-chart-brand-on',\n 'brand-1': 'text-chart-brand-1-on',\n 'brand-2': 'text-chart-brand-2-on',\n 'brand-3': 'text-chart-brand-3-on',\n 'brand-4': 'text-chart-brand-4-on',\n 'brand-5': 'text-chart-brand-5-on',\n 'brand-6': 'text-chart-brand-6-on',\n 'brand-7': 'text-chart-brand-7-on',\n neutral: 'text-chart-neutral-on',\n success: 'text-chart-success-on',\n destructive: 'text-chart-destructive-on',\n warning: 'text-chart-warning-on',\n} as const;\n\n// Label colour for a custom `bg-*` fill: the project tiles have their own `-on` role, anything else keeps the on-brand label.\nconst customOn: Record = {\n 'bg-data-project-1': 'text-data-project-1-on',\n 'bg-data-project-2': 'text-data-project-2-on',\n 'bg-data-project-3': 'text-data-project-3-on',\n 'bg-data-project-4': 'text-data-project-4-on',\n 'bg-data-project-5': 'text-data-project-5-on',\n 'bg-data-project-6': 'text-data-project-6-on',\n 'bg-data-project-7': 'text-data-project-7-on',\n 'bg-data-project-8': 'text-data-project-8-on',\n};\n\nexport type ChartTone = keyof typeof toneText;\n\n// Corner radius of the zero bars, the `borderRadius/tight` token (4). SVG geometry cannot read the CSS variable.\nconst BAR_TOP_RADIUS = 4;\n\n// Rectangle with only the top corners rounded.\nconst topRoundedPath = (x: number, y: number, w: number, h: number, radius: number) => {\n const r = Math.max(0, Math.min(radius, w / 2, h));\n return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;\n};\n\nconst cycle: ChartTone[] = [1, 2, 3, 4, 5, 6, 7, 8];\nconst toneAt = (i: number): ChartTone => cycle[i % cycle.length];\n\n// Legend\n\nexport interface ChartLegendItem {\n id: string;\n label: ReactNode;\n tone?: ChartTone;\n // Custom swatch colour (user data): a CSS colour such as `var(--colors-data-project-3)` or a token utility such as `bg-data-project-3`. Wins over `tone`.\n color?: string;\n}\n\nexport interface ChartLegendProps extends HTMLAttributes {\n items: ChartLegendItem[];\n // Direction of the list: a row (top, bottom) or a column (right).\n layout?: 'row' | 'column';\n}\n\nconst ChartLegend = forwardRef(({ className, items, layout = 'row', ...props }, ref) => {\n const l = useLabels();\n const zero = usePreset() === 'zero';\n const swatch = zero ? 'h-swatch-sm w-swatch-sm rounded-hairline' : 'h-2 w-2 rounded-full';\n return (\n \n {items.map((item, i) => (\n
  • \n {item.color ? (\n \n ) : (\n \n )}\n {item.label}\n
    • \n ))}\n \n );\n});\nChartLegend.displayName = 'ChartLegend';\n\n// Frame (name, description, table alternative, states)\n\nexport interface ChartTable {\n caption?: string;\n columns: string[];\n rows: (string | number)[][];\n}\n\nexport interface ChartFrameProps extends Omit, 'title'> {\n // Accessible name of the chart.\n title: string;\n // Short text summary, read after the name.\n description?: string;\n // Data table alternative. Rendered visually hidden unless `showTable` is set.\n table?: ChartTable;\n showTable?: boolean;\n legend?: ChartLegendItem[];\n legendPosition?: 'top' | 'right' | 'bottom';\n state?: 'default' | 'loading' | 'empty' | 'error';\n emptyTitle?: string;\n emptyDescription?: string;\n errorTitle?: string;\n errorDescription?: string;\n onRetry?: () => void;\n loadingLabel?: string;\n}\n\nconst ChartFrame = forwardRef(\n (\n {\n className,\n title,\n description,\n table,\n showTable = false,\n legend,\n legendPosition = 'bottom',\n state = 'default',\n emptyTitle: emptyTitleProp,\n emptyDescription,\n errorTitle: errorTitleProp,\n errorDescription: errorDescriptionProp,\n onRetry,\n loadingLabel: loadingLabelProp,\n children,\n ...props\n },\n ref,\n ) => {\n const l = useLabels();\n const emptyTitle = emptyTitleProp ?? l.chartEmptyTitle;\n const errorTitle = errorTitleProp ?? l.chartErrorTitle;\n const errorDescription = errorDescriptionProp ?? l.chartErrorDescription;\n const loadingLabel = loadingLabelProp ?? l.chartLoading;\n const id = useId();\n const descId = description ? `${id}-desc` : undefined;\n const tableMarkup = table ? (\n \n {table.caption ? : null}\n \n \n {table.columns.map((c) => (\n \n ))}\n \n \n \n {table.rows.map((row, r) => (\n \n {row.map((cell, c) =>\n c === 0 ? (\n \n ) : (\n \n ),\n )}\n \n ))}\n \n
    {table.caption}
    \n {c}\n
    \n {cell}\n \n {cell}\n
    \n ) : null;\n // A bare `sr-only` table keeps its table layout and widens the page. The hidden variant sits in a clipped block, the visible one scrolls on its own.\n const tableNode = tableMarkup ? (\n showTable ?
    {tableMarkup}
    :
    {tableMarkup}
    \n ) : null;\n\n const legendNode =\n legend && legend.length > 0 ? : null;\n\n return (\n
    \n {state === 'default' ? (\n <>\n {legendPosition === 'top' ? legendNode : null}\n
    \n
    \n {children}\n
    \n {legendPosition === 'right' ? legendNode : null}\n
    \n {description ? (\n

    \n {description}\n

    \n ) : null}\n {legendPosition === 'bottom' ? legendNode : null}\n {tableNode}\n \n ) : null}\n {state === 'loading' ? (\n
    \n {[40, 70, 55, 85, 60, 75, 50].map((h, i) => (\n \n ))}\n
    \n ) : null}\n {state === 'empty' ? (\n } title={emptyTitle} description={emptyDescription} />\n ) : null}\n {state === 'error' ? : null}\n
    \n );\n },\n);\nChartFrame.displayName = 'ChartFrame';\n\ntype FrameShared = Pick<\n ChartFrameProps,\n | 'title'\n | 'description'\n | 'showTable'\n | 'state'\n | 'onRetry'\n | 'emptyTitle'\n | 'emptyDescription'\n | 'errorTitle'\n | 'errorDescription'\n | 'loadingLabel'\n | 'legendPosition'\n | 'className'\n>;\n\n// Axis helpers\n\nconst niceMax = (max: number) => {\n if (max <= 0) return 1;\n const exp = Math.pow(10, Math.floor(Math.log10(max)));\n const f = max / exp;\n const nice = f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10;\n return nice * exp;\n};\n\nconst formatNumber = (n: number, locale: DesignSystemLocale) =>\n new Intl.NumberFormat(locale === 'de' ? 'de-DE' : 'en-US', { maximumFractionDigits: 1 }).format(n);\n\n// Number formatter bound to the provider locale (English by default).\nconst useNumberFormat = () => {\n const locale = useLocale();\n return (n: number) => formatNumber(n, locale);\n};\n\n// Line and bar chart\n\nexport interface ChartSeries {\n id: string;\n label: string;\n values: number[];\n tone?: ChartTone;\n // Per data point tone for bars (Figma Column chart, one colour per column). A missing entry falls back to the series tone.\n pointTones?: (ChartTone | undefined)[];\n // Per data point CSS colour for bars, for user data such as `var(--colors-data-project-3)`. Wins over `pointTones`.\n pointColors?: (string | undefined)[];\n}\n\n// One category of a LineBarChart as handed to `derived.compute`.\nexport interface ChartDatum {\n index: number;\n category: string;\n // Value of every series at this category, by series id.\n values: Record;\n // Sum of all series at this category.\n total: number;\n}\n\n// A value computed from the data of a category, e.g. a conversion rate. It is shown as a tooltip row and as a column of the data table.\nexport interface ChartDerived {\n key: string;\n label: string;\n compute: (datum: ChartDatum) => number | null | undefined;\n // Formats the computed value. Defaults to the locale number format.\n format?: (value: number) => string;\n}\n\n// Approximate glyph width of the axis text in SVG units, used to wrap long category labels without measuring the DOM.\nconst AXIS_CHAR_WIDTH = 6.5;\nconst AXIS_LINE_HEIGHT = 14;\n\n// Splits a label into lines of at most `maxChars` characters, breaking at spaces and inside words that are too long. The last line ends with an ellipsis when text is left over.\nconst wrapAxisLabel = (label: string, maxChars: number, maxLines: number): string[] => {\n const limit = Math.max(1, maxChars);\n const lines: string[] = [];\n let line = '';\n const push = () => {\n if (line) lines.push(line);\n line = '';\n };\n label\n .split(/\\s+/)\n .filter(Boolean)\n .forEach((word) => {\n let rest = word;\n while (rest.length > limit) {\n if (line) push();\n lines.push(rest.slice(0, limit));\n rest = rest.slice(limit);\n }\n if (!line) line = rest;\n else if (line.length + 1 + rest.length <= limit) line = `${line} ${rest}`;\n else {\n push();\n line = rest;\n }\n });\n push();\n if (lines.length <= maxLines) return lines.length ? lines : [label];\n const kept = lines.slice(0, maxLines);\n const last = kept[maxLines - 1];\n kept[maxLines - 1] = `${last.length >= limit ? last.slice(0, Math.max(0, limit - 1)) : last}\\u2026`;\n return kept;\n};\n\n// Narrowest a fluid chart renders, so a collapsed container does not produce a negative plot.\nconst FLUID_MIN_WIDTH = 120;\n\n// Pixel width of a container, kept up to date with a ResizeObserver. The node arrives through a callback ref, so a container that mounts later (after a loading or empty state) is measured as soon as it exists. Null while disabled or before the first measurement (and where the DOM has no layout, e.g. jsdom).\nconst useContainerWidth = (enabled: boolean) => {\n const [node, setNode] = useState(null);\n const [measured, setMeasured] = useState(null);\n useLayoutEffect(() => {\n if (!enabled || !node) {\n setMeasured(null);\n return undefined;\n }\n const apply = (px: number) => {\n if (px <= 0) return;\n const next = Math.max(FLUID_MIN_WIDTH, Math.floor(px));\n setMeasured((prev) => (prev === next ? prev : next));\n };\n apply(node.clientWidth);\n if (typeof ResizeObserver === 'undefined') return undefined;\n const observer = new ResizeObserver((entries) => {\n const entry = entries[entries.length - 1];\n if (entry) apply(entry.contentRect.width);\n });\n observer.observe(node);\n return () => observer.disconnect();\n }, [node, enabled]);\n return [setNode, enabled ? measured : null] as const;\n};\n\nexport interface LineBarChartProps extends FrameShared {\n type?: 'line' | 'bar';\n categories: string[];\n series: ChartSeries[];\n // Stack bar series (Bar zero style).\n stacked?: boolean;\n axisLabels?: boolean;\n xTitle?: string;\n yTitle?: string;\n legend?: boolean;\n // Chart width in px (the svg still shrinks with its container through the viewBox). 'auto' measures the container with a ResizeObserver and draws at the real pixel width, so the axis text keeps its token size at any width. `width` is the fallback until measured: 'auto' uses 600.\n width?: number | 'auto';\n height?: number;\n // First column header of the data table alternative. Defaults to the localized \"Category\".\n categoryLabel?: string;\n // Pointer tooltip with the values of the category under the pointer. Stays inside the chart, Escape hides it. The data table remains the assistive tech alternative.\n tooltip?: boolean;\n // Value label above each vertical bar (above the total on stacked bars).\n showValues?: boolean;\n // Wraps long category labels onto several lines instead of letting them overlap. The plot gives up the room the extra lines need.\n wrapLabels?: boolean;\n // Widest a wrapped label may get, in chart units. Defaults to the width of one category band.\n labelMaxWidth?: number;\n // Line limit of a wrapped label. The last line ends with an ellipsis when text is cut. Default 3.\n labelMaxLines?: number;\n // Values computed per category, for example a conversion rate. Each one is a row in the tooltip and a column in the data table.\n derived?: ChartDerived | ChartDerived[];\n}\n\n// Hover tooltip of a LineBarChart. It measures itself and clamps into the chart box so it never overflows.\nconst ChartTooltip = ({ title, rows, anchor, scale, containerRef }: { title: string; rows: { id: string; label: string; value: string; tone?: ChartTone }[]; anchor: number; scale: number; containerRef: RefObject }) => {\n const ref = useRef(null);\n const [left, setLeft] = useState(0);\n useLayoutEffect(() => {\n const box = containerRef.current?.clientWidth ?? 0;\n const tip = ref.current?.offsetWidth ?? 0;\n const px = anchor * scale;\n const gap = 8;\n const preferred = px + gap + tip > box ? px - gap - tip : px + gap;\n setLeft(Math.max(0, Math.min(preferred, Math.max(0, box - tip))));\n }, [anchor, scale, rows.length, title, containerRef]);\n return (\n \n {title}\n {rows.map((row) => (\n \n {row.tone ? : null}\n {row.label}\n {row.value}\n \n ))}\n \n );\n};\n\nconst LineBarChart = forwardRef(\n (\n { type = 'bar', categories, series, stacked = false, axisLabels = true, xTitle, yTitle, legend = false, legendPosition = 'bottom', width: widthProp = 600, height = 240, categoryLabel, tooltip = false, showValues: showValuesProp, wrapLabels = false, labelMaxWidth, labelMaxLines = 3, derived, ...frame },\n ref,\n ) => {\n const l = useLabels();\n const zero = usePreset() === 'zero';\n // Zero: 11px axis text in the subtle colour, value labels above the bars, bars rounded on top.\n const axisText = zero ? 'typography-kpi-label fill-current text-text-subtle' : 'typography-text-extra-small fill-current text-muted-foreground';\n const valueText = zero ? 'typography-kpi-label-strong fill-current text-text-default' : 'typography-text-extra-small fill-current text-muted-foreground';\n const format = useNumberFormat();\n const fluid = widthProp === 'auto';\n const wrapRef = useRef(null);\n const [measureRef, measuredWidth] = useContainerWidth(fluid);\n const setWrap = useCallback(\n (node: HTMLDivElement | null) => {\n wrapRef.current = node;\n measureRef(node);\n },\n [measureRef],\n );\n const width = fluid ? (measuredWidth ?? 600) : widthProp;\n const showValues = showValuesProp ?? (zero && type === 'bar');\n const stackedBars = stacked && type === 'bar';\n const totals = categories.map((_, i) => series.reduce((s, x) => s + (x.values[i] ?? 0), 0));\n const rawMax = stackedBars ? Math.max(0, ...totals) : Math.max(0, ...series.flatMap((s) => s.values));\n const max = niceMax(rawMax);\n const ticks = [0, 1, 2, 3, 4].map((t) => (max / 4) * t);\n // The y-axis gutter grows with the widest tick label (8px gap to the plot, 8px to the edge), never below the 40px default.\n const widestTick = axisLabels ? Math.max(...ticks.map((t) => format(t).length)) * AXIS_CHAR_WIDTH : 0;\n const gutter = Math.max(40, Math.ceil(widestTick) + 16);\n const left = axisLabels ? (yTitle ? gutter + 16 : gutter) : 8;\n // Room above the tallest bar for the value labels.\n const top = showValues && type === 'bar' ? 20 : 8;\n const right = 8;\n const plotW = width - left - right;\n const band = plotW / Math.max(1, categories.length);\n const labelLines = axisLabels\n ? categories.map((c) => (wrapLabels ? wrapAxisLabel(c, Math.floor(((labelMaxWidth ?? band) - 4) / AXIS_CHAR_WIDTH), Math.max(1, labelMaxLines)) : [c]))\n : [];\n const extraLabelRows = Math.max(0, ...labelLines.map((lines) => lines.length - 1));\n const bottom = (axisLabels ? (xTitle ? 44 : 24) : 8) + extraLabelRows * AXIS_LINE_HEIGHT;\n const plotH = height - top - bottom;\n const y = (v: number) => top + plotH - (v / max) * plotH;\n const x = (i: number) => left + band * i + band / 2;\n const barGroupW = band * 0.6;\n\n const toneOf = (s: ChartSeries, i: number): ChartTone => s.tone ?? toneAt(i);\n const [active, setActive] = useState(null);\n const [scale, setScale] = useState(1);\n useEffect(() => {\n if (active === null) return undefined;\n const onKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') setActive(null);\n };\n document.addEventListener('keydown', onKey);\n return () => document.removeEventListener('keydown', onKey);\n }, [active]);\n const show = (i: number) => {\n const box = wrapRef.current?.clientWidth;\n setScale(box ? Math.min(1, box / width) : 1);\n setActive(i);\n };\n const derivedList = derived ? (Array.isArray(derived) ? derived : [derived]) : [];\n const datumAt = (i: number): ChartDatum => ({\n index: i,\n category: categories[i],\n values: Object.fromEntries(series.map((s) => [s.id, s.values[i] ?? 0])),\n total: totals[i],\n });\n const derivedAt = (i: number) =>\n derivedList.map((d) => {\n const v = d.compute(datumAt(i));\n return { id: `derived-${d.key}`, label: d.label, value: v == null || Number.isNaN(v) ? '\\u2013' : (d.format ?? format)(v) };\n });\n const table: ChartTable = {\n columns: [categoryLabel ?? l.chartCategory, ...series.map((s) => s.label), ...derivedList.map((d) => d.label)],\n rows: categories.map((c, i) => [c, ...series.map((s) => format(s.values[i] ?? 0)), ...derivedAt(i).map((d) => d.value)]),\n };\n\n return (\n ({ id: s.id, label: s.label, tone: toneOf(s, i) })) : undefined}\n legendPosition={legendPosition}\n {...frame}\n >\n
    svg]:block', fluid && 'w-full min-w-0 max-w-full overflow-hidden [&>svg]:block')} onPointerLeave={tooltip ? () => setActive(null) : undefined}>\n \n \n {ticks.map((t) => (\n \n ))}\n \n {axisLabels ? (\n \n {ticks.map((t) => (\n \n {format(t)}\n \n ))}\n {categories.map((c, i) => (\n \n {labelLines[i].map((line, li) => (\n \n {line}\n \n ))}\n \n ))}\n {xTitle ? (\n \n {xTitle}\n \n ) : null}\n {yTitle ? (\n \n {yTitle}\n \n ) : null}\n \n ) : null}\n {type === 'bar'\n ? categories.map((c, i) => {\n let acc = 0;\n return (\n \n {series.map((s, si) => {\n const v = s.values[i] ?? 0;\n const w = stackedBars ? barGroupW : barGroupW / series.length - 2;\n const bx = stackedBars ? x(i) - w / 2 : x(i) - barGroupW / 2 + si * (barGroupW / series.length) + 1;\n const by = stackedBars ? y(acc + v) : y(v);\n const bh = stackedBars ? y(acc) - y(acc + v) : y(0) - y(v);\n if (stackedBars) acc += v;\n const pointColor = s.pointColors?.[i];\n const pointTone = s.pointTones?.[i];\n const lastSegment = !stackedBars || series.findLastIndex((x2) => (x2.values[i] ?? 0) > 0) === si;\n const barProps = {\n 'data-bar': '',\n className: cn('fill-current', toneText[pointTone ?? toneOf(s, si)]),\n style: pointColor ? { fill: pointColor } : undefined,\n };\n return (\n \n {zero ? (\n \n ) : (\n \n )}\n {showValues && !stackedBars ? (\n \n {format(v)}\n \n ) : null}\n \n );\n })}\n {showValues && stackedBars ? (\n \n {format(totals[i])}\n \n ) : null}\n \n );\n })\n : series.map((s, si) => (\n \n `${x(i)},${y(s.values[i] ?? 0)}`).join(' ')}\n />\n {categories.map((_, i) => (\n \n ))}\n \n ))}\n {tooltip\n ? categories.map((c, i) => (\n show(i)}\n onPointerMove={() => active !== i && show(i)}\n />\n ))\n : null}\n \n {tooltip && active !== null ? (\n ({ id: s.id, label: s.label, value: format(s.values[active] ?? 0), tone: toneOf(s, si) as ChartTone | undefined })), ...derivedAt(active)]}\n />\n ) : null}\n
    \n \n );\n },\n);\nLineBarChart.displayName = 'LineBarChart';\n\n// Pie chart\n\nexport interface PieSlice {\n id: string;\n label: string;\n value: number;\n tone?: ChartTone;\n // Custom colour (stage or project data): a CSS colour such as `var(--colors-data-stage-1)` or a `bg-*` token class. Wins over `tone`.\n color?: string;\n}\n\nexport interface PieChartProps extends FrameShared {\n slices: PieSlice[];\n // 0 renders a pie, 0.5 a donut (Figma default). Default 0.5.\n hole?: number;\n centerLabel?: ReactNode;\n legend?: boolean;\n // Figma sizes xxs 120, xs 160, sm 200, md 240, lg 280 (px), or a pixel number. Default sm.\n size?: ChartSize | number;\n}\n\nexport type ChartSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';\n\nconst chartSizes: Record = { xxs: 120, xs: 160, sm: 200, md: 240, lg: 280 };\n\n// Fill of an svg shape from a custom colour: a `bg-*` token class becomes its `text-*` twin (fill-current), anything else a CSS colour.\nconst svgColor = (color: string | undefined) =>\n color ? (color.startsWith('bg-') ? { className: `text-${color.slice(3)}` } : { style: { color } }) : undefined;\n\n// Background of an html shape from a custom colour.\nconst bgColor = (color: string | undefined) =>\n color ? (color.startsWith('bg-') ? { className: color } : { style: { backgroundColor: color } }) : undefined;\n\nconst polar = (cx: number, cy: number, r: number, angle: number) => [cx + r * Math.cos(angle - Math.PI / 2), cy + r * Math.sin(angle - Math.PI / 2)];\n\nconst PieChart = forwardRef(\n ({ slices, hole = 0.5, centerLabel, legend = true, legendPosition = 'right', size: sizeProp = 'sm', ...frame }, ref) => {\n const l = useLabels();\n const format = useNumberFormat();\n const size = typeof sizeProp === 'number' ? sizeProp : chartSizes[sizeProp];\n const total = slices.reduce((s, x) => s + Math.max(0, x.value), 0);\n const c = size / 2;\n const r = c - 2;\n const ri = r * Math.min(0.9, Math.max(0, hole));\n let start = 0;\n const paths = slices.map((s, i) => {\n const frac = total > 0 ? Math.max(0, s.value) / total : 0;\n const a0 = start;\n const a1 = start + frac * Math.PI * 2;\n start = a1;\n const tone = s.tone ?? toneAt(i);\n if (frac >= 0.9999) {\n return (\n \n \n {ri > 0 ? : null}\n \n );\n }\n const large = a1 - a0 > Math.PI ? 1 : 0;\n const [x0, y0] = polar(c, c, r, a0);\n const [x1, y1] = polar(c, c, r, a1);\n const [xi1, yi1] = polar(c, c, ri, a1);\n const [xi0, yi0] = polar(c, c, ri, a0);\n const d =\n ri > 0\n ? `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${ri} ${ri} 0 ${large} 0 ${xi0} ${yi0} Z`\n : `M ${c} ${c} L ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} Z`;\n return ;\n });\n const table: ChartTable = {\n columns: [l.chartSlice, l.chartValue, l.chartShare],\n rows: slices.map((s) => [s.label, format(s.value), total > 0 ? `${format((s.value / total) * 100)} %` : '0 %']),\n };\n return (\n ({ id: s.id, label: `${s.label} ${total > 0 ? Math.round((s.value / total) * 100) : 0} %`, tone: s.tone ?? toneAt(i), color: s.color })) : undefined}\n legendPosition={legendPosition}\n {...frame}\n >\n
    \n \n {paths}\n \n {centerLabel ? (\n {centerLabel}\n ) : null}\n
    \n \n );\n },\n);\nPieChart.displayName = 'PieChart';\n\n// Radar chart\n\nexport interface RadarChartProps extends FrameShared {\n axes: string[];\n series: ChartSeries[];\n max?: number;\n rings?: number;\n legend?: boolean;\n size?: number;\n}\n\nconst RadarChart = forwardRef(\n ({ axes, series, max, rings = 5, legend = true, legendPosition = 'bottom', size = 372, ...frame }, ref) => {\n const l = useLabels();\n const format = useNumberFormat();\n const c = size / 2;\n const pad = 48;\n const r = c - pad;\n const top = niceMax(max ?? Math.max(0, ...series.flatMap((s) => s.values)));\n const n = Math.max(3, axes.length);\n const angle = (i: number) => (i / n) * Math.PI * 2;\n const pt = (i: number, v: number) => polar(c, c, (v / top) * r, angle(i));\n const ringPoints = (k: number) => axes.map((_, i) => pt(i, (top / rings) * k).join(',')).join(' ');\n const table: ChartTable = {\n columns: [l.chartAxis, ...series.map((s) => s.label)],\n rows: axes.map((a, i) => [a, ...series.map((s) => format(s.values[i] ?? 0))]),\n };\n return (\n ({ id: s.id, label: s.label, tone: s.tone ?? toneAt(i) })) : undefined}\n legendPosition={legendPosition}\n {...frame}\n >\n \n \n {Array.from({ length: rings }, (_, k) => (\n \n ))}\n {axes.map((a, i) => {\n const [x, y] = pt(i, top);\n return ;\n })}\n \n {series.map((s, si) => (\n \n pt(i, s.values[i] ?? 0).join(',')).join(' ')}\n fillOpacity={0.2}\n className={cn('fill-current', toneStroke[s.tone ?? toneAt(si)])}\n strokeWidth={2}\n strokeLinejoin=\"round\"\n />\n \n ))}\n \n {axes.map((a, i) => {\n const [x, y] = polar(c, c, r + 16, angle(i));\n return (\n \n {a}\n \n );\n })}\n \n \n \n );\n },\n);\nRadarChart.displayName = 'RadarChart';\n\n// Activity gauge\n\nexport interface ActivityGaugeSeries {\n id: string;\n label: string;\n value: number;\n tone?: ChartTone;\n}\n\nexport interface ActivityGaugeProps extends Omit, 'children'> {\n 'aria-label': string;\n // One value as shorthand for a single ring. Ignored when `series` is set.\n value?: number;\n // Up to three concentric rings, outermost first.\n series?: ActivityGaugeSeries[];\n max?: number;\n tone?: ChartTone;\n // Caption above the center value, e.g. \"Active users\".\n label?: ReactNode;\n // Center text. Defaults to the first ring's value.\n valueText?: ReactNode;\n // Figma sizes xs 160, sm 200, md 240, lg 280 (px), or a pixel number. Default xs.\n size?: Exclude | number;\n legend?: 'right' | 'bottom' | false;\n}\n\nconst ActivityGauge = forwardRef(\n ({ className, 'aria-label': ariaLabel, value = 0, series, max = 100, tone = 'brand', label, valueText, size: sizeProp = 'xs', legend = false, ...props }, ref) => {\n const l = useLabels();\n const format = useNumberFormat();\n const size = typeof sizeProp === 'number' ? sizeProp : chartSizes[sizeProp];\n const rings: ActivityGaugeSeries[] = series ?? [{ id: 'value', label: ariaLabel, value, tone }];\n const stroke = size / 16;\n const gap = size / 60;\n const center = size / 2;\n const clampOf = (v: number) => Math.min(Math.max(v, 0), max);\n const single = rings.length === 1;\n const lead = clampOf(rings[0]?.value ?? 0);\n const big = size >= 240;\n const meterProps = single\n ? { role: 'meter', 'aria-valuemin': 0, 'aria-valuemax': max, 'aria-valuenow': lead, 'aria-valuetext': l.valueOfMax(format(lead), format(max)) }\n : { role: 'group' };\n return (\n
    \n
    \n \n {rings.slice(0, 3).map((ring, i) => {\n const r = center - stroke / 2 - i * (stroke + gap);\n const pct = max > 0 ? (clampOf(ring.value) / max) * 100 : 0;\n return (\n \n \n {pct > 0 ? (\n \n ) : null}\n \n );\n })}\n \n
    \n {label ? {label} : null}\n {valueText ?? format(lead)}\n
    \n {single ? null : (\n
    \n {rings.map((ring) => (\n
    \n ))}\n
    \n )}\n
    \n {legend ? ({ id: r.id, label: r.label, tone: r.tone ?? (single ? tone : toneAt(i)) }))} /> : null}\n
    \n );\n },\n);\nActivityGauge.displayName = 'ActivityGauge';\n\n// Sparkline\n\nexport interface SparklineProps extends Omit, 'children'> {\n 'aria-label': string;\n values: number[];\n tone?: ChartTone;\n width?: number;\n height?: number;\n}\n\nconst Sparkline = forwardRef(({ className, values, tone = 'brand', width = 56, height = 18, ...props }, ref) => {\n const min = Math.min(...values);\n const maxV = Math.max(...values);\n const span = maxV - min || 1;\n const pad = 2;\n const pts = values.map((v, i) => [pad + (i / Math.max(1, values.length - 1)) * (width - pad * 2), pad + (1 - (v - min) / span) * (height - pad * 2)]);\n const last = pts[pts.length - 1];\n return (\n \n \n {pts.length > 1 ? p.join(',')).join(' ')} /> : null}\n {last ? : null}\n \n \n );\n});\nSparkline.displayName = 'Sparkline';\n\n// Histogram\n\nexport interface HistogramBin {\n label?: string;\n value: number;\n}\n\nexport interface HistogramProps extends FrameShared {\n bins: HistogramBin[];\n // Inclusive bin index range drawn in the brand tone, the rest is neutral.\n highlight?: [number, number];\n // Axis labels under every n-th bin that has a label.\n axisLabels?: boolean;\n width?: number;\n height?: number;\n}\n\nconst Histogram = forwardRef(({ bins, highlight, axisLabels = true, width = 320, height = 144, ...frame }, ref) => {\n const l = useLabels();\n const format = useNumberFormat();\n const bottom = axisLabels ? 20 : 0;\n const plotH = height - bottom;\n const maxV = Math.max(1, ...bins.map((b) => b.value));\n const gap = 4;\n const bw = (width - gap * (bins.length - 1)) / Math.max(1, bins.length);\n const table: ChartTable = { columns: [l.chartBin, l.chartCount], rows: bins.map((b, i) => [b.label ?? String(i + 1), format(b.value)]) };\n return (\n \n \n {bins.map((b, i) => {\n const on = highlight ? i >= highlight[0] && i <= highlight[1] : false;\n const h = (b.value / maxV) * plotH;\n return ;\n })}\n {axisLabels ? (\n \n {bins.map((b, i) =>\n b.label ? (\n \n {b.label}\n \n ) : null,\n )}\n \n ) : null}\n \n \n );\n});\nHistogram.displayName = 'Histogram';\n\n// Horizontal bar list\n\nexport interface HBarItem {\n id: string;\n label: string;\n value: number;\n // Text shown at the right, e.g. \"3 proj.\". Defaults to the value.\n valueLabel?: ReactNode;\n tone?: ChartTone;\n // Custom colour (stage or project data): a CSS colour or a `bg-*` token class. Wins over `tone`. Ignored when the row has `segments`.\n color?: string;\n // Splits the bar into stacked parts (for example open, in progress, done). The row total is the sum of the parts and replaces `value`. A segment id shares its tone and legend entry across rows.\n segments?: HBarSegment[];\n}\n\nexport interface HBarSegment {\n id: string;\n label: string;\n value: number;\n tone?: ChartTone;\n // Custom colour: a CSS colour or a `bg-*` token class. Wins over `tone`.\n color?: string;\n}\n\nexport interface HBarListProps extends Omit, 'children'> {\n 'aria-label': string;\n items: HBarItem[];\n // Upper bound for the bars. Defaults to the largest value.\n max?: number;\n // Stacked puts label and value above the bar instead of beside it.\n layout?: 'inline' | 'stacked';\n // Legend of the segment ids used by `items[].segments`. Default shows it whenever a row has segments.\n legend?: boolean;\n}\n\nconst rowTotal = (item: HBarItem) => (item.segments ? item.segments.reduce((sum, seg) => sum + Math.max(0, seg.value), 0) : item.value);\n\nconst HBarList = forwardRef(({ className, items, max, layout = 'inline', legend, ...props }, ref) => {\n const format = useNumberFormat();\n const top = max ?? Math.max(1, ...items.map(rowTotal));\n const segmentLegend: ChartLegendItem[] = [];\n items.forEach((item) =>\n item.segments?.forEach((seg, si) => {\n if (!segmentLegend.some((entry) => entry.id === seg.id)) segmentLegend.push({ id: seg.id, label: seg.label, tone: seg.tone ?? toneAt(si), color: seg.color });\n }),\n );\n const showLegend = (legend ?? true) && segmentLegend.length > 0;\n const list = (\n
      \n {items.map((item) => {\n const total = rowTotal(item);\n // `flex-1` sets flex-basis 0 on the main axis. In the stacked column that is the height axis, which overrides `h-2` and collapses the bar to 0px, so the stacked bar takes the full width and keeps its height instead.\n const barSize = layout === 'inline' ? 'flex-1' : 'w-full shrink-0';\n const pct = Math.min(100, Math.max(0, (total / top) * 100));\n const bar = item.segments ? (\n <>\n \n {item.segments.map((seg, si) => (\n \n ))}\n \n {item.segments.map((seg) => `${seg.label}: ${format(seg.value)}`).join(', ')}\n \n ) : (\n \n \n \n );\n return (\n
    • \n {layout === 'inline' ? (\n <>\n {item.label}\n {bar}\n {item.valueLabel ?? format(total)}\n \n ) : (\n <>\n \n {item.label}\n {item.valueLabel ?? format(total)}\n \n {bar}\n \n )}\n
      • \n );\n })}\n
    \n );\n if (!showLegend) return list;\n return (\n
    \n {list}\n \n
    \n );\n});\nHBarList.displayName = 'HBarList';\n\n// Treemap\n\nexport interface TreemapItem {\n id: string;\n label: string;\n value: number;\n tone?: ChartTone;\n // Custom colour (stage or project data): a CSS colour or a `bg-*` token class. Wins over `tone`.\n color?: string;\n}\n\ninterface Rect {\n x: number;\n y: number;\n w: number;\n h: number;\n}\n\nconst squarify = (items: { id: string; area: number }[], box: Rect): Record => {\n const out: Record = {};\n let rest = [...items].sort((a, b) => b.area - a.area);\n let { x, y, w, h } = box;\n const worst = (row: number[], side: number) => {\n const s = row.reduce((a, b) => a + b, 0);\n if (s === 0) return Infinity;\n const mx = Math.max(...row);\n const mn = Math.min(...row);\n return Math.max((side * side * mx) / (s * s), (s * s) / (side * side * mn));\n };\n while (rest.length > 0) {\n const side = Math.min(w, h);\n const row: typeof rest = [];\n let i = 0;\n while (i < rest.length) {\n const candidate = [...row, rest[i]];\n if (row.length === 0 || worst(candidate.map((c) => c.area), side) <= worst(row.map((c) => c.area), side)) {\n row.push(rest[i]);\n i += 1;\n } else break;\n }\n const sum = row.reduce((a, b) => a + b.area, 0);\n if (w >= h) {\n const rw = sum / h;\n let cy = y;\n for (const r of row) {\n const rh = r.area / rw;\n out[r.id] = { x, y: cy, w: rw, h: rh };\n cy += rh;\n }\n x += rw;\n w -= rw;\n } else {\n const rh = sum / w;\n let cx = x;\n for (const r of row) {\n const rw = r.area / rh;\n out[r.id] = { x: cx, y, w: rw, h: rh };\n cx += rw;\n }\n y += rh;\n h -= rh;\n }\n rest = rest.slice(row.length);\n }\n return out;\n};\n\nexport interface TreemapProps extends FrameShared {\n items: TreemapItem[];\n // Maximum width in px, or 'auto' to fill the container (the cells are percent based, so the layout follows the container at any width). Default 560.\n width?: number | 'auto';\n height?: number;\n // Cells narrower or lower than this share of the box (percent) hide their label.\n minLabelPercent?: number;\n}\n\nconst Treemap = forwardRef(({ items, width = 560, height = 220, minLabelPercent = 10, ...frame }, ref) => {\n const l = useLabels();\n const format = useNumberFormat();\n const total = items.reduce((s, i) => s + Math.max(0, i.value), 0);\n const positive = items.filter((i) => i.value > 0);\n const rects = total > 0 ? squarify(positive.map((i) => ({ id: i.id, area: (i.value / total) * 100 * 100 })), { x: 0, y: 0, w: 100, h: 100 }) : {};\n const table: ChartTable = { columns: [l.chartItem, l.chartValue], rows: items.map((i) => [i.label, format(i.value)]) };\n return (\n \n
    \n {positive.map((item, idx) => {\n const r = rects[item.id];\n if (!r) return null;\n const showLabel = r.w >= minLabelPercent && r.h >= minLabelPercent;\n return (\n \n {showLabel ? (\n <>\n {item.label}\n {format(item.value)}\n \n ) : null}\n
    \n );\n })}\n
    \n \n );\n});\nTreemap.displayName = 'Treemap';\n\nexport { ActivityGauge, ChartFrame, ChartLegend, HBarList, Histogram, LineBarChart, PieChart, RadarChart, Sparkline, Treemap };\n", "type": "registry:ui" } ], "type": "registry:ui" }