<div class="dashboard-wrapper">
<!-- Sidebar -->
<div class="sidebar-nav">
<div class="brand">
<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#3b82f6" stroke-width="2"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
</div>
<div class="nav-links">
<div class="nav-item active">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</div>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Header -->
<header class="top-header">
<div class="search-bar">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#64748b" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" class="search-input" placeholder="Search analytics...">
</div>
<div class="header-profile">
<button class="icon-btn">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="notification-dot"></span>
</button>
<img src="https://placehold.co/40x40/3b82f6/ffffff?text=AD" alt="User" class="avatar">
</div>
</header>
<!-- KPI Row -->
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-top">
<span class="kpi-title">Total Revenue</span>
<div class="kpi-icon blue"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></div>
</div>
<h2 class="kpi-value">$124,563.00</h2>
<div class="kpi-bottom"><span class="trend positive">↑ 14.5%</span><span class="vs-text">vs last month</span></div>
</div>
<div class="kpi-card">
<div class="kpi-top">
<span class="kpi-title">Active Users</span>
<div class="kpi-icon green"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div>
</div>
<h2 class="kpi-value">45,231</h2>
<div class="kpi-bottom"><span class="trend positive">↑ 8.2%</span><span class="vs-text">vs last month</span></div>
</div>
<div class="kpi-card">
<div class="kpi-top">
<span class="kpi-title">Conversion Rate</span>
<div class="kpi-icon purple"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg></div>
</div>
<h2 class="kpi-value">3.24%</h2>
<div class="kpi-bottom"><span class="trend negative">↓ 1.1%</span><span class="vs-text">vs last month</span></div>
</div>
<!-- Circular Gauge KPI -->
<div class="kpi-card">
<div class="kpi-top">
<span class="kpi-title">Server Load</span>
<div class="kpi-icon red"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg></div>
</div>
<div class="gauge-container">
<svg viewBox="0 0 100 50" class="kpi-gauge">
<path d="M 10 50 A 40 40 0 0 1 90 50" fill="none" stroke="#1e293b" stroke-width="8" stroke-linecap="round"></path>
<path id="load-gauge" d="M 10 50 A 40 40 0 0 1 90 50" fill="none" stroke="#ef4444" stroke-width="8" stroke-linecap="round" stroke-dasharray="126" stroke-dashoffset="126"></path>
</svg>
<div class="gauge-text" id="load-text">0%</div>
</div>
</div>
</div>
<!-- Main Chart Area -->
<div class="chart-section">
<div class="section-header">
<h3>Revenue Trajectory</h3>
<button class="export-btn">Download Report</button>
</div>
<div class="svg-chart-box">
<svg id="dynamic-curve" viewBox="0 0 1000 300" width="100%" height="100%" preserveAspectRatio="none">
<!-- Grid Lines -->
<line x1="0" y1="50" x2="1000" y2="50" stroke="#1e293b" stroke-width="1"></line>
<line x1="0" y1="150" x2="1000" y2="150" stroke="#1e293b" stroke-width="1"></line>
<line x1="0" y1="250" x2="1000" y2="250" stroke="#1e293b" stroke-width="1"></line>
<defs>
<linearGradient id="curve-grad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#3b82f6"></stop>
<stop offset="50%" stop-color="#8b5cf6"></stop>
<stop offset="100%" stop-color="#ec4899"></stop>
</linearGradient>
<linearGradient id="fill-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="rgba(139, 92, 246, 0.4)"></stop>
<stop offset="100%" stop-color="rgba(139, 92, 246, 0)"></stop>
</linearGradient>
</defs>
<!-- Filled Area & Line injected by JS -->
<path id="curve-fill" fill="url(#fill-grad)" opacity="0"></path>
<path id="curve-line" fill="none" stroke="url(#curve-grad)" stroke-width="4" stroke-linecap="round"></path>
</svg>
</div>
</div>
<!-- Bottom Row Layout -->
<div class="bottom-grid">
<!-- Bar Chart -->
<div class="bar-card">
<div class="section-header">
<h3>Traffic Sources</h3>
</div>
<div class="bar-chart-wrapper" id="bar-chart">
<!-- Bars injected by JS -->
</div>
<div class="bar-labels">
<span>Org</span><span>Dir</span><span>Soc</span><span>Ref</span><span>Eml</span><span>Oth</span>
</div>
</div>
<!-- Activity Feed -->
<div class="activity-card">
<div class="section-header">
<h3>Recent Activity</h3>
</div>
<div class="activity-list">
<div class="activity-item">
<img src="https://placehold.co/32x32/10b981/ffffff?text=OK" alt="User" class="activity-avatar">
<div class="activity-info">
<span class="act-title">New subscription purchased</span>
<span class="act-time">2 minutes ago</span>
</div>
<span class="status-pill status-success">Success</span>
</div>
<div class="activity-item">
<img src="https://placehold.co/32x32/f59e0b/ffffff?text=WARN" alt="User" class="activity-avatar">
<div class="activity-info">
<span class="act-title">Database sync delayed</span>
<span class="act-time">15 minutes ago</span>
</div>
<span class="status-pill status-warning">Warning</span>
</div>
<div class="activity-item">
<img src="https://placehold.co/32x32/ef4444/ffffff?text=ERR" alt="User" class="activity-avatar">
<div class="activity-info">
<span class="act-title">Payment gateway failed</span>
<span class="act-time">1 hour ago</span>
</div>
<span class="status-pill status-danger">Failed</span>
</div>
<div class="activity-item">
<img src="https://placehold.co/32x32/3b82f6/ffffff?text=INFO" alt="User" class="activity-avatar">
<div class="activity-info">
<span class="act-title">Weekly report generated</span>
<span class="act-time">3 hours ago</span>
</div>
<span class="status-pill status-info">Info</span>
</div>
</div>
</div>
</div>
</div>
</div>
Back to Snippets
Advanced Analytics Dashboard UI JS
Monitor your metrics with this enterprise-grade advanced analytics dashboard. Features include dynamic SVG curve charts, animated bar graphs, circular gauges, and a beautiful dark mode UI.
137