Cyberpunk Analytics Dashboard

:root { --bg-1: #0b0f1a; --bg-2: #071025; --glass: rgba(255,255,255,0.03); --glass-2: rgba(255,255,255,0.02); --neon-cyan: #00f0ff; --neon-pink: #ff3fa1; --neon-purple: #9b59ff; --accent: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan)); --card-radius: 16px; --glass-border: rgba(255,255,255,0.06); --text-1: #d2e8ff; --muted: #9aa9bf; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: radial-gradient(1200px 600px at 10% 10%, rgba(155,89,255,0.06), transparent), radial-gradient(900px 400px at 90% 90%, rgba(0,240,255,0.04), transparent), linear-gradient(180deg,var(--bg-1),var(--bg-2)); color: var(--text-1); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .app { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: 1fr; gap: 28px; padding: 28px; height: 100vh; } .glass { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid var(--glass-border); backdrop-filter: blur(10px) saturate(120%); border-radius: var(--card-radius); } .sidebar { padding: 22px; display: flex; flex-direction: column; gap: 24px; height: calc(100vh - 56px); } .brand h1 { margin: 0; font-family: Orbitron, monospace; letter-spacing: 2px; font-size: 20px; color: var(--neon-pink); text-shadow: 0 4px 18px rgba(255,63,161,0.12), 0 0 18px rgba(155,89,255,0.06); } .brand .sub { margin: 2px 0 0; color: var(--muted); font-size: 12px; } .menu { display: flex; flex-direction: column; gap: 8px; } .menu-item { background: transparent; border: none; color: var(--text-1); text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer; transition: all 180ms ease; font-weight: 600; font-size: 14px; } .menu-item:hover { transform: translateX(6px); box-shadow: 0 8px 30px rgba(0,0,0,0.5); background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-left: 3px solid var(--neon-cyan); } .menu-item.active { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-left: 4px solid var(--neon-pink); color: var(--neon-cyan); box-shadow: 0 8px 30px rgba(0,0,0,0.6); } .footer-note { margin-top: auto; font-size: 12px; color: var(--muted); } .main { display: flex; flex-direction: column; gap: 18px; height: calc(100vh - 56px); } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; gap: 12px; } .neon-input { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 4px 30px rgba(0,0,0,0.6); } .neon-input input { background: transparent; border: none; outline: none; color: var(--text-1); width: 520px; font-size: 14px; } .btn-ghost { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.03); background: transparent; color: var(--neon-cyan); cursor: pointer; font-weight: 600; transition: transform 160ms; } .btn-ghost:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,240,255,0.06); } .controls { display: flex; align-items: center; gap: 12px; } .profile { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; } .avatar { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,63,161,0.18), rgba(0,240,255,0.07)); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 30px rgba(155,89,255,0.06); } .avatar.neon { background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan)); box-shadow: 0 0 20px rgba(0,240,255,0.06), 0 6px 24px rgba(155,89,255,0.06); mix-blend-mode: screen; } .dashboard-grid { display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr); align-items: start; padding: 12px; overflow: auto; } .widget { padding: 16px; border-radius: 14px; min-height: 140px; position: relative; transition: transform 180ms ease, box-shadow 180ms; border: 1px solid rgba(255,255,255,0.03); overflow: hidden; } .widget:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,0.6); } .widget .title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; } .widget .title h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.6px; color: var(--neon-pink); text-shadow: 0 6px 24px rgba(155,89,255,0.06); font-family: Orbitron, monospace; } .tiny { font-size: 11px; color: var(--muted); } .kpi { display: flex; gap: 12px; align-items: center; margin-top: 6px; } .kpi .value { font-size: 28px; font-weight: 700; color: var(--neon-cyan); } .chart-canvas { width: 100% !important; height: 220px !important; } .sparkline { height: 64px; } .big { grid-column: span 8; } .medium { grid-column: span 4; } .wide { grid-column: span 12; } .small { grid-column: span 3; } .draggable { cursor: grab; } .dragging { opacity: 0.85; transform: scale(1.02); box-shadow: 0 40px 80px rgba(0,0,0,0.7) !important; } .bottom { padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; } .legend { display: flex; align-items: center; gap: 12px; } .accent-line { width: 56px; height: 3px; border-radius: 4px; background: var(--accent); box-shadow: 0 10px 40px rgba(155,89,255,0.08); } .toast { position: fixed; right: 24px; bottom: 24px; background: rgba(10,15,25,0.9); color: var(--text-1); padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 20px 60px rgba(0,0,0,0.7); display: none; font-size: 13px; } @media (max-width: 960px) { .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .sidebar { display: none; } .dashboard-grid { grid-template-columns: repeat(6, 1fr); } .main { height: auto; } } @media (max-width: 520px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } .neon-input input { width: 160px; } .topbar { gap: 8px; } } export const CONFIG = { // Paste full Google Sheets URL or Sheet ID here (leave empty to use fallback sample data) GOOGLE_SHEET_ID: "", // Optional: Google API key (not required for public sheets). If left empty, the app will use the public gviz endpoint. API_KEY: "", // Map logical keys to sheet ranges or sheet names. Modify if your sheet uses different tab names. RANGE_MAP: { revenue: "Revenue!A1:E", engagement: "Engagement!A1:D", funnels: "Funnels!A1:E", kpis: "KPIs!A1:D" } }; import { CONFIG } from "../config.js"; function extractSheetId(input) { if (!input) return CONFIG.GOOGLE_SHEET_ID || ""; // If user pasted a URL, extract ID const urlMatch = input.match(/\/spreadsheets\/d\/([a-zA-Z0-9-_]+)/); if (urlMatch) return urlMatch[1]; // If they pasted full id const idMatch = input.match(/^[a-zA-Z0-9-_]{20,}$/); return idMatch ? input : ""; } function gvizToJson(text) { try { const jsonText = text.replace(/^[\s\S]*?$/, "").replace(/$;?$/, ""); return JSON.parse(jsonText); } catch (e) { return null; } } function rowsToObjects(table) { const cols = table.cols.map(c => (c.label || c.id || "").toString()); return (table.rows || []).map(r => { const obj = {}; r.c.forEach((cell, i) => { const key = cols[i] || `col${i}`; obj[key] = cell ? (cell.v === null ? "" : cell.v) : ""; }); return obj; }); } async function fetchGviz(sheetId, sheetName) { const url = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?tqx=out:json&sheet=${encodeURIComponent(sheetName)}`; const res = await fetch(url); const text = await res.text(); const json = gvizToJson(text); if (!json || !json.table) throw new Error("Invalid GViz response"); return rowsToObjects(json.table); } async function fetchViaApi(sheetId, range, apiKey) { const url = `https://sheets.googleapis.com/v4/spreadsheets/${sheetId}/values/${encodeURIComponent(range)}?key=${apiKey}`; const res = await fetch(url); const json = await res.json(); if (!json || !json.values) throw new Error("Invalid Sheets API response"); const headers = json.values[0] || []; const rows = (json.values.slice(1) || []).map(r => { const obj = {}; headers.forEach((h, i) => { obj[h] = r[i] !== undefined ? r[i] : ""; }); return obj; }); return rows; } function rangeToSheet(range) { const idx = range.indexOf("!"); return idx > -1 ? range.slice(0, idx) : range; } export async function fetchSheetData(key) { const sheetId = extractSheetId(CONFIG.GOOGLE_SHEET_ID || ""); const urlFromArg = sessionStorage.getItem("userSheetUrl") || ""; const finalSheetId = sheetId || extractSheetId(urlFromArg) || ""; if (!finalSheetId) { throw new Error("No sheet id configured"); } const range = CONFIG.RANGE_MAP[key]; if (!range) throw new Error("Unknown range key"); try { if (CONFIG.API_KEY && CONFIG.API_KEY.length > 5) { const data = await fetchViaApi(finalSheetId, range, CONFIG.API_KEY); return data; } else { const sheetName = rangeToSheet(range); const data = await fetchGviz(finalSheetId, sheetName); return data; } } catch (e) { // Rethrow for caller to handle fallback throw e; } } import { createChart } from "./ui.js"; function makeCard(title, subtitle = "", classes = "") { const el = document.createElement("section"); el.className = `widget glass ${classes} draggable`; el.setAttribute("draggable", "true"); el.innerHTML = `

${title}

${subtitle}

`; return el; } export function revenueWidget(data = []) { const total = data.reduce((s, r) => s + (Number(r.Amount || r.Revenue || 0) || 0), 0); const trend = data.slice(-7).map(r => Number(r.Amount || r.Revenue || 0) || 0); const card = makeCard("Revenue Trends", `Total: $${numberWithCommas(Math.round(total))}`, "big"); const content = card.querySelector(".content"); const canvas = document.createElement("canvas"); canvas.className = "chart-canvas"; content.appendChild(canvas); createChart(canvas, { type: "line", data: { labels: data.map((r, i) => r.Date || `P${i+1}`), datasets: [ { label: "Revenue", data: data.map(r => Number(r.Amount || r.Revenue || 0)), borderColor: "rgba(0,240,255,0.9)", backgroundColor: gradientFor(canvas, ["rgba(0,240,255,0.12)", "rgba(155,89,255,0.02)"]), tension: 0.28, pointRadius: 2, fill: true } ] }, options: { interaction: { mode: 'index', intersect: false }, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false }, ticks: { color: "#9aa9bf" } }, y: { ticks: { color: "#9aa9bf" }, grid: { color: "rgba(255,255,255,0.02)" } } } } }); return card; } export function engagementWidget(data = []) { const sessions = data.map(r => Number(r.Sessions || r.Value || 0) || 0); const avg = Math.round((sessions.reduce((a,b)=>a+b,0) / (sessions.length || 1)) * 100) / 100; const card = makeCard("User Engagement", `Avg Sessions: ${avg}`, "medium"); const content = card.querySelector(".content"); const canvas = document.createElement("canvas"); canvas.className = "chart-canvas"; content.appendChild(canvas); createChart(canvas, { type: "bar", data: { labels: data.map((r,i)=> r.Date || `P${i+1}`), datasets: [ { label: "Sessions", data: sessions, backgroundColor: function(context) { const i = context.dataIndex; return i % 2 === 0 ? "rgba(155,89,255,0.7)" : "rgba(0,240,255,0.6)"; }, borderRadius: 8 } ] }, options: { plugins: { legend: { display: false } }, scales: { x: { ticks: { color: "#9aa9bf" }, grid: { display: false } }, y: { ticks: { color: "#9aa9bf" }, grid: { color: "rgba(255,255,255,0.02)" } } } } }); return card; } export function funnelWidget(data = []) { // Expect ordered funnel steps with Count const labels = data.map(r => r.Step || r.Stage || `Step`); const counts = data.map(r => Number(r.Count || r.Value || 0) || 0); const top = Math.max(...counts, 1); const card = makeCard("Conversion Funnel", "Top to bottom overview", "medium"); const content = card.querySelector(".content"); const list = document.createElement("div"); list.className = "kpi"; list.style.flexDirection = "column"; list.style.gap = "8px"; labels.forEach((lbl, i) => { const pct = Math.round((counts[i] / top) * 100); const el = document.createElement("div"); el.innerHTML = `

${lbl}

${counts[i]} • ${pct}%

`; list.appendChild(el); }); content.appendChild(list); return card; } export function kpiWidget(data = []) { const metrics = data[0] || {}; const card = makeCard("Performance Indicators", "Snapshot", "medium"); const content = card.querySelector(".content"); const container = document.createElement("div"); container.style.display = "grid"; container.style.gridTemplateColumns = "1fr 1fr"; container.style.gap = "12px"; Object.keys(metrics).slice(0,4).forEach(k => { const val = metrics[k] || "-"; const node = document.createElement("div"); node.style.padding = "10px"; node.style.borderRadius = "10px"; node.style.background = "linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00))"; node.innerHTML = `

${k}

${val}

`; container.appendChild(node); }); content.appendChild(container); return card; } function numberWithCommas(x) { if (x === undefined || x === null) return "-"; return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function gradientFor(canvas, colors) { const ctx = canvas.getContext("2d"); const g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); g.addColorStop(0, colors[0]); g.addColorStop(1, colors[1] || colors[0]); return g; } export function createChart(canvas, cfg) { const ctx = canvas.getContext("2d"); // Responsive size hack canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; // Create gradient backgrounds if requested const defaultCfg = { responsive: true, maintainAspectRatio: false, animation: { duration: 900, easing: 'easeOutQuart' }, plugins: { tooltip: { backgroundColor: 'rgba(10,15,25,0.9)', titleColor: '#fff', bodyColor: '#eee', cornerRadius: 8 } } }; const merged = Object.assign({}, defaultCfg, cfg.options ? { options: cfg.options } : {}); const chart = new Chart(ctx, { type: cfg.type, data: cfg.data, options: merged }); return chart; } export function showToast(message, timeout = 3000) { const toast = document.getElementById("toast"); toast.textContent = message; toast.style.display = "block"; toast.style.opacity = "1"; setTimeout(() => { toast.style.opacity = "0"; setTimeout(()=> toast.style.display = "none", 300); }, timeout); } import { CONFIG } from "./config.js"; import { fetchSheetData } from "./modules/dataService.js"; import { revenueWidget, engagementWidget, funnelWidget, kpiWidget } from "./modules/widgets.js"; import { showToast } from "./modules/ui.js"; const dashboard = document.getElementById("dashboard"); const lastSyncEl = document.getElementById("lastSync"); const refreshBtn = document.getElementById("refreshBtn"); const applySheetBtn = document.getElementById("applySheet"); const sheetInput = document.getElementById("sheetUrl"); const toggleEdit = document.getElementById("toggleEdit"); let layout = JSON.parse(localStorage.getItem("dashboardLayout") || "null") || null; let editMode = false; function setLastSync(date = new Date()) { lastSyncEl.textContent = date.toLocaleString(); } function saveLayout() { const ids = Array.from(dashboard.children).map(n => n.dataset.widgetKey || n.id); localStorage.setItem("dashboardLayout", JSON.stringify(ids)); } function loadLayoutIds() { try { const stored = JSON.parse(localStorage.getItem("dashboardLayout") || "null"); return Array.isArray(stored) ? stored : null; } catch { return null; } } function makeDraggable(el) { el.addEventListener("dragstart", (e) => { el.classList.add("dragging"); e.dataTransfer.setData("text/plain", el.dataset.widgetKey || ""); e.dataTransfer.effectAllowed = "move"; }); el.addEventListener("dragend", () => { el.classList.remove("dragging"); saveLayout(); }); el.addEventListener("dragover", (e) => { e.preventDefault(); const dragging = document.querySelector(".dragging"); if (!dragging || dragging === el) return; const rect = el.getBoundingClientRect(); const before = (e.clientY - rect.top) < rect.height / 2; if (before) el.parentNode.insertBefore(dragging, el); else el.parentNode.insertBefore(dragging, el.nextSibling); }); } function clearDashboard() { dashboard.innerHTML = ""; } async function renderAll(overrides = {}) { clearDashboard(); try { const [revData, engData, funnelData, kpiData] = await Promise.allSettled([ fetchSheetData("revenue"), fetchSheetData("engagement"), fetchSheetData("funnels"), fetchSheetData("kpis") ]); const rev = revData.status === "fulfilled" ? revData.value : null; const eng = engData.status === "fulfilled" ? engData.value : null; const fun = funnelData.status === "fulfilled" ? funnelData.value : null; const kpi = kpiData.status === "fulfilled" ? kpiData.value : null; if (!rev && !eng && !fun && !kpi) throw new Error("No remote data"); const widgetsOrder = loadLayoutIds() || ["revenue","engagement","funnels","kpis"]; for (const key of widgetsOrder) { let node = null; if (key === "revenue") { node = revenueWidget(rev || sampleData.revenue); node.dataset.widgetKey = "revenue"; } else if (key === "engagement") { node = engagementWidget(eng || sampleData.engagement); node.dataset.widgetKey = "engagement"; } else if (key === "funnels") { node = funnelWidget(fun || sampleData.funnels); node.dataset.widgetKey = "funnels"; } else if (key === "kpis") { node = kpiWidget(kpi || sampleData.kpis); node.dataset.widgetKey = "kpis"; } else { // unknown key: ignore continue; } makeDraggable(node); dashboard.appendChild(node); } setLastSync(new Date()); showToast("Data synced successfully", 2200); } catch (e) { // Fallback: render sample widgets clearDashboard(); const w1 = revenueWidget(sampleData.revenue); w1.dataset.widgetKey = "revenue"; const w2 = engagementWidget(sampleData.engagement); w2.dataset.widgetKey = "engagement"; const w3 = funnelWidget(sampleData.funnels); w3.dataset.widgetKey = "funnels"; const w4 = kpiWidget(sampleData.kpis); w4.dataset.widgetKey = "kpis"; [w1,w2,w3,w4].forEach(n => { makeDraggable(n); dashboard.appendChild(n); }); setLastSync(new Date()); showToast("Using sample data (failed to fetch sheet)", 3000); } } const sampleData = { revenue: [ { Date: "2025-01-01", Amount: 12400 }, { Date: "2025-01-08", Amount: 18800 }, { Date: "2025-01-15", Amount: 14500 }, { Date: "2025-01-22", Amount: 21000 }, { Date: "2025-01-29", Amount: 24000 }, { Date: "2025-02-05", Amount: 19800 }, { Date: "2025-02-12", Amount: 26000 }, { Date: "2025-02-19", Amount: 30000 } ], engagement: [ { Date: "2025-01-01", Sessions: 1200 }, { Date: "2025-01-08", Sessions: 1880 }, { Date: "2025-01-15", Sessions: 1450 }, { Date: "2025-01-22", Sessions: 2100 }, { Date: "2025-01-29", Sessions: 2400 }, { Date: "2025-02-05", Sessions: 1980 }, { Date: "2025-02-12", Sessions: 2600 }, { Date: "2025-02-19", Sessions: 3000 } ], funnels: [ { Step: "Visited", Count: 30000 }, { Step: "Signups", Count: 7200 }, { Step: "Activated", Count: 4100 }, { Step: "Purchased", Count: 950 } ], kpis: [ { "Active Users": 12400, "Churn %": "2.3%", "ARPU": "$4.35", "Conversion %": "3.2%" } ] }; refreshBtn.addEventListener("click", () => { renderAll(); }); applySheetBtn.addEventListener("click", () => { const v = sheetInput.value.trim(); if (!v) { showToast("Paste a valid Google Sheets URL or ID first", 2000); return; } sessionStorage.setItem("userSheetUrl", v); showToast("Sheet applied — fetching...", 1200); renderAll(); }); toggleEdit.addEventListener("click", () => { editMode = !editMode; document.querySelectorAll(".draggable").forEach(el => { el.setAttribute("draggable", editMode ? "true" : "false"); }); toggleEdit.textContent = editMode ? "Exit Edit" : "Edit Layout"; showToast(editMode ? "Layout edit enabled" : "Layout edit disabled", 1200); }); // initial render document.addEventListener("DOMContentLoaded", async () => { // If user hasn't provided a sheet id in config, try to read stored paste if (!CONFIG.GOOGLE_SHEET_ID && sessionStorage.getItem("userSheetUrl")) { sheetInput.value = sessionStorage.getItem("userSheetUrl"); } await renderAll(); }); // Expose for console debugging window.__CYBER_DASH__ = { renderAll, sampleData };