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/0cxdppusfso3e.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/0cxdppusfso3e.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/0cxdppusfso3e.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/0cxdppusfso3e.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:T1854,"use client"; import * as React from "react"; import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"; import { ChartCanvas, ChartDescription, ChartFrame, ChartHeader, ChartHeading, ChartTitle, buildChartConfig, quietGrid, quietXAxis, quietYAxis, seriesVar, tooltipRowFormatter, type ChartFrameProps, type ChartSeries, type ChartTooltipOptions, } from "../chart-area/chart-shell"; export { ChartTooltip, ChartTooltipContent, tooltipRowFormatter }; export type { ChartTooltipOptions }; type Formatter = NonNullable; /** * Row formatter that adds a total row under the last series. The row keeps the Kobra layout: * swatch, muted label, tabular value. */ export function tooltipTotalFormatter({ keys, format, totalLabel = "Total", }: { /** Data keys of the rows being summed, in tooltip order. */ keys: string[]; format: (value: number) => React.ReactNode; totalLabel?: React.ReactNode; }): Formatter { const row = tooltipRowFormatter((v) => format(v)); return function TotalFormatter(value, name, item, index, payload) { const datum = ((item as { payload?: unknown } | undefined)?.payload ?? payload ?? {}) as unknown as Record; const total = keys.reduce((n, k) => n + (typeof datum[k] === "number" ? (datum[k] as number) : 0), 0); return ( <> {row(value, name, item, index, payload)} {index === keys.length - 1 ? ( {totalLabel} {format(total)} ) : null} ); }; } /* Compound parts for a tooltip sample card */ /** Card that hosts a plot with a tooltip pinned open, for documenting tooltip options. */ export function ChartTooltipSample(props: ChartFrameProps) { return ; } export function ChartTooltipSampleHeader(props: React.ComponentProps) { return ; } export function ChartTooltipSampleHeading(props: React.ComponentProps) { return ; } export function ChartTooltipSampleTitle(props: React.ComponentProps) { return ; } export function ChartTooltipSampleDescription(props: React.ComponentProps) { return ; } export type ChartTooltipPlotProps = { data: Record[]; xKey: string; series: ChartSeries[]; kind?: "area" | "line" | "bar"; /** Row index the tooltip opens on. Without it the tooltip appears on hover only. */ pinnedIndex?: number; /** Set false to switch a pinned tooltip off (the inactive state). */ active?: boolean; /** Options for Kobra's ChartTooltipContent: indicator, hideLabel, hideIndicator, formatter, labelFormatter. */ tooltip?: ChartTooltipOptions; yFormatter?: (value: number) => string; height?: number; label?: string; }; export function ChartTooltipPlot({ data, xKey, series, kind = "area", pinnedIndex, active, tooltip, yFormatter, height = 220, label, }: ChartTooltipPlotProps) { const config = React.useMemo(() => buildChartConfig(series), [series]); const pinned = pinnedIndex !== undefined; // Tooltip samples are static documentation: no entrance draw (a pinned tooltip also restarts it as it mounts). const motion = { isAnimationActive: false } as const; const common = ( <> } /> ); const margin = { top: 8, right: 4, bottom: 0, left: 0 }; return ( {kind === "bar" ? ( {common} {series.map((s) => ( ))} ) : kind === "line" ? ( {common} {series.map((s) => ( ))} ) : ( {common} {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:T1bf9,"use client"; import * as React from "react"; import { Switch } from "@/components/ui/switch"; import { monthlyRevenue, trafficBySource } from "../_fixtures"; import { DemoCell, DemoGrid, DemoPage } from "../chart-area/demo-kit"; import { formatCompact, formatCurrency, formatCurrencyCompact, type ChartSeries, } from "../chart-area/chart-shell"; import { ChartTooltipPlot, ChartTooltipSample, ChartTooltipSampleDescription, ChartTooltipSampleHeader, ChartTooltipSampleHeading, ChartTooltipSampleTitle, tooltipRowFormatter, tooltipTotalFormatter, } from "./chart-tooltip"; const sources: ChartSeries[] = [ { key: "organic", label: "Organic", color: "foreground" }, { key: "paid", label: "Paid", color: "chart-2" }, { key: "direct", label: "Direct", color: "chart-1" }, ]; const single: ChartSeries[] = [ { key: "revenue", label: "Revenue", color: "foreground" }, ]; const palette: ChartSeries[] = [ { key: "organic", label: "Chart 1", color: "chart-1" }, { key: "paid", label: "Chart 2", color: "chart-2" }, { key: "direct", label: "Chart 3", color: "chart-3" }, { key: "referral", label: "Chart 4", color: "chart-4" }, ]; const statuses: ChartSeries[] = [ { key: "organic", label: "Success", color: "success" }, { key: "paid", label: "Info", color: "info" }, { key: "direct", label: "Warning", color: "warning" }, { key: "referral", label: "Error", color: "error" }, ]; const MONTHS: Record = { Jan: "January", Feb: "February", Mar: "March", Apr: "April", May: "May", Jun: "June", Jul: "July", Aug: "August", Sep: "September", Oct: "October", Nov: "November", Dec: "December", }; const traffic = trafficBySource.slice(0, 9); const rev = monthlyRevenue.slice(0, 9); function Sample({ title, note, children, }: { title: string; note: string; children: React.ReactNode; }) { return ( {title} {note} {children} ); } function Inactive() { const [on, setOn] = React.useState(false); return ( Inactive Hidden until the pointer enters the plot Pin open ); } export function ChartTooltipDemo() { return ( ({ month: r.month, organic: r.organic * 0.8, paid: r.paid * 1.1, direct: r.direct * 0.9, }))} xKey="month" series={sources} kind="bar" pinnedIndex={6} tooltip={{ labelFormatter: (value) => MONTHS[String(value)] ?? String(value), formatter: tooltipTotalFormatter({ keys: ["organic", "paid", "direct"], format: (v) => formatCurrency(v), }), }} yFormatter={formatCurrencyCompact} label="Bar chart with currency and total in the tooltip" />

