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:T1a10,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { Area, AreaChart, Bar, BarChart, Line, LineChart, XAxis, YAxis } from "recharts"; import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { toneVar, useChartMotion, type ChartTone } from "../chart-area/chart-shell"; const sparklineVariants = cva("block w-full min-w-0 shrink-0 text-xs", { variants: { /** Height. Width is the parent's: give the root a width class in a cell, or let it fill a card. */ size: { sm: "h-6", default: "h-8", lg: "h-12", }, }, defaultVariants: { size: "default" }, }); export type SparklineTone = "auto" | "foreground" | "neutral" | "success" | "error" | "warning" | "info"; const TONE: Record, ChartTone> = { foreground: "foreground", neutral: "chart-2", success: "success", error: "error", warning: "warning", info: "info", }; export type SparklinePoint = number | { value: number; label?: string }; export type SparklineProps = Omit, "children"> & VariantProps & { data: SparklinePoint[]; /** Shape of the mark. */ type?: "area" | "line" | "bar"; /** `auto` reads the series: success when it ends at or above where it started, error when below. */ tone?: SparklineTone; /** Show a tooltip on hover or focus. Off by default: a sparkline is a shape, not a chart. */ tooltip?: boolean; /** Formats the tooltip value. */ valueFormatter?: (value: number) => string; loading?: boolean; /** Accessible description, e.g. "Orders, last 12 days, trending up". */ label?: string; }; type Row = { i: number; value: number; label: string }; function toRows(data: SparklinePoint[]): Row[] { return data.map((p, i) => (typeof p === "number" ? { i, value: p, label: `${i + 1}` } : { i, value: p.value, label: p.label ?? `${i + 1}` })); } export function Sparkline({ data, type = "area", tone = "auto", size, tooltip = false, valueFormatter, loading = false, label, className, ...props }: SparklineProps) { const uid = React.useId().replace(/:/g, ""); const motion = useChartMotion(); const rows = React.useMemo(() => toRows(data), [data]); const resolved: ChartTone = tone === "auto" ? (rows.length > 1 && rows[rows.length - 1].value < rows[0].value ? "error" : "success") : TONE[tone]; const config = React.useMemo(() => ({ value: { label: "Value", color: toneVar(resolved) } }), [resolved]); const rootClass = cn(sparklineVariants({ size }), className); if (loading) { return (

); } if (rows.length < 2) { // Designed empty: a dashed baseline, so the cell still reads as "a trend goes here". return (

); } const stroke = "var(--color-value)"; const tip = tooltip ? ( String((payload?.[0]?.payload as Row | undefined)?.label ?? "")} formatter={(value) => {valueFormatter ? valueFormatter(Number(value)) : Number(value).toLocaleString()}} /> } /> ) : null; const margin = { top: 3, right: 2, bottom: 3, left: 2 }; // Fit the domain to the data, but never zoom a near-flat series into a wave: keep a span of at least a quarter of its level. const fit = ((): [number, number] => { const vals = rows.map((r) => r.value); const lo = Math.min(...vals); const hi = Math.max(...vals); const span = Math.max(hi - lo, 0.25 * Math.abs(hi)); const mid = (hi + lo) / 2; return [mid - span * 0.55, mid + span * 0.55]; })(); return ( {type === "bar" ? ( max * 1.05]} /> {tip} ) : type === "line" ? ( {tip} ) : ( {tip} )} ); } /** Value and sparkline side by side, for a table cell or a list row. */ export function SparklineCell({ className, ...props }: React.ComponentProps<"div">) { return

