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.

261

#javascript

#css

#dashboard

#analytics

#svg

#charts

#grid #glassmorphism #saas

#complex ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #020617;
  color: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.dashboard-wrapper {
  display: flex;
  width: 100%;
  max-width: 1400px;
  height: 90vh;
  min-height: 800px;
  background: #0f172a;
  border-radius: 24px;
  border: 1px solid #1e293b;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.sidebar-nav {
  width: 80px;
  background: #020617;
  border-right: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}

.brand {
  margin-bottom: 40px;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nav-item {
  color: #475569;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.nav-item:hover {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
  color: #ffffff;
  background: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.main-content {
  flex-grow: 1;
  padding: 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #020617;
  border: 1px solid #1e293b;
  padding: 10px 16px;
  border-radius: 12px;
  width: 300px;
}

.search-input {
  background: transparent;
  border: none;
  color: #f8fafc;
  outline: none;
  margin-left: 12px;
  width: 100%;
  font-size: 0.95rem;
  font-family: inherit;
}

.header-profile {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #0f172a;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #1e293b;
  cursor: pointer;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.kpi-card {
  background: #020617;
  border: 1px solid #1e293b;
  padding: 24px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.kpi-title {
  color: #94a3b8;
  font-size: 0.95rem;
  font-weight: 500;
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kpi-icon.blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.kpi-icon.green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.kpi-icon.purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.kpi-icon.red { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.kpi-value {
  margin: 0 0 12px 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.kpi-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend {
  font-size: 0.85rem;
  font-weight: 600;
}
.trend.positive { color: #10b981; }
.trend.negative { color: #ef4444; }

.vs-text {
  color: #64748b;
  font-size: 0.85rem;
}

/* Custom Circular Gauge for Load */
.gauge-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.kpi-gauge {
  width: 60px;
  height: 30px;
  overflow: visible;
}

.gauge-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f8fafc;
}

.chart-section {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 20px;
  padding: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.export-btn {
  background: #1e293b;
  color: #f8fafc;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.export-btn:hover { background: #334155; }

.svg-chart-box {
  width: 100%;
  height: 280px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.bar-card, .activity-card {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 20px;
  padding: 24px;
  height: 320px;
  display: flex;
  flex-direction: column;
}

/* Bar Chart Styles */
.bar-chart-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #1e293b;
  gap: 8px;
}

.chart-bar {
  flex: 1;
  background: linear-gradient(to top, #3b82f6, #8b5cf6);
  border-radius: 4px 4px 0 0;
  height: 0%;
  transition: height 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bar-labels {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
}

.bar-labels span {
  flex: 1;
  text-align: center;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Activity Feed Styles */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.activity-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.activity-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.act-title {
  font-weight: 500;
  font-size: 0.95rem;
}

.act-time {
  color: #64748b;
  font-size: 0.8rem;
  margin-top: 4px;
}

.status-pill {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.status-warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.status-danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.status-info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

/* Responsive adjustments */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bottom-grid { grid-template-columns: 1fr; }
  .bar-card, .activity-card { height: auto; min-height: 300px; }
}

<div class="main-content">
    
    
    <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>

<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>
      
      
      <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>

<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">
          
          <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>
          
          
          <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>

<div class="bottom-grid">
      
      
      <div class="bar-card">
        <div class="section-header">
          <h3>Traffic Sources</h3>
        </div>
        <div class="bar-chart-wrapper" id="bar-chart">
          
        </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>
      
      
      <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>

/* We use native JS to animate everything without external libraries */

/* 1. Animate Main SVG Curve Chart */
const curveLine = document.getElementById("curve-line");
const curveFill = document.getElementById("curve-fill");

let pathString = "M 0 250";
let fillString = "M 0 250";
const points = 20;
const xStep = 1000 / points;

let currentY = 250;

for (let i = 1; i <= points; i++) {
  const currentX = i * xStep;
  
  /* Random trend upward */
  const change = (Math.random() * 80) - 50; 
  currentY += change;
  
  if (currentY < 20) currentY = 20;
  if (currentY > 260) currentY = 260;
  
  const prevX = (i - 1) * xStep;
  const cp1X = prevX + (xStep / 2);
  const cp1Y = currentY - change; 
  const cp2X = currentX - (xStep / 2);
  const cp2Y = currentY;
  
  const curveSegment = " C " + cp1X + " " + cp1Y + ", " + cp2X + " " + cp2Y + ", " + currentX + " " + currentY;
  pathString += curveSegment;
  fillString += curveSegment;
}

fillString += " L 1000 300 L 0 300 Z";

curveLine.setAttribute("d", pathString);
curveFill.setAttribute("d", fillString);

const pathLength = curveLine.getTotalLength();
curveLine.style.strokeDasharray = pathLength;
curveLine.style.strokeDashoffset = pathLength;
curveLine.style.transition = "stroke-dashoffset 2s cubic-bezier(0.34, 1.56, 0.64, 1)";

/* 2. Setup Bar Chart */
const barContainer = document.getElementById("bar-chart");
const numBars = 6;
const barsElements = new Array();

for (let i = 0; i < numBars; i++) {
  const bar = document.createElement("div");
  bar.className = "chart-bar";
  barContainer.appendChild(bar);
  barsElements.push(bar);
}

/* 3. Server Load Gauge Update */
const loadGauge = document.getElementById("load-gauge");
const loadText = document.getElementById("load-text");
const totalGaugeLength = 126;

function updateServerLoad() {
  const loadVal = Math.floor(Math.random() * 40) + 40; // 40 to 80%
  const offset = totalGaugeLength - (loadVal / 100) * totalGaugeLength;
  
  loadGauge.style.transition = "stroke-dashoffset 1s ease-out";
  loadGauge.style.strokeDashoffset = offset;
  loadText.innerText = loadVal + "%";
}

/* 4. Trigger Animations on Load */
setTimeout(function() {
  /* Animate line */
  curveLine.style.strokeDashoffset = 0;
  
  /* Fade in fill slightly after line starts */
  setTimeout(function() {
    curveFill.style.transition = "opacity 1.5s ease";
    curveFill.style.opacity = "1";
  }, 500);
  
  /* Animate bars */
  barsElements.forEach(function(bar) {
    const randomHeight = Math.floor(Math.random() * 70) + 20;
    bar.style.height = randomHeight + "%";
  });
  
  /* Start Gauge */
  updateServerLoad();
  setInterval(updateServerLoad, 3000);
  
}, 200);

Advanced Analytics Dashboard UI JS

Share Code Snippet