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:T1a40,"use client"; import * as React from "react"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; import { cn } from "@/lib/utils"; import { ChartCanvas, ChartDescription, ChartFrame, ChartHeader, ChartHeading, ChartLegendList, ChartTitle, ChartValue, buildChartConfig, chartTooltipElement, quietGrid, quietXAxis, quietYAxis, seriesVar, zeroTicks, useChartMotion, type ChartFrameProps, type ChartSeries, type ChartTooltipOptions, } from "../chart-area/chart-shell"; export type ChartLineDatum = Record; /* Compound parts */ /** Root surface. `variant="plain"` drops the card so a widget can own it. */ export function ChartLine(props: ChartFrameProps) { return ; } export function ChartLineHeader(props: React.ComponentProps) { return ; } export function ChartLineHeading(props: React.ComponentProps) { return ; } export function ChartLineTitle(props: React.ComponentProps) { return ; } export function ChartLineDescription(props: React.ComponentProps) { return ; } export function ChartLineValue(props: React.ComponentProps) { return ; } export function ChartLineLegend(props: React.ComponentProps) { return ; } /** A row of stats that double as a series switcher. Put `ChartLineStat` buttons inside. */ export function ChartLineStats({ className, ...props }: React.ComponentProps<"div">) { return (

); } export type ChartLineStatProps = Omit, "value"> & { label: React.ReactNode; value: React.ReactNode; /** Marks the stat whose series the chart is showing. */ selected?: boolean; }; export function ChartLineStat({ label, value, selected, className, ...props }: ChartLineStatProps) { return ( ); } /* Plot */ type DomainEnd = number | "auto" | "dataMin" | "dataMax" | ((value: number) => number); export type ChartLinePlotProps = { data: ChartLineDatum[]; /** Key of the category axis. */ xKey: string; series: ChartSeries[]; curve?: "monotone" | "natural" | "linear" | "step"; /** Draw a dot on every point. */ dots?: boolean; tooltip?: false | ChartTooltipOptions; /** No axes or grid, just the line. */ bare?: boolean; bleed?: boolean; xFormatter?: (value: string) => string; yFormatter?: (value: number) => string; /** Y ticks to show. Lower for quieter axes. */ yTickCount?: number; /** Explicit gridline values; the domain snaps to them. Overrides `yDomain` and the zero-based default. */ yTicks?: number[]; /** Fix the Y domain, e.g. [0, "auto"]. Defaults to zero-based, or fitted when `bare`. */ yDomain?: [DomainEnd, DomainEnd]; height?: number; loading?: boolean; emptyTitle?: React.ReactNode; emptyDescription?: React.ReactNode; label?: string; }; export function ChartLinePlot({ data, xKey, series, curve = "monotone", dots = false, tooltip, bare = false, bleed = false, xFormatter, yFormatter, yTickCount, yTicks, yDomain, height, loading, emptyTitle, emptyDescription, label, }: ChartLinePlotProps) { const motion = useChartMotion(); const config = React.useMemo(() => buildChartConfig(series), [series]); const scale = React.useMemo(() => { if (bare || yDomain) return null; if (yTicks) return { ticks: yTicks, domain: [yTicks[0], yTicks[yTicks.length - 1]] as [number, number] }; return zeroTicks(data, series.map((s) => [s.key]), yTickCount ?? 4); }, [bare, yDomain, yTicks, data, series, yTickCount]); const domain = scale?.domain ?? yDomain ?? (bare ? [(min: number) => min - 2, (max: number) => max + 2] : undefined); return ( {bare ? null : } {chartTooltipElement(tooltip, { strokeDasharray: "3 3" })} {series.map((s) => ( ))} ); } 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:T27ea,"use client"; import * as React from "react"; import { TrendChip } from "../trend-chip/trend-chip"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { dailySales, monthlyRevenue, portfolioByRange, portfolioRanges, sparkSeries, trafficBySource, type PortfolioRange, } from "../_fixtures"; import { DemoCell, DemoGrid, DemoPage } from "../chart-area/demo-kit"; import { formatCompact, formatCurrency, formatCurrencyCompact, niceTicks, tooltipRowFormatter, type ChartSeries, } from "../chart-area/chart-shell"; import { ChartLine, ChartLineDescription, ChartLineHeader, ChartLineHeading, ChartLineLegend, ChartLinePlot, ChartLineStat, ChartLineStats, ChartLineTitle, ChartLineValue, } from "./chart-line"; const revenue: ChartSeries[] = [ { key: "revenue", label: "Revenue", color: "foreground" }, ]; const palette: ChartSeries[] = [ { key: "organic", label: "Organic", color: "foreground" }, { key: "paid", label: "Paid", color: "chart-2" }, { key: "direct", label: "Direct", color: "chart-3", dashed: true }, ]; const vsLast: ChartSeries[] = [ { key: "revenue", label: "This year", color: "foreground" }, { key: "previous", label: "Last year", color: "muted", dashed: true }, ]; const traffic2: ChartSeries[] = [ { key: "organic", label: "Organic", color: "foreground" }, { key: "paid", label: "Paid ads", color: "muted" }, ]; const stats = [ { key: "revenue", label: "Revenue", color: "foreground", format: formatCurrency, }, { key: "orders", label: "Orders", color: "foreground", format: (v: number) => v.toLocaleString(), }, { key: "refunds", label: "Refunds", color: "foreground", format: (v: number) => v.toLocaleString(), }, ] as const; function Portfolio() { const [range, setRange] = React.useState("6M"); const data = portfolioByRange[range]; const first = data[0].value; const last = data[data.length - 1].value; const delta = ((last - first) / first) * 100; const up = delta >= 0; const series: ChartSeries[] = [ { key: "value", label: "Value", color: up ? "success" : "error" }, ]; return ( Sample portfolio {formatCurrency(last)} next[0] && setRange(next[0] as PortfolioRange) } size="sm" spacing={1} aria-label="Range" > {portfolioRanges.map((r) => ( {r} ))} d.value)) * 0.97, Math.max(...data.map((d) => d.value)), )} tooltip={{ hideIndicator: true, formatter: tooltipRowFormatter((v) => formatCurrency(v)), }} label="Sample portfolio value" /> ); } function StatsWithChart() { const [active, setActive] = React.useState<(typeof stats)[number]["key"]>("revenue"); const stat = stats.find((s) => s.key === active) ?? stats[0]; const series: ChartSeries[] = [ { key: stat.key, label: stat.label, color: stat.color }, ]; return ( {stats.map((s) => ( n + d[s.key], 0))} selected={s.key === active} onClick={() => setActive(s.key)} /> ))} stat.format(v)) }} label={`${stat.label} per day`} /> ); } export function ChartLineDemo() { return ( Monthly revenue Sample data, this year Traffic by channel Sessions, monthly This year vs last Previous period dashed Weekly points Linear, dot per reading Traffic source {formatCompact( trafficBySource.reduce((n, r) => n + r.organic + r.paid, 0), )} Sessions

Total revenue $228,451 ({ i: `P${i + 1}`, v, }))} xKey="i" series={[{ key: "v", label: "Revenue", color: "foreground" }]} bare height={64} tooltip={false} label="Revenue sparkline" />

