Dash.OS: Drag & Drop Dashboard Widget System

A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

This tailwind example is contributed by Ijila Itunu, on 09-Mar-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics,Graph,Admin Dashboard, User dashboard

Breadcrumb Stats Chart Dashboard Progress Bar Widget

Author Ijila Itunu

Tailwind v3.4 940 1

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dashboard Widget System</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.27/interact.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

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

body {
      font-family: 'Syne', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      transition: background .3s, color .3s;
    }

/* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }

/* ── Header ── */
    .header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      height: 56px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky; top: 0;
      z-index: 200;
      transition: background .3s, border-color .3s;
    }
    .logo {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .logo em { font-style: normal; color: var(--accent); }
    .logo sub {
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text2);
      font-weight: 400;
      margin-left: 4px;
      letter-spacing: 0;
    }

.header-right { display: flex; align-items: center; gap: 8px; }

.btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      font-family: 'Syne', sans-serif;
      font-size: 12px; font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      user-select: none;
    }
    .btn:hover { background: var(--border); }

.btn-primary {
      background: var(--accent);
      color: #000;
      border-color: var(--accent);
    }
    .btn-primary:hover { opacity: .85; background: var(--accent); }

.icon-btn {
      width: 34px; height: 34px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all .15s;
    }
    .icon-btn:hover { background: var(--border); }

/* ── Toolbar ── */
    .toolbar {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 10px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      transition: background .3s, border-color .3s;
    }
    .toolbar-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .toolbar-label {
      font-size: 10px; font-weight: 700; letter-spacing: .6px;
      text-transform: uppercase; color: var(--text2);
      margin-right: 4px;
    }
    .chip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 12px;
      border-radius: 9999px;
      border: 1px dashed var(--border);
      background: transparent;
      color: var(--text2);
      font-family: 'Syne', sans-serif;
      font-size: 11px; font-weight: 700;
      cursor: pointer;
      transition: all .2s;
    }
    .chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(34,211,238,.05); }
    .chip[data-theme-light] { --accent: #0284c7; }

.hint-text {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: var(--text2);
    }

/* ── Grid Area ── */
    .grid-area {
      position: relative;
      min-height: calc(100vh - 120px);
      overflow: hidden;
    }
    .grid-area::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle, var(--border) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
      opacity: .6;
      transition: opacity .3s;
    }

/* ── Widget ── */
    .widget {
      position: absolute;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex; flex-direction: column;
      overflow: hidden;
      min-width: 220px; min-height: 160px;
      transition: box-shadow .2s, border-color .2s, background .3s;
      will-change: transform;
    }
    .widget:hover {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent), 0 8px 32px var(--shadow);
    }
    .widget.dragging {
      opacity: .92;
      z-index: 500;
      box-shadow: 0 24px 64px var(--shadow);
      border-color: var(--accent);
    }
    .widget.minimized .widget-body { display: none; }

.widget-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
      cursor: grab;
      user-select: none;
      flex-shrink: 0;
      transition: background .3s, border-color .3s;
    }
    .widget-header:active { cursor: grabbing; }

.widget-title {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; font-weight: 700;
      letter-spacing: .4px; text-transform: uppercase;
      color: var(--text2);
    }
    .w-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

.widget-controls { display: flex; gap: 3px; }
    .wc-btn {
      width: 22px; height: 22px;
      border-radius: 5px;
      border: none; background: transparent;
      color: var(--text2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all .15s;
    }
    .wc-btn:hover { background: var(--border); color: var(--text); }
    .wc-btn.close:hover { color: var(--danger); background: rgba(239,68,68,.1); }

.widget-body {
      flex: 1;
      padding: 14px;
      overflow: auto;
      position: relative;
    }

.resize-handle {
      position: absolute; bottom: 0; right: 0;
      width: 22px; height: 22px;
      display: flex; align-items: flex-end; justify-content: flex-end;
      padding: 4px;
      color: var(--text2);
      opacity: 0; cursor: se-resize;
      transition: opacity .2s;
    }
    .widget:hover .resize-handle { opacity: 1; }

/* ── Stats Widget ── */
    .stats-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 10px; height: 100%;
    }
    .stat-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px;
      display: flex; flex-direction: column; gap: 6px;
      transition: background .3s, border-color .3s;
    }
    .stat-label {
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .5px;
      color: var(--text2);
    }
    .stat-val {
      font-family: 'JetBrains Mono', monospace;
      font-size: 22px; font-weight: 500;
      line-height: 1;
    }
    .stat-delta {
      font-size: 11px; font-weight: 700;
      display: flex; align-items: center; gap: 3px;
    }
    .stat-delta.up { color: var(--success); }
    .stat-delta.dn { color: var(--danger); }

