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/22eey7bx99yf1.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/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.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/22eey7bx99yf1.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/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.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/22eey7bx99yf1.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/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.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/22eey7bx99yf1.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/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T230d,"use client"; import { useMemo, useState, type CSSProperties, type ReactNode } from "react"; import { Pie, PieChart } 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 PieDatum = { key: string; label: string; value: number; /** Any CSS color token. Defaults to an ink ramp by rank (largest slice darkest in light, brightest in dark). */ color?: string; }; const chartSize = cva("relative mx-auto shrink-0", { variants: { size: { sm: "size-40", default: "size-56", lg: "size-72" }, }, defaultVariants: { size: "default" }, }); export type ChartPieProps = VariantProps & { data: PieDatum[]; /** `nested` draws `data` as the outer ring and `nestedData` as the inner one. */ variant?: "pie" | "donut" | "nested"; nestedData?: PieDatum[]; /** Donut only: a caption under an automatic total in the hole. */ totalLabel?: ReactNode; /** Donut only: any content in the hole. Wins over `totalLabel`. */ center?: ReactNode; /** List every slice with swatch, value and share beside or under the chart. */ breakdown?: boolean; /** Compact swatch-and-label legend under the chart. On by default; `breakdown` replaces it. */ legend?: boolean; /** Draw slices largest first (default). Turn off to keep the order you pass. */ sort?: boolean; valueFormat?: NumberValueFormatOptions; /** Accessible name for the chart. */ label?: string; className?: string; }; /** * Ink ramp by rank: the biggest slice is full ink, each next one steps toward the card. * Built from --foreground and --card so the order and the steps hold in light and dark. */ const RAMP = [100, 72, 52, 36, 24]; const rankColor = (rank: number) => { const pct = RAMP[Math.min(rank, RAMP.length - 1)]; return pct === 100 ? "var(--foreground)" : `color-mix(in oklch, var(--foreground) ${pct}%, var(--card))`; }; const swatch = (color: string) => ({ "--swatch": color }) as CSSProperties; export function ChartPie({ data: input, variant = "pie", nestedData, totalLabel, center, breakdown = false, legend = true, sort = true, valueFormat, label = "Share by category", size, className, }: ChartPieProps) { const [active, setActive] = useState(null); const data = useMemo(() => (sort ? [...input].sort((a, b) => b.value - a.value) : input), [input, sort]); const inner = useMemo(() => (sort ? [...(nestedData ?? [])].sort((a, b) => b.value - a.value) : (nestedData ?? [])), [nestedData, sort]); const total = data.reduce((sum, d) => sum + d.value, 0); const donut = variant === "donut"; const nested = variant === "nested" && inner.length > 0; const config = useMemo(() => { const entries: ChartConfig = {}; data.forEach((d, i) => { entries[d.key] = { label: d.label, color: d.color ?? rankColor(i) }; }); if (nested) inner.forEach((d, i) => (entries[d.key] = { label: d.label, color: d.color ?? rankColor(i) })); return entries; }, [data, inner, nested]); const slices = (rows: PieDatum[], offset: number) => rows.map((d, i) => ({ ...d, fill: d.color ?? rankColor(i + offset), fillOpacity: active && active !== d.key ? 0.35 : 1, })); if (total <= 0) { return (

No data

); } const ring = donut ? { inner: "62%", outer: "92%" } : nested ? { inner: "64%", outer: "92%" } : { inner: 0, outer: "92%" }; const readout = (v: unknown) => formatNumberValue(Number(v), valueFormat); return (

`${d.label} ${readout(d.value)}`).join(", ")}`} className="aspect-square size-full [&_.recharts-sector]:transition-[fill-opacity] [&_.recharts-sector]:duration-150 motion-reduce:[&_.recharts-sector]:transition-none" > (

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

)} /> } /> {nested ? ( setActive(inner[i]?.key ?? null)} onMouseLeave={() => setActive(null)} /> ) : null} setActive(data[i]?.key ?? null)} onMouseLeave={() => setActive(null)} /> {donut && (center || totalLabel) ? (

{center ?? (

{readout(total)} {totalLabel}

)}

) : null}

{breakdown ? (

setActive(d.key)} onMouseLeave={() => setActive(null)} onFocus={() => setActive(d.key)} onBlur={() => setActive(null)} data-active={active === d.key ? "" : undefined} className="flex items-center gap-2.5 rounded-md px-2 py-1.5 outline-none transition-colors duration-150 focus-visible:ring-3 focus-visible:ring-ring/50 data-active:bg-muted motion-reduce:transition-none" > {d.label} {readout(d.value)} {formatNumberValue(d.value / total, { format: "percent", maximumFractionDigits: 0 })}

) : legend ? (

{d.label}

) : null}

); } export default ChartPie; 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:Tcc4,"use client"; import type { ReactNode } from "react"; import { IconShoppingCart } from "@tabler/icons-react"; import { Card, CardContent } from "@/components/ui/card"; import { ChartPie } from "./chart-pie"; import { channelRevenue, regionRevenue } from "../_fixtures-b"; import { DemoCell, DemoGrid, DemoPage } from "../../_shared/variant-frame"; const usd = { format: "currency", currency: "USD", maximumFractionDigits: 0, } as const; function Variant({ title, description, children, className }: { title: string; description?: string; children: ReactNode; className?: string }) { return ( {children} ); } export function ChartPieDemo() { return ( 5 channels } /> ); } 33:T762,import type { BlockMeta } from "../../../lib/block-meta"; export const chartPieMeta: BlockMeta = { slug: "chart-pie", title: "Pie Chart", description: "Pie, donut, donut with a total or custom content in the hole, nested donut and a linked breakdown list, on the Kobra chart palette.", group: "charts", kobraDeps: ["chart"], files: ["blocks/charts/chart-pie/chart-pie.tsx", "blocks/charts/number-value/format.ts"], props: [ { name: "data", type: "{ key: string; label: string; value: number; color?: string }[]", description: "Slices in order. Colors default to an ink ramp by rank." }, { name: "variant", type: "'pie' | 'donut' | 'nested'", default: "'pie'", description: "Shape. `nested` needs `nestedData` for the inner ring." }, { name: "nestedData", type: "PieDatum[]", description: "Inner ring for the nested variant." }, { name: "totalLabel", type: "ReactNode", description: "Donut: caption under an automatic total in the hole." }, { name: "center", type: "ReactNode", description: "Donut: any content in the hole." }, { name: "breakdown", type: "boolean", default: "false", description: "List every slice with value and share, linked to hover and focus." }, { name: "legend", type: "boolean", default: "true", description: "Swatch-and-label legend under the chart. `breakdown` replaces it." }, { name: "sort", type: "boolean", default: "true", description: "Draw slices largest first so rank sets the ink step." }, { name: "valueFormat", type: "NumberValueFormatOptions", description: "Intl options for values in the tooltip, hole and breakdown." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Chart diameter." }, { name: "label", type: "string", description: "Accessible name; the values are appended." }, ], tags: ["chart", "pie", "donut", "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":"Pie Chart"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Pie 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":"Pie, donut, donut with a total or custom content in the hole, nested donut and a linked breakdown list, on the Kobra chart palette."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chart-pie","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/chart-pie/chart-pie.tsx","code":"$30"},{"path":"blocks/charts/number-value/format.ts","code":"$31"},{"path":"blocks/charts/chart-pie/demo.tsx","code":"$32"},{"path":"blocks/charts/chart-pie/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]