Empty

); } 34:T757,import type { BlockMeta } from "../../../lib/block-meta"; export const chartLineMeta: BlockMeta = { slug: "chart-line", title: "Line chart", description: "Line chart on the Kobra chart: multi-series colors, dashed comparison, dots, a bare sparkline shape, portfolio and traffic-source headers, and stat tabs that switch the series.", group: "charts", kobraDeps: ["card", "chart", "empty", "skeleton"], files: [ "blocks/charts/chart-line/chart-line.tsx", "blocks/charts/chart-area/chart-shell.tsx", "blocks/charts/chart-area/demo-kit.tsx", "blocks/charts/_fixtures.ts", ], props: [ { name: "data", type: "Record[]", description: "Rows to plot." }, { name: "xKey", type: "string", description: "Key of the category axis." }, { name: "series", type: "ChartSeries[]", description: "One entry per line: key, label, color token, dashed." }, { name: "curve", type: "'monotone' | 'natural' | 'linear' | 'step'", default: "'monotone'", description: "Line interpolation." }, { name: "dots", type: "boolean", default: "false", description: "Dot on every point." }, { name: "tooltip", type: "false | Partial", description: "Hide, or tune the tooltip." }, { name: "bare", type: "boolean", default: "false", description: "No axes or grid (sparkline shape)." }, { name: "yDomain", type: "[min, max]", description: "Fix the Y domain." }, { name: "loading", type: "boolean", default: "false", description: "Show the skeleton at plot size." }, { name: "ChartLineStat.selected", type: "boolean", description: "Marks the active stat tab (aria-pressed)." }, { name: "variant (ChartLine)", type: "'card' | 'plain'", default: "'card'", description: "`plain` drops the card surface." }, ], tags: ["chart", "line", "analytics", "dashboard"], 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":"Line chart"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Line 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":"Line chart on the Kobra chart: multi-series colors, dashed comparison, dots, a bare sparkline shape, portfolio and traffic-source headers, and stat tabs that switch the series."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chart-line","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/chart-line/chart-line.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/chart-line/demo.tsx","code":"$33"},{"path":"blocks/charts/chart-line/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]