50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T3da2,export type DitherColor = | "green" | "blue" | "purple" | "pink" | "orange" | "red" | "grey"; export type AreaVariant = "gradient" | "dotted" | "hatched" | "solid"; export type StrokeVariant = "solid" | "dashed"; export type StackType = "default" | "stacked" | "percent"; export type ChartType = "area" | "line" | "bar" | "pie" | "radar"; export type SeriesKind = "area" | "line" | "bar" | "radar"; export type DotVariant = "border" | "colored-border" | "filled"; export type BloomLevel = "off" | "low" | "high" | "aura"; export type BloomBlend = "plus-lighter" | "screen" | "lighten"; export interface BloomConfig { blend?: BloomBlend; blur: number; brightness: number; opacity: number; saturate?: number; } export type BloomInput = BloomLevel | BloomConfig; export type ChartConfig = Record< string, { color: DitherColor; label?: string; } >; export type ChartRow = Record; export interface DitherCell { bold?: boolean; char: string; color?: string; dim?: boolean; inverse?: boolean; priority?: number; } export interface DotSpec { radius: number; variant: DotVariant; } export interface SeriesSpec { activeDot?: DotSpec; dataKey: string; dot?: DotSpec; isClickable: boolean; kind: SeriesKind; strokeVariant: StrokeVariant; variant: AreaVariant; } export interface AxisSpec { dataKey?: string; maxTicks?: number; tickCount?: number; tickFormatter?: (value: unknown, index: number) => string; } export interface GridSpec { horizontal: boolean; strokeDasharray: string; vertical: boolean; } export interface ChartMargins { bottom: number; left: number; right: number; top: number; } export interface DitherRenderInput { bloom: BloomInput; bloomOnHover: boolean; config: ChartConfig; data: ChartRow[]; focusDataKey: string | null; grid?: GridSpec; height: number; hovered: boolean; kind: ChartType; margins?: Partial; markerIndex: number | null; nameKey?: string; pie?: { innerRadius: number; variant: AreaVariant; valueKey: string; }; progress: number; selectedDataKey: string | null; series: SeriesSpec[]; stackType: StackType; unicode: boolean; width: number; xAxis?: AxisSpec; yAxis?: AxisSpec; } export interface DitherRenderResult { frame: DitherCell[][]; max: number; names: string[]; plot: { height: number; left: number; top: number; width: number; }; } export type DitherChartRenderer = ( input: DitherRenderInput ) => DitherRenderResult; export interface PreparedDitherChart { bands: Record; frame: DitherCell[][]; input: DitherRenderInput; max: number; names: string[]; plot: DitherRenderResult["plot"]; } const PALETTE: Record = { blue: "#3590f3", green: "#28d26e", grey: "#8c8c96", orange: "#ff9632", pink: "#f05abe", purple: "#966eff", red: "#f04646", }; const BAYER4 = [ [0, 8, 2, 10], [12, 4, 14, 6], [3, 11, 1, 9], [15, 7, 13, 5], ] as const; export const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value)); const finiteNumber = (value: unknown): number => typeof value === "number" && Number.isFinite(value) ? Math.max(0, value) : 0; export const makeFrame = (width: number, height: number): DitherCell[][] => Array.from({ length: height }, () => Array.from({ length: width }, () => ({ char: " ", priority: 0 })) ); export const paint = ( frame: DitherCell[][], x: number, y: number, cell: DitherCell ): void => { const row = frame[y]; const current = row?.[x]; if (!current || (current.priority ?? 0) > (cell.priority ?? 1)) { return; } row[x] = cell; }; const ditherChar = ( density: number, variant: AreaVariant, x: number, y: number, unicode: boolean ): string => { const threshold = ((BAYER4[y % 4]?.[x % 4] ?? 0) + 0.5) / 16; const level = clamp(density * 1.2 - threshold * 0.2, 0, 1); if (variant === "solid") { return unicode ? "█" : "#"; } if (level <= threshold * 0.68) { return " "; } if (variant === "dotted") { if (!unicode) { return "."; } return level > 0.82 ? "•" : "·"; } if (variant === "hatched") { if (!unicode) { return "/"; } return (x + y) % 2 === 0 ? "╱" : "╲"; } if (unicode) { if (level > 0.88) { return "█"; } if (level > 0.68) { return "▓"; } if (level > 0.46) { return "▒"; } if (level > 0.26) { return "░"; } return "·"; } if (level > 0.82) { return "#"; } if (level > 0.58) { return "+"; } if (level > 0.34) { return ":"; } return "."; }; export const paintDither = ( frame: DitherCell[][], x: number, y: number, density: number, variant: AreaVariant, color: string, unicode: boolean, dim: boolean, priority = 4 ): void => { let char = ditherChar(density, variant, x, y, unicode); if (char === " ") { return; } if (unicode && density > 0.9 && (x * 17 + y * 31) % 47 === 0) { char = "✦"; } paint(frame, x, y, { char, color, dim, priority }); }; export const lineChar = (unicode: boolean, active = false): string => { if (!unicode) { return active ? "O" : "*"; } return active ? "◉" : "●"; }; export const dotChar = (unicode: boolean, variant: DotVariant): string => { if (variant === "filled") { return lineChar(unicode); } return unicode ? "○" : "o"; }; export const colorFor = (config: ChartConfig, key: string): string => PALETTE[config[key]?.color ?? "grey"]; export const labelOf = (config: ChartConfig, key: string): string => config[key]?.label ?? key; export const valueAt = (row: ChartRow | undefined, key: string): number => finiteNumber(row?.[key]); export const chartNames = ( kind: ChartType, data: ChartRow[], series: SeriesSpec[], nameKey?: string ): string[] => { if (kind === "pie") { return data.map((row, index) => String(row[nameKey ?? "name"] ?? index)); } return series.map((item) => item.dataKey); }; export const computeBands = ( data: ChartRow[], series: SeriesSpec[], stackType: StackType ): { bands: Record; max: number } => { const bands: Record = {}; let max = 0; if (stackType === "default") { for (const item of series) { const itemBands: [number, number][] = []; for (const row of data) { const value = valueAt(row, item.dataKey); max = Math.max(max, value); itemBands.push([0, value]); } bands[item.dataKey] = itemBands; } return { bands, max: max || 1 }; } for (let index = 0; index < data.length; index += 1) { const row = data[index] ?? {}; const total = series.reduce( (sum, item) => sum + valueAt(row, item.dataKey), 0 ); let floor = 0; for (const item of series) { const raw = valueAt(row, item.dataKey); const value = stackType === "percent" && total > 0 ? raw / total : raw; const top = floor + value; (bands[item.dataKey] ??= [])[index] = [floor, top]; floor = top; max = Math.max(max, top); } } return { bands, max: max || 1 }; }; const defaultMargins = (input: DitherRenderInput): ChartMargins => ({ bottom: input.xAxis ? 2 : 0, left: input.yAxis ? 7 : 0, right: 0, top: 0, ...input.margins, }); export const resolvePlot = ( input: DitherRenderInput ): DitherRenderResult["plot"] => { const margins = defaultMargins(input); return { height: Math.max(2, input.height - margins.top - margins.bottom), left: clamp(margins.left, 0, Math.max(0, input.width - 2)), top: clamp(margins.top, 0, Math.max(0, input.height - 2)), width: Math.max(2, input.width - margins.left - margins.right), }; }; export const xPosition = ( index: number, count: number, left: number, width: number ): number => { if (count <= 1) { return left + Math.floor((width - 1) / 2); } return left + Math.round((index / (count - 1)) * (width - 1)); }; export const yPosition = ( value: number, max: number, top: number, height: number ): number => top + height - 1 - Math.round((value / max) * (height - 1)); const formatNumber = (value: number): string => { if (Math.abs(value) >= 1000) { return `${(value / 1000).toFixed(1)}k`; } if (Number.isInteger(value)) { return String(value); } return value.toFixed(1); }; export const paintGrid = ( frame: DitherCell[][], input: DitherRenderInput, plot: DitherRenderResult["plot"], max: number ): void => { const { grid } = input; if (!grid) { return; } const char = input.unicode ? "┄" : "."; if (grid.horizontal) { for (let tick = 0; tick < 4; tick += 1) { const value = (tick / 3) * max; const y = yPosition(value, max, plot.top, plot.height); for (let x = plot.left; x < plot.left + plot.width; x += 1) { if (!grid.strokeDasharray || x % 2 === 0) { paint(frame, x, y, { char, dim: true, priority: 1 }); } } } } if (grid.vertical) { const step = Math.max(1, Math.ceil(input.data.length / 8)); for (let index = 0; index < input.data.length; index += 1) { if (index % step !== 0) { continue; } const x = xPosition(index, input.data.length, plot.left, plot.width); for (let y = plot.top; y < plot.top + plot.height; y += 1) { if (!grid.strokeDasharray || y % 2 === 0) { paint(frame, x, y, { char: input.unicode ? "┊" : ":", dim: true, priority: 1, }); } } } } }; export const paintCrosshair = ( frame: DitherCell[][], input: DitherRenderInput, plot: DitherRenderResult["plot"] ): void => { if (input.markerIndex === null || input.data.length === 0) { return; } const index = clamp(input.markerIndex, 0, input.data.length - 1); const x = xPosition(index, input.data.length, plot.left, plot.width); for (let y = plot.top; y < plot.top + plot.height; y += 1) { paint(frame, x, y, { char: input.unicode ? "┊" : ":", dim: true, priority: 2, }); } }; const paintYAxis = ( frame: DitherCell[][], input: DitherRenderInput, plot: DitherRenderResult["plot"], max: number ): void => { if (!input.yAxis) { return; } const count = Math.max(2, input.yAxis.tickCount ?? 4); for (let tick = 0; tick < count; tick += 1) { const value = (tick / (count - 1)) * max; const y = yPosition(value, max, plot.top, plot.height); const formatter = input.yAxis.tickFormatter; const label = formatter ? formatter(value, tick) : formatNumber(value); const fitted = label.slice(-Math.max(1, plot.left - 1)); const padded = fitted.padStart(Math.max(1, plot.left - 1)); for (let index = 0; index < padded.length; index += 1) { paint(frame, index, y, { char: padded[index] ?? " ", dim: true, priority: 8, }); } paint(frame, plot.left - 1, y, { char: input.unicode ? "┤" : "|", dim: true, priority: 8, }); } }; const paintXAxis = ( frame: DitherCell[][], input: DitherRenderInput, plot: DitherRenderResult["plot"] ): void => { if (!input.xAxis || input.data.length === 0) { return; } const axisY = plot.top + plot.height; if (axisY < frame.length) { for (let x = plot.left; x < plot.left + plot.width; x += 1) { paint(frame, x, axisY, { char: input.unicode ? "─" : "-", dim: true, priority: 8, }); } } const maxTicks = Math.max(2, input.xAxis.maxTicks ?? 8); const step = Math.max(1, Math.ceil(input.data.length / maxTicks)); for (let index = 0; index < input.data.length; index += 1) { if (index % step !== 0 && index !== input.data.length - 1) { continue; } const row = input.data[index] ?? {}; const raw = input.xAxis.dataKey ? row[input.xAxis.dataKey] : index; const label = input.xAxis.tickFormatter ? input.xAxis.tickFormatter(raw, index) : String(raw ?? ""); const x = xPosition(index, input.data.length, plot.left, plot.width); const start = clamp( x - Math.floor(label.length / 2), plot.left, Math.max(plot.left, plot.left + plot.width - label.length) ); const visibleLabel = label.slice(0, plot.width); for (let offset = 0; offset < visibleLabel.length; offset += 1) { paint(frame, start + offset, axisY + 1, { char: visibleLabel[offset] ?? " ", dim: true, priority: 8, }); } } }; export const paintAxes = ( frame: DitherCell[][], input: DitherRenderInput, plot: DitherRenderResult["plot"], max: number ): void => { paintYAxis(frame, input, plot, max); paintXAxis(frame, input, plot); }; const bloomLevel = (input: BloomInput): BloomLevel => { if (typeof input === "string") { return input; } if (input.blur >= 10) { return "aura"; } if (input.blur >= 5) { return "high"; } return "low"; }; interface BloomSource { color: string; x: number; y: number; } const bloomSources = (frame: DitherCell[][]): BloomSource[] => { const sources: BloomSource[] = []; for (let y = 0; y < frame.length; y += 1) { const row = frame[y] ?? []; for (let x = 0; x < row.length; x += 1) { const cell = row[x]; if ((cell?.priority ?? 0) >= 4 && cell?.color) { sources.push({ color: cell.color, x, y }); } } } return sources; }; const paintBloomSource = ( frame: DitherCell[][], input: DitherRenderInput, radius: number, source: BloomSource ): void => { for (let dy = -radius; dy <= radius; dy += 1) { for (let dx = -radius; dx <= radius; dx += 1) { if (dx === 0 && dy === 0) { continue; } const distance = Math.abs(dx) + Math.abs(dy); if (distance > radius + 1) { continue; } paint(frame, source.x + dx, source.y + dy, { char: input.unicode ? "·" : ".", color: source.color, dim: true, priority: 2, }); } } }; const applyBloom = (frame: DitherCell[][], input: DitherRenderInput): void => { const level = bloomLevel(input.bloom); if (level === "off" || (input.bloomOnHover && !input.hovered)) { return; } const configuredRadius = typeof input.bloom === "string" ? undefined : clamp(Math.round(input.bloom.blur / 3), 1, 3); const radius = Math.max( 1, Math.round(configuredRadius ?? (level === "aura" ? 2 : 1)) ); for (const source of bloomSources(frame)) { paintBloomSource(frame, input, radius, source); } }; export const prepareDitherChart = ( input: DitherRenderInput, kind: ChartType ): PreparedDitherChart => { const width = Math.max(8, Math.floor(input.width)); const height = Math.max(3, Math.floor(input.height)); const normalizedInput = { ...input, height, kind, width }; const frame = makeFrame(width, height); const plot = resolvePlot(normalizedInput); const { bands, max } = computeBands( normalizedInput.data, normalizedInput.series, normalizedInput.stackType ); const names = chartNames( kind, normalizedInput.data, normalizedInput.series, normalizedInput.nameKey ); return { bands, frame, input: normalizedInput, max, names, plot }; }; export const finishDitherChart = ({ frame, input, max, names, plot, }: PreparedDitherChart): DitherRenderResult => { applyBloom(frame, input); return { frame, max, names, plot }; }; export const easeInOutCubic = (value: number): number => value < 0.5 ? 4 * value * value * value : 1 - (-2 * value + 2) ** 3 / 2; 54:Ta7d,import { clamp, colorFor, finishDitherChart, lineChar, paint, paintDither, prepareDitherChart, xPosition, yPosition, } from "./dither-chart-utils"; import type { DitherChartRenderer } from "./dither-chart-utils"; export const renderDitherSparkline: DitherChartRenderer = (input) => { const prepared = prepareDitherChart(input, "area"); const { bands, frame, input: normalized, max, plot } = prepared; const [series] = normalized.series; const values = series ? (bands[series.dataKey] ?? []) : []; if (series && normalized.data.length > 0) { const reveal = Math.max(1, Math.ceil(plot.width * normalized.progress)); const color = colorFor(normalized.config, series.dataKey); for (let localX = 0; localX < reveal; localX += 1) { const sample = plot.width <= 1 ? 0 : (localX / (plot.width - 1)) * (normalized.data.length - 1); const low = Math.floor(sample); const high = Math.min(normalized.data.length - 1, Math.ceil(sample)); const amount = sample - low; const lowBand = values[low] ?? [0, 0]; const highBand = values[high] ?? lowBand; const floorValue = lowBand[0] + (highBand[0] - lowBand[0]) * amount; const topValue = lowBand[1] + (highBand[1] - lowBand[1]) * amount; const x = plot.left + localX; const yTop = yPosition(topValue, max, plot.top, plot.height); const yFloor = yPosition(floorValue, max, plot.top, plot.height); const span = Math.max(1, yFloor - yTop + 1); for (let y = yTop; y <= yFloor; y += 1) { const density = 0.92 - ((y - yTop) / span) * 0.58 + (normalized.hovered ? 0.08 : 0); paintDither( frame, x, y, density, series.variant, color, normalized.unicode, false ); } paint(frame, x, yTop, { bold: true, char: normalized.unicode ? "•" : "*", color, priority: 6, }); } if ( normalized.progress >= 0.98 && series.activeDot && normalized.markerIndex !== null ) { const index = clamp(normalized.markerIndex, 0, values.length - 1); const band = values[index]; if (band) { paint( frame, xPosition(index, values.length, plot.left, plot.width), yPosition(band[1], max, plot.top, plot.height), { bold: true, char: lineChar(normalized.unicode, true), color, inverse: series.activeDot.variant === "filled", priority: 9, } ); } } } return finishDitherChart(prepared); }; 55:T509b,/* @jsxImportSource @opentui/react */ import { useKeyboard } from "@opentui/react"; import * as React from "react"; import { useMotion } from "@/hooks/use-motion"; import { useTheme } from "@/hooks/use-theme"; import { useUnicode } from "@/hooks/use-unicode"; import { colorFor, easeInOutCubic, labelOf, valueAt, } from "@/lib/dither-chart-utils"; import type { AreaVariant, AxisSpec, BloomBlend, BloomConfig, BloomInput, ChartConfig, ChartMargins, ChartRow, ChartType, DitherCell, DitherChartRenderer, DitherColor, DotSpec, DotVariant, GridSpec, SeriesSpec, SeriesKind, StackType, StrokeVariant, } from "@/lib/dither-chart-utils"; export type { AreaVariant, BloomBlend, BloomConfig, BloomInput, ChartConfig, ChartMargins as Margins, ChartType, DitherColor, DotVariant, SeriesKind, StackType, StrokeVariant, }; type DataObject = object; interface StyledTextProps { bold?: boolean; children: React.ReactNode; dim?: boolean; fg?: string; inverse?: boolean; key?: React.Key; } const StyledText = ({ bold = false, children, dim = false, fg, inverse = false, }: StyledTextProps) => { const theme = useTheme(); const resolvedFg = inverse ? theme.colors.background : dim ? theme.colors.mutedForeground : fg; const resolvedBg = inverse ? (fg ?? theme.colors.foreground) : undefined; return ( {bold ? {children} : children} ); }; export interface SeriesProps { children?: React.ReactNode; dataKey: string; isClickable?: boolean; strokeVariant?: StrokeVariant; variant?: AreaVariant; } export interface DotProps { r?: number; variant?: DotVariant; } export interface GridProps { horizontal?: boolean; strokeDasharray?: string; vertical?: boolean; } export interface XAxisProps { dataKey?: string; maxTicks?: number; tickFormatter?: (value: unknown, index: number) => string; tickMargin?: number; } export interface YAxisProps { tickCount?: number; tickFormatter?: (value: number) => string; tickMargin?: number; } export interface LegendProps { align?: "left" | "center" | "right"; isClickable?: boolean; } export type TooltipVariant = "default" | "frosted-glass"; export interface TooltipProps { labelKey?: string; valueFormatter?: (value: number, name: string) => string; variant?: TooltipVariant; } type ChartRole = | "active-dot" | "area" | "bar" | "dot" | "grid" | "legend" | "line" | "pie" | "radar" | "tooltip" | "x-axis" | "y-axis"; type ChartPart = React.ComponentType> & { chartRole?: ChartRole; }; export function Dot(_props: DotProps): null { return null; } Dot.chartRole = "dot" as const; export function ActiveDot(_props: DotProps): null { return null; } ActiveDot.chartRole = "active-dot" as const; export function Grid(_props: GridProps): null { return null; } Grid.chartRole = "grid" as const; export function XAxis(_props: XAxisProps): null { return null; } XAxis.chartRole = "x-axis" as const; export function YAxis(_props: YAxisProps): null { return null; } YAxis.chartRole = "y-axis" as const; export function Legend(_props: LegendProps): null { return null; } Legend.chartRole = "legend" as const; export function Tooltip(_props: TooltipProps): null { return null; } Tooltip.chartRole = "tooltip" as const; interface ParsedParts { grid?: GridSpec; legend?: Required; pieVariant: AreaVariant; series: SeriesSpec[]; tooltip?: Required> & TooltipProps; xAxis?: AxisSpec; yAxis?: AxisSpec; } interface ParsedPieProps { variant?: AreaVariant; } interface ParsedRadarProps { dataKey: string; variant?: AreaVariant; } const dotSpec = (props: DotProps): DotSpec => ({ radius: props.r ?? 2, variant: props.variant ?? "border", }); const parseDots = ( children: React.ReactNode ): Pick => { const result: Pick = {}; React.Children.forEach(children, (child) => { if (!React.isValidElement(child)) { return; } const role = (child.type as ChartPart).chartRole; const props = child.props as DotProps; if (role === "dot") { result.dot = dotSpec(props); } if (role === "active-dot") { result.activeDot = dotSpec(props); } }); return result; }; const parseParts = (children: React.ReactNode): ParsedParts => { const parsed: ParsedParts = { pieVariant: "gradient", series: [] }; const visit = (nodes: React.ReactNode): void => { React.Children.forEach(nodes, (child) => { if (!React.isValidElement(child)) { return; } const role = (child.type as ChartPart).chartRole; if (!role) { const nested = (child.props as { children?: React.ReactNode }).children; if (nested) { visit(nested); } return; } if (role === "area" || role === "line" || role === "bar") { const props = child.props as SeriesProps; parsed.series.push({ ...parseDots(props.children), dataKey: props.dataKey, isClickable: props.isClickable ?? false, kind: role, strokeVariant: props.strokeVariant ?? "solid", variant: props.variant ?? "gradient", }); return; } if (role === "radar") { const props = child.props as ParsedRadarProps; parsed.series.push({ dataKey: props.dataKey, isClickable: false, kind: "radar", strokeVariant: "solid", variant: props.variant ?? "gradient", }); return; } if (role === "pie") { parsed.pieVariant = (child.props as ParsedPieProps).variant ?? "gradient"; return; } if (role === "grid") { const props = child.props as GridProps; parsed.grid = { horizontal: props.horizontal ?? true, strokeDasharray: props.strokeDasharray ?? "3 3", vertical: props.vertical ?? false, }; return; } if (role === "x-axis") { const props = child.props as XAxisProps; parsed.xAxis = { dataKey: props.dataKey, maxTicks: props.maxTicks ?? 8, tickFormatter: props.tickFormatter, }; return; } if (role === "y-axis") { const props = child.props as YAxisProps; parsed.yAxis = { tickCount: props.tickCount ?? 4, tickFormatter: props.tickFormatter ? (value) => props.tickFormatter?.(Number(value)) ?? "" : undefined, }; return; } if (role === "legend") { const props = child.props as LegendProps; parsed.legend = { align: props.align ?? "right", isClickable: props.isClickable ?? false, }; return; } if (role === "tooltip") { const props = child.props as TooltipProps; parsed.tooltip = { ...props, variant: props.variant ?? "default" }; } }); }; visit(children); return parsed; }; export interface TerminalChartOptions { className?: string; emptyMessage?: string; height?: number; isActive?: boolean; noColor?: boolean; reducedMotion?: boolean; screenReaderMode?: boolean; selectedDataKey?: string | null; showControls?: boolean; title?: string; unicode?: boolean; width?: number; } export interface InteractionOptions { bloom?: BloomInput; bloomOnHover?: boolean; defaultSelectedDataKey?: string | null; hovered?: boolean; interactive?: boolean; markerIndex?: number | null; onHoverChange?: (index: number | null) => void; onSelectionChange?: (key: string | null) => void; } export interface MotionOptions { animate?: boolean; animationDuration?: number; replayToken?: number; } export type CartesianChartProps = TerminalChartOptions & InteractionOptions & MotionOptions & { children: React.ReactNode; config: ChartConfig; data: TData[]; margins?: Partial; stackType?: StackType; }; export interface DitherChartProps extends TerminalChartOptions, InteractionOptions, MotionOptions { children: React.ReactNode; config: ChartConfig; data: ChartRow[]; dataKey?: string; kind: ChartType; innerRadius?: number; margins?: Partial; nameKey?: string; renderChart: DitherChartRenderer; stackType?: StackType; } const useEntrance = ({ animate, data, duration, reduced, replayToken, }: { animate: boolean; data: ChartRow[]; duration: number; reduced: boolean; replayToken: number; }): number => { const [progress, setProgress] = React.useState(animate && !reduced ? 0 : 1); React.useEffect(() => { if (!animate || reduced || duration <= 0) { setProgress(1); return; } const startedAt = Date.now(); setProgress(0); const timer = setInterval(() => { const elapsed = Date.now() - startedAt; const next = Math.min(1, elapsed / duration); setProgress(easeInOutCubic(next)); if (next >= 1) { clearInterval(timer); } }, 80); return () => clearInterval(timer); }, [animate, data, duration, reduced, replayToken]); return progress; }; interface CellRun extends Omit { start: number; text: string; } const cellStyleKey = (cell: DitherCell, noColor: boolean): string => [ noColor ? "" : (cell.color ?? ""), cell.bold ? "1" : "0", cell.dim ? "1" : "0", cell.inverse ? "1" : "0", ].join(":"); const rowRuns = (row: DitherCell[], noColor: boolean): CellRun[] => { const runs: CellRun[] = []; for (let index = 0; index < row.length; index += 1) { const cell = row[index]; if (!cell) { continue; } const previous = runs.at(-1); const key = cellStyleKey(cell, noColor); const previousKey = previous ? cellStyleKey( { bold: previous.bold, char: "", color: previous.color, dim: previous.dim, inverse: previous.inverse, }, noColor ) : ""; if (previous && previousKey === key) { previous.text += cell.char; continue; } runs.push({ bold: cell.bold, color: noColor ? undefined : cell.color, dim: cell.dim, inverse: cell.inverse, start: index, text: cell.char, }); } return runs; }; const clampIndex = (index: number, length: number): number | null => length > 0 ? Math.max(0, Math.min(length - 1, index)) : null; export const DitherChart = ({ animate = true, animationDuration = 900, bloom = "off", bloomOnHover = false, children, config, data, dataKey, defaultSelectedDataKey = null, emptyMessage = "No data", height = 12, hovered = false, innerRadius = 0, interactive = true, isActive = true, margins, markerIndex = null, nameKey, noColor = false, onHoverChange, onSelectionChange, reducedMotion, renderChart, replayToken = 0, screenReaderMode = false, selectedDataKey: controlledSelected, showControls = false, stackType = "default", title, unicode, width = 56, kind, }: DitherChartProps) => { const theme = useTheme(); const motion = useMotion(); const unicodeContext = useUnicode(); const parts = React.useMemo(() => parseParts(children), [children]); const names = React.useMemo( () => kind === "pie" ? data.map((row, index) => String(row[nameKey ?? "name"] ?? index)) : parts.series.map((series) => series.dataKey), [data, kind, nameKey, parts.series] ); const [hoverIndex, setHoverIndex] = React.useState(null); const [focusIndex, setFocusIndex] = React.useState(null); const [internalSelected, setInternalSelected] = React.useState( defaultSelectedDataKey ); const [localReplay, setLocalReplay] = React.useState(0); const selected = controlledSelected === undefined ? internalSelected : controlledSelected; const activeIndex = markerIndex ?? hoverIndex; const focusKey = focusIndex === null ? null : (names[focusIndex] ?? null); const selectable = (parts.legend?.isClickable ?? false) || parts.series.some((series) => series.isClickable); const reduced = reducedMotion ?? motion.reduced; const useUnicodeGlyphs = unicode ?? unicodeContext; const progress = useEntrance({ animate, data, duration: animationDuration, reduced, replayToken: replayToken + localReplay, }); const moveHover = React.useCallback( (direction: -1 | 1) => { const start = hoverIndex ?? (direction > 0 ? -1 : data.length); const next = clampIndex(start + direction, data.length); setHoverIndex(next); onHoverChange?.(next); }, [data.length, hoverIndex, onHoverChange] ); const moveFocus = React.useCallback( (direction: -1 | 1) => { if (names.length === 0) { return; } setFocusIndex((current) => { if (current === null) { return direction > 0 ? 0 : names.length - 1; } return (current + direction + names.length) % names.length; }); }, [names.length] ); const selectFocused = React.useCallback(() => { if (!selectable || names.length === 0) { return; } const key = focusKey ?? names[0] ?? null; const next = selected === key ? null : key; if (controlledSelected === undefined) { setInternalSelected(next); } onSelectionChange?.(next); }, [ controlledSelected, focusKey, names, onSelectionChange, selectable, selected, ]); useKeyboard((key) => { if (!interactive || !isActive || key.eventType === "release") { return; } const name = key.name.toLowerCase(); if (name === "left" || name === "h") { moveHover(-1); } else if (name === "right" || name === "l") { moveHover(1); } else if (name === "up" || name === "k") { moveFocus(-1); } else if (name === "down" || name === "j") { moveFocus(1); } else if (name === "return" || name === "enter" || name === "space") { selectFocused(); } else if (name === "escape") { setHoverIndex(null); setFocusIndex(null); onHoverChange?.(null); } else if (name === "r" && animate && !reduced) { setLocalReplay((value) => value + 1); } }); const rendered = React.useMemo( () => renderChart({ bloom, bloomOnHover, config, data, focusDataKey: focusKey, grid: parts.grid, height, hovered: hovered || hoverIndex !== null, kind, margins, markerIndex: activeIndex, nameKey, pie: kind === "pie" && dataKey ? { innerRadius: Math.max(0, Math.min(0.92, innerRadius)), valueKey: dataKey, variant: parts.pieVariant, } : undefined, progress, selectedDataKey: selected, series: parts.series, stackType, unicode: useUnicodeGlyphs, width, xAxis: parts.xAxis, yAxis: parts.yAxis, }), [ activeIndex, bloom, bloomOnHover, config, data, dataKey, focusKey, height, hoverIndex, hovered, innerRadius, kind, margins, nameKey, parts, progress, renderChart, selected, stackType, useUnicodeGlyphs, width, ] ); if (data.length === 0) { return ( {emptyMessage} ); } const tooltipIndex = activeIndex === null ? null : clampIndex(activeIndex, data.length); const tooltipRow = tooltipIndex === null ? undefined : data[tooltipIndex]; const tooltipLabelKey = parts.tooltip?.labelKey ?? parts.xAxis?.dataKey; const tooltipHeading = tooltipRow && tooltipLabelKey ? String(tooltipRow[tooltipLabelKey] ?? "") : kind === "pie" && tooltipIndex !== null ? names[tooltipIndex] : tooltipIndex === null ? "" : String(tooltipIndex); let tooltipNames = names; if (kind === "pie" && tooltipIndex !== null) { const pieName = names[tooltipIndex]; tooltipNames = pieName ? [pieName] : []; } if (screenReaderMode) { return ( {title && {title}} {data.map((row, index) => { const heading = kind === "pie" ? String(row[nameKey ?? "name"] ?? index) : parts.xAxis?.dataKey ? String(row[parts.xAxis.dataKey] ?? index) : String(index); const values = kind === "pie" && dataKey ? `${labelOf(config, heading)} ${valueAt(row, dataKey)}` : names .map( (name) => `${labelOf(config, name)} ${valueAt(row, name)}` ) .join(", "); return ( {`${heading}: ${values}`} ); })} ); } return ( {title && ( {title} )} {parts.legend && ( {names.map((name, index) => { const isFocused = focusIndex === index; const isSelected = selected === name; return ( {`${useUnicodeGlyphs ? "■" : "#"} ${labelOf(config, name)} `} ); })} )} {rendered.frame.map((row, rowIndex) => ( {rowRuns(row, noColor).map((run) => ( {run.bold ? {run.text} : run.text} ))} ))} {parts.tooltip && tooltipRow && tooltipIndex !== null && ( {tooltipHeading} {tooltipNames.map((name) => { const value = kind === "pie" && dataKey ? valueAt(tooltipRow, dataKey) : valueAt(tooltipRow, name); const formatted = parts.tooltip?.valueFormatter ? parts.tooltip.valueFormatter(value, name) : value.toLocaleString(); return ( {`${useUnicodeGlyphs ? "▪" : "*"} ${labelOf(config, name)} ${formatted}`} ); })} )} {showControls && interactive && ( {"←/→ inspect ↑/↓ series enter select esc clear r replay"} )} ); }; 56:T8c7,/* @jsxImportSource @opentui/react */ import * as React from "react"; import type { AreaVariant, ChartConfig, DitherColor, } from "@/lib/dither-chart-utils"; import { renderDitherSparkline } from "@/lib/dither-sparkline-utils"; import { ActiveDot, DitherChart } from "./dither-chart"; import type { InteractionOptions, MotionOptions, SeriesProps, TerminalChartOptions, } from "./dither-chart"; export type { AreaVariant, BloomBlend, BloomConfig, BloomInput, DitherColor, } from "./dither-chart"; export type SparklineProps = TerminalChartOptions & Pick< InteractionOptions, "bloom" | "bloomOnHover" | "hovered" | "markerIndex" > & MotionOptions & { color: DitherColor; data: number[]; variant?: AreaVariant; }; function SparklineArea(_props: SeriesProps): null { return null; } SparklineArea.chartRole = "area" as const; export function Sparkline({ animate = false, animationDuration, bloom, bloomOnHover, className, color, data, height = 4, hovered, markerIndex, noColor, reducedMotion, replayToken, screenReaderMode, title, unicode, variant = "gradient", width = 24, }: SparklineProps) { const rows = React.useMemo(() => data.map((value) => ({ value })), [data]); const config = React.useMemo( () => ({ value: { color, label: title ?? "Value" } }), [color, title] ); return ( {markerIndex !== null && markerIndex !== undefined ? ( ) : null} ); } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@opentui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40opentui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@opentui/react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["https://termcn.dev/r/opentui/use-motion.json","https://termcn.dev/r/opentui/use-theme.json","https://termcn.dev/r/opentui/use-unicode.json"]}]]}],["$","$L51",null,{"sourceUrl":"https://termcn.vercel.app/r/opentui/dither-sparkline.json","proxyUrl":"https://shadcnregistry.com/r/termcn/opentui-dither-sparkline","itemId":"@termcn/opentui-dither-sparkline"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/opentui/lib/dither-chart-utils.ts","content":"$53","type":"registry:file","target":"lib/dither-chart-utils.ts"},{"path":"registry/opentui/lib/dither-sparkline-utils.ts","content":"$54","type":"registry:file","target":"lib/dither-sparkline-utils.ts"},{"path":"registry/opentui/ui/dither-chart.tsx","content":"$55","type":"registry:file","target":"components/ui/dither-chart.tsx"},{"path":"registry/opentui/ui/dither-sparkline.tsx","content":"$56","type":"registry:ui","target":"components/ui/dither-sparkline.tsx"}]}]]}],"$L57"]}]

Dither Sparkline

Installation

Files

lib

components

Styles