2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T1c1c,"use client"; import { useMemo, type CSSProperties, type ReactNode } from "react"; import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"; import { cva, type VariantProps } from "class-variance-authority"; import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"; import { cn } from "@/lib/utils"; import { formatNumberValue, type NumberValueFormatOptions } from "../number-value/format"; export type RadialDatum = { key: string; label: string; value: number; color?: string; }; const box = cva("relative mx-auto w-full", { variants: { size: { sm: "max-w-32", default: "max-w-48", lg: "max-w-64" }, }, defaultVariants: { size: "default" }, }); export type ChartRadialProps = VariantProps & { /** One ring per entry, outermost first. */ data: RadialDatum[]; /** Value that fills a ring. */ max?: number; /** `half` is a gauge: a 180 degree arc with the readout under it. */ shape?: "full" | "half"; /** Content in the middle (full) or under the arc (half). */ children?: ReactNode; /** List every ring with its value beneath the chart. */ legend?: boolean; valueFormat?: NumberValueFormatOptions; label?: string; className?: string; }; /** Ink steps, ordered so neighbouring rings never share a step. */ const RING_INK = [100, 52, 76, 36, 24]; const palette = (i: number) => { const pct = RING_INK[i % RING_INK.length]; return pct === 100 ? "var(--foreground)" : `color-mix(in oklch, var(--foreground) ${pct}%, var(--card))`; }; const swatch = (color: string) => ({ "--swatch": color }) as CSSProperties; export function ChartRadial({ data, max = 100, shape = "full", children, legend = false, valueFormat, label = "Progress", size, className, }: ChartRadialProps) { const half = shape === "half"; const rings = useMemo( () => data.map((d, i) => ({ ...d, value: Math.min(Math.max(d.value, 0), max), fill: d.color ?? palette(i) })), [data, max], ); // Recharts draws the first datum innermost; the API promises outermost first. const chartRings = useMemo(() => [...rings].reverse(), [rings]); const config = useMemo( () => Object.fromEntries(data.map((d, i) => [d.key, { label: d.label, color: d.color ?? palette(i) }])), [data], ); const readout = (v: unknown) => formatNumberValue(Number(v) / max, { format: "percent", maximumFractionDigits: 0, ...valueFormat }); if (data.length === 0) { return (

No data

); } const multi = rings.length > 1; const inner = half ? (multi ? "40%" : "74%") : multi ? "30%" : "76%"; return (

`${d.label} ${readout(d.value)}`).join(", ")}`} className={cn("aspect-square", half ? "absolute inset-x-0 top-0 w-full" : "size-full")} > (

{item.payload?.label} {readout(value)}

)} /> } /> {children ? (

{children}

) : null}

{legend ? (

{d.label} {readout(d.value)}

) : null}

); } export type RadialGaugeProps = Omit & { value: number; /** Caption under the number. */ caption?: ReactNode; /** Status hue from tokens. `neutral` uses the chart palette. */ tone?: "neutral" | "success" | "warning" | "error"; }; const toneColor = { neutral: undefined, success: "var(--success)", warning: "var(--warning)", error: "var(--error)", } as const; /** One value, one ring: a progress ring (`shape: full`) or a gauge (`shape: half`). */ export function RadialGauge({ value, caption, tone = "neutral", shape = "half", max = 100, valueFormat, label = "Value", ...rest }: RadialGaugeProps) { const text = formatNumberValue(Math.min(Math.max(value, 0), max) / max, { format: "percent", maximumFractionDigits: 0, ...valueFormat }); return (

{text} {caption && rest.size !== "sm" ? {caption} : null}

); } export default ChartRadial; 31:T846,// Pure Intl formatting, no React and no "use client": safe to call from server components. export type NumberValueFormat = "decimal" | "currency" | "percent" | "compact" | "unit"; export type NumberValueFormatOptions = { /** `percent` follows Intl: 0.25 renders as 25%. */ format?: NumberValueFormat; /** ISO 4217 code, used by `currency`. */ currency?: string; /** Intl sanctioned unit identifier (`kilobyte`, `percent`, `millisecond`), used by `unit`. */ unit?: string; unitDisplay?: "short" | "narrow" | "long"; /** `compact` with `currency` gives $120K. `format: "compact"` is the plain-number shorthand. */ notation?: "standard" | "compact"; signDisplay?: "auto" | "always" | "exceptZero" | "negative" | "never"; locale?: string; minimumFractionDigits?: number; maximumFractionDigits?: number; }; /** Pure formatter behind `NumberValue`, exported for tooltips, axis ticks and labels. */ export function formatNumberValue( value: number, { format = "decimal", currency = "USD", unit, unitDisplay = "short", notation, signDisplay, locale = "en-US", minimumFractionDigits, maximumFractionDigits, }: NumberValueFormatOptions = {}, ): string { const options: Intl.NumberFormatOptions = { signDisplay, minimumFractionDigits, maximumFractionDigits }; if (notation) { options.notation = notation; if (notation === "compact" && maximumFractionDigits === undefined) options.maximumFractionDigits = 1; } if (format === "currency") { options.style = "currency"; options.currency = currency; } else if (format === "percent") { options.style = "percent"; } else if (format === "compact") { options.notation = "compact"; if (maximumFractionDigits === undefined) options.maximumFractionDigits = 1; } else if (format === "unit" && unit) { options.style = "unit"; options.unit = unit; options.unitDisplay = unitDisplay; } try { return new Intl.NumberFormat(locale, options).format(value); } catch { // Bad currency/unit/locale input never breaks a dashboard. return String(value); } } 32:Tb55,"use client"; import type { ReactNode } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { ChartRadial, RadialGauge } from "./chart-radial"; import { goals } from "../_fixtures-b"; import { DemoCell, DemoGrid, DemoPage } from "../../_shared/variant-frame"; function Variant({ title, description, children, className }: { title: string; description?: string; children: ReactNode; className?: string }) { return ( {children} ); } const gauges = [ { label: "Uptime", value: 99, tone: "success" as const, caption: "30 days" }, { label: "Stock health", value: 62, tone: "warning" as const, caption: "SKUs in range", }, { label: "Return rate", value: 18, tone: "error" as const, caption: "of orders", }, { label: "Fill rate", value: 74, tone: "neutral" as const, caption: "this week", }, ]; export function ChartRadialDemo() { return ( Q4 goals

{gauges.map((g) => (

{g.label}

))}

); } 33:T5d4,import type { BlockMeta } from "../../../lib/block-meta"; export const chartRadialMeta: BlockMeta = { slug: "chart-radial", title: "Radial Chart", description: "Radial bars as a progress ring, a half-circle gauge, concentric rings with a legend, and a gauge grid, with a readout in the middle.", group: "charts", kobraDeps: ["chart"], files: ["blocks/charts/chart-radial/chart-radial.tsx", "blocks/charts/number-value/format.ts"], props: [ { name: "data", type: "{ key: string; label: string; value: number; color?: string }[]", description: "One ring per entry, outermost first." }, { name: "max", type: "number", default: "100", description: "Value that fills a ring." }, { name: "shape", type: "'full' | 'half'", default: "'full'", description: "Progress ring or gauge." }, { name: "legend", type: "boolean", default: "false", description: "List every ring under the chart." }, { name: "children", type: "ReactNode", description: "Readout in the middle (full) or under the arc (half)." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Maximum width." }, { name: "RadialGauge value", type: "number", description: "Single-value convenience with an automatic readout." }, { name: "RadialGauge tone", type: "'neutral' | 'success' | 'warning' | 'error'", default: "'neutral'", description: "Status hue from tokens." }, ], tags: ["chart", "radial", "gauge", "progress", "recharts"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#charts","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Charts"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Radial Chart"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Radial Chart"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Radial bars as a progress ring, a half-circle gauge, concentric rings with a legend, and a gauge grid, with a readout in the middle."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chart-radial","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/chart-radial/chart-radial.tsx","code":"$30"},{"path":"blocks/charts/number-value/format.ts","code":"$31"},{"path":"blocks/charts/chart-radial/demo.tsx","code":"$32"},{"path":"blocks/charts/chart-radial/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]