/* ── Tasks Widget ── */
    .task-list { display: flex; flex-direction: column; gap: 7px; }
    .task-item {
      display: flex; align-items: center; gap: 9px;
      padding: 9px 11px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all .15s;
    }
    .task-item:hover { border-color: var(--accent); }
    .task-cb {
      width: 15px; height: 15px; flex-shrink: 0;
      border: 2px solid var(--border); border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .task-item.done .task-cb { background: var(--success); border-color: var(--success); }
    .task-text { font-size: 12px; flex: 1; transition: all .15s; }
    .task-item.done .task-text { text-decoration: line-through; color: var(--text2); }
    .task-badge {
      font-size: 9px; font-weight: 700;
      padding: 2px 7px; border-radius: 9999px;
      text-transform: uppercase; letter-spacing: .3px;
    }
    .badge-h { background: rgba(239,68,68,.12); color: var(--danger); }
    .badge-m { background: rgba(249,115,22,.12); color: var(--accent2); }
    .badge-l { background: rgba(34,197,94,.12); color: var(--success); }

/* ── Notifications Widget ── */
    .notif-list { display: flex; flex-direction: column; gap: 7px; }
    .notif-item {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      position: relative;
      transition: border-color .15s;
    }
    .notif-item:hover { border-color: var(--accent); }
    .notif-item.unread::before {
      content: '';
      position: absolute; left: 0; top: 50%;
      transform: translateY(-50%);
      width: 3px; height: 55%;
      background: var(--accent);
      border-radius: 0 3px 3px 0;
    }
    .notif-ico {
      width: 30px; height: 30px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; flex-shrink: 0;
    }
    .notif-body { flex: 1; }
    .notif-title { font-size: 12px; font-weight: 700; }
    .notif-desc { font-size: 11px; color: var(--text2); margin-top: 2px; }
    .notif-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: var(--text2); flex-shrink: 0;
    }

/* ── Revenue header row ── */
    .rev-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .rev-kpi {
      font-family: 'JetBrains Mono', monospace;
      font-size: 26px; font-weight: 500;
      color: var(--accent);
    }
    .rev-sub { font-size: 10px; color: var(--text2); margin-top: 1px; }
    .rev-badge {
      font-size: 11px; font-weight: 700;
      background: rgba(34,197,94,.12); color: var(--success);
      padding: 3px 10px; border-radius: 9999px;
    }

/* ── Toast ── */
    .toast {
      position: fixed; bottom: 20px; right: 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--success);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 12px; font-weight: 700;
      display: flex; align-items: center; gap: 7px;
      z-index: 9999;
      transform: translateY(80px); opacity: 0;
      transition: all .4s cubic-bezier(.34,1.56,.64,1);
      pointer-events: none;
    }
    .toast.show { transform: translateY(0); opacity: 1; }

/* ── Enter animation ── */
    @keyframes widgetIn {
      from { opacity: 0; transform: scale(.94) translateY(8px); }
      to   { opacity: 1; transform: scale(1)  translateY(0); }
    }
    .widget { animation: widgetIn .25s ease forwards; }
  </style>
</head>
<body>

<header class="header">
  <div class="logo">dash<em>.</em>OS<sub>v1.0</sub></div>
  <div class="header-right">
    <button class="icon-btn" id="themeToggle" title="Toggle theme">
      
      <svg id="iconSun" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707"/>
      </svg>
      
      <svg id="iconMoon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" viewBox="0 0 16 16" style="display:none">
        <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
      </svg>
    </button>
    <button class="btn" id="resetBtn">↺ Reset</button>
    <button class="btn btn-primary" id="saveBtn">✦ Save Layout</button>
  </div>
