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:T1989,"use client"; import * as React from "react"; import { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from "recharts"; 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 ChartBarDatum = Record; /* Compound parts */ /** Root surface. `variant="plain"` drops the card so a widget can own it. */ export function ChartBar(props: ChartFrameProps) { return ; } export function ChartBarHeader(props: React.ComponentProps) { return ; } export function ChartBarHeading(props: React.ComponentProps) { return ; } export function ChartBarTitle(props: React.ComponentProps) { return ; } export function ChartBarDescription(props: React.ComponentProps) { return ; } export function ChartBarValue(props: React.ComponentProps) { return ; } export function ChartBarLegend(props: React.ComponentProps) { return ; } /* Plot */ export type ChartBarPlotProps = { data: ChartBarDatum[]; /** Key of the category axis. */ xKey: string; series: ChartSeries[]; /** `vertical` draws columns (default); `horizontal` draws bars running left to right. */ orientation?: "vertical" | "horizontal"; /** Stack series. Without it, several series are grouped side by side. */ stacked?: boolean; /** * Compare two series: the first is the current period (solid), the second the previous * period, drawn as a wider ghost bar behind it. */ comparison?: boolean; /** Width of the category labels when `orientation="horizontal"`, in px. */ categoryWidth?: number; tooltip?: false | ChartTooltipOptions; /** No axes or grid, just the bars. */ bare?: boolean; /** Edge to edge inside the card. */ bleed?: boolean; xFormatter?: (value: string) => string; yFormatter?: (value: number) => string; height?: number; loading?: boolean; emptyTitle?: React.ReactNode; emptyDescription?: React.ReactNode; label?: string; }; const BAR_SIZE = 14; const GHOST_GROW = 6; const R = 4; export function ChartBarPlot({ data, xKey, series, orientation = "vertical", stacked = false, comparison = false, categoryWidth = 72, tooltip, bare = false, bleed = false, xFormatter, yFormatter, height, loading, emptyTitle, emptyDescription, label, }: ChartBarPlotProps) { const motion = useChartMotion(); const config = React.useMemo(() => buildChartConfig(series), [series]); const horizontal = orientation === "horizontal"; const radiusFor = (last: boolean): [number, number, number, number] => horizontal ? [0, last ? R : 0, last ? R : 0, 0] : [last ? R : 0, last ? R : 0, 0, 0]; const scale = React.useMemo(() => (bare ? null : zeroTicks(data, stacked ? [series.map((s) => s.key)] : series.map((s) => [s.key]))), [bare, data, series, stacked]); // In comparison mode the previous-period series goes first so it paints behind the current one. const ordered = comparison && series.length > 1 ? [series[1], series[0], ...series.slice(2)] : series; return ( {bare ? null : } {horizontal ? ( <> ) : ( <> )} {chartTooltipElement(tooltip, { fill: "var(--muted)", fillOpacity: 0.5 })} {ordered.map((s, i) => { const isGhost = comparison && i === 0 && series.length > 1; const last = i === ordered.length - 1; return ( ) => ( ) : undefined } {...motion} /> ); })} ); } 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:T1c26,"use client"; import { TrendChip } from "../trend-chip/trend-chip"; import { CardDescription } from "@/components/ui/card"; import { dailySales, monthlyRevenue, trafficByQuarter, trafficBySource, trafficTotals, } from "../_fixtures"; import { DemoCell, DemoGrid, DemoPage } from "../chart-area/demo-kit"; import { formatCompact, formatCurrencyCompact, type ChartSeries, } from "../chart-area/chart-shell"; import { ChartBar, ChartBarDescription, ChartBarHeader, ChartBarHeading, ChartBarLegend, ChartBarPlot, ChartBarTitle, ChartBarValue, } from "./chart-bar"; const revenue: ChartSeries[] = [ { key: "revenue", label: "Revenue", color: "foreground" }, ]; const thisVsLast: ChartSeries[] = [ { key: "revenue", label: "This year", color: "foreground" }, { key: "previous", label: "Last year", color: "muted" }, ]; const sources: ChartSeries[] = [ { key: "organic", label: "Organic", color: "foreground" }, { key: "paid", label: "Paid", color: "chart-2" }, { key: "direct", label: "Direct", color: "chart-1" }, ]; const sessions: ChartSeries[] = [ { key: "sessions", label: "Sessions", color: "foreground" }, ]; const orders: ChartSeries[] = [ { key: "orders", label: "Orders", color: "foreground" }, ]; export function ChartBarDemo() { return ( Monthly revenue Sample data, this year This year vs last Revenue, grouped Traffic by source Sessions, stacked Sessions by source Year to date Quarterly traffic Sessions by source, stacked Revenue vs last year Current bar over previous period Orders, last 30 days 1,742 ({ ...d }))} xKey="day" series={orders} bare bleed height={96} label="Orders per day, last 30 days" />

Loading Empty

); } 34:T774,import type { BlockMeta } from "../../../lib/block-meta"; export const chartBarMeta: BlockMeta = { slug: "chart-bar", title: "Bar chart", description: "Bar chart on the Kobra chart: columns or horizontal bars, grouped, stacked, previous-period comparison and a bare KPI shape, with loading and empty states.", group: "charts", kobraDeps: ["card", "chart", "empty", "skeleton"], files: [ "blocks/charts/chart-bar/chart-bar.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 bar series: key, label, color token." }, { name: "orientation", type: "'vertical' | 'horizontal'", default: "'vertical'", description: "Columns or horizontal bars." }, { name: "stacked", type: "boolean", default: "false", description: "Stack series; otherwise they group side by side." }, { name: "comparison", type: "boolean", default: "false", description: "First series solid, second drawn as a ghost bar behind it." }, { name: "tooltip", type: "false | Partial", description: "Hide, or tune the tooltip." }, { name: "bare", type: "boolean", default: "false", description: "No axes or grid." }, { name: "bleed", type: "boolean", default: "false", description: "Edge to edge inside the card." }, { name: "loading", type: "boolean", default: "false", description: "Show the skeleton at plot size." }, { name: "variant (ChartBar)", type: "'card' | 'plain'", default: "'card'", description: "`plain` drops the card surface." }, ], tags: ["chart", "bar", "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":"Bar chart"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Bar 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":"Bar chart on the Kobra chart: columns or horizontal bars, grouped, stacked, previous-period comparison and a bare KPI shape, with loading and empty states."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chart-bar","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/chart-bar/chart-bar.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-bar/demo.tsx","code":"$33"},{"path":"blocks/charts/chart-bar/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]