{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chart", "title": "Chart", "author": "AlgorizeTech", "description": "A dependency-free chart rendering bar, line, pie and donut from a single data array. Use it for simple dashboard visuals without pulling in a charting library.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/popover.json", "https://avaraui.com/r/toggle-group.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/ChartBlock.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n ArrowDownRight,\n ArrowUpRight,\n ChartColumnBig,\n ChartSpline,\n Info,\n Mail,\n Minus,\n PenLine,\n UserPlus,\n Wallet,\n} from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./PopoverBlock\";\nimport { ToggleGroup, ToggleGroupItem } from \"./ToggleGroupBlock\";\n\n// ==========================================\n// DYNAMIC THEME ENGINE\n// ==========================================\nexport type ChartColor =\n | \"indigo\"\n | \"rose\"\n | \"emerald\"\n | \"zinc\"\n | \"amber\"\n | \"blue\"\n | string;\nexport type ChartType =\n | \"bar\"\n | \"line\"\n | \"pie\"\n | \"donut\"\n /** A categorical donut with a legend beside it; hover either to read a share. */\n | \"donut-legend\"\n /** One horizontal bar split into shares, legend below. */\n | \"stacked-bar\"\n /** Semicircular tick gauge with categorized shares and conversion rate. */\n | \"traffic-sources\"\n /** Proportional barcode visualization with country ISO badges and share breakdown. */\n | \"visitors-by-country\"\n /** Multi-metric tabs overview with pill columns, dashed average line, and trend spline toggle. */\n | \"metrics-overview\";\n\nconst colorMap: Record = {\n indigo: \"#4f46e5\",\n rose: \"#e11d48\",\n emerald: \"#10b981\",\n zinc: \"#3f3f46\",\n amber: \"#f59e0b\",\n blue: \"#3b82f6\",\n};\n\nconst getThemeColor = (color: string) => {\n if (color.startsWith(\"#\") || color.startsWith(\"var(\")) return color;\n return colorMap[color] || \"var(--primary)\";\n};\n\nconst inkOn = (color: string) =>\n color === \"var(--primary)\" ? \"text-primary-foreground\" : \"text-white\";\n\n/**\n * Categorical palette for the legend charts, where every share needs its own\n * hue rather than a shade of one. The theme accent leads; the grey at the end\n * is what an \"Other\" bucket lands on when there are five shares.\n */\nconst CATEGORICAL = [\n \"var(--primary)\",\n \"#0d9488\",\n \"#d97706\",\n \"#e11d48\",\n \"#a1a1aa\",\n];\n\nconst DASH_COLORS = [\n \"#6356d1\",\n \"#e87ba4\",\n \"#eda100\",\n \"#1baf7a\",\n \"#94a3b8\",\n];\n\n// ==========================================\n// TYPES & PROPS\n// ==========================================\nexport interface ChartDataPoint {\n id?: string;\n label: string;\n value: number;\n /** Own colour for this share in `donut-legend`, `stacked-bar`, `traffic-sources`. */\n color?: string;\n /** 2-letter ISO code for country breakdown charts, e.g. \"US\", \"DE\". */\n code?: string;\n}\n\nexport interface MetricTabPoint {\n label: string;\n shortLabel?: string;\n fullLabel?: string;\n value: number;\n}\n\nexport interface MetricTabItem {\n id: string;\n label: string;\n icon?: React.ReactNode;\n currency?: string;\n change?: number | null;\n points: MetricTabPoint[];\n}\n\nexport interface ChartBlockProps {\n data?: ChartDataPoint[];\n type?: ChartType;\n color?: ChartColor;\n /**\n * Fixed pixel height. Defaults to 300 for the axis charts; the legend and breakdown\n * charts size to their content unless set.\n */\n height?: number;\n className?: string;\n valuePrefix?: string;\n valueSuffix?: string;\n showGrid?: boolean;\n showArea?: boolean;\n /**\n * Palette for the legend charts, one colour per share in order. A point's\n * own `color` wins over it. Defaults to the theme accent and four hues.\n */\n colors?: string[];\n /** `donut-legend`: caption under the centre value at rest, e.g. \"top reason\". */\n centerLabel?: string;\n /** `donut-legend`: caption under the centre value while a share is hovered. */\n hoverLabel?: string;\n /** `traffic-sources`: number of sign-ups to calculate visit-to-sign-up rate. */\n signUps?: number;\n /** `visitors-by-country`: whether to display 2-letter ISO country badge. */\n showCodes?: boolean;\n /** Optional title for card-based breakdown charts. */\n title?: string;\n /** Optional subtitle/caption for card-based breakdown charts. */\n caption?: string;\n /** `metrics-overview`: array of metric tabs with series data. */\n metrics?: MetricTabItem[];\n}\n\n// ==========================================\n// MAIN COMPONENT EXPORT\n// ==========================================\nexport function ChartBlock({\n data = [],\n type = \"bar\",\n color = \"var(--primary)\",\n height,\n className,\n valuePrefix = \"\",\n valueSuffix = \"\",\n showGrid = true,\n showArea = true,\n colors = CATEGORICAL,\n centerLabel = \"largest\",\n hoverLabel = \"share\",\n signUps,\n showCodes = true,\n title,\n caption,\n metrics,\n}: ChartBlockProps) {\n const themeColor = getThemeColor(color);\n const isSelfSizing =\n type === \"donut-legend\" ||\n type === \"stacked-bar\" ||\n type === \"traffic-sources\" ||\n type === \"visitors-by-country\" ||\n type === \"metrics-overview\";\n\n // Every share gets a colour: its own, else the palette in order, wrapping.\n const shareColor = (d: ChartDataPoint, i: number) =>\n getThemeColor(d.color ?? colors[i % colors.length] ?? \"primary\");\n\n if (type === \"metrics-overview\") {\n const activeMetrics =\n metrics ||\n (data && data.length > 0\n ? [\n {\n id: \"metric-1\",\n label: title || \"Overview\",\n points: data.map((d) => ({\n label: d.label,\n value: d.value,\n })),\n },\n ]\n : undefined);\n\n return (\n \n );\n }\n\n if (type === \"traffic-sources\") {\n return (\n \n );\n }\n\n if (type === \"visitors-by-country\") {\n return (\n \n );\n }\n\n return (\n \n {/* NATIVE CSS ANIMATIONS */}\n \n\n {type === \"bar\" && (\n \n )}\n\n {type === \"line\" && (\n \n )}\n\n {(type === \"pie\" || type === \"donut\") && (\n \n )}\n\n {type === \"donut-legend\" && (\n \n )}\n\n {type === \"stacked-bar\" && (\n \n )}\n \n );\n}\n\n// ==========================================\n// 1. HTML FLEXBOX BAR CHART (Flawless Scaling)\n// ==========================================\nfunction BarChart({\n data,\n color,\n prefix,\n suffix,\n showGrid,\n}: {\n data: ChartDataPoint[];\n color: string;\n prefix: string;\n suffix: string;\n showGrid: boolean;\n}) {\n const maxVal = Math.max(...data.map((d) => d.value), 1);\n const gridLines = [1, 0.75, 0.5, 0.25, 0];\n\n return (\n
\n {/* Background Grid & Y-Axis */}\n
\n {gridLines.map((ratio, i) => (\n
\n \n {prefix}\n {Math.round(maxVal * ratio)}\n {suffix}\n \n {showGrid && (\n
\n )}\n
\n ))}\n
\n\n {/* Bars Container */}\n
\n {data.map((d, i) => (\n \n {/* Tooltip */}\n
\n \n
\n {d.label}\n
\n
\n {prefix}\n {d.value}\n {suffix}\n
\n
\n
\n
\n\n {/* Flat-Bottom Bar */}\n \n
\n
\n\n {/* X-Axis Label */}\n \n {d.label}\n \n
\n ))}\n
\n
\n );\n}\n\n// ==========================================\n// 2. SVG SMOOTH CURVE CHART (Line + Area Merge)\n// ==========================================\nfunction SmoothLineChart({\n data,\n color,\n prefix,\n suffix,\n showGrid,\n showArea,\n}: {\n data: ChartDataPoint[];\n color: string;\n prefix: string;\n suffix: string;\n showGrid: boolean;\n showArea: boolean;\n}) {\n const [hoveredIndex, setHoveredIndex] = useState(null);\n const maxVal = Math.max(...data.map((d) => d.value), 1);\n // An id that is valid whatever the colour is: `var(--primary)` (the\n // default) is not a legal fragment for `url(#…)`, which left the area black.\n const cleanColorId = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n\n // Calculate X/Y percentages for the data\n const points = data.map((d, i) => ({\n x: (i / Math.max(data.length - 1, 1)) * 100,\n y: 100 - (d.value / maxVal) * 100,\n label: d.label,\n value: d.value,\n }));\n\n // Mathematical cubic bezier curve generator for a premium SaaS look\n const createSmoothPath = (pts: { x: number; y: number }[]) => {\n const first = pts[0];\n if (!first) return \"\";\n let d = `M ${first.x} ${first.y}`;\n for (let i = 1; i < pts.length; i++) {\n const prev = pts[i - 1];\n const curr = pts[i];\n if (!prev || !curr) continue;\n const cpX = (prev.x + curr.x) / 2; // Midpoint easing\n d += ` C ${cpX} ${prev.y}, ${cpX} ${curr.y}, ${curr.x} ${curr.y}`;\n }\n return d;\n };\n\n const smoothPath = createSmoothPath(points);\n const areaPath = `${smoothPath} L 100 100 L 0 100 Z`;\n\n return (\n
\n {/* Background Grid */}\n
\n {[1, 0.5, 0].map((ratio, i) => (\n
\n \n {prefix}\n {Math.round(maxVal * ratio)}\n {suffix}\n \n {showGrid && (\n
\n )}\n
\n ))}\n
\n\n {/* Vector Graphics. The draw-in is a left-to-right clip reveal rather\n than a stroke-dasharray sweep: with a non-scaling stroke the dash\n pattern is measured in screen pixels, not pathLength units, so a\n dashed draw cut the line into pieces whose count changed with width. */}\n \n \n \n \n \n \n \n\n {/* Optional Area Fill */}\n {showArea && (\n \n )}\n\n {/* Animated Line Stroke */}\n \n \n\n {/* HTML Interaction Overlay (Perfectly round dots that never squash) */}\n
\n {points.map((p, i) => (\n setHoveredIndex(i)}\n onMouseLeave={() => setHoveredIndex(null)}\n >\n {/* HTML Dot positioned accurately over the SVG path */}\n \n {/* Tooltip */}\n \n \n
\n {p.label}\n
\n
\n {prefix}\n {p.value}\n {suffix}\n
\n
\n
\n
\n
\n\n {/* X-Axis Label */}\n \n {p.label}\n \n
\n ))}\n \n \n );\n}\n\n// ==========================================\n// 3. SVG STROKE-DASHARRAY CHART (Pie/Donut)\n// ==========================================\nfunction CircularChart({\n data,\n type,\n color,\n prefix,\n suffix,\n}: {\n data: ChartDataPoint[];\n type: \"pie\" | \"donut\";\n color: string;\n prefix: string;\n suffix: string;\n}) {\n const [hoveredIndex, setHoveredIndex] = useState(null);\n\n const total = data.reduce((sum, d) => sum + d.value, 0);\n const radius = type === \"pie\" ? 25 : 40;\n const strokeWidth = type === \"pie\" ? 50 : 20;\n const circumference = 2 * Math.PI * radius;\n\n // Each slice starts where the previous one ended. Precomputed rather than\n // accumulated in a mutable variable inside map(), so the mapper stays pure.\n const sliceRatios = data.map((d) => d.value / (total || 1));\n const startRatios: number[] = [];\n sliceRatios.reduce((acc, ratio) => {\n startRatios.push(acc);\n return acc + ratio;\n }, 0);\n\n // Map data to stroke dashes\n const slices = data.map((d, i) => {\n const sliceRatio = sliceRatios[i] ?? 0;\n const startRatio = startRatios[i] ?? 0;\n const strokeDasharray = `${sliceRatio * circumference} ${circumference}`;\n const strokeDashoffset = -(startRatio * circumference);\n const endOffset = (startRatio + sliceRatio) * circumference;\n\n const midAngle =\n ((endOffset - (sliceRatio * circumference) / 2) / circumference) *\n Math.PI *\n 2 -\n Math.PI / 2;\n const tooltipRadius = type === \"pie\" ? 30 : 40;\n\n // Convert polar to cartesian for the tooltip\n const tx = 50 + tooltipRadius * Math.cos(midAngle);\n const ty = 50 + tooltipRadius * Math.sin(midAngle);\n\n return {\n ...d,\n strokeDasharray,\n strokeDashoffset,\n opacity: 1 - i * 0.15,\n tx,\n ty,\n };\n });\n const hovered = hoveredIndex === null ? undefined : slices[hoveredIndex];\n\n return (\n
\n {/* 1:1 Aspect Ratio Container forces perfect circles */}\n
\n \n {slices.map((slice, i) => (\n setHoveredIndex(i)}\n onMouseLeave={() => setHoveredIndex(null)}\n />\n ))}\n\n {/* Inner ring to give Donut a sharp edge */}\n {type === \"donut\" && (\n \n )}\n \n\n {/* Tooltip Overlay */}\n {hovered && (\n \n \n
\n {hovered.label}\n
\n
\n {prefix}\n {hovered.value}\n {suffix}\n
\n
\n
\n )}\n\n {/* Donut Center Total Label */}\n {type === \"donut\" && (\n
\n Total\n \n {prefix}\n {total}\n {suffix}\n \n
\n )}\n \n \n );\n}\n\n// ==========================================\n// 4. DONUT + LEGEND (categorical shares, hover either side)\n// ==========================================\nfunction DonutLegendChart({\n data,\n shareColor,\n prefix,\n suffix,\n centerLabel,\n hoverLabel,\n}: {\n data: ChartDataPoint[];\n shareColor: (d: ChartDataPoint, i: number) => string;\n prefix: string;\n suffix: string;\n centerLabel: string;\n hoverLabel: string;\n}) {\n const [active, setActive] = useState(null);\n const total = data.reduce((sum, d) => sum + d.value, 0) || 1;\n const R = 38;\n const C = 2 * Math.PI * R;\n const GAP = 2; // surface gap between segments, in viewBox units\n\n // Where each segment starts, precomputed so the mapper stays pure.\n const starts: number[] = [];\n data.reduce((acc, d) => {\n starts.push(acc);\n return acc + (C * d.value) / total;\n }, 0);\n\n // The centre reads the hovered share; at rest, the largest one.\n const largest = data.reduce((best, d, i) => (d.value > (data[best]?.value ?? -Infinity) ? i : best), 0);\n const shown = data[active ?? largest];\n\n return (\n
\n
\n \n {data.map((d, i) => {\n const length = (C * d.value) / total;\n return (\n setActive(i)}\n onMouseLeave={() => setActive(null)}\n className={cn(\n \"cursor-pointer transition-[stroke-width,opacity] duration-200\",\n active !== null && active !== i && \"opacity-40\",\n )}\n />\n );\n })}\n \n {shown && (\n
\n
\n

\n {prefix}\n {shown.value}\n {suffix}\n

\n

{active === null ? centerLabel : hoverLabel}

\n
\n
\n )}\n
\n
    \n {data.map((d, i) => (\n setActive(i)}\n onMouseLeave={() => setActive(null)}\n className={cn(\n \"flex items-start gap-2.5 transition-opacity\",\n active !== null && active !== i && \"opacity-50\",\n )}\n >\n \n {d.label}\n \n {prefix}\n {d.value}\n {suffix}\n \n \n ))}\n
\n
\n );\n}\n\n// ==========================================\n// 5. STACKED BAR (one bar split into shares, legend below)\n// ==========================================\nfunction StackedBarChart({\n data,\n shareColor,\n prefix,\n suffix,\n}: {\n data: ChartDataPoint[];\n shareColor: (d: ChartDataPoint, i: number) => string;\n prefix: string;\n suffix: string;\n}) {\n const total = data.reduce((sum, d) => sum + d.value, 0) || 1;\n return (\n
\n
\n {data.map((d, i) => (\n \n ))}\n
\n
    \n {data.map((d, i) => (\n
  • \n \n {d.label}\n \n {prefix}\n {d.value}\n {suffix}\n \n
    • \n ))}\n
\n
\n );\n}\n\n// ==========================================\n// 6. TRAFFIC SOURCES & VISITORS BY COUNTRY (Dashboard Breakdown Visualizations)\n// ==========================================\nconst integerFormat = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 0 });\nconst compactFormat = new Intl.NumberFormat(\"en-US\", {\n notation: \"compact\",\n maximumFractionDigits: 1,\n});\n\nconst formatNumber = (value: number) => integerFormat.format(value);\nconst formatCompact = (value: number) =>\n Math.abs(value) < 10000 ? formatNumber(value) : compactFormat.format(value);\nconst formatShare = (share: number) =>\n share <= 0 ? \"0%\" : share < 0.01 ? \"<1%\" : `${Math.round(share * 100)}%`;\nconst formatRate = (rate: number) =>\n rate === 0 ? \"0%\" : `${(rate * 100).toFixed(rate < 0.1 ? 1 : 0)}%`;\nconst plural = (count: number, [one, many]: [string, string]) =>\n count === 1 ? one : many;\nconst sumValues = (values: number[]) => values.reduce((total, value) => total + value, 0);\n\ninterface BreakdownSlice {\n key: string;\n name: string;\n value: number;\n share: number;\n color: string;\n code?: string;\n}\n\nfunction composeBreakdownShares(\n shares: ChartDataPoint[],\n palette: string[] = DASH_COLORS\n): { slices: BreakdownSlice[]; total: number } {\n const rows = [...shares].filter((s) => s.value > 0).sort((a, b) => b.value - a.value);\n const total = sumValues(rows.map((r) => r.value));\n if (!total) return { slices: [], total: 0 };\n const top = rows.slice(0, rows.length > 4 ? 3 : 4);\n const rest = rows.slice(top.length);\n const slices: BreakdownSlice[] = top.map((row, index) => ({\n key: row.id || row.label,\n name: row.label,\n value: row.value,\n share: row.value / total,\n color: row.color || palette[index % palette.length] || \"#94a3b8\",\n code: row.code,\n }));\n if (rest.length) {\n const value = sumValues(rest.map((r) => r.value));\n slices.push({\n key: \"__other\",\n name: `Other (${rest.length})`,\n value,\n share: value / total,\n color: \"#94a3b8\",\n });\n }\n return { slices, total };\n}\n\nfunction allocateGaugeUnits(slices: BreakdownSlice[], units: number): (BreakdownSlice | null)[] {\n const total = sumValues(slices.map((slice) => slice.value));\n if (!total) return Array.from({ length: units }, () => null);\n const exact = slices.map((slice) => (slice.value / total) * units);\n const counts = exact.map(Math.floor);\n let left = units - sumValues(counts);\n exact\n .map((value, index) => ({ index, rest: value - Math.floor(value) }))\n .sort((a, b) => b.rest - a.rest)\n .forEach(({ index }) => {\n if (left > 0) {\n counts[index] = (counts[index] ?? 0) + 1;\n left -= 1;\n }\n });\n return slices.flatMap((slice, index) => Array.from({ length: counts[index] ?? 0 }, () => slice));\n}\n\nconst GAUGE_TICKS = 44;\n\nfunction TickGauge({\n slices,\n focus,\n onFocus,\n label,\n children,\n}: {\n slices: BreakdownSlice[];\n focus: string | null;\n onFocus: (key: string | null) => void;\n label: string;\n children: React.ReactNode;\n}) {\n const units = allocateGaugeUnits(slices, GAUGE_TICKS);\n return (\n
\n \n {units.map((unit, index) => {\n const angle = Math.PI - (index / (GAUGE_TICKS - 1)) * Math.PI;\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n return (\n onFocus(unit.key) : undefined}\n onPointerLeave={unit ? () => onFocus(null) : undefined}\n />\n );\n })}\n \n
\n {children}\n
\n
\n );\n}\n\nfunction Barcode({\n slices,\n focus,\n onFocus,\n}: {\n slices: BreakdownSlice[];\n focus: string | null;\n onFocus: (key: string | null) => void;\n}) {\n const units = allocateGaugeUnits(slices, 48);\n return (\n onFocus(null)}\n >\n {units.map((unit, index) => (\n 0 && units[index - 1]?.key !== unit?.key && \"ml-1.5\",\n focus && focus !== unit?.key && \"opacity-25\",\n !unit && \"bg-muted\"\n )}\n style={{ backgroundColor: unit?.color }}\n onPointerEnter={() => onFocus(unit?.key ?? null)}\n />\n ))}\n \n );\n}\n\nfunction BreakdownList({\n slices,\n focus,\n onFocus,\n showCodes = false,\n className,\n}: {\n slices: BreakdownSlice[];\n focus: string | null;\n onFocus: (key: string | null) => void;\n showCodes?: boolean;\n className?: string;\n}) {\n return (\n
    onFocus(null)}>\n {slices.map((slice) => (\n onFocus(slice.key)}\n onClick={() => onFocus(focus === slice.key ? null : slice.key)}\n className={cn(\n \"flex items-center gap-3 rounded-xl px-3 py-2.5 transition-all duration-150 cursor-pointer select-none\",\n focus === slice.key\n ? \"bg-muted/80 translate-x-1\"\n : \"hover:bg-muted/50 hover:translate-x-0.5\"\n )}\n >\n \n {showCodes && (\n \n {slice.code ?? \"··\"}\n \n )}\n {slice.name}\n {formatNumber(slice.value)}\n \n {formatShare(slice.share)}\n \n \n ))}\n
\n );\n}\n\nfunction ConversionRate({ signUps, visits }: { signUps: number; visits: number }) {\n const rate = signUps / (visits || 1);\n const valid = rate <= 1;\n return (\n
\n
\n
\n
\n Visit to sign-up rate\n \n \n \n \n \n New sign-ups divided by the visits in the same period.\n \n \n
\n

{valid ? formatRate(rate) : \"—\"}

\n
\n
\n
\n
\n

\n {valid\n ? `${formatNumber(signUps)} ${plural(signUps, [\"sign-up\", \"sign-ups\"])} from ${formatNumber(visits)} ${plural(visits, [\"visit\", \"visits\"])}`\n : `${formatNumber(signUps)} sign-ups outnumber the ${formatNumber(visits)} tracked visits.`}\n

\n
\n
\n );\n}\n\nexport interface TrafficSourcesChartProps {\n data?: ChartDataPoint[];\n title?: string;\n caption?: string;\n signUps?: number;\n showConversionRate?: boolean;\n className?: string;\n colors?: string[];\n unitLabel?: string;\n pluralUnitLabel?: string;\n href?: string;\n}\n\nexport function TrafficSourcesChart({\n data = [\n { label: \"Direct\", value: 3420 },\n { label: \"Google Search\", value: 2180 },\n { label: \"GitHub\", value: 1450 },\n { label: \"Twitter / X\", value: 890 },\n { label: \"LinkedIn\", value: 430 },\n ],\n title = \"Traffic sources\",\n caption = \"Today\",\n signUps = 412,\n showConversionRate = true,\n className,\n colors = DASH_COLORS,\n unitLabel = \"visit\",\n pluralUnitLabel = \"visits\",\n href,\n}: TrafficSourcesChartProps) {\n const id = useId();\n const [focus, setFocus] = useState(null);\n const { slices, total } = useMemo(() => composeBreakdownShares(data, colors), [data, colors]);\n const gaugeLabel = total\n ? `Visits by source: ${slices.map((slice) => `${slice.name} ${formatShare(slice.share)}`).join(\", \")}`\n : `No visits yet`;\n\n return (\n \n
\n
\n

\n {title}\n

\n {caption &&

{caption}

}\n
\n {href && (\n \n \n \n )}\n
\n\n
\n \n \n {formatCompact(total)}\n \n {plural(total, [unitLabel, pluralUnitLabel])}\n \n\n {total ? (\n <>\n \n {showConversionRate && signUps !== undefined && (\n \n )}\n \n ) : (\n

\n No visits recorded yet.\n

\n )}\n
\n
\n );\n}\n\nexport interface VisitorsByCountryChartProps {\n data?: ChartDataPoint[];\n title?: string;\n caption?: string;\n className?: string;\n colors?: string[];\n showCodes?: boolean;\n href?: string;\n}\n\nexport function VisitorsByCountryChart({\n data = [\n { label: \"United States\", value: 4250, code: \"US\" },\n { label: \"Germany\", value: 1820, code: \"DE\" },\n { label: \"United Kingdom\", value: 1340, code: \"GB\" },\n { label: \"India\", value: 980, code: \"IN\" },\n { label: \"Canada\", value: 650, code: \"CA\" },\n { label: \"France\", value: 420, code: \"FR\" },\n ],\n title = \"Visitors by country\",\n caption = \"Today\",\n className,\n colors = DASH_COLORS,\n showCodes = true,\n href,\n}: VisitorsByCountryChartProps) {\n const id = useId();\n const [focus, setFocus] = useState(null);\n const { slices, total } = useMemo(() => composeBreakdownShares(data, colors), [data, colors]);\n const countryCount = data.filter((item) => item.value > 0).length;\n const leader = slices[0];\n\n return (\n \n
\n
\n

\n {title}\n

\n {caption &&

{caption}

}\n
\n {href && (\n \n \n \n )}\n
\n\n {!total || !leader ? (\n

\n Countries appear here once visitors arrive.\n

\n ) : (\n <>\n
\n

\n \n {formatNumber(countryCount)}\n \n {plural(countryCount, [\"country\", \"countries\"])}\n

\n

\n {leader.name} accounts for {formatShare(leader.share)} of visits.\n

\n
\n \n \n \n )}\n \n );\n}\n\n// ==========================================\n// 7. METRICS OVERVIEW CHART (Multi-Tab Columns & Trend Spline)\n// ==========================================\nfunction DeltaBadge({ change, className }: { change: number; className?: string }) {\n const rounded = Math.abs(change) < 0.05 ? 0 : change;\n const direction = rounded > 0 ? \"up\" : rounded < 0 ? \"down\" : \"flat\";\n const Icon = direction === \"up\" ? ArrowUpRight : direction === \"down\" ? ArrowDownRight : Minus;\n return (\n \n \n \n {direction === \"up\" ? \"Up \" : direction === \"down\" ? \"Down \" : \"No change, \"}\n \n {formatChange(rounded)}\n \n );\n}\n\nconst formatMoney = (value: number, currency: string, compact = false) =>\n new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency,\n notation: compact && Math.abs(value) >= 10000 ? \"compact\" : \"standard\",\n maximumFractionDigits: compact || Math.abs(value) >= 1000 ? 0 : 2,\n }).format(value);\n\nconst formatChange = (change: number) => {\n const size = Math.abs(change);\n const digits = size < 10 ? size.toFixed(1) : String(Math.round(size));\n return `${change > 0 ? \"+\" : change < 0 ? \"−\" : \"\"}${digits}%`;\n};\n\nconst currencySymbol = (currency: string) =>\n new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency })\n .formatToParts(0)\n .find((part) => part.type === \"currency\")?.value ?? \"\";\n\nfunction niceCeiling(value: number) {\n if (value <= 0) return 1;\n const power = 10 ** Math.floor(Math.log10(value));\n const fraction = value / power;\n const nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;\n return nice * power;\n}\n\nfunction axisTicks(ceiling: number, money: boolean, empty: boolean) {\n if (empty) return [0];\n const half = ceiling / 2;\n return !money && !Number.isInteger(half) ? [0, ceiling] : [0, half, ceiling];\n}\n\ninterface ResolvedOverviewMetric {\n metric: MetricTabItem;\n points: MetricTabPoint[];\n current: number;\n change: number | null;\n total: number;\n average: number;\n format: (value: number) => string;\n formatShort: (value: number) => string;\n}\n\nfunction ColumnsChart({ entry }: { entry: ResolvedOverviewMetric }) {\n const { points } = entry;\n const [inspected, setInspected] = useState(null);\n const lastIndex = points.length - 1;\n const ceiling = niceCeiling(Math.max(0, ...points.map((point) => point.value)));\n const empty = entry.total === 0;\n const ticks = axisTicks(ceiling, Boolean(entry.metric.currency), empty);\n const shown = empty ? inspected : (inspected ?? lastIndex);\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const from = inspected ?? lastIndex;\n const moves: Record = {\n ArrowLeft: Math.max(0, from - 1),\n ArrowRight: Math.min(lastIndex, from + 1),\n Home: 0,\n End: lastIndex,\n };\n const move = moves[event.key];\n if (move !== undefined) {\n event.preventDefault();\n setInspected(move);\n } else if (event.key === \"Escape\") {\n setInspected(null);\n }\n };\n\n return (\n
\n setInspected(null)}\n onPointerLeave={(event) => {\n if (event.pointerType !== \"touch\") setInspected(null);\n }}\n className=\"relative rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-primary/60\"\n >\n
\n
\n
\n {ticks.map((tick) => (\n \n {entry.formatShort(tick)}\n \n ))}\n
\n
\n {entry.average > 0 && !empty && (\n \n )}\n
\n {points.map((point, index) => {\n const percent = (point.value / ceiling) * 100;\n const isCurrent = index === lastIndex;\n const isInspected = index === inspected;\n return (\n setInspected(index)}\n onPointerDown={() => setInspected(index)}\n >\n
\n {point.value > 0 && (\n \n )}\n {index === shown && (\n \n {isInspected ? (\n
\n

{entry.format(point.value)}

\n

{point.fullLabel ?? point.label}

\n
\n ) : (\n \n {entry.formatShort(point.value)}\n \n )}\n
\n )}\n
\n
\n );\n })}\n
\n
\n
\n \n
\n {points.map((point, index) => (\n \n {point.shortLabel ?? point.label}\n {point.label}\n \n ))}\n
\n \n \n );\n}\n\nexport const defaultOverviewMetrics: MetricTabItem[] = [\n {\n id: \"users\",\n label: \"New users\",\n icon: ,\n change: 9.1,\n points: [\n { label: \"Jan\", shortLabel: \"J\", fullLabel: \"January\", value: 850 },\n { label: \"Feb\", shortLabel: \"F\", fullLabel: \"February\", value: 940 },\n { label: \"Mar\", shortLabel: \"M\", fullLabel: \"March\", value: 1050 },\n { label: \"Apr\", shortLabel: \"A\", fullLabel: \"April\", value: 1000 },\n { label: \"May\", shortLabel: \"M\", fullLabel: \"May\", value: 1120 },\n { label: \"Jun\", shortLabel: \"J\", fullLabel: \"June\", value: 1200 },\n { label: \"Jul\", shortLabel: \"J\", fullLabel: \"July\", value: 1180 },\n { label: \"Aug\", shortLabel: \"A\", fullLabel: \"August\", value: 1280 },\n { label: \"Sep\", shortLabel: \"S\", fullLabel: \"September\", value: 1094 },\n ],\n },\n {\n id: \"posts\",\n label: \"Posts\",\n icon: ,\n change: 5.6,\n points: [\n { label: \"Jan\", shortLabel: \"J\", fullLabel: \"January\", value: 110 },\n { label: \"Feb\", shortLabel: \"F\", fullLabel: \"February\", value: 125 },\n { label: \"Mar\", shortLabel: \"M\", fullLabel: \"March\", value: 130 },\n { label: \"Apr\", shortLabel: \"A\", fullLabel: \"April\", value: 120 },\n { label: \"May\", shortLabel: \"M\", fullLabel: \"May\", value: 140 },\n { label: \"Jun\", shortLabel: \"J\", fullLabel: \"June\", value: 150 },\n { label: \"Jul\", shortLabel: \"J\", fullLabel: \"July\", value: 145 },\n { label: \"Aug\", shortLabel: \"A\", fullLabel: \"August\", value: 160 },\n { label: \"Sep\", shortLabel: \"S\", fullLabel: \"September\", value: 149 },\n ],\n },\n {\n id: \"messages\",\n label: \"Messages\",\n icon: ,\n change: 4.4,\n points: [\n { label: \"Jan\", shortLabel: \"J\", fullLabel: \"January\", value: 420 },\n { label: \"Feb\", shortLabel: \"F\", fullLabel: \"February\", value: 460 },\n { label: \"Mar\", shortLabel: \"M\", fullLabel: \"March\", value: 490 },\n { label: \"Apr\", shortLabel: \"A\", fullLabel: \"April\", value: 470 },\n { label: \"May\", shortLabel: \"M\", fullLabel: \"May\", value: 520 },\n { label: \"Jun\", shortLabel: \"J\", fullLabel: \"June\", value: 580 },\n { label: \"Jul\", shortLabel: \"J\", fullLabel: \"July\", value: 550 },\n { label: \"Aug\", shortLabel: \"A\", fullLabel: \"August\", value: 610 },\n { label: \"Sep\", shortLabel: \"S\", fullLabel: \"September\", value: 571 },\n ],\n },\n {\n id: \"revenue\",\n label: \"Revenue\",\n icon: ,\n currency: \"USD\",\n change: 7.7,\n points: [\n { label: \"Jan\", shortLabel: \"J\", fullLabel: \"January\", value: 52000 },\n { label: \"Feb\", shortLabel: \"F\", fullLabel: \"February\", value: 58000 },\n { label: \"Mar\", shortLabel: \"M\", fullLabel: \"March\", value: 64000 },\n { label: \"Apr\", shortLabel: \"A\", fullLabel: \"April\", value: 61000 },\n { label: \"May\", shortLabel: \"M\", fullLabel: \"May\", value: 69000 },\n { label: \"Jun\", shortLabel: \"J\", fullLabel: \"June\", value: 74000 },\n { label: \"Jul\", shortLabel: \"J\", fullLabel: \"July\", value: 71000 },\n { label: \"Aug\", shortLabel: \"A\", fullLabel: \"August\", value: 82000 },\n { label: \"Sep\", shortLabel: \"S\", fullLabel: \"September\", value: 77400 },\n ],\n },\n];\n\nexport interface MetricsOverviewChartProps {\n metrics?: MetricTabItem[];\n title?: string;\n compareCaption?: string;\n periodLabel?: string;\n className?: string;\n defaultMetricId?: string;\n}\n\nexport function MetricsOverviewChart({\n metrics = defaultOverviewMetrics,\n title = \"This year by month\",\n compareCaption = \"vs last month\",\n periodLabel = \"a month\",\n className,\n defaultMetricId,\n}: MetricsOverviewChartProps) {\n const [activeId, setActiveId] = useState(defaultMetricId || metrics[0]?.id || \"\");\n const [form, setForm] = useState<\"columns\" | \"line\">(\"columns\");\n\n const resolved: ResolvedOverviewMetric[] = useMemo(\n () =>\n metrics.map((metric) => {\n const points = metric.points;\n const total = sumValues(points.map((p) => p.value));\n const currency = metric.currency;\n return {\n metric,\n points,\n current: points[points.length - 1]?.value ?? 0,\n change: metric.change ?? null,\n total,\n average: points.length ? total / points.length : 0,\n format: currency ? (value: number) => formatMoney(value, currency) : formatNumber,\n formatShort: currency ? (value: number) => formatMoney(value, currency, true) : formatNumber,\n };\n }),\n [metrics],\n );\n\n const active = resolved.find((entry) => entry.metric.id === activeId) ?? resolved[0];\n\n return (\n \n {/* Metric Tabs */}\n \n {resolved.map((entry) => {\n const selected = entry.metric.id === active?.metric.id;\n return (\n setActiveId(entry.metric.id)}\n className={cn(\n \"group relative flex min-w-0 flex-1 basis-0 flex-col items-start gap-1 bg-card px-2.5 py-3 text-left transition-all duration-200 hover:bg-muted/40 cursor-pointer sm:flex-auto sm:gap-1.5 sm:px-4 sm:py-3.5 select-none\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/60\",\n )}\n >\n \n \n {entry.metric.icon && (\n \n {entry.metric.icon}\n \n )}\n {entry.metric.label}\n \n \n \n {entry.formatShort(entry.current)}\n \n {entry.change !== null && (\n \n )}\n \n \n );\n })}\n \n\n {active && (\n
\n
\n
\n
\n {title}\n {active.change !== null && compareCaption && (\n <>\n \n {compareCaption}\n \n )}\n
\n
\n {active.points.length > 0 && (\n
\n
\n
Total
\n
{active.formatShort(active.total)}
\n
\n
\n
\n \n Avg\n Average\n
\n
\n {active.formatShort(active.average)}{\" \"}\n {periodLabel}\n
\n
\n
\n )}\n {\n if (next === \"columns\" || next === \"line\") setForm(next);\n }}\n aria-label=\"Chart style\"\n >\n \n \n \n \n \n \n \n
\n
\n\n
\n {form === \"line\" ? (\n
\n ({ label: point.label, value: point.value }))}\n color=\"var(--primary)\"\n height={270}\n valuePrefix={active.metric.currency ? currencySymbol(active.metric.currency) : \"\"}\n />\n
\n ) : (\n \n )}\n
\n
\n
\n )}\n \n );\n}\n", "type": "registry:component", "target": "components/custom/blocks/ChartBlock.tsx" } ], "docs": "Named exports: ChartBlock. `data` takes { label, value, color? }; switch presentation with `type` (bar | line | pie | donut | donut-legend | stacked-bar) and set `height` in pixels for the axis charts. The two legend types colour each share from `colors` (theme accent first) and take `centerLabel` / `hoverLabel`. Hand-drawn SVG with no chart library, so bundle cost is nil — but there are no axes or scales beyond what is drawn. Use a real charting library for analytical work.", "categories": [ "data-display" ], "type": "registry:component" }