50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T334f,import React, { useEffect, useRef, useState, useMemo } from 'react'; import { motion, useSpring, useTransform, useReducedMotion } from 'motion/react'; import { Users, TrendingUp } from 'lucide-react'; import { useCanvasSetup } from '../../hooks/useCanvasSetup'; const RANGES = [ { name: '7D', days: 7 }, { name: '14D', days: 14 }, { name: '30D', days: 30 }, { name: '90D', days: 90 }, ]; const smoothstep = (min: number, max: number, value: number) => { const x = Math.max(0, Math.min(1, (value - min) / (max - min))); return x * x * (3 - 2 * x); }; const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val)); function AnimatedNumber({ value }: { value: number }) { const prefersReducedMotion = useReducedMotion(); const spring = useSpring(value, { stiffness: 190, damping: 27, mass: 0.7 }); const display = useTransform(spring, (current) => '+' + Math.round(current).toLocaleString('en-US') ); useEffect(() => { if (prefersReducedMotion) { spring.jump(value); } else { spring.set(value); } }, [value, spring, prefersReducedMotion]); return {display}; } function formatDate(offsetDays: number) { const date = new Date(2026, 6, 14); date.setDate(date.getDate() - offsetDays); return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); } interface DitherGrowthChartProps { theme?: 'dark' | 'light'; compact?: boolean; } export function DitherGrowthChart({ theme = 'dark', compact = false }: DitherGrowthChartProps) { const [rangeIndex, setRangeIndex] = useState(2); // 30D default const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup(); const wrapperRef = useRef(null); const range = RANGES[rangeIndex]; const [scrubIndex, setScrubIndex] = useState(null); const targetX = useSpring(0, { stiffness: 650, damping: 42, mass: 0.5 }); const targetY = useSpring(0, { stiffness: 650, damping: 42, mass: 0.5 }); const { data, dates, total, maxVal } = useMemo(() => { const days = range.days; const newData = []; const newDates = []; let tot = 0; let mv = 3; for (let i = 0; i < days; i++) { const t = i / (days - 1); const base = 9 + t * 23; const wave = 6 * Math.sin(i * 0.7 + 1) + 3 * Math.sin(i * 1.9); const val = Math.max(3, Math.round(base + wave)); newData.push(val); tot += val; if (val > mv) mv = val; newDates.push(formatDate(days - 1 - i)); } return { data: newData, dates: newDates, total: tot, maxVal: mv }; }, [rangeIndex]); const timeRef = useRef(0); const requestRef = useRef(); const pointerPosRef = useRef({ x: -100, y: -100 }); const pointerActiveRef = useRef(false); const fromDataRef = useRef([...data]); const fromMaxRef = useRef(maxVal); const targetDataRef = useRef([...data]); const targetMaxRef = useRef(maxVal); const morphStartTimeRef = useRef(0); useEffect(() => { fromDataRef.current = targetDataRef.current.map((_, i) => targetDataRef.current[i]); fromMaxRef.current = targetMaxRef.current; targetDataRef.current = [...data]; targetMaxRef.current = maxVal; if (fromDataRef.current.length !== targetDataRef.current.length) { const len = targetDataRef.current.length; const old = fromDataRef.current; fromDataRef.current = Array(len).fill(0).map((_, i) => { const t = i / (len - 1); const oldIdx = Math.round(t * (old.length - 1)); return old[oldIdx]; }); } morphStartTimeRef.current = performance.now(); }, [data, maxVal]); useEffect(() => { const draw = () => { if (!isVisible.current) { requestRef.current = requestAnimationFrame(draw); return; } const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const { width: w, height: h } = rect.current; if (w === 0 || h === 0) { requestRef.current = requestAnimationFrame(draw); return; } timeRef.current += reducedMotion ? 0 : 0.03; const dpr = Math.min(window.devicePixelRatio || 1, 2); const cell = Math.max(3, Math.round(w / 180)); ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.scale(dpr, dpr); let prog = 0; if (reducedMotion) { prog = 1; } else if (morphStartTimeRef.current > 0) { prog = (performance.now() - morphStartTimeRef.current) / 460; if (prog > 1) prog = 1; } else { prog = 1; } const curMax = fromMaxRef.current + (targetMaxRef.current - fromMaxRef.current) * prog; const curData = targetDataRef.current.map((v, i) => fromDataRef.current[i] + (v - fromDataRef.current[i]) * prog); const px = pointerPosRef.current.x; const py = pointerPosRef.current.y; const isActive = pointerActiveRef.current; const t2 = timeRef.current; for (let x = 0; x < w; x += cell) { const t = x / w; const exactIdx = t * (curData.length - 1); const i0 = Math.floor(exactIdx); const i1 = Math.min(i0 + 1, curData.length - 1); const frac = exactIdx - i0; const val = curData[i0] + (curData[i1] - curData[i0]) * frac; const headroom = 0.16 * h; const plotH = h - headroom; const curveY = h - plotH * (val / curMax); for (let y = h; y >= 0; y -= cell) { ctx.fillStyle = theme === 'dark' ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)'; ctx.fillRect(x + 1, y + 1, cell - 1, cell - 1); if (y < curveY) continue; const dx = x - px; const dy = y - py; const dist = Math.sqrt(dx*dx + dy*dy); let glow = 0; if (isActive && !reducedMotion) { const rad = h * 0.35; glow = 1 - smoothstep(0, rad, dist); } const shimmer = reducedMotion ? 0 : Math.sin(y * 0.1 - t2 * 2) * 0.07; ctx.fillStyle = '#FFFFFF'; const sz = cell * (0.7 + shimmer + glow * 0.3); const alpha = 0.6 + glow * 0.4; ctx.globalAlpha = alpha; const offset = (cell - sz) / 2; ctx.fillRect(x + offset, y + offset, sz, sz); ctx.globalAlpha = 1; } } ctx.restore(); requestRef.current = requestAnimationFrame(draw); }; requestRef.current = requestAnimationFrame(draw); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, [theme, reducedMotion]); const handlePointer = (e: React.MouseEvent | React.PointerEvent) => { const wrapper = wrapperRef.current; if (!wrapper) return; const r = wrapper.getBoundingClientRect(); const x = e.clientX - r.left; const y = e.clientY - r.top; pointerPosRef.current = { x, y }; pointerActiveRef.current = true; const { width: w, height: h } = rect.current; const t = clamp(x / w, 0, 1); const idx = Math.round(t * (data.length - 1)); setScrubIndex(idx); const actualT = data.length > 1 ? idx / (data.length - 1) : 0.5; targetX.set(actualT * w); const val = data[idx]; const headroom = 0.16 * h; const plotH = h - headroom; const curveY = h - plotH * (val / maxVal); targetY.set(curveY); }; const handlePointerLeave = () => { pointerActiveRef.current = false; setScrubIndex(null); }; const xPos = useTransform(targetX, x => `${x}px`); const yPos = useTransform(targetY, y => `${y}px`); if (compact) { return (

); } const ticks = [maxVal, Math.round(maxVal * 0.66), Math.round(maxVal * 0.33), 0]; const dateLabels = [ dates[0], dates[Math.floor(dates.length * 0.25)], dates[Math.floor(dates.length * 0.5)], dates[Math.floor(dates.length * 0.75)], dates[dates.length - 1], ]; return (

{/* Header */}

+14%

Member growth over selected interval

{/* Range Filters */}

{RANGES.map((r, idx) => ( ))}

{/* Main Canvas Chart Stage */}

{/* Y Axis Ticks */}

{ticks.map((t, i) => ( {t} ))}

{/* Chart Canvas Container */}

{/* Grid overlay */}

{/* X Axis Dates */}

{dateLabels.map((lbl, idx) => ( {lbl} ))}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@amicro","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/dither-charts/DitherGrowthChart.tsx","content":"$52","type":"registry:component","target":"components/amicro/DitherGrowthChart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]