| import React, { useEffect, useMemo, useRef, useState } from 'react' |
|
|
| export const nf = new Intl.NumberFormat('en-US') |
| export const fmt = (n) => (n == null || isNaN(n) ? '—' : nf.format(Math.round(n))) |
| export const pct = (g) => (g == null || isNaN(g) ? '—' : (g > 0 ? '+' : '') + (g * 100).toFixed(0) + '%') |
|
|
| export function useCountUp(target, dur = 900) { |
| const [v, setV] = useState(0) |
| useEffect(() => { |
| let raf |
| const t0 = performance.now() |
| const tick = (t) => { |
| const p = Math.min(1, (t - t0) / dur) |
| setV(Math.round(target * (1 - Math.pow(1 - p, 3)))) |
| if (p < 1) raf = requestAnimationFrame(tick) |
| } |
| raf = requestAnimationFrame(tick) |
| return () => cancelAnimationFrame(raf) |
| }, [target, dur]) |
| return v |
| } |
|
|
| export function Stat({ k, v, d, dCls = '', sub }) { |
| const n = useCountUp(v) |
| return ( |
| <div className="min-w-[128px] flex-1 px-4 py-3.5 sm:px-5"> |
| <div className="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-[var(--faint)]">{k}</div> |
| <div className="tnum mt-0.5 text-[22px] font-bold tracking-tight sm:text-2xl">{fmt(n)}</div> |
| {d != null && <div className={'mt-0.5 font-mono text-[11.5px] ' + dCls}>{d}</div>} |
| {sub && <div className="text-[11px] text-[var(--faint)]">{sub}</div>} |
| </div> |
| ) |
| } |
|
|
| export function Sparkline({ data, w = 90, h = 26, color = 'var(--accent)', area = true }) { |
| if (!data || data.length < 2) return null |
| const max = Math.max(1, ...data) |
| const min = Math.min(...data) |
| const span = Math.max(1e-9, max - min) |
| const pts = data.map((v, i) => [ |
| (i / (data.length - 1)) * (w - 4) + 2, |
| h - 3 - ((v - min) / span) * (h - 8), |
| ]) |
| const line = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ') |
| return ( |
| <svg width={w} height={h} viewBox={'0 0 ' + w + ' ' + h} className="overflow-visible" aria-hidden="true"> |
| {area && <path d={line + ' L' + pts[pts.length - 1][0].toFixed(1) + ' ' + (h - 1) + ' L' + pts[0][0].toFixed(1) + ' ' + (h - 1) + ' Z'} fill={color} opacity="0.13" />} |
| <path d={line} fill="none" stroke={color} strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" /> |
| </svg> |
| ) |
| } |
|
|
| |
| |
| export function BigChart({ series, height = 300 }) { |
| const wrapRef = useRef(null) |
| const [hover, setHover] = useState(null) |
| const { days, daily, cum } = useMemo(() => { |
| const out = { days: [], daily: [], cum: [] } |
| if (!series || !series.day || series.day.length < 2) return out |
| for (let i = 1; i < series.day.length; i++) { |
| out.days.push(series.day[i]) |
| out.daily.push(Math.max(0, series.dl_all[i] - series.dl_all[i - 1])) |
| out.cum.push(series.dl_all[i]) |
| } |
| return out |
| }, [series]) |
| if (days.length < 2) { |
| return <p className="py-10 text-center text-sm text-[var(--dim)]">Not enough history for this model yet.</p> |
| } |
| const W = 1000, H = height, pad = { l: 56, r: 14, t: 16, b: 26 } |
| const iw = W - pad.l - pad.r, ih = H - pad.t - pad.b |
| const dmax = Math.max(1, ...daily) |
| const cmax = Math.max(1, ...cum) |
| const x = (i) => pad.l + (i / (daily.length - 1)) * iw |
| const yd = (v) => pad.t + ih - (v / dmax) * ih |
| const yc = (v) => pad.t + ih - (v / cmax) * ih |
| const bw = Math.max(1, iw / daily.length - 1.2) |
| const bars = daily.map((v, i) => ( |
| <rect key={i} x={x(i) - bw / 2} y={yd(v)} width={bw} height={pad.t + ih - yd(v)} rx={bw > 3 ? 1.5 : 0} |
| fill={hover === i ? 'var(--accent)' : 'var(--bar)'} opacity={hover == null || hover === i ? 1 : 0.85} /> |
| )) |
| const cpts = cum.map((v, i) => x(i).toFixed(1) + ',' + yc(v).toFixed(1)).join(' ') |
| const grid = [0, 1, 2, 3, 4].map((g) => { |
| const gy = pad.t + ih - (g / 4) * ih |
| return ( |
| <g key={g}> |
| <line x1={pad.l} y1={gy} x2={W - pad.r} y2={gy} stroke="var(--line2)" /> |
| <text x={pad.l - 8} y={gy + 4} fontSize="10.5" fill="var(--faint)" textAnchor="end" className="tnum">{fmt((dmax * g) / 4)}</text> |
| </g> |
| ) |
| }) |
| const onMove = (e) => { |
| const rect = wrapRef.current.getBoundingClientRect() |
| const rel = (e.clientX - rect.left) / rect.width |
| setHover(Math.max(0, Math.min(daily.length - 1, Math.round(rel * (daily.length - 1))))) |
| } |
| return ( |
| <div ref={wrapRef} className="relative mt-2" onMouseMove={onMove} onMouseLeave={() => setHover(null)}> |
| <svg viewBox={'0 0 ' + W + ' ' + H} className="w-full" role="img" aria-label="download history"> |
| <defs> |
| <linearGradient id="cumfade2" x1="0" y1="0" x2="0" y2="1"> |
| <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.22" /> |
| <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" /> |
| </linearGradient> |
| </defs> |
| {grid} |
| {bars} |
| <polygon points={x(0) + ',' + (pad.t + ih) + ' ' + cpts + ' ' + x(daily.length - 1) + ',' + (pad.t + ih)} fill="url(#cumfade2)" /> |
| <polyline points={cpts} fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinejoin="round" /> |
| {hover != null && ( |
| <g> |
| <line x1={x(hover)} y1={pad.t} x2={x(hover)} y2={pad.t + ih} stroke="var(--faint)" strokeDasharray="3 3" /> |
| <circle cx={x(hover)} cy={yc(cum[hover])} r="3.6" fill="var(--accent)" stroke="var(--bg)" strokeWidth="2" /> |
| </g> |
| )} |
| {[days[0], days[Math.floor(days.length / 2)], days[days.length - 1]].map((t, i) => ( |
| <text key={i} x={i === 0 ? pad.l : i === 1 ? W / 2 : W - pad.r} y={H - 8} fontSize="10.5" fill="var(--faint)" textAnchor={i === 0 ? 'start' : i === 1 ? 'middle' : 'end'}>{t}</text> |
| ))} |
| </svg> |
| {hover != null && ( |
| <div className="pointer-events-none absolute top-1 z-10 rounded-lg border border-[var(--line)] bg-[var(--panel)] px-3 py-2 text-xs shadow-xl" |
| style={{ left: 'min(max(' + ((hover / Math.max(1, daily.length - 1)) * 100) + '% - 70px, 0px), calc(100% - 160px))' }}> |
| <div className="font-semibold text-[var(--ink)]">{days[hover]}</div> |
| <div className="tnum mt-0.5 text-[var(--dim)]">{fmt(daily[hover])} downloads/day</div> |
| <div className="tnum text-[var(--accent)]">{fmt(cum[hover])} all time</div> |
| </div> |
| )} |
| </div> |
| ) |
| } |
|
|
| |
| export function AreaChart({ days, vals, height = 240 }) { |
| const wrapRef = useRef(null) |
| const [hover, setHover] = useState(null) |
| if (!days || days.length < 2) return null |
| const W = 1000, H = height, pad = { l: 56, r: 14, t: 14, b: 26 } |
| const iw = W - pad.l - pad.r, ih = H - pad.t - pad.b |
| const max = Math.max(1, ...vals) |
| const x = (i) => pad.l + (i / (days.length - 1)) * iw |
| const y = (v) => pad.t + ih - (v / max) * ih |
| const pts = vals.map((v, i) => x(i).toFixed(1) + ',' + y(v).toFixed(1)).join(' ') |
| const grid = [0, 1, 2, 3, 4].map((g) => { |
| const gy = pad.t + ih - (g / 4) * ih |
| return ( |
| <g key={g}> |
| <line x1={pad.l} y1={gy} x2={W - pad.r} y2={gy} stroke="var(--line2)" /> |
| <text x={pad.l - 8} y={gy + 4} fontSize="10.5" fill="var(--faint)" textAnchor="end" className="tnum">{fmt((max * g) / 4)}</text> |
| </g> |
| ) |
| }) |
| const onMove = (e) => { |
| const rect = wrapRef.current.getBoundingClientRect() |
| const rel = (e.clientX - rect.left) / rect.width |
| setHover(Math.max(0, Math.min(days.length - 1, Math.round(rel * (days.length - 1))))) |
| } |
| return ( |
| <div ref={wrapRef} className="relative" onMouseMove={onMove} onMouseLeave={() => setHover(null)}> |
| <svg viewBox={'0 0 ' + W + ' ' + H} className="w-full" role="img" aria-label="hub downloads per day"> |
| <defs> |
| <linearGradient id="hubfade" x1="0" y1="0" x2="0" y2="1"> |
| <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.3" /> |
| <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" /> |
| </linearGradient> |
| </defs> |
| {grid} |
| <polygon points={x(0) + ',' + (pad.t + ih) + ' ' + pts + ' ' + x(days.length - 1) + ',' + (pad.t + ih)} fill="url(#hubfade)" /> |
| <polyline points={pts} fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinejoin="round" /> |
| {hover != null && ( |
| <g> |
| <line x1={x(hover)} y1={pad.t} x2={x(hover)} y2={pad.t + ih} stroke="var(--faint)" strokeDasharray="3 3" /> |
| <circle cx={x(hover)} cy={y(vals[hover])} r="3.6" fill="var(--accent)" stroke="var(--bg)" strokeWidth="2" /> |
| </g> |
| )} |
| {[days[0], days[Math.floor(days.length / 2)], days[days.length - 1]].map((t, i) => ( |
| <text key={i} x={i === 0 ? pad.l : i === 1 ? W / 2 : W - pad.r} y={H - 8} fontSize="10.5" fill="var(--faint)" textAnchor={i === 0 ? 'start' : i === 1 ? 'middle' : 'end'}>{t}</text> |
| ))} |
| </svg> |
| {hover != null && ( |
| <div className="pointer-events-none absolute top-1 z-10 rounded-lg border border-[var(--line)] bg-[var(--panel)] px-3 py-2 text-xs shadow-xl" |
| style={{ left: 'min(max(' + ((hover / Math.max(1, days.length - 1)) * 100) + '% - 70px, 0px), calc(100% - 170px))' }}> |
| <div className="font-semibold text-[var(--ink)]">{days[hover]}</div> |
| <div className="tnum mt-0.5 text-[var(--dim)]">{fmt(vals[hover])} downloads</div> |
| </div> |
| )} |
| </div> |
| ) |
| } |
|
|