</header>

<div class="toolbar">
  <div class="toolbar-left">
    <span class="toolbar-label">+ Widget</span>
    <button class="chip" data-type="revenue">📈 Revenue</button>
    <button class="chip" data-type="stats">📊 KPI Stats</button>
    <button class="chip" data-type="tasks">✓ Tasks</button>
    <button class="chip" data-type="notifications">🔔 Alerts</button>
  </div>
  <span class="hint-text">drag header · resize corner · auto-saves</span>
</div>

<div class="grid-area" id="gridArea"></div>

<div class="toast" id="toast">
  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </svg>
  <span id="toastMsg">Saved!</span>
</div>

<script>
/* ─── Constants ─────────────────────────────────────────────── */
const SNAP       = 20;
const STORE_KEY  = 'dashOS_layout_v2';
const THEME_KEY  = 'dashOS_theme';

/* ─── Default Layout ────────────────────────────────────────── */
const DEFAULT_LAYOUT = [
  { id:'w_revenue_0',       type:'revenue',       title:'Revenue Overview', x:0,   y:0,   w:600, h:330 },
  { id:'w_stats_0',         type:'stats',         title:'KPI Metrics',      x:620, y:0,   w:370, h:330 },
  { id:'w_tasks_0',         type:'tasks',         title:'Tasks',            x:0,   y:350, w:370, h:370 },
  { id:'w_notifications_0', type:'notifications', title:'Notifications',    x:390, y:350, w:600, h:370 },
];

/* ─── State ─────────────────────────────────────────────────── */
let charts = {};   // widgetId → Chart instance

/* ─── Widget HTML builders ──────────────────────────────────── */
function buildRevenue(id) {
  return `
    <div class="rev-header">
      <div>
        <div class="rev-kpi">$470,240</div>
        <div class="rev-sub">Total revenue · YTD</div>
      </div>
      <span class="rev-badge">↑ 12.4% vs last year</span>
    </div>
    <div style="position:relative;flex:1;min-height:0;height:calc(100% - 60px)">
      <canvas id="canvas_${id}" style="width:100%;height:100%"></canvas>
    </div>`;
}

function buildStats() {
  return `
    <div class="stats-grid">
      <div class="stat-card">
        <span class="stat-label">Active Users</span>
        <span class="stat-val" style="color:var(--accent3)">8,241</span>
        <span class="stat-delta up">↑ 7.2% this week</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Conversion</span>
        <span class="stat-val" style="color:var(--accent2)">3.8%</span>
        <span class="stat-delta dn">↓ 0.3% vs avg</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Avg. Order</span>
        <span class="stat-val">$284</span>
        <span class="stat-delta up">↑ 5.1%</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Churn Rate</span>
        <span class="stat-val" style="color:var(--danger)">1.9%</span>
        <span class="stat-delta up">↓ 0.4% improved</span>
      </div>
    </div>`;
}

function buildTasks() {
  const tasks = [
    { text:'Design system audit',        done:true,  badge:'badge-h', label:'high'  },
    { text:'Q3 performance review',      done:false, badge:'badge-h', label:'high'  },
    { text:'API rate limit docs',        done:false, badge:'badge-m', label:'med'   },
    { text:'Onboarding flow update',     done:false, badge:'badge-m', label:'med'   },
    { text:'Fix sidebar alignment bug',  done:true,  badge:'badge-l', label:'low'   },
    { text:'Analytics dashboard v2',     done:false, badge:'badge-l', label:'low'   },
  ];
  return `<div class="task-list">${tasks.map((t,i) => `
    <div class="task-item ${t.done?'done':''}" onclick="toggleTask(this)">
      <div class="task-cb">
        ${t.done?`<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="white" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>`:''}
      </div>
      <span class="task-text">${t.text}</span>
      <span class="task-badge ${t.badge}">${t.label}</span>
    </div>`).join('')}</div>`;
}

