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:T1aeb,import type { ComponentProps, ReactNode } from "react"; import { Card } from "@/components/ui/card"; import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { NumberValue, type NumberValueProps } from "../number-value/number-value"; import { TrendChip, type TrendChipProps } from "../trend-chip/trend-chip"; import { kpiChartSize } from "./kpi-chart"; export { KpiChart, kpiChartSize, type KpiChartProps, type KpiPoint } from "./kpi-chart"; /** Card shell. Compose KpiHeader, KpiMain, KpiProgress, KpiChart and KpiFooter inside. */ export function Kpi({ className, size = "default", ...props }: ComponentProps<"div"> & { size?: "default" | "sm" }) { return ( ); } export function KpiHeader({ className, ...props }: ComponentProps<"div">) { return (

); } export function KpiIcon({ className, ...props }: ComponentProps<"span">) { return ( ); } export function KpiLabel({ className, ...props }: ComponentProps<"div">) { return (

); } /** Pushes to the end of the header: a menu button, a link, a toggle. */ export function KpiActions({ className, ...props }: ComponentProps<"div">) { return (

); } /** Value row: KpiValue, KpiTrend, an inline KpiChart. Fixed 32px so every KPI lines up. */ export function KpiMain({ className, ...props }: ComponentProps<"div">) { return (

); } export type KpiValueProps = Omit & { /** `null` or `undefined` shows a muted dash: the reading is missing, not zero. */ value?: number | null; size?: NumberValueProps["size"]; children?: ReactNode; }; export function KpiValue({ value, children, size = "lg", ...format }: KpiValueProps) { if (children != null) { return ( {children} ); } if (value == null) { return ( {"—"} No data ); } return ( ); } /** The trend chip, sized for a KPI. Renders nothing when there is no change to report. */ export function KpiTrend({ value, ...props }: Omit & { value?: number | null }) { if (value == null) return null; return ; } /** Muted "from $41,120" comparison. */ export function KpiFrom({ value, label = "from", className, ...format }: Omit & { label?: ReactNode }) { return ( {label} ); } export function KpiProgress({ value, label, showValue = true, className, }: { /** 0 to 100. */ value: number; label?: ReactNode; showValue?: boolean; className?: string; }) { return (

{label != null ? {label} : null} {showValue ? : null}

); } export function KpiFooter({ className, ...props }: ComponentProps<"div">) { return (

); } /** A designed "nothing here yet" for a whole KPI value row. */ export function KpiEmpty({ className, children = "No data for this period", ...props }: ComponentProps<"div">) { return (

{children}

); } /** Same footprint as the matching Kpi: pass the same chart, progress, footer and size flags. */ export function KpiSkeleton({ chart = "none", progress = false, footer = false, icon = false, size = "default", className, }: { chart?: "none" | "inline" | "bottom"; progress?: boolean; footer?: boolean; icon?: boolean; size?: "default" | "sm"; className?: string; }) { return (

{icon ? : null}

{chart === "inline" ? : }

{progress ? (

) : null} {chart === "bottom" ? ( ) : null} {footer ?

: null} ); } 31:T1bfc,"use client"; import { useId, useMemo, type ComponentProps } from "react"; import { Area, Bar, BarChart, ComposedChart, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts"; import { ChartContainer, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"; import { cn } from "@/lib/utils"; import { toneVar } from "../chart-area/chart-shell"; import { formatNumberValue, type NumberValueFormatOptions } from "../number-value/format"; export type KpiPoint = { label: string; value: number | null }; export type KpiChartTone = "neutral" | "success" | "error"; export type KpiChartProps = { /** Points in order. A `null` value is a gap: it breaks the line and is drawn as a dashed bridge or a stub bar. */ data: KpiPoint[]; type?: "area" | "line" | "bar"; /** `inline` sits beside the value; `bottom` bleeds to the card edges. */ placement?: "inline" | "bottom"; /** Hover readout. */ tooltip?: boolean; /** Series name in the tooltip and the accessible summary. */ label?: string; tone?: KpiChartTone; valueFormat?: NumberValueFormatOptions; className?: string; }; const toneColor: Record = { neutral: toneVar("foreground"), success: toneVar("success"), error: toneVar("error"), }; /** Size is part of the contract: KpiSkeleton and KpiChart empty state use the same classes. */ export const kpiChartSize = { inline: "h-8 w-28 shrink-0", bottom: "h-16 w-full", } as const; const bleed = "-mx-(--card-spacing) w-auto last:-mb-(--card-spacing)"; export function KpiChart({ data: input, type = "area", placement = "bottom", tooltip = true, label = "Trend", tone = "neutral", valueFormat, className, }: KpiChartProps) { // Inline bars read as a barcode past a dozen points: keep the latest twelve. const data = useMemo(() => (type === "bar" && placement === "inline" ? input.slice(-12) : input), [input, type, placement]); const gradientId = useId().replace(/:/g, ""); const real = data.filter((p) => p.value != null); const rootClass = cn(kpiChartSize[placement], placement === "bottom" && bleed, className); const rows = useMemo(() => { const max = Math.max(...real.map((p) => p.value as number), 0); return data.map((p, i) => { const gapNeighbour = p.value != null && (data[i - 1]?.value === null || data[i + 1]?.value === null); return { label: p.label, value: p.value, // Dashed bridge across a gap: only the points either side of it. bridge: gapNeighbour ? p.value : undefined, // Placeholder bar where a bar chart has no reading. stub: p.value == null ? max * 0.07 : undefined, }; }); }, [data, real]); if (real.length === 0) { return (

{placement === "bottom" ? ( No data yet ) : null}

); } const first = real[0].value as number; const last = real[real.length - 1].value as number; const summary = `${label}, ${data.length} points from ${formatNumberValue(first, valueFormat)} to ${formatNumberValue(last, valueFormat)}${ real.length < data.length ? `, ${data.length - real.length} missing` : "" }`; const config: ChartConfig = { value: { label, color: toneColor[tone] } }; const margin = placement === "inline" ? { top: 4, right: 3, bottom: 4, left: 3 } : { top: 6, right: 0, bottom: 0, left: 0 }; const common = { data: rows, margin } satisfies Partial>; const axes = ( <> ); const tip = tooltip ? ( { const row = props.payload?.[0]?.payload as { label: string; value: number | null } | undefined; if (!props.active || !row) return null; if (row.value == null) { return (

{row.label} No reading

); } return ( )} hideIndicator formatter={(v) => {formatNumberValue(Number(v), valueFormat)}} /> ); }} /> ) : null; const lineProps = { type: "monotone" as const, stroke: "var(--color-value)", strokeWidth: 1.75, dot: false, activeDot: { r: 3.5, fill: "var(--color-value)", stroke: "var(--card)", strokeWidth: 2 }, isAnimationActive: "auto" as const, animationDuration: 240, animationEasing: "ease-out" as const, }; const bridge = ( ); return ( {type === "bar" ? ( {axes} {tip} ) : type === "line" ? ( {axes} {tip} {bridge} ) : ( {axes} {tip} {bridge} )} ); } 32:T447,"use client"; import { IconDots } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; export type KpiMenuItem = { label: string; onSelect?: () => void; disabled?: boolean }; /** The "more" button for KpiActions and WidgetActions: a ghost icon button opening a Kobra dropdown. */ export function KpiMenu({ items, label = "More actions", align = "end", }: { items: KpiMenuItem[]; label?: string; align?: "start" | "center" | "end"; }) { return ( }> {items.map((item) => ( {item.label} ))} ); } 33:Tca4,"use client"; import { useState, type ReactNode } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { formatNumberValue, type NumberValueFormat, type NumberValueFormatOptions } from "./format"; export { formatNumberValue, type NumberValueFormat, type NumberValueFormatOptions }; const numberValue = cva("inline-flex items-baseline gap-[0.25em] align-baseline tabular-nums", { variants: { size: { sm: "text-sm", default: "text-base", lg: "text-2xl leading-8 font-medium tracking-tight", xl: "text-4xl leading-10 font-medium tracking-tight", }, }, defaultVariants: { size: "default" }, }); export type NumberValueProps = NumberValueFormatOptions & VariantProps & { value: number; /** Flip changed digits in with the `--digit-*` tokens. Reduced motion swaps plainly. */ animate?: boolean; prefix?: ReactNode; suffix?: ReactNode; className?: string; }; type Snapshot = { text: string; prev: string }; export function NumberValue({ value, animate = false, prefix, suffix, size, className, ...formatOptions }: NumberValueProps) { const text = formatNumberValue(value, formatOptions); // Derive "previous text" during render, the React-approved way to compare against the last value. const [snap, setSnap] = useState({ text, prev: text }); if (snap.text !== text) setSnap({ text, prev: snap.text }); return ( {prefix != null ? ( {prefix} ) : null} {animate ? : {text}} {suffix != null ? ( {suffix} ) : null} ); } /** Characters are aligned from the right, so "999" to "1,000" flips every column that moved. */ function AnimatedText({ text, prev }: { text: string; prev: string }) { const chars = Array.from(text); const before = Array.from(prev); const changed = chars.map((char, i) => before[before.length - (chars.length - i)] !== char); const firstChanged = changed.indexOf(true); return ( <> {text} {chars.map((char, i) => { const from = chars.length - i; return ( {char === " " ? " " : char} ); })} ); } function staggerFor(step: number) { if (step <= 0) return undefined; return step === 1 ? "1" : "2"; } export default NumberValue; 34: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); } } 35:Tc6b,import type { ReactNode } from "react"; import { IconArrowDownRight, IconArrowUpRight, IconMinus } from "@tabler/icons-react"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; import { formatNumberValue, type NumberValueFormat } from "../number-value/format"; export type TrendDirection = "up" | "down" | "flat"; /** The sign of a number decides direction. Anything within `threshold` of zero is flat. */ export function trendDirection(value: number, threshold = 0): TrendDirection { if (!Number.isFinite(value) || Math.abs(value) <= threshold) return "flat"; return value > 0 ? "up" : "down"; } export type TrendChipProps = { /** The change. With `format: 'percent'` (the default) this is in percentage points: 12.4 renders +12.4%. */ value: number; format?: Exclude; currency?: string; locale?: string; maximumFractionDigits?: number; /** Changes at or below this size read as flat. */ threshold?: number; /** A fall is good news (churn, refunds, load time): swaps the hues, never the arrow. */ invert?: boolean; size?: "sm" | "default" | "lg"; /** Show the sign. Default true; the arrow is the second channel, not a replacement. */ signed?: boolean; prefix?: ReactNode; suffix?: ReactNode; /** Replace the arrow, or `false` to drop it. */ indicator?: ReactNode | false; className?: string; }; const variantFor = { good: "green", bad: "destructive", flat: "neutral", } as const; const word = { up: "Up", down: "Down", flat: "No change" } as const; export function TrendChip({ value, format = "percent", currency, locale, maximumFractionDigits = 1, threshold = 0, invert = false, size = "default", signed = true, prefix, suffix, indicator, className, }: TrendChipProps) { const direction = trendDirection(value, threshold); const tone = direction === "flat" ? "flat" : (direction === "up") !== invert ? "good" : "bad"; const magnitude = Math.abs(value); const text = formatNumberValue(format === "percent" ? magnitude / 100 : magnitude, { format, currency, locale, maximumFractionDigits, signDisplay: "never", }); const sign = !signed || direction === "flat" ? "" : direction === "up" ? "+" : "−"; const Icon = direction === "up" ? IconArrowUpRight : direction === "down" ? IconArrowDownRight : IconMinus; return ( {indicator === false ? null : (indicator ?? )} {word[direction]} {prefix != null ? {prefix} : null} {sign} {text} {suffix != null ? {suffix} : null} ); } export default TrendChip; 36:T3206,"use client"; import type { ReactNode } from "react"; import { IconBasket, IconReceiptRefund, IconShoppingBag, IconUsers, } from "@tabler/icons-react"; import { Kpi, KpiActions, KpiChart, KpiEmpty, KpiFooter, KpiFrom, KpiHeader, KpiIcon, KpiLabel, KpiMain, KpiProgress, KpiSkeleton, KpiTrend, KpiValue, } from "./kpi"; import { KpiMenu } from "./kpi-menu"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { emptySeries, kpis, revenueSeries, sessionsSeries, } from "../_fixtures-b"; function Section({ title, children }: { title: string; children: ReactNode }) { return (

{children}

); } const [revenue, orders, conversion, refunds] = kpis; const menu = [ { label: "View report" }, { label: "Export CSV" }, { label: "Remove", disabled: true }, ]; export function KpiDemo() { return (

Revenue Orders Conversion Refund rate

Orders Updated 4 minutes ago New customers Refunds, small

Quarterly revenue goal Image storage

Revenue

Orders

Refund rate

Revenue Orders Conversion Revenue, no tooltip

Sessions (k), area Sessions (k), line Sessions (k), bar Sessions, inline gap

Revenue Returns Revenue Orders Updated 4 minutes ago Goal

); } 37:T94b,import type { BlockMeta } from "../../../lib/block-meta"; export const kpiMeta: BlockMeta = { slug: "kpi", title: "KPI", description: "A metric card built from parts: label, value, trend chip, icon, progress, footer, actions and a sparkline inline or bleeding off the bottom. Gaps in the data stay visible; loading and empty are designed.", group: "charts", kobraDeps: ["badge", "button", "card", "chart", "dropdown-menu", "progress", "skeleton"], files: [ "blocks/charts/kpi/kpi.tsx", "blocks/charts/kpi/kpi-chart.tsx", "blocks/charts/kpi/kpi-menu.tsx", "blocks/charts/number-value/number-value.tsx", "blocks/charts/number-value/format.ts", "blocks/charts/trend-chip/trend-chip.tsx", ], props: [ { name: "Kpi size", type: "'default' | 'sm'", default: "'default'", description: "Card density." }, { name: "KpiValue value", type: "number | null", description: "Formatted by NumberValue (format, currency, unit, locale, animate). null shows a muted dash, not zero." }, { name: "KpiTrend value", type: "number | null", description: "Change in percentage points; the sign picks up, down or flat. Accepts every TrendChip prop." }, { name: "KpiFrom value", type: "number", description: "Muted 'from $41,120' comparison next to the value." }, { name: "KpiProgress value", type: "number", description: "0 to 100 progress bar with optional label." }, { name: "KpiChart data", type: "{ label: string; value: number | null }[]", description: "Points in order. null is a gap: dashed bridge on line and area, a stub bar on bar." }, { name: "KpiChart type", type: "'area' | 'line' | 'bar'", default: "'area'", description: "Mark." }, { name: "KpiChart placement", type: "'inline' | 'bottom'", default: "'bottom'", description: "Beside the value, or bleeding to the card edges." }, { name: "KpiChart tooltip", type: "boolean", default: "true", description: "Hover readout, including a 'No reading' state for gaps." }, { name: "KpiChart tone", type: "'neutral' | 'success' | 'error'", default: "'neutral'", description: "Status hue from tokens." }, { name: "KpiSkeleton chart | progress | footer | icon", type: "flags", description: "Pass the same flags as the Kpi it stands in for: the footprint matches exactly." }, ], tags: ["kpi", "metric", "stat", "dashboard", "sparkline"], 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":"KPI"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"KPI"}],["$","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":"A metric card built from parts: label, value, trend chip, icon, progress, footer, actions and a sparkline inline or bleeding off the bottom. Gaps in the data stay visible; loading and empty are designed."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"kpi","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/kpi/kpi.tsx","code":"$30"},{"path":"blocks/charts/kpi/kpi-chart.tsx","code":"$31"},{"path":"blocks/charts/kpi/kpi-menu.tsx","code":"$32"},{"path":"blocks/charts/number-value/number-value.tsx","code":"$33"},{"path":"blocks/charts/number-value/format.ts","code":"$34"},{"path":"blocks/charts/trend-chip/trend-chip.tsx","code":"$35"},{"path":"blocks/charts/kpi/demo.tsx","code":"$36"},{"path":"blocks/charts/kpi/meta.ts","code":"$37"}]}],"props":"$L38"}],"$L39"]}]