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/29m25k6c5-ipo.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/29m25k6c5-ipo.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/29m25k6c5-ipo.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/29m25k6c5-ipo.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:T17f2,"use client"; import { useMemo, type CSSProperties } from "react"; import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from "recharts"; import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig, } from "@/components/ui/chart"; import { cn } from "@/lib/utils"; import { CHART_TONE_ORDER, toneVar } from "../chart-area/chart-shell"; import { formatNumberValue, type NumberValueFormatOptions } from "../number-value/format"; export type RadarSeries = { key: string; label: string; /** Any CSS color token. Defaults to the Kobra chart palette. */ color?: string; /** Outline the polygon with a dashed stroke and no fill: the "last season" series in a comparison. */ dashed?: boolean; }; export type ChartRadarProps = { /** One row per axis: `{ axis: "Quality", current: 86, previous: 78 }`. */ data: Record[]; series: RadarSeries[]; /** Row key holding the axis name. */ axisKey?: string; /** `area` fills and outlines, `line` outlines only, `dots` plots points with no polygon. */ variant?: "area" | "line" | "dots"; /** Add dots on the vertices of `area` and `line`. */ dots?: boolean; /** Show the radius scale along the first spoke. */ radiusAxis?: boolean; gridType?: "polygon" | "circle"; domain?: [number, number]; legend?: boolean; valueFormat?: NumberValueFormatOptions; label?: string; className?: string; }; /** One shared order with every chart: ink first, then the chart ramp. */ const palette = (i: number) => toneVar(CHART_TONE_ORDER[i % CHART_TONE_ORDER.length]); const swatch = (color: string) => ({ "--swatch": color }) as CSSProperties; export function ChartRadar({ data, series, axisKey = "axis", variant = "area", dots = false, radiusAxis = false, gridType = "polygon", domain = [0, 100], legend = false, valueFormat, label = "Radar comparison", className, }: ChartRadarProps) { const config = useMemo( () => Object.fromEntries(series.map((s, i) => [s.key, { label: s.label, color: s.color ?? palette(i) }])), [series], ); if (data.length < 3 || series.length === 0) { return (

{data.length === 0 ? "No data" : "Needs at least three axes"}

); } const summary = series .map((s) => `${s.label}: ${data.map((row) => `${row[axisKey]} ${formatNumberValue(Number(row[s.key]), valueFormat)}`).join(", ")}`) .join(". "); return (

(

{config[String(name)]?.label ?? name} {formatNumberValue(Number(value), valueFormat)}

)} /> } /> (v === domain[1] ? "" : String(v))} stroke="var(--border)" /> {series.map((s) => { const color = `var(--color-${s.key})`; const outlineOnly = s.dashed || variant === "line"; return ( ); })} {legend ? (

{s.label}

) : null}

); } export default ChartRadar; 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:Tb04,"use client"; import type { ReactNode } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { ChartRadar } from "./chart-radar"; import { scorecard } 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 one = [{ key: "current", label: "This season" }]; const two = [ { key: "current", label: "This season" }, { key: "previous", label: "Last season" }, ]; const three = [ { key: "current", label: "This season" }, { key: "previous", label: "Last season", dashed: true }, { key: "peer", label: "Peer median" }, ]; export function ChartRadarDemo() { return ( ); } 33:T6a3,import type { BlockMeta } from "../../../lib/block-meta"; export const chartRadarMeta: BlockMeta = { slug: "chart-radar", title: "Radar Chart", description: "Radar with area, line or dots-only marks, multiple series, an optional radius axis and a dashed comparison series.", group: "charts", kobraDeps: ["chart"], files: ["blocks/charts/chart-radar/chart-radar.tsx", "blocks/charts/number-value/format.ts"], props: [ { name: "data", type: "Record[]", description: "One row per axis. At least three rows." }, { name: "series", type: "{ key: string; label: string; color?: string; dashed?: boolean }[]", description: "One entry per polygon. `dashed` draws an unfilled dashed outline for a comparison." }, { name: "axisKey", type: "string", default: "'axis'", description: "Row key holding the axis name." }, { name: "variant", type: "'area' | 'line' | 'dots'", default: "'area'", description: "Fill and outline, outline only, or points only." }, { name: "dots", type: "boolean", default: "false", description: "Dots on the vertices of area and line." }, { name: "radiusAxis", type: "boolean", default: "false", description: "Show the radius scale." }, { name: "gridType", type: "'polygon' | 'circle'", default: "'polygon'", description: "Grid shape." }, { name: "legend", type: "boolean", default: "false", description: "Show the series legend." }, { name: "domain", type: "[number, number]", default: "[0, 100]", description: "Radius scale." }, { name: "valueFormat", type: "NumberValueFormatOptions", description: "Intl options for tooltip values." }, ], tags: ["chart", "radar", "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":"Radar Chart"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Radar 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":"Radar with area, line or dots-only marks, multiple series, an optional radius axis and a dashed comparison series."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chart-radar","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/chart-radar/chart-radar.tsx","code":"$30"},{"path":"blocks/charts/number-value/format.ts","code":"$31"},{"path":"blocks/charts/chart-radar/demo.tsx","code":"$32"},{"path":"blocks/charts/chart-radar/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]