function buildNotifications() {
  const items = [
    { ico:'💰', bg:'rgba(34,211,238,.1)',  title:'Revenue milestone hit',   desc:'Monthly target exceeded by 12%',        time:'2m',  unread:true  },
    { ico:'👤', bg:'rgba(167,139,250,.1)', title:'New team member joined',  desc:'Sarah Chen added to Engineering',        time:'18m', unread:true  },
    { ico:'⚠️', bg:'rgba(249,115,22,.1)', title:'API latency spike',        desc:'P95 latency rose to 840ms',              time:'1h',  unread:true  },
    { ico:'✅', bg:'rgba(34,197,94,.1)',   title:'Deploy successful',        desc:'v2.4.1 shipped to production',           time:'3h',  unread:false },
    { ico:'📊', bg:'rgba(34,211,238,.1)',  title:'Weekly report ready',     desc:'View analytics for the last 7 days',     time:'5h',  unread:false },
  ];
  return `<div class="notif-list">${items.map(n => `
    <div class="notif-item ${n.unread?'unread':''}">
      <div class="notif-ico" style="background:${n.bg}">${n.ico}</div>
      <div class="notif-body">
        <div class="notif-title">${n.title}</div>
        <div class="notif-desc">${n.desc}</div>
      </div>
      <span class="notif-time">${n.time} ago</span>
    </div>`).join('')}</div>`;
}

