/* Shared UI building blocks for ONS platform */ const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React; // ============ ICONS ============ const Icon = ({ name, size = 14, className = '', style }) => { const paths = ICONS[name]; if (!paths) return null; return ( {paths} ); }; const ICONS = { search: <>, bell: <>, settings: <>, help: <>, chevronDown: , chevronRight: , chevronLeft: , chevronUpDown: <>, plus: <>, x: <>, check: , filter: , download: <>, upload: <>, refresh: <>, more: <>, moreVert: <>, // Nav icons dashboard: <>, cpu: <>, bell2: <>, workflow: <>, form: <>, module: <>, factory: <>, users: <>, chart: <>, shield: , // Misc alert: <>, alertCircle: <>, info: <>, clock: <>, trend: <>, trendDown: <>, pause: <>, play: , drag: <>, link: <>, database: <>, server: <>, globe: <>, list: <>, grid: <>, thermometer: <>, power: <>, wrench: , zap: , edit: <>, copy: <>, trash: <>, arrowRight: , arrowLeft: , expand: <>, eye: <>, shieldCheck: <>, branch: <>, cloud: , }; // ============ TOAST ============ const ToastCtx = React.createContext({ push: () => {} }); const ToastHost = ({ children }) => { const [items, setItems] = useState([]); const push = useCallback((msg) => { const id = Date.now() + Math.random(); setItems(s => [...s, { id, msg }]); setTimeout(() => setItems(s => s.filter(x => x.id !== id)), 2400); }, []); return ( {children}
{items.map(t =>
{t.msg}
)}
); }; const useToast = () => React.useContext(ToastCtx); // ============ SPARKLINE ============ const Sparkline = ({ data, w = 80, h = 22, color = 'currentColor', fill = false, strokeWidth = 1.25 }) => { if (!data?.length) return null; const min = Math.min(...data), max = Math.max(...data); const range = max - min || 1; const step = w / (data.length - 1); const points = data.map((v, i) => [i * step, h - ((v - min) / range) * (h - 4) - 2]); const d = points.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' '); return ( {fill && } ); }; // Generate fake-but-coherent timeseries const seed = (s) => { let x = s; return () => { x = (x * 9301 + 49297) % 233280; return x / 233280; }; }; const series = (n, seedNum, base = 50, vol = 10, trend = 0) => { const r = seed(seedNum); let v = base; return Array.from({ length: n }, (_, i) => { v = v + (r() - 0.5) * vol + trend; v = Math.max(base * 0.5, Math.min(base * 1.5, v)); return v; }); }; // ============ AREA / LINE CHART ============ const LineChart = ({ data, w, h, padding = 24, color, showAxis = true, multi = null, fill = true, dashed = false }) => { const lines = multi || [{ data, color: color || 'var(--accent)' }]; const all = lines.flatMap(l => l.data); const min = Math.min(...all); const max = Math.max(...all); const range = max - min || 1; const xStep = (w - padding * 2) / (lines[0].data.length - 1); const buildPath = (arr) => arr.map((v, i) => { const x = padding + i * xStep; const y = padding + (h - padding * 2) - ((v - min) / range) * (h - padding * 2); return `${i ? 'L' : 'M'}${x.toFixed(1)},${y.toFixed(1)}`; }).join(' '); const yTicks = 4; return ( {showAxis && Array.from({ length: yTicks }).map((_, i) => { const y = padding + ((h - padding * 2) / (yTicks - 1)) * i; const val = max - (range / (yTicks - 1)) * i; return ( {val.toFixed(0)} ); })} {lines.map((l, idx) => ( {fill && idx === 0 && ( )} ))} ); }; // ============ BAR CHART ============ const BarChart = ({ data, w, h, padding = 24, color = 'var(--accent)' }) => { const max = Math.max(...data.map(d => d.value)) * 1.1; const bw = (w - padding * 2) / data.length; return ( {data.map((d, i) => { const bh = (d.value / max) * (h - padding * 2); const x = padding + i * bw + bw * 0.15; const y = h - padding - bh; return ( {d.label} ); })} ); }; // ============ DONUT ============ const Donut = ({ size = 140, segments, label, sub }) => { const total = segments.reduce((s, x) => s + x.value, 0); const r = size / 2 - 12; const c = size / 2; const stroke = 14; let acc = 0; return (
{segments.map((s, i) => { const len = (s.value / total) * (Math.PI * 2 * r); const dash = `${len} ${Math.PI * 2 * r}`; const offset = -((acc / total) * (Math.PI * 2 * r)); acc += s.value; return ( ); })} {label && (
{label}
{sub &&
{sub}
}
)}
); }; // ============ HEATMAP ============ const Heatmap = ({ rows, cols, getVal, w, h, gap = 2, getColor }) => { const cw = (w - (cols - 1) * gap) / cols; const ch = (h - (rows - 1) * gap) / rows; return ( {Array.from({ length: rows }).map((_, r) => Array.from({ length: cols }).map((__, c) => { const v = getVal(r, c); return ; }) )} ); }; // ============ SPLIT BUTTON GROUP ============ const SegControl = ({ value, onChange, options }) => (
{options.map(o => ( ))}
); // Make available Object.assign(window, { Icon, ICONS, ToastHost, useToast, Sparkline, LineChart, BarChart, Donut, Heatmap, SegControl, series, seed, });