; } export function SparklineCellValue({ className, ...props }: React.ComponentProps<"span">) { return ; } 31:T3886,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { IconChartAreaLine } from "@tabler/icons-react"; import { Card, CardDescription, CardTitle } from "@/components/ui/card"; import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------ */ /* Series and color */ /* ------------------------------------------------------------------ */ /** * Colors come from the Kobra chart palette, ink, and the four status hues. Never raw values. * * House rule: the current or focus series is `foreground` (ink); a comparison series is `muted` * (gray, usually dashed); further categories walk the gray ramp. `success` and `error` appear only * where the color is the sign (an up or down trend, refunds); `info` and `warning` are for status, * never for telling categories apart. */ export type ChartTone = "foreground" | "muted" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "success" | "warning" | "error" | "info"; export type ChartSeries = { /** Data key. Letters, digits and dashes only: it becomes a CSS variable name. */ key: string; label: string; color?: ChartTone; /** Dashed stroke for lines, hatched swatch in the legend. */ dashed?: boolean; }; /** Mid grays first: they hold contrast on both the light and the dark card. */ export const CHART_TONE_ORDER: ChartTone[] = ["foreground", "chart-2", "chart-3", "chart-1", "chart-4"]; /** Resolves a tone to the CSS variable that carries it. */ export function toneVar(tone: ChartTone) { if (tone === "muted") return "var(--muted-foreground)"; return `var(--${tone})`; } export function seriesTone(series: ChartSeries, index: number): ChartTone { return series.color ?? CHART_TONE_ORDER[index % CHART_TONE_ORDER.length]; } export function buildChartConfig(series: ChartSeries[]): ChartConfig { return Object.fromEntries(series.map((s, i) => [s.key, { label: s.label, color: toneVar(seriesTone(s, i)) }])); } /** The CSS variable ChartContainer defines for a series key. */ export function seriesVar(key: string) { return `var(--color-${key})`; } /* ------------------------------------------------------------------ */ /* Formatting */ /* ------------------------------------------------------------------ */ export function formatCompact(value: number) { return new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(value); } export function formatCurrencyCompact(value: number) { return `$${formatCompact(value)}`; } export function formatCurrency(value: number) { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(value); } /* ------------------------------------------------------------------ */ /* Reduced motion */ /* ------------------------------------------------------------------ */ function subscribeMotion(onChange: () => void) { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } /** Recharts animates in JS, so Tailwind's motion-reduce cannot reach it. */ export function useReducedMotion() { return React.useSyncExternalStore( subscribeMotion, () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, () => false, ); } /** Entrance animation props for recharts series: short, ease-out, off under reduced motion. */ export function useChartMotion() { const reduced = useReducedMotion(); return { isAnimationActive: !reduced, animationDuration: 240, animationEasing: "ease-out" } as const; } /* ------------------------------------------------------------------ */ /* Quiet axes */ /* ------------------------------------------------------------------ */ export const quietXAxis = { tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 16, tick: { fontSize: 11 }, } as const; export const quietYAxis = { tickLine: false, axisLine: false, tickMargin: 4, width: 44, tick: { fontSize: 11 }, } as const; /** Horizontal rules only, low opacity. */ export const quietGrid = { vertical: false, stroke: "var(--border)", strokeOpacity: 0.6, } as const; /** Round gridline values (step 1, 2, 2.5 or 5 times a power of ten) covering min to max. */ export function niceTicks(min: number, max: number, count = 4): number[] { const span = max - min || Math.abs(max) || 1; const raw = span / count; const pow = 10 ** Math.floor(Math.log10(raw)); const n = raw / pow; const step = (n <= 1 ? 1 : n <= 2 ? 2 : n <= 2.5 ? 2.5 : n <= 5 ? 5 : 10) * pow; const start = Math.floor(min / step) * step; const end = Math.ceil(max / step) * step; const ticks: number[] = []; for (let v = start; v <= end + step / 1e6; v += step) ticks.push(Number(v.toFixed(6))); return ticks; } /** Largest value the plot reaches. Each group of keys is summed (stacked); a lone key is itself. */ export function dataMax(data: Record[], groups: string[][]) { let max = 0; for (const row of data) for (const g of groups) max = Math.max(max, g.reduce((n, k) => n + (typeof row[k] === "number" ? (row[k] as number) : 0), 0)); return max; } /** Ticks and a snapped domain from zero to the data max. */ export function zeroTicks(data: Record[], groups: string[][], count = 4) { const ticks = niceTicks(0, dataMax(data, groups), count); return { ticks, domain: [ticks[0], ticks[ticks.length - 1]] as [number, number] }; } /* ------------------------------------------------------------------ */ /* Tooltip */ /* ------------------------------------------------------------------ */ export type ChartTooltipOptions = Partial>; type TooltipFormatter = NonNullable; /** Row formatter that keeps the Kobra row layout (swatch, label, tabular value) around a custom value format. */ export function tooltipRowFormatter(format: (value: number, name: string) => React.ReactNode): TooltipFormatter { return function RowFormatter(value, name, item) { const color = (item as { color?: string } | undefined)?.color; return ( <> {name} {format(Number(value), String(name))} ); }; } /** `false` hides the tooltip; an object tunes ChartTooltipContent (indicator, hideLabel, formatter...). */ export function chartTooltipElement(tooltip: false | ChartTooltipOptions | undefined, cursor: React.ComponentProps["cursor"] = true) { if (tooltip === false) return null; return } />; } /* ------------------------------------------------------------------ */ /* Frame parts shared by every chart block */ /* ------------------------------------------------------------------ */ type DivProps = React.ComponentProps<"div">; const frameVariants = cva("min-w-0", { variants: { /** `card` is the Kobra card surface; `plain` drops it so a widget or page can own the surface. */ variant: { card: "", plain: "rounded-none bg-transparent py-0 ring-0 [--card-spacing:0px]", }, }, defaultVariants: { variant: "card" }, }); export type ChartFrameProps = React.ComponentProps & VariantProps; export function ChartFrame({ className, size, variant, ...props }: ChartFrameProps) { return ; } export function ChartHeader({ className, ...props }: DivProps) { return (

); } export function ChartHeading({ className, ...props }: DivProps) { return

; } export function ChartTitle({ className, ...props }: DivProps) { return ; } export function ChartDescription({ className, ...props }: DivProps) { return ; } /** Headline number. Children after the number (a delta chip, a unit) sit on its baseline. */ export function ChartValue({ className, ...props }: DivProps) { return (

); } export function ChartLegendList({ series, className, ...props }: { series: ChartSeries[] } & Omit, "children">) { return (

{s.label}

); } /* ------------------------------------------------------------------ */ /* Loading and empty */ /* ------------------------------------------------------------------ */ const SKELETON_BARS = [38, 52, 44, 66, 58, 78, 70, 86, 74, 92, 84, 100]; export function ChartSkeleton({ bare, shape = "bars", className, ...props }: DivProps & { bare?: boolean; shape?: "bars" | "area" }) { return (

{bare ? ( ) : shape === "area" ? (

) : (

{SKELETON_BARS.map((h, i) => ( ))}

)}

); } export function ChartEmpty({ title = "No data yet", description = "Numbers appear here once there is something to plot.", className, ...props }: Omit & { title?: React.ReactNode; description?: React.ReactNode }) { return ( {title} {description} ); } /* ------------------------------------------------------------------ */ /* Canvas: states + ChartContainer */ /* ------------------------------------------------------------------ */ export type ChartCanvasProps = { config: ChartConfig; /** Plot height in px. */ height?: number; loading?: boolean; /** Treated as empty when true. */ empty?: boolean; emptyTitle?: React.ReactNode; emptyDescription?: React.ReactNode; /** No horizontal card padding: the plot runs edge to edge (KPI bottoms, sparklines in cards). */ bleed?: boolean; /** Skeleton shape: bars (default) or an area silhouette. */ skeleton?: "bars" | "area"; /** Accessible name for the plot. */ label?: string; slot: string; children: React.ComponentProps["children"]; }; export function ChartCanvas({ config, height = 240, loading, empty, emptyTitle, emptyDescription, bleed, skeleton, label, slot, children, }: ChartCanvasProps) { const heightVar = { "--chart-h": `${height}px` } as React.CSSProperties; return (

{loading ? ( ) : empty ? ( ) : ( {children} )}

); } 32:T19e7,/** * Sample series for the chart blocks. Everything here is fictitious demo data, hand-written so * server and client render the same values. Typed so other builders can import it. */ export type MonthlyRevenuePoint = { month: string; revenue: number; previous: number }; export type TrafficPoint = { month: string; organic: number; paid: number; direct: number; referral: number }; export type DailySalesPoint = { day: string; revenue: number; orders: number; refunds: number }; export type PortfolioPoint = { label: string; value: number }; export type SessionsPoint = { week: string; sessions: number; conversions: number; rate: number }; /** Monthly revenue in dollars, this year versus last. */ export const monthlyRevenue: MonthlyRevenuePoint[] = [ { month: "Jan", revenue: 3400, previous: 2900 }, { month: "Feb", revenue: 4800, previous: 3600 }, { month: "Mar", revenue: 4300, previous: 3900 }, { month: "Apr", revenue: 6100, previous: 4200 }, { month: "May", revenue: 5400, previous: 5100 }, { month: "Jun", revenue: 7600, previous: 5600 }, { month: "Jul", revenue: 7100, previous: 6300 }, { month: "Aug", revenue: 8200, previous: 6100 }, { month: "Sep", revenue: 7800, previous: 6900 }, { month: "Oct", revenue: 9300, previous: 7400 }, { month: "Nov", revenue: 9000, previous: 8200 }, { month: "Dec", revenue: 10800, previous: 8900 }, ]; /** Sessions by acquisition source, monthly. */ export const trafficBySource: TrafficPoint[] = [ { month: "Jan", organic: 8200, paid: 4100, direct: 3200, referral: 1400 }, { month: "Feb", organic: 9100, paid: 4600, direct: 3300, referral: 1500 }, { month: "Mar", organic: 8700, paid: 5800, direct: 3500, referral: 1700 }, { month: "Apr", organic: 10400, paid: 6200, direct: 3600, referral: 1600 }, { month: "May", organic: 11300, paid: 5900, direct: 3900, referral: 1900 }, { month: "Jun", organic: 12800, paid: 7100, direct: 4100, referral: 2100 }, { month: "Jul", organic: 12100, paid: 8400, direct: 4300, referral: 2000 }, { month: "Aug", organic: 13900, paid: 8100, direct: 4600, referral: 2300 }, { month: "Sep", organic: 14700, paid: 9300, direct: 4800, referral: 2500 }, { month: "Oct", organic: 15600, paid: 9000, direct: 5200, referral: 2600 }, { month: "Nov", organic: 17200, paid: 11200, direct: 5600, referral: 2900 }, { month: "Dec", organic: 18900, paid: 12400, direct: 6100, referral: 3200 }, ]; /** Thirty days of storefront sales. */ export const dailySales: DailySalesPoint[] = [ [1210, 31, 2], [1340, 36, 1], [980, 24, 3], [1520, 41, 0], [1710, 47, 2], [2050, 58, 1], [1890, 52, 4], [1430, 38, 1], [1260, 33, 2], [1180, 30, 0], [1620, 44, 1], [1940, 53, 3], [2210, 63, 2], [2480, 71, 1], [2130, 60, 2], [1760, 49, 0], [1590, 42, 1], [1480, 40, 2], [1830, 51, 1], [2290, 66, 3], [2540, 74, 2], [2760, 80, 1], [2390, 68, 0], [2020, 56, 2], [1870, 50, 1], [2110, 59, 1], [2470, 72, 4], [2830, 83, 2], [3010, 89, 1], [2760, 81, 2], ].map(([revenue, orders, refunds], i) => ({ day: `Sep ${i + 1}`, revenue, orders, refunds, })); /** Sample portfolio value by range. Not real holdings, not a real fund. */ export const portfolioByRange = { "1W": [ { label: "Mon", value: 48210 }, { label: "Tue", value: 48640 }, { label: "Wed", value: 48120 }, { label: "Thu", value: 49380 }, { label: "Fri", value: 49910 }, { label: "Sat", value: 49910 }, { label: "Sun", value: 50240 }, ], "1M": [ { label: "Wk 1", value: 46100 }, { label: "Wk 2", value: 47450 }, { label: "Wk 3", value: 46880 }, { label: "Wk 4", value: 49200 }, { label: "Wk 5", value: 50240 }, ], "6M": [ { label: "May", value: 39800 }, { label: "Jun", value: 41600 }, { label: "Jul", value: 40900 }, { label: "Aug", value: 44300 }, { label: "Sep", value: 46100 }, { label: "Oct", value: 50240 }, ], "1Y": [ { label: "Nov", value: 33100 }, { label: "Jan", value: 35900 }, { label: "Mar", value: 34200 }, { label: "May", value: 39800 }, { label: "Jul", value: 40900 }, { label: "Sep", value: 46100 }, { label: "Oct", value: 50240 }, ], } satisfies Record; export type PortfolioRange = keyof typeof portfolioByRange; export const portfolioRanges = Object.keys(portfolioByRange) as PortfolioRange[]; /** Weekly sessions and conversions. */ export const sessionsByWeek: SessionsPoint[] = [ [18400, 552], [19200, 614], [17900, 520], [21300, 703], [22800, 774], [21100, 696], [24500, 858], [26200, 943], [25100, 878], [27800, 1001], [29300, 1100], [31200, 1186], ].map(([sessions, conversions], i) => ({ week: `W${i + 1}`, sessions, conversions, rate: Math.round((conversions / sessions) * 1000) / 10, })); /** Bare numeric series for sparklines. */ export const sparkSeries = { revenueUp: [12, 14, 13, 17, 16, 21, 19, 24, 23, 28, 27, 33], ordersUp: [40, 42, 39, 46, 51, 49, 56, 58, 55, 63, 66, 71], returnsDown: [9, 8, 9, 7, 8, 6, 7, 5, 6, 5, 4, 4], priceDown: [52, 51, 53, 50, 49, 50, 47, 48, 46, 45, 46, 44], usersFlat: [31, 33, 30, 32, 34, 31, 33, 32, 34, 31, 33, 32], dailyOrders: dailySales.map((d) => d.orders), } satisfies Record; /** Rows for the sparkline-in-a-table demo. Fictitious products. */ export const sparkTableRows = [ { name: "Heavyweight tee", sku: "TEE-014", units: 1284, change: 12.4, trend: [8, 9, 9, 11, 10, 13, 14, 15] }, { name: "Dad cap", sku: "CAP-031", units: 842, change: 3.1, trend: [6, 6, 7, 6, 7, 7, 8, 8] }, { name: "Tie-dye tee", sku: "TEE-052", units: 611, change: -8.6, trend: [14, 13, 13, 11, 12, 10, 9, 9] }, { name: "Crewneck", sku: "CRW-007", units: 497, change: 21.9, trend: [3, 4, 4, 6, 7, 8, 10, 12] }, { name: "Tote", sku: "TOT-003", units: 233, change: -2.2, trend: [6, 5, 6, 5, 5, 6, 5, 4] }, ]; /** Year totals by source, for single-series horizontal bars. */ export const trafficTotals = [ { source: "Organic", sessions: trafficBySource.reduce((n, r) => n + r.organic, 0) }, { source: "Paid", sessions: trafficBySource.reduce((n, r) => n + r.paid, 0) }, { source: "Direct", sessions: trafficBySource.reduce((n, r) => n + r.direct, 0) }, { source: "Referral", sessions: trafficBySource.reduce((n, r) => n + r.referral, 0) }, ]; /** Quarterly sessions by source, for stacked bars with few categories. */ export const trafficByQuarter = [0, 1, 2, 3].map((q) => { const rows = trafficBySource.slice(q * 3, q * 3 + 3); const sum = (k: "organic" | "paid" | "direct" | "referral") => rows.reduce((n, r) => n + r[k], 0); return { quarter: `Q${q + 1}`, organic: sum("organic"), paid: sum("paid"), direct: sum("direct"), referral: sum("referral") }; }); 33:T18d7,"use client"; import { TrendChip } from "../trend-chip/trend-chip"; import { Card, CardDescription } from "@/components/ui/card"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { sparkSeries, sparkTableRows } from "../_fixtures"; import { DemoCell, DemoGrid, DemoPage } from "../chart-area/demo-kit"; import { Sparkline, SparklineCell, SparklineCellValue, type SparklineTone, } from "./sparkline"; const tones: SparklineTone[] = [ "auto", "foreground", "neutral", "success", "error", "info", "warning", ]; function Kpi({ label, value, delta, invert, data, }: { label: string; value: string; delta: number; invert?: boolean; data: number[]; }) { const good = delta >= 0 !== Boolean(invert); return (

{label}

{value}

= 0 ? "up" : "down"}`} className="-mt-1" /> ); } export function SparklineDemo() { return (

{(["area", "line", "bar"] as const).map((t) => (

{t}

))}

{tones.map((tone, i) => (

{tone}

))}

Product Units 8 weeks {sparkTableRows.map((r) => (

{r.name} {r.sku}

{r.units.toLocaleString()} = 0 ? "text-success" : "text-error" } > {r.change >= 0 ? "+" : ""} {r.change.toFixed(1)}% ))}

); } 34:T721,import type { BlockMeta } from "../../../lib/block-meta"; export const sparklineMeta: BlockMeta = { slug: "sparkline", title: "Sparkline", description: "Tiny trend mark on the Kobra chart in area, line or bar form, with an auto success or error tone, three heights, optional tooltip, and cells for KPIs and tables.", group: "charts", kobraDeps: ["card", "chart", "empty", "skeleton"], files: [ "blocks/charts/sparkline/sparkline.tsx", "blocks/charts/chart-area/chart-shell.tsx", "blocks/charts/chart-area/demo-kit.tsx", "blocks/charts/_fixtures.ts", ], props: [ { name: "data", type: "(number | { value: number; label?: string })[]", description: "The series. Fewer than two points shows the empty state." }, { name: "type", type: "'area' | 'line' | 'bar'", default: "'area'", description: "Shape of the mark." }, { name: "tone", type: "'auto' | 'foreground' | 'neutral' | 'success' | 'error' | 'warning' | 'info'", default: "'auto'", description: "`auto` is success when the series ends at or above its start, error otherwise." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Height: 24, 32 or 48px. Width comes from the parent or className." }, { name: "tooltip", type: "boolean", default: "false", description: "Hover tooltip with the value." }, { name: "valueFormatter", type: "(value: number) => string", description: "Tooltip value format." }, { name: "loading", type: "boolean", default: "false", description: "Skeleton the size of the mark." }, { name: "label", type: "string", description: "Accessible description of the trend." }, { name: "className", type: "string", description: "Root only. Use it to set the width." }, ], tags: ["chart", "sparkline", "trend", "kpi", "table"], 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":"Sparkline"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Sparkline"}],["$","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":"Tiny trend mark on the Kobra chart in area, line or bar form, with an auto success or error tone, three heights, optional tooltip, and cells for KPIs and tables."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"sparkline","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/sparkline/sparkline.tsx","code":"$30"},{"path":"blocks/charts/chart-area/chart-shell.tsx","code":"$31"},{"path":"blocks/charts/chart-area/demo-kit.tsx","code":"// Demo layout lives in one shared file for the whole library; chart demos keep these names.\nexport { DemoCell, DemoGrid, DemoPage } from \"../../_shared/variant-frame\";\n"},{"path":"blocks/charts/_fixtures.ts","code":"$32"},{"path":"blocks/charts/sparkline/demo.tsx","code":"$33"},{"path":"blocks/charts/sparkline/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]