/** * Spectrum UI — Sparkline * * Compact price marks for watchlists, token tables, and portfolio rows. * Color follows the series direction using the ink / zinc pair. * * Dependencies: recharts, framer-motion, @/lib/utils */ 'use client'; import * as React from 'react'; import { Area, Line, LineChart as RechartsLineChart, ResponsiveContainer } from 'recharts'; import { cn } from '@/lib/utils'; import { AreaFillDefs, ChartFrame, ChartGlowFilter, type SparkPoint, RevealMask, SOL_PRICE, WATCHLIST, type WatchlistRow, areaFillUrl, formatPct, formatUsd, seriesDelta, useChartId, useChartMotion, useIntroStartedAt, } from './chart-kit'; export interface SpectrumSparklineProps { className?: string; data?: SparkPoint[] | { price: number }[]; filled?: boolean; glowing?: boolean; framed?: boolean; } function toSparkData(data: SparkPoint[] | { price: number }[]): SparkPoint[] { if (!data.length) return []; const first = data[0]; if (first && 'value' in first) return data as SparkPoint[]; return (data as { price: number }[]).map((row, i) => ({ i, value: row.price })); } export function Sparkline({ className, data, filled = false, glowing = false, framed = true, }: SpectrumSparklineProps) { const id = useChartId('spark'); const { reduce } = useChartMotion(); const introStartedAt = useIntroStartedAt(); const rows = toSparkData(data ?? SOL_PRICE); const delta = seriesDelta(rows.map((row) => row.value)); const up = delta >= 0; const color = up ? 'var(--spectrum-chart-up)' : 'var(--spectrum-chart-down)'; const glowId = `${id}-glow`; const maskId = `${id}-reveal`; const maskStyle = reduce ? undefined : { mask: `url(#${maskId})` }; const plot = ( {filled ? : null} {glowing ? : null} {filled ? ( ) : ( )} ); if (!framed) { return

{plot}

; } return {plot}; } export function DefaultSparkline(props: SpectrumSparklineProps) { return ; } export function AreaSparkline(props: SpectrumSparklineProps) { return ; } export function GlowingSparkline(props: SpectrumSparklineProps) { return ; } export function Watchlist({ className, rows = WATCHLIST, }: { className?: string; rows?: WatchlistRow[]; }) { return (

{row.symbol}

{row.name}

{formatUsd(row.price)}

{formatPct(row.change)}

); }

Sparkline

Line

Installation

filled

Watchlist