// Shared widgets: icons, sparkline, mini-bar, stat card. const I = { home: (p) => , server: (p) => , zap: (p) => , users: (p) => , shield: (p) => , list: (p) => , alert: (p) => , plug: (p) => , gear: (p) => , search: (p) => , bell: (p) => , refresh: (p) => , power: (p) => , arrow: (p) => , up: (p) => , down: (p) => , clock: (p) => , calendar: (p) => , inbox: (p) => , }; function Sparkline({ data, stroke = "var(--accent)", fill = true, height = 28 }) { const w = 120, h = height; const safe = (data || []).map((v) => Number(v) || 0); if (safe.length < 2) return ; const min = Math.min(...safe), max = Math.max(...safe); const span = max - min || 1; const pts = safe.map((v, i) => { const x = (i / (safe.length - 1)) * w; const y = h - ((v - min) / span) * (h - 4) - 2; return [x, y]; }); const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' '); const dFill = `${d} L${w},${h} L0,${h} Z`; return ( {fill && ( )} ); } function StatCard({ label, value, delta, deltaDir, spark, sparkColor }) { return (
{label}
{value}
{(delta || spark) && (
{delta && (
{deltaDir === 'up' && } {deltaDir === 'down' && } {delta}
)} {spark && (
)}
)}
); } function MiniBars({ data, height = 110, color = "var(--accent)", highlightIdx = -1 }) { const safe = (data || []).map((v) => Number(v) || 0); const max = Math.max(1, ...safe); return (
{safe.map((v, i) => { const h = (v / max) * (height - 16); const isHi = i === highlightIdx; return (
); })}
); } function LineChart({ data, height = 220, color = "var(--accent)", labels = null, yTicks = 5 }) { const w = 800, h = height; const padL = 36, padR = 12, padT = 14, padB = 22; const innerW = w - padL - padR; const innerH = h - padT - padB; const min = 0; const max = (Math.max(0, ...(data || []).map((v) => Number(v) || 0)) || 1) * 1.1; const span = max - min || 1; const pts = data.map((v, i) => { const x = padL + (i / (data.length - 1)) * innerW; const y = padT + innerH - ((v - min) / span) * innerH; return [x, y]; }); const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' '); const dFill = `${d} L${padL + innerW},${padT + innerH} L${padL},${padT + innerH} Z`; const ticks = Array.from({ length: yTicks }, (_, i) => { const t = max - (i / (yTicks - 1)) * span; const y = padT + (i / (yTicks - 1)) * innerH; return { y, label: Math.round(t) }; }); return ( {ticks.map((t, i) => ( {t.label} ))} {pts.map((p, i) => i % 6 === 0 && ( ))} {labels && labels.map((l, i) => ( {l} ))} ); } function Card({ title, sub, action, children, padding, className = '' }) { return (
{(title || action) && (
{title &&
{title}
} {sub &&
{sub}
}
{action}
)} {children}
); } function GuildAvatar({ name, color, icon }) { const isUrl = typeof icon === 'string' && /^https?:\/\//.test(icon); if (isUrl) { return (
{ // ถ้ารูปโหลดไม่ได้ → fallback เป็นตัวอักษรย่อ e.currentTarget.style.display = 'none'; const p = e.currentTarget.parentElement; if (p && !p.dataset.fb) { p.dataset.fb = '1'; p.textContent = (name || '?').slice(0, 2).toUpperCase(); } }} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
); } return (
{icon || (name || '?').slice(0, 2).toUpperCase()}
); } function Switch({ on, onChange }) { return
onChange(!on)} role="switch" aria-checked={on}/>; } Object.assign(window, { I, Sparkline, StatCard, MiniBars, LineChart, Card, GuildAvatar, Switch });