2d: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"],""] 2e: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"] 2f: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"] 30: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"] 31:T1cce,"use client"; import * as React from "react"; import { Area, Bar, CartesianGrid, ComposedChart, Line, 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 ChartComposedDatum = Record; export type ChartComposedSeries = ChartSeries & { type: "bar" | "line" | "area"; /** Series sharing a stack id stack on top of each other (bars and areas). */ stackId?: string; /** Which Y axis the series reads. `right` turns the second axis on. */ axis?: "left" | "right"; }; /* Compound parts */ /** Root surface. `variant="plain"` drops the card so a widget can own it. */ export function ChartComposed(props: ChartFrameProps) { return ; } export function ChartComposedHeader(props: React.ComponentProps) { return ; } export function ChartComposedHeading(props: React.ComponentProps) { return ; } export function ChartComposedTitle(props: React.ComponentProps) { return ; } export function ChartComposedDescription(props: React.ComponentProps) { return ; } export function ChartComposedValue(props: React.ComponentProps) { return ; } export function ChartComposedLegend(props: React.ComponentProps) { return ; } /* Plot */ export type ChartComposedPlotProps = { data: ChartComposedDatum[]; xKey: string; series: ChartComposedSeries[]; curve?: "monotone" | "natural" | "linear" | "step"; tooltip?: false | ChartTooltipOptions; xFormatter?: (value: string) => string; /** Left axis tick format. */ yFormatter?: (value: number) => string; /** Right axis tick format, when any series uses `axis: "right"`. */ yRightFormatter?: (value: number) => string; height?: number; loading?: boolean; emptyTitle?: React.ReactNode; emptyDescription?: React.ReactNode; label?: string; }; const RANK = { area: 0, bar: 1, line: 2 } as const; export function ChartComposedPlot({ data, xKey, series, curve = "monotone", tooltip, xFormatter, yFormatter, yRightFormatter, height = 260, loading, emptyTitle, emptyDescription, label, }: ChartComposedPlotProps) { const uid = React.useId().replace(/:/g, ""); const motion = useChartMotion(); const config = React.useMemo(() => buildChartConfig(series), [series]); // Areas paint first, lines last, so the line is never hidden behind a fill. const ordered = React.useMemo(() => [...series].sort((a, b) => RANK[a.type] - RANK[b.type]), [series]); const hasRight = series.some((s) => s.axis === "right"); const axisScale = (side: "left" | "right") => { const on = series.filter((s) => (s.axis ?? "left") === side); if (on.length === 0) return null; const stacks = new Map(); const groups: string[][] = []; for (const s of on) { if (s.stackId) stacks.set(s.stackId, [...(stacks.get(s.stackId) ?? []), s.key]); else groups.push([s.key]); } return zeroTicks(data, [...groups, ...stacks.values()]); }; const left = React.useMemo(() => axisScale("left"), [data, series]); // eslint-disable-line react-hooks/exhaustive-deps const right = React.useMemo(() => axisScale("right"), [data, series]); // eslint-disable-line react-hooks/exhaustive-deps const lastBarStack = (stackId?: string) => { const bars = ordered.filter((s) => s.type === "bar" && s.stackId === stackId); return bars[bars.length - 1]; }; return ( {series .filter((s) => s.type === "area") .map((s) => ( ))} {hasRight ? : null} {chartTooltipElement(tooltip, { fill: "var(--muted)", fillOpacity: 0.4, stroke: "none" })} {ordered.map((s) => { const yAxisId = s.axis ?? "left"; if (s.type === "area") { return ( ); } if (s.type === "bar") { const top = !s.stackId || lastBarStack(s.stackId)?.key === s.key; return ( ); } return ( ); })} ); } 32: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} )}

); } 33: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") }; }); 34:T172f,"use client"; import { dailySales, monthlyRevenue, sessionsByWeek, trafficBySource, } from "../_fixtures"; import { DemoCell, DemoGrid, DemoPage } from "../chart-area/demo-kit"; import { formatCompact, formatCurrencyCompact, } from "../chart-area/chart-shell"; import { ChartComposed, ChartComposedDescription, ChartComposedHeader, ChartComposedHeading, ChartComposedLegend, ChartComposedPlot, ChartComposedTitle, type ChartComposedSeries, } from "./chart-composed"; const stackedWithLine: ChartComposedSeries[] = [ { key: "organic", label: "Organic", color: "chart-3", type: "bar", stackId: "s", }, { key: "paid", label: "Paid", color: "chart-1", type: "bar", stackId: "s" }, { key: "direct", label: "Direct", color: "foreground", type: "line" }, ]; const areaWithLine: ChartComposedSeries[] = [ { key: "revenue", label: "This year", color: "foreground", type: "area" }, { key: "previous", label: "Last year", color: "muted", type: "line", dashed: true, }, ]; const barWithArea: ChartComposedSeries[] = [ { key: "sessions", label: "Sessions", color: "muted", type: "area" }, { key: "conversions", label: "Conversions", color: "foreground", type: "bar", axis: "right", }, ]; const multi: ChartComposedSeries[] = [ { key: "revenue", label: "Revenue", color: "muted", type: "area" }, { key: "orders", label: "Orders", color: "chart-3", type: "bar", axis: "right", }, { key: "refunds", label: "Refunds", color: "error", type: "line", axis: "right", }, ]; export function ChartComposedDemo() { return ( Traffic mix Organic and paid stacked, direct as a line Revenue Area for now, dashed line for last year Sessions and conversions Conversions read the right axis v.toLocaleString()} label="Weekly sessions area with conversion bars" /> Daily sales Area, bars and a line on two axes String(v)} label="Daily revenue, orders and refunds" /> Loading Empty ); } 35:T709,import type { BlockMeta } from "../../../lib/block-meta"; export const chartComposedMeta: BlockMeta = { slug: "chart-composed", title: "Composed chart", description: "Bars, lines and areas on one plot with an optional second Y axis: stacked bars with a line, area with a line, bar with an area, and a three-type mix.", group: "charts", kobraDeps: ["card", "chart", "empty", "skeleton"], files: [ "blocks/charts/chart-composed/chart-composed.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: "ChartComposedSeries[]", description: "key, label, color token, type ('bar' | 'line' | 'area'), stackId, axis ('left' | 'right'), dashed." }, { name: "curve", type: "'monotone' | 'natural' | 'linear' | 'step'", default: "'monotone'", description: "Interpolation for lines and areas." }, { name: "yFormatter", type: "(value: number) => string", description: "Left axis ticks." }, { name: "yRightFormatter", type: "(value: number) => string", description: "Right axis ticks (shown when a series uses axis 'right')." }, { name: "tooltip", type: "false | Partial", description: "Hide, or tune the tooltip." }, { name: "loading", type: "boolean", default: "false", description: "Show the skeleton at plot size." }, { name: "variant (ChartComposed)", type: "'card' | 'plain'", default: "'card'", description: "`plain` drops the card surface." }, ], tags: ["chart", "composed", "combo", "analytics", "dashboard"], status: "ready", }; 24:["$","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":["$","$L2d",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":["$","$L2d",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":"Composed chart"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Composed 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":"Bars, lines and areas on one plot with an optional second Y axis: stacked bars with a line, area with a line, bar with an area, and a three-type mix."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"chart-composed","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/charts/chart-composed/chart-composed.tsx","code":"$31"},{"path":"blocks/charts/chart-area/chart-shell.tsx","code":"$32"},{"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":"$33"},{"path":"blocks/charts/chart-composed/demo.tsx","code":"$34"},{"path":"blocks/charts/chart-composed/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]