v.toLocaleString()), }} yFormatter={formatCompact} label="Tooltip showing the chart palette" />

); } 34:T6db,import type { BlockMeta } from "../../../lib/block-meta"; export const chartTooltipMeta: BlockMeta = { slug: "chart-tooltip", title: "Chart tooltip", description: "Kobra ChartTooltipContent in every configuration, shown pinned open on a live plot: auto content, no header, line indicator, inactive, custom row and total formatters, chart colors.", group: "charts", kobraDeps: ["card", "chart", "empty", "skeleton"], files: [ "blocks/charts/chart-tooltip/chart-tooltip.tsx", "blocks/charts/chart-area/chart-shell.tsx", "blocks/charts/chart-area/demo-kit.tsx", "blocks/charts/_fixtures.ts", ], props: [ { name: "tooltip.indicator", type: "'dot' | 'line' | 'dashed'", default: "'dot'", description: "Swatch style beside each row." }, { name: "tooltip.hideLabel", type: "boolean", default: "false", description: "Drop the header (category) line." }, { name: "tooltip.hideIndicator", type: "boolean", default: "false", description: "Drop the swatch." }, { name: "tooltip.formatter", type: "ChartTooltipContent['formatter']", description: "Custom row. Use tooltipRowFormatter(format) to keep the Kobra row layout, tooltipTotalFormatter({ keys, format }) to add a total." }, { name: "tooltip.labelFormatter", type: "(label, payload) => ReactNode", description: "Rewrite the header." }, { name: "pinnedIndex", type: "number", description: "ChartTooltipPlot: row the tooltip is open on without hover." }, { name: "active", type: "boolean", description: "ChartTooltipPlot: set false for the inactive state." }, { name: "kind", type: "'area' | 'line' | 'bar'", default: "'area'", description: "ChartTooltipPlot: the plot type." }, ], tags: ["chart", "tooltip", "analytics"], 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":"Chart tooltip"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chart tooltip"}],["$","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":"Kobra ChartTooltipContent in every configuration, shown pinned open on a live plot: auto content, no header, line indicator, inactive, custom row and total formatters, chart colors."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chart-tooltip","group":"charts","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/charts/chart-tooltip/chart-tooltip.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-tooltip/demo.tsx","code":"$33"},{"path":"blocks/charts/chart-tooltip/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]