/* ============================================ POLARIS — Shared UI Components Logo, icons, charts, primitives ============================================ */ // --- Logo --- // Pure SVG star — no square frame, no PNG. Integrates with dark backgrounds. function PolarisLogo({ size = 22, full = true, pulse = false, glow = false }) { const s = size; const id = React.useMemo(() => 'pl' + Math.random().toString(36).slice(2, 8), []); return ( {/* Soft organic glow (teal → blue) — no hard edges, blends with bg */} {glow && ( )} {/* Soft inner halo */} {/* 4-point star — sharp, gradient-filled */} {/* Bright center */} {full && ( POLARIS )} ); } // --- Icon set (line, 1.6 stroke, 18×18) --- const Icon = ({ name, size = 18, strokeWidth = 1.6, ...rest }) => { const paths = { 'home': <>, 'compass': <>, 'chart': <>, 'pulse': , 'volume': <>, 'users': <>, 'bell': <>, 'doc': <>, 'plug': <>, 'search': <>, 'filter': , 'plus': <>, 'arrow-up': <>, 'arrow-down': <>, 'arrow-r': <>, 'arrow-tr': <>, 'check': , 'x': <>, 'eye': <>, 'flag': <>, 'dots': <>, 'sliders': <>, 'shield': <>, 'globe': <>, 'zap': , 'mail': <>, 'lock': <>, 'logo-x': , 'logo-tt': <>, 'logo-ig': <>, 'logo-fb': , 'logo-yt': <>, 'logo-tg': , 'logo-wa': <>, 'logo-w': <>, 'logo-r': <>, 'star': , 'spark': <>, 'grid': <>, 'list': <>, 'play': , 'pause': <>, 'download': <>, 'share': <>, 'heart': , 'reply': <>, 'cog': <>, 'logout': <>, 'menu': <>, 'caret': , 'circle': , 'warning': <>, 'info': <>, 'crosshair': <>, 'broadcast': <>, 'history': <>, 'expand': <>, }; return ( {paths[name] || null} ); }; // --- Sparkline --- function Sparkline({ data, color = 'var(--teal)', height = 32, fill = true, width = 120 }) { if (!data || data.length === 0) return null; const min = Math.min(...data); const max = Math.max(...data); const range = max - min || 1; const w = width; const h = height; const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * w; const y = h - ((v - min) / range) * (h - 4) - 2; return [x, y]; }); const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' '); const fillPath = `${path} L${w} ${h} L0 ${h} Z`; const id = 'spark-' + Math.random().toString(36).slice(2, 8); return ( {fill && } ); } // --- Area chart (multi-series sentiment) --- function AreaChart({ data, height = 220, showAxis = true }) { const w = 800; const h = height; const padL = 36, padR = 12, padT = 12, padB = 24; const innerW = w - padL - padR; const innerH = h - padT - padB; const len = data.length; const series = ['pos', 'neu', 'neg']; const colors = { pos: '#2EE6C8', neu: '#6B7794', neg: '#FF4D6D' }; const xAt = (i) => padL + (i / (len - 1)) * innerW; const yAt = (v) => padT + innerH - (v / 100) * innerH; const buildPath = (key) => { return data.map((d, i) => `${i === 0 ? 'M' : 'L'}${xAt(i).toFixed(1)} ${yAt(d[key]).toFixed(1)}`).join(' '); }; const buildArea = (key) => { return `${buildPath(key)} L${xAt(len-1).toFixed(1)} ${(padT + innerH).toFixed(1)} L${padL} ${(padT + innerH).toFixed(1)} Z`; }; return ( {series.map(s => ( ))} {/* Grid lines */} {[0, 25, 50, 75, 100].map(v => ( {showAxis && ( {v} )} ))} {/* Areas */} {series.map(s => ( ))} {/* Lines */} {series.map(s => ( ))} {/* X axis ticks */} {showAxis && [0, 7, 14, 21, 29].map(i => ( i < len && {`d${len - 1 - i}`} ))} ); } // --- Bar chart (horizontal) --- function HBar({ value, max = 100, color = 'var(--teal)', height = 6 }) { const pct = Math.max(0, Math.min(100, (value / max) * 100)); return (
); } // --- Donut chart --- function Donut({ value, size = 80, stroke = 8, color = 'var(--teal)', label, sublabel }) { const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const off = c - (value / 100) * c; return (
{(label !== undefined) && (
{label}
{sublabel &&
{sublabel}
}
)}
); } // --- Heatmap (8×24 — day×hour) --- function Heatmap({ rows = 8, cols = 24, accent = '#2EE6C8' }) { const cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const v = Math.max(0, Math.min(1, 0.3 + Math.sin(r * 0.7 + c * 0.4) * 0.3 + Math.cos(c * 0.25 + r * 0.5) * 0.25 + (c >= 18 && c <= 22 ? 0.35 : 0) + (r === 4 && c >= 14 && c <= 20 ? 0.3 : 0) )); cells.push({ r, c, v }); } } return (
{cells.map((c) => (
))}
); } // --- Trend indicator --- function Trend({ value, suffix = '%' }) { const up = value > 0; const flat = value === 0; return ( {!flat && ( )} {up && '+'}{value.toFixed(1)}{suffix} ); } // --- Avatar (initials) --- function Avatar({ initials, color, size = 32, gradient }) { const bg = gradient || (color ? `linear-gradient(135deg, ${color}, ${color}cc)` : 'linear-gradient(135deg, var(--blue-dim), var(--purple-dim))'); return (
{initials}
); } // --- Platform icon (with brand chip) --- function PlatformChip({ platform, size = 22 }) { const map = { 'X': { c: '#fff', i: 'logo-x' }, 'TikTok': { c: '#FF4D6D', i: 'logo-tt' }, 'Instagram': { c: '#A78BFA', i: 'logo-ig' }, 'Facebook': { c: '#4D7CFF', i: 'logo-fb' }, 'YouTube': { c: '#FF4D6D', i: 'logo-yt' }, 'Telegram': { c: '#4D7CFF', i: 'logo-tg' }, 'WhatsApp': { c: '#2EE6C8', i: 'logo-wa' }, 'Web': { c: '#FFB546', i: 'logo-w' }, 'Reddit': { c: '#FFB546', i: 'logo-r' }, }; const p = map[platform] || map['X']; return (
); } // --- KPI tile --- function KPI({ label, value, delta, deltaSuffix = '%', sub, sparkData, sparkColor, accent }) { return (
{accent &&
}
{label}
{delta !== undefined && }
{value} {sub && {sub}}
{sparkData && (
)}
); } // Make available globally Object.assign(window, { PolarisLogo, Icon, Sparkline, AreaChart, HBar, Donut, Heatmap, Trend, Avatar, PlatformChip, KPI, });