/* ============================================================
NetroIQ demo — shared components
============================================================ */
var useState = React.useState, useEffect = React.useEffect, useRef = React.useRef;
/* ---------------- icon set ---------------- */
const PATHS = {
overview: '',
customers: '',
sites: '',
alerts: '',
health: '',
reseller: '',
resellers: '',
settings: '',
moon: '',
logout: '',
search: '',
grid: '',
list: '',
columns: '',
wall: '',
chevdown: '',
chevright: '',
back: '',
ext: '',
router: '',
switch: '',
ap: '',
camera: '',
clock: '',
location: '',
wifi: '',
ethernet: '',
refresh: '',
block: '',
kick: '',
download: '',
upload: '',
shield: '',
topology: '',
ai: '',
globe: '',
zap: '',
check: '',
x: '',
menu: '',
plus: '',
file: '',
wrench: '',
chart: '',
tag: '',
console: '',
prompt: '',
};
function Icon({ name, style }) {
const p = PATHS[name] || '';
return ;
}
/* ---------------- sidebar ---------------- */
function Sidebar({ route, go, open }) {
const item = (id, icon, label, count) => (
);
return (
);
}
/* ---------------- topbar / breadcrumbs ---------------- */
function Topbar({ crumbs, go, onMenu }) {
return (
);
}
/* ---------------- sparkline ---------------- */
function Sparkline({ data, hiAt }) {
return {data.map((h, i) => )}
;
}
/* ---------------- smoothing helper ---------------- */
function smoothPath(pts) {
if (pts.length < 2) return "";
let d = `M ${pts[0][0]} ${pts[0][1]}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2;
const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)} ${c2x.toFixed(1)} ${c2y.toFixed(1)} ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
}
return d;
}
/* ---------------- world map ---------------- */
const MAP_DOTS = (() => {
const clusters = [
// [xMin,xMax,yMin,yMax, count]
[17, 35, 36, 62, 26], // North America
[45, 55, 28, 46, 14], // Europe
[57, 67, 42, 54, 6], // Middle East
[68, 80, 48, 64, 5], // Asia
[78, 86, 64, 73, 3], // Australia
];
let s = 999, r = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
const dots = [];
clusters.forEach(([x0, x1, y0, y1, n]) => {
for (let i = 0; i < n; i++) {
const v = r();
const st = v < 0.74 ? "on" : v < 0.9 ? "deg" : "dn";
dots.push({ x: x0 + r() * (x1 - x0), y: y0 + r() * (y1 - y0), st, sz: r() < 0.3 ? 6 : 9, pulse: r() < 0.18 });
}
});
return dots;
})();
function WorldMap() {
const m = DEMO.metrics.map;
return (
Global Infrastructure {m.total} of {m.total} locations
Healthy ({m.healthy})
Degraded ({m.degraded})
Down ({m.down})
{MAP_DOTS.map((d, i) => (
))}
);
}
/* ---------------- ISP health chart (static 7d) ---------------- */
const ISP_SERIES = (() => {
let s = 4242, r = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
const n = 80, avg = [], max = [], loss = [];
for (let i = 0; i < n; i++) {
const base = 8 + Math.sin(i / 6) * 3 + r() * 4;
const spike = r() < 0.08 ? r() * 28 : 0;
avg.push(base + spike * 0.4);
max.push(base + 8 + r() * 18 + spike);
loss.push(r() < 0.12 ? r() * 1 : 0);
}
return { avg, max, loss, n };
})();
function ISPChart() {
const W = 1000, H = 240, { avg, max, loss, n } = ISP_SERIES;
const maxMs = 80;
const xat = i => (i / (n - 1)) * W;
const yms = v => H - Math.min(v, maxMs) / maxMs * H;
const uptimeArea = `M0 ${H * 0.02} ` + avg.map((_, i) => `L ${xat(i)} ${H * 0.02}`).join(" ") + ` L ${W} ${H} L 0 ${H} Z`;
const avgPts = avg.map((v, i) => [xat(i), yms(v)]);
const maxPts = max.map((v, i) => [xat(i), yms(v)]);
const labels = ["Sun 9PM", "Mon 6PM", "Tue 3PM", "Wed 12PM", "Thu 9AM", "Fri 6AM", "Sat 3AM", "Sun 12AM"];
return (
{labels.map(l => {l})}
Avg Latency (ms)
Max Latency (ms)
Packet Loss (%)
Uptime (%)
);
}
/* ---------------- LIVE WAN throughput (animated) ---------------- */
function LiveThroughput() {
const [samples, setSamples] = useState(() => [{ dl: 0.22, ul: 0.05, t: Date.now() }]);
const walk = useRef({ dl: 0.22, ul: 0.05 });
useEffect(() => {
const id = setInterval(() => {
const w = walk.current;
const spikeDl = Math.random() < 0.18 ? Math.random() * 1.8 : 0;
const spikeUl = Math.random() < 0.12 ? Math.random() * 0.7 : 0;
w.dl = Math.max(0.03, Math.min(2.6, w.dl + (Math.random() - 0.45) * 0.25 + spikeDl - (w.dl > 1 ? 0.3 : 0)));
w.ul = Math.max(0.02, Math.min(1.2, w.ul + (Math.random() - 0.45) * 0.12 + spikeUl - (w.ul > 0.6 ? 0.15 : 0)));
setSamples(s => [...s.slice(-44), { dl: +w.dl.toFixed(2), ul: +w.ul.toFixed(2), t: Date.now() }]);
}, 1500);
return () => clearInterval(id);
}, []);
const W = 1000, H = 260;
const n = samples.length;
const maxV = Math.max(0.3, ...samples.map(s => Math.max(s.dl, s.ul))) * 1.15;
const xat = i => n <= 1 ? 0 : (i / (n - 1)) * W;
const yat = v => H - (v / maxV) * H;
const dlPts = samples.map((s, i) => [xat(i), yat(s.dl)]);
const ulPts = samples.map((s, i) => [xat(i), yat(s.ul)]);
const dlArea = n > 1 ? smoothPath(dlPts) + ` L ${W} ${H} L 0 ${H} Z` : "";
const last = samples[n - 1] || { dl: 0, ul: 0 };
const peakDl = Math.max(...samples.map(s => s.dl));
const peakUl = Math.max(...samples.map(s => s.ul));
const fmtT = t => new Date(t).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
return (
Actual WAN traffic sampled every 15s — {n} sample{n !== 1 ? "s" : ""}
Current ↓
{last.dl.toFixed(2)} Mbps
Current ↑
{last.ul.toFixed(2)} Mbps
Peak ↓
{peakDl.toFixed(2)} Mbps
Peak ↑
{peakUl.toFixed(2)} Mbps
{fmtT(samples[0].t)}{fmtT(last.t)}
Download (↓)
Upload (↑)
);
}
Object.assign(window, { Icon, Sidebar, Topbar, Sparkline, WorldMap, ISPChart, LiveThroughput, smoothPath });