{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sparkline", "title": "Sparkline", "description": "A trend line small enough for a table cell, with the change since the first value and a readout you can move along it.", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/default/sparkline/sparkline.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type SparklineProps = Omit<\n React.HTMLAttributes,\n \"children\"\n> & {\n /** One value per step, oldest first. null is a gap in the line. */\n data: readonly (number | null)[]\n /** What the line measures. Names the chart for assistive technology. */\n label: string\n /** A name for each step, such as a date, used by the readout and the table. */\n labels?: readonly string[]\n /** Fills the space under the line with a light wash. */\n area?: boolean\n /** Shows the change from the first value to the latest. Defaults to true. */\n showChange?: boolean\n /** Which way is good news. Decides which change reads as a warning. */\n goodDirection?: \"up\" | \"down\"\n /** Lets a pointer or the arrow keys read any point. Defaults to true. */\n scrub?: boolean\n /** Adds a visually hidden table of every value. */\n table?: boolean\n /** Passed to Intl.NumberFormat for the values. */\n format?: Intl.NumberFormatOptions\n locale?: string\n /** Any CSS colour. Defaults to the theme's first chart colour, then primary. */\n color?: string\n /** Height of the plot in pixels. Its width follows the element. */\n height?: number\n}\n\ntype Point = { index: number; value: number }\n\nconst VIEW_WIDTH = 1000\nconst INSET = 4\n\nfunction segmentsOf(data: readonly (number | null)[]) {\n const segments: Point[][] = []\n let current: Point[] = []\n\n data.forEach((value, index) => {\n if (value === null || !Number.isFinite(value)) {\n if (current.length) segments.push(current)\n current = []\n return\n }\n current.push({ index, value })\n })\n if (current.length) segments.push(current)\n\n return segments\n}\n\nfunction nearest(points: readonly Point[], index: number) {\n return points.reduce(\n (best, point) =>\n !best || Math.abs(point.index - index) < Math.abs(best.index - index)\n ? point\n : best,\n undefined\n )\n}\n\nexport function Sparkline({\n data,\n label,\n labels,\n area = false,\n showChange = true,\n goodDirection = \"up\",\n scrub = true,\n table = false,\n format,\n locale,\n color = \"var(--chart-1, var(--primary))\",\n height = 32,\n className,\n ...rootProps\n}: SparklineProps) {\n const [active, setActive] = React.useState(null)\n\n const numbers = React.useMemo(\n () => new Intl.NumberFormat(locale, format),\n [format, locale]\n )\n const percent = React.useMemo(\n () =>\n new Intl.NumberFormat(locale, {\n style: \"percent\",\n maximumFractionDigits: 1,\n }),\n [locale]\n )\n const signed = React.useMemo(\n () =>\n new Intl.NumberFormat(locale, {\n style: \"percent\",\n maximumFractionDigits: 1,\n signDisplay: \"exceptZero\",\n }),\n [locale]\n )\n\n const segments = segmentsOf(data)\n const points = segments.flat()\n const first = points[0]\n const latest = points[points.length - 1]\n\n const values = points.map((point) => point.value)\n const min = values.length ? Math.min(...values) : 0\n const max = values.length ? Math.max(...values) : 0\n const span = max - min\n const plotHeight = Math.max(height - INSET * 2, 1)\n\n const x = (index: number) =>\n data.length > 1 ? (index / (data.length - 1)) * VIEW_WIDTH : VIEW_WIDTH / 2\n const y = (value: number) =>\n span === 0 ? height / 2 : INSET + ((max - value) / span) * plotHeight\n const xPercent = (index: number) => (x(index) / VIEW_WIDTH) * 100\n\n const baseline = y(Math.min(Math.max(0, min), max))\n\n const change =\n first && latest && points.length > 1 && first.value !== 0\n ? (latest.value - first.value) / Math.abs(first.value)\n : null\n const direction =\n change === null || change === 0 ? \"flat\" : change > 0 ? \"up\" : \"down\"\n const good = direction === \"flat\" || direction === goodDirection\n\n const nameOf = (index: number) => labels?.[index] ?? `Point ${index + 1}`\n const missing = data.length - points.length\n\n const summary = latest\n ? [\n `${label}.`,\n points.length > 1\n ? `Low ${numbers.format(min)}, high ${numbers.format(max)}, latest ${numbers.format(latest.value)}.`\n : `One value, ${numbers.format(latest.value)}.`,\n change === null\n ? \"\"\n : direction === \"flat\"\n ? \"Unchanged from the first value.\"\n : `${direction === \"up\" ? \"Up\" : \"Down\"} ${percent.format(Math.abs(change))} from the first value.`,\n missing ? `${missing} missing.` : \"\",\n ]\n .filter(Boolean)\n .join(\" \")\n : `${label}. No data.`\n\n const shown =\n active === null ? null : (points.find((p) => p.index === active) ?? null)\n const dot = shown ?? latest\n\n function scrubTo(clientX: number, element: HTMLElement) {\n if (!points.length) return\n const rect = element.getBoundingClientRect()\n const ratio = rect.width ? (clientX - rect.left) / rect.width : 1\n const index = Math.round(\n Math.min(Math.max(ratio, 0), 1) * (data.length - 1)\n )\n const point = nearest(points, index)\n if (point) setActive(point.index)\n }\n\n function handleKeyDown(event: React.KeyboardEvent) {\n if (!latest) return\n const position = Math.max(\n points.findIndex((point) => point.index === (active ?? latest.index)),\n 0\n )\n const next =\n event.key === \"ArrowLeft\" || event.key === \"ArrowDown\"\n ? points[Math.max(position - 1, 0)]\n : event.key === \"ArrowRight\" || event.key === \"ArrowUp\"\n ? points[Math.min(position + 1, points.length - 1)]\n : event.key === \"Home\"\n ? points[0]\n : event.key === \"End\"\n ? latest\n : undefined\n if (!next) return\n event.preventDefault()\n setActive(next.index)\n }\n\n const line = segments\n .map((segment) =>\n segment\n .map(\n (point, i) =>\n `${i === 0 ? \"M\" : \"L\"}${x(point.index).toFixed(2)} ${y(point.value).toFixed(2)}`\n )\n .join(\" \")\n )\n .join(\" \")\n\n const fill = segments\n .filter((segment) => segment.length > 1)\n .map((segment) => {\n const start = x(segment[0]?.index ?? 0).toFixed(2)\n const end = x(segment[segment.length - 1]?.index ?? 0).toFixed(2)\n const edge = segment\n .map(\n (point) =>\n `L${x(point.index).toFixed(2)} ${y(point.value).toFixed(2)}`\n )\n .join(\" \")\n return `M${start} ${baseline} ${edge} L${end} ${baseline} Z`\n })\n .join(\" \")\n\n const readoutAlign = shown\n ? xPercent(shown.index) < 20\n ? \"translate-x-0\"\n : xPercent(shown.index) > 80\n ? \"-translate-x-full\"\n : \"-translate-x-1/2\"\n : \"\"\n\n return (\n \n
\n
\n
\n \n {min < 0 && max > 0 ? (\n \n ) : null}\n {area && fill ? (\n \n ) : null}\n {line ? (\n \n ) : null}\n \n {dot ? (\n \n ) : null}\n
\n\n {shown ? (\n \n {labels?.[shown.index] ? (\n \n {labels[shown.index]}\n \n ) : null}\n \n {numbers.format(shown.value)}\n \n \n ) : null}\n\n {scrub && dot ? (\n setActive(null)}\n onFocus={() => setActive(dot.index)}\n onKeyDown={handleKeyDown}\n onPointerDown={(event) =>\n scrubTo(event.clientX, event.currentTarget)\n }\n onPointerLeave={() => setActive(null)}\n onPointerMove={(event) =>\n scrubTo(event.clientX, event.currentTarget)\n }\n onPointerUp={(event) => {\n if (event.pointerType !== \"mouse\") setActive(null)\n }}\n role=\"slider\"\n tabIndex={0}\n />\n ) : null}\n
\n
\n\n {showChange && change !== null ? (\n \n \n {direction === \"flat\" ? (\n \n ) : (\n \n )}\n \n {signed.format(change)}\n \n ) : null}\n\n {table ? (\n
\n \n \n \n \n \n \n \n \n \n {data.map((value, index) => (\n \n \n \n \n ))}\n \n
{label}
PointValue
{nameOf(index)}\n {value === null || !Number.isFinite(value)\n ? \"No data\"\n : numbers.format(value)}\n
\n
\n ) : null}\n \n )\n}\n", "type": "registry:ui" } ], "categories": [ "chart", "data", "statistic", "table" ], "type": "registry:ui" }