/* ─── Chart creation ────────────────────────────────────────── */
function createRevenueChart(widgetId) {
  const canvas = document.getElementById(`canvas_${widgetId}`);
  if (!canvas) return;

// destroy previous instance if exists
  if (charts[widgetId]) { charts[widgetId].destroy(); delete charts[widgetId]; }

const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
  const gridColor   = isDark ? '#1f2133' : '#e2e8f0';
  const tickColor   = isDark ? '#64748b' : '#94a3b8';
  const tooltipBg   = isDark ? '#0f1018' : '#ffffff';
  const tooltipText = isDark ? '#e2e8f0' : '#0f172a';

charts[widgetId] = new Chart(canvas.getContext('2d'), {
    type: 'line',
    data: {
      labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul'],
      datasets: [
        {
          label: 'Revenue',
          data: [42000,58000,51000,73000,68000,91000,87000],
          borderColor: '#22d3ee',
          backgroundColor: 'rgba(34,211,238,.07)',
          borderWidth: 2,
          pointBackgroundColor: '#22d3ee',
          pointRadius: 4, pointHoverRadius: 6,
          tension: .4, fill: true,
        },
        {
          label: 'Expenses',
          data: [28000,32000,30000,41000,38000,52000,47000],
          borderColor: '#f97316',
          backgroundColor: 'rgba(249,115,22,.05)',
          borderWidth: 2,
          pointBackgroundColor: '#f97316',
          pointRadius: 4, pointHoverRadius: 6,
          tension: .4, fill: true,
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 600 },
      plugins: {
        legend: {
          labels: {
            color: tickColor,
            font: { family: 'JetBrains Mono', size: 11 },
            boxWidth: 10,
          }
        },
        tooltip: {
          backgroundColor: tooltipBg,
          borderColor: gridColor,
          borderWidth: 1,
          titleColor: tooltipText,
          bodyColor: tickColor,
          titleFont: { family: 'Syne', weight: '700', size: 12 },
          bodyFont:  { family: 'JetBrains Mono', size: 11 },
          callbacks: {
            label: ctx => ` $${ctx.raw.toLocaleString()}`,
          }
        }
      },
      scales: {
        x: {
          grid: { color: gridColor },
          ticks: { color: tickColor, font: { family: 'JetBrains Mono', size: 10 } }
        },
        y: {
          grid: { color: gridColor },
          ticks: {
            color: tickColor, font: { family: 'JetBrains Mono', size: 10 },
            callback: v => '$'+(v/1000).toFixed(0)+'k'
          }
        }
      }
    }
  });
}

/* ─── Widget element factory ─────────────────────────────────── */
function makeWidget(cfg) {
  const el = document.createElement('div');
  el.className = 'widget';
  el.id = cfg.id;
  el.dataset.type = cfg.type;
  el.style.cssText = `left:${cfg.x}px;top:${cfg.y}px;width:${cfg.w}px;height:${cfg.h}px;`;

el.innerHTML = `
    <div class="widget-header">
      <div class="widget-title">
        <span class="w-dot" style="background:${TYPE_COLOR[cfg.type]}"></span>
        ${TYPE_ICON[cfg.type]} ${cfg.title}
      </div>
      <div class="widget-controls">
        <button class="wc-btn" title="Minimise" onclick="toggleMinimise('${cfg.id}')">
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 16 16">
            <path d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>
          </svg>
        </button>
        <button class="wc-btn close" title="Remove" onclick="removeWidget('${cfg.id}')">
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
          </svg>
        </button>
      </div>
    </div>
    <div class="widget-body" id="body_${cfg.id}" style="display:flex;flex-direction:column;gap:8px;overflow:auto;"></div>
    <div class="resize-handle">
      <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 16 16">
        <path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
        <path d="M5 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4m6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-6 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4m6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
      </svg>
    </div>`;

return el;
}

function populateBody(id, type) {
  const body = document.getElementById(`body_${id}`);
  if (!body) return;
  if (type === 'revenue')       body.innerHTML = buildRevenue(id);
  else if (type === 'stats')    body.innerHTML = buildStats();
  else if (type === 'tasks')    body.innerHTML = buildTasks();
  else if (type === 'notifications') body.innerHTML = buildNotifications();
  if (type === 'revenue') requestAnimationFrame(() => createRevenueChart(id));
}

/* ─── interact.js ────────────────────────────────────────────── */
function attachInteract(el) {
  interact(el)
    .draggable({
      allowFrom: '.widget-header',
      modifiers: [
        interact.modifiers.snap({
          targets: [interact.snappers.grid({ x: SNAP, y: SNAP })],
          range: Infinity,
          relativePoints: [{ x: 0, y: 0 }]
        }),
        interact.modifiers.restrictRect({ restriction: '#gridArea', endOnly: true })
      ],
      listeners: {
        start(e) { e.target.classList.add('dragging'); },
        move(e) {
          const x = Math.max(0, (parseFloat(e.target.style.left) || 0) + e.dx);
          const y = Math.max(0, (parseFloat(e.target.style.top)  || 0) + e.dy);
          e.target.style.left = x + 'px';
          e.target.style.top  = y + 'px';
        },
        end(e) {
          e.target.classList.remove('dragging');
          autoSave();
        }
      }
    })
    .resizable({
      edges: { right: true, bottom: true, bottomRight: '.resize-handle' },
      modifiers: [
        interact.modifiers.snapSize({
          targets: [interact.snappers.grid({ width: SNAP, height: SNAP })]
        }),
        interact.modifiers.restrictSize({ minWidth: 220, minHeight: 160 })
      ],
      listeners: {
        move(e) {
          e.target.style.width  = e.rect.width  + 'px';
          e.target.style.height = e.rect.height + 'px';
          const id  = e.target.id;
          const c   = charts[id];
          if (c) c.resize();
        },
        end() { autoSave(); }
      }
    });
}

/* ─── Add / Remove / Minimise ────────────────────────────────── */
function addWidget(cfg) {
  const ga = document.getElementById('gridArea');
  const el = makeWidget(cfg);
  ga.appendChild(el);
  populateBody(cfg.id, cfg.type);
  attachInteract(el);
}

/* ─── Task toggle ────────────────────────────────────────────── */
function toggleTask(el) {
  el.classList.toggle('done');
  const cb  = el.querySelector('.task-cb');
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="white" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>`;
  cb.innerHTML = el.classList.contains('done') ? svg : '';
}

/* ─── Persistence ────────────────────────────────────────────── */
function getLayout() {
  return [...document.querySelectorAll('.widget')].map(el => ({
    id:    el.id,
    type:  el.dataset.type,
    title: TYPE_TITLE[el.dataset.type] || el.dataset.type,
    x:     parseFloat(el.style.left)   || 0,
    y:     parseFloat(el.style.top)    || 0,
    w:     parseFloat(el.style.width)  || 400,
    h:     parseFloat(el.style.height) || 300,
    minimized: el.classList.contains('minimized'),
    prevH: el.dataset.prevH || '',
  }));
}

function saveLayout() {
  localStorage.setItem(STORE_KEY, JSON.stringify(getLayout()));
  showToast('Layout saved ✓');
}

function autoSave() {
  localStorage.setItem(STORE_KEY, JSON.stringify(getLayout()));
}

function loadLayout() {
  try {
    const raw = localStorage.getItem(STORE_KEY);
    return raw ? JSON.parse(raw) : null;
  } catch { return null; }
}

/* ─── Toast ──────────────────────────────────────────────────── */
let toastTimer;
function showToast(msg) {
  const t = document.getElementById('toast');
  document.getElementById('toastMsg').textContent = msg;
  t.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove('show'), 2600);
}

/* ─── Theme ──────────────────────────────────────────────────── */
function applyTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem(THEME_KEY, theme);
  document.getElementById('iconSun' ).style.display = theme === 'dark'  ? 'block' : 'none';
  document.getElementById('iconMoon').style.display = theme === 'light' ? 'block' : 'none';
  // Re-init charts for new colours
  setTimeout(() => {
    Object.keys(charts).forEach(id => createRevenueChart(id));
  }, 60);
}

function toggleTheme() {
  const cur = document.documentElement.getAttribute('data-theme');
  applyTheme(cur === 'dark' ? 'light' : 'dark');
}

/* ─── Boot ───────────────────────────────────────────────────── */
(function init() {
  // Theme
  const savedTheme = localStorage.getItem(THEME_KEY) || 'dark';
  applyTheme(savedTheme);

// Layout
  const layout = loadLayout() || DEFAULT_LAYOUT;
  renderLayout(layout);

// Controls
  document.getElementById('saveBtn').addEventListener('click', saveLayout);
  document.getElementById('themeToggle').addEventListener('click', toggleTheme);
  document.getElementById('resetBtn').addEventListener('click', () => {
    if (confirm('Reset to the default layout? Saved layout will be cleared.')) {
      localStorage.removeItem(STORE_KEY);
      renderLayout(DEFAULT_LAYOUT);
      showToast('Layout reset ↺');
    }
  });

// Add-widget chips
  document.querySelectorAll('.chip[data-type]').forEach(btn => {
    btn.addEventListener('click', () => {
      const type = btn.dataset.type;
      const id   = `w_${type}_${Date.now()}`;
      addWidget({ id, type, title: TYPE_TITLE[type], x: 20, y: 20, w: 480, h: 320 });
      autoSave();
      showToast(`${TYPE_ICON[type]} ${TYPE_TITLE[type]} added`);
    });
  });
})();
</script>
</body>
</html>

Related Examples

Daily growth chart
chart for showing data each day of the week

Samuel Dawson

3 years ago

12k
Working reading progress bar
show how much of the page has been scrolled

Freja Jensen

3 years ago

13.4k
Progress Bar
A progress bar is a UI element that visually represents the completion status of a task or process. It helps users understand how much of a task has been completed and how much remains. Commonly used in forms, file uploads, loading screens, or multi-step processes, it enhances the user experience by providing clear feedback.

Abhiraj

1 year ago

1.4k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

SHARIFUL ISLAM

1 year ago

2.5k
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Personal Portfolio Website
Nziza HAMZY 😎! Reka dukore full TailwindCSS Portfolio yuzuye na: Hero Section About Section Projects Section (cards) Contact Form Animations & hover effects Fully responsive for mobile

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Infographic Component
Design a modern infographic component with Tailwind CSS. This component helps you display data in a clean, responsive, and visually appealing way. With utility classes, gradients, and smooth transitions, you can quickly build infographics that look professional and work perfectly on all devices.

CodewithFaraz

1 year ago

1.3k
sidebar dash
sidebar dash

Omer fils ELENGA

8 months ago

951
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

6 months ago

884
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

457