<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Analytics</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Font: Poppins (used for a clean, modern dashboard look) -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #1E90FF;
/* changed from violet to blue (DodgerBlue) */
--secondary-color: #63A4FF;
/* complementary lighter blue */
--success-color: #28C76F;
--danger-color: #EA5455;
--warning-color: #FF9F43;
--info-color: #00CFE8;
--dark-color: #2E2E59;
--light-color: #F7F7FC;
--sidebar-width: 260px;
--header-height: 65px;
--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* Use Poppins for a modern, friendly UI; fall back to common system fonts */
font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #F0F0F5;
color: #626262;
overflow-x: hidden;
}
/* Layout Structure */
.app-container {
display: flex;
min-height: 100vh;
}
/* Sidebar Styles */
.sidebar {
width: var(--sidebar-width);
background-color: white;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 100;
transition: transform 0.3s ease;
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid #EAEAEF;
display: flex;
align-items: center;
}
.logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.logo i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.nav-menu {
padding: 1rem 0;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
color: #626262;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.nav-link:hover {
color: var(--primary-color);
background-color: rgba(115, 103, 240, 0.08);
}
.nav-link.active {
color: white;
background-color: var(--primary-color);
}
.nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background-color: var(--secondary-color);
}
.nav-link i {
width: 24px;
margin-right: 0.75rem;
font-size: 1.1rem;
}
.nav-text {
font-size: 0.95rem;
font-weight: 500;
}
.nav-badge {
margin-left: auto;
background-color: var(--danger-color);
color: white;
font-size: 0.7rem;
padding: 0.15rem 0.4rem;
border-radius: 10px;
}
/* Main Content */
.main-content {
flex: 1;
margin-left: var(--sidebar-width);
transition: margin-left 0.3s ease;
}
/* Header */
.header {
background-color: white;
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 50;
}
.header-left {
display: flex;
align-items: center;
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--dark-color);
cursor: pointer;
margin-right: 1rem;
}
.search-bar {
position: relative;
width: 300px;
}
.search-bar input {
width: 100%;
padding: 0.5rem 2.5rem 0.5rem 1rem;
border: 1px solid #EAEAEF;
border-radius: 5px;
background-color: #F7F7FC;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.search-bar input:focus {
outline: none;
border-color: var(--primary-color);
background-color: white;
}
.search-bar i {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #A5A3AE;
}
.header-right {
display: flex;
align-items: center;
}
.header-item {
position: relative;
margin-left: 1.5rem;
cursor: pointer;
}
.header-item i {
font-size: 1.2rem;
color: #626262;
transition: color 0.3s ease;
}
.header-item:hover i {
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
background-color: var(--danger-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 600;
}
.user-profile {
display: flex;
align-items: center;
margin-left: 1.5rem;
cursor: pointer;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-info {
margin-left: 0.75rem;
}
.user-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--dark-color);
}
.user-role {
font-size: 0.75rem;
color: #A5A3AE;
}
/* Dashboard Content */
.dashboard-content {
padding: 2rem;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: var(--dark-color);
margin-bottom: 0.5rem;
}
.breadcrumb {
display: flex;
align-items: center;
margin-bottom: 2rem;
font-size: 0.9rem;
}
.breadcrumb-item {
color: #A5A3AE;
}
.breadcrumb-item:not(:last-child)::after {
content: '/';
margin: 0 0.5rem;
}
.breadcrumb-item.active {
color: var(--primary-color);
}
/* Stats Cards */
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
border-radius: 50%;
transform: translate(30px, -30px);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.stat-title {
font-size: 0.85rem;
color: #A5A3AE;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.stat-icon.primary {
background-color: rgba(115, 103, 240, 0.1);
color: var(--primary-color);
}
.stat-icon.success {
background-color: rgba(40, 199, 111, 0.1);
color: var(--success-color);
}
.stat-icon.danger {
background-color: rgba(234, 84, 85, 0.1);
color: var(--danger-color);
}
.stat-icon.warning {
background-color: rgba(255, 159, 67, 0.1);
color: var(--warning-color);
}
.stat-icon.info {
background-color: rgba(0, 207, 232, 0.1);
color: var(--info-color);
}
.stat-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 0.5rem;
}
.stat-change {
display: flex;
align-items: center;
font-size: 0.85rem;
}
.stat-change.positive {
color: var(--success-color);
}
.stat-change.negative {
color: var(--danger-color);
}
.stat-change i {
margin-right: 0.25rem;
}
/* Chart Cards */
.charts-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.chart-card {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.chart-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--dark-color);
}
.chart-options {
display: flex;
}
.chart-option {
padding: 0.25rem 0.75rem;
margin-left: 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s ease;
}
.chart-option.active {
background-color: var(--primary-color);
color: white;
}
.chart-option:not(.active) {
background-color: #F0F0F5;
color: #626262;
}
.chart-option:not(.active):hover {
background-color: #EAEAEF;
}
.chart-container {
height: 300px;
position: relative;
}
/* Simple Chart CSS */
.bar-chart {
display: flex;
align-items: flex-end;
height: 100%;
padding: 1rem 0;
}
.bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.bar {
width: 70%;
background: linear-gradient(to top, var(--primary-color), var(--secondary-color));
border-radius: 4px 4px 0 0;
position: relative;
transition: all 0.3s ease;
}
.bar:hover {
opacity: 0.8;
}
.bar-label {
margin-top: 0.5rem;
font-size: 0.8rem;
color: #A5A3AE;
}
/* Tables */
.table-card {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
margin-bottom: 2rem;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.table-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--dark-color);
}
.table-action {
padding: 0.5rem 1rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
}
.table-action:hover {
background-color: var(--secondary-color);
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
text-align: left;
padding: 0.75rem 1rem;
border-bottom: 1px solid #EAEAEF;
font-size: 0.85rem;
color: #A5A3AE;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.data-table td {
padding: 1rem;
border-bottom: 1px solid #F0F0F5;
font-size: 0.9rem;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover {
background-color: #F9F9FC;
}
.country-info {
display: flex;
align-items: center;
}
.country-flag {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 0.75rem;
object-fit: cover;
}
.country-name {
font-weight: 500;
color: var(--dark-color);
}
.table-value {
font-weight: 600;
color: var(--dark-color);
}
.table-change {
display: flex;
align-items: center;
font-size: 0.85rem;
}
.table-change.positive {
color: var(--success-color);
}
.table-change.negative {
color: var(--danger-color);
}
.table-change i {
margin-right: 0.25rem;
}
/* Progress Bars */
.progress-container {
margin-bottom: 1.5rem;
}
.progress-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.progress-title {
font-size: 0.9rem;
font-weight: 500;
color: var(--dark-color);
}
.progress-value {
font-size: 0.85rem;
font-weight: 600;
color: var(--primary-color);
}
.progress-bar {
height: 8px;
background-color: #F0F0F5;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
border-radius: 4px;
transition: width 1s ease;
}
/* Responsive */
@media (max-width: 1200px) {
.charts-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 992px) {
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.menu-toggle {
display: block;
}
.search-bar {
display: none;
}
.user-info {
display: none;
}
.stats-container {
grid-template-columns: 1fr;
}
}
/* Loading Animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, .3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Tooltip */
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background-color: var(--dark-color);
color: white;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.tooltip:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<div class="app-container">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="logo">
<i class="fas fa-cube"></i>
<span>NovaDash</span>
</div>
</div>
<nav class="nav-menu">
<div class="nav-item">
<a href="index.html" class="nav-link active">
<i class="fas fa-home"></i>
<span class="nav-text">Dashboards</span>
</a>
</div>
<div class="nav-item">
<a href="crm.html" class="nav-link">
<i class="fas fa-briefcase"></i>
<span class="nav-text">CRM</span>
</a>
</div>
<div class="nav-item">
<a href="ecommerce.html" class="nav-link">
<i class="fas fa-shopping-cart"></i>
<span class="nav-text">Ecommerce</span>
<span class="nav-badge">5</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-envelope"></i>
<span class="nav-text">Email</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-comment"></i>
<span class="nav-text">Chat</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-check-square"></i>
<span class="nav-text">Todo</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-calendar"></i>
<span class="nav-text">Calendar</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-file-alt"></i>
<span class="nav-text">Invoice</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-users"></i>
<span class="nav-text">Users</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-key"></i>
<span class="nav-text">Roles & Permissions</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-pager"></i>
<span class="nav-text">Pages</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-file-alt"></i>
<span class="nav-text">Documentation</span>
</a>
</div>
</nav>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Header -->
<header class="header">
<div class="header-left">
<button class="menu-toggle" id="menuToggle">
<i class="fas fa-bars"></i>
</button>
<div class="search-bar">
<input type="text" placeholder="Search...">
<i class="fas fa-search"></i>
</div>
</div>
<div class="header-right">
<div class="header-item tooltip" data-tooltip="Notifications">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</div>
<div class="header-item tooltip" data-tooltip="Settings">
<i class="fas fa-cog"></i>
</div>
<div class="user-profile">
<img src="https://picsum.photos/seed/user123/40/40.jpg" alt="User" class="user-avatar">
<div class="user-info">
<div class="user-name">John Doe</div>
<div class="user-role">Admin</div>
</div>
</div>
</div>
</header>
<!-- Dashboard Content -->
<div class="dashboard-content">
<h1 class="page-title">Analytics Dashboard</h1>
<div class="breadcrumb">
<span class="breadcrumb-item">Home</span>
<span class="breadcrumb-item">Dashboards</span>
<span class="breadcrumb-item active">Analytics</span>
</div>
<!-- Stats Cards -->
<div class="stats-container">
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Website Analytics</div>
<div class="stat-icon primary">
<i class="fas fa-chart-pie"></i>
</div>
</div>
<div class="stat-value">28.5%</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>Conversion Rate</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Average Daily Sales</div>
<div class="stat-icon success">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div class="stat-value">$28,450</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>+12.5% from last month</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Sales Overview</div>
<div class="stat-icon warning">
<i class="fas fa-shopping-bag"></i>
</div>
</div>
<div class="stat-value">$42.5k</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>+18.2% from last month</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Earning Reports</div>
<div class="stat-icon info">
<i class="fas fa-wallet"></i>
</div>
</div>
<div class="stat-value">$468</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>+4.2% weekly earnings</span>
</div>
</div>
</div>
<!-- Charts Container -->
<div class="charts-container">
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">Sales Overview</h3>
<div class="chart-options">
<button class="chart-option active">Monthly</button>
<button class="chart-option">Weekly</button>
<button class="chart-option">Daily</button>
</div>
</div>
<div class="chart-container">
<div class="bar-chart" id="salesChart">
<!-- Chart bars will be generated by JavaScript -->
</div>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">Support Tracker</h3>
<div class="chart-options">
<button class="chart-option active">This Month</button>
<button class="chart-option">Last Month</button>
</div>
</div>
<div class="chart-container">
<div class="progress-container">
<div class="progress-header">
<div class="progress-title">New Tickets</div>
<div class="progress-value">42</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 42%"></div>
</div>
</div>
<div class="progress-container">
<div class="progress-header">
<div class="progress-title">Open Tickets</div>
<div class="progress-value">28</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 28%"></div>
</div>
</div>
<div class="progress-container">
<div class="progress-header">
<div class="progress-title">Response Time</div>
<div class="progress-value">1h 24m</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 65%"></div>
</div>
</div>
<div class="progress-container">
<div class="progress-header">
<div class="progress-title">Total Tickets</div>
<div class="progress-value">164</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Sales by Countries Table -->
<div class="table-card">
<div class="table-header">
<h3 class="table-title">Sales by Countries</h3>
<button class="table-action">View All</button>
</div>
<table class="data-table">
<thead>
<tr>
<th>Country</th>
<th>Sales</th>
<th>Change</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="country-info">
<img src="https://picsum.photos/seed/usflag/24/24.jpg" alt="USA" class="country-flag">
<span class="country-name">United States</span>
</div>
</td>
<td class="table-value">$8,567k</td>
<td>
<div class="table-change positive">
<i class="fas fa-arrow-up"></i>
<span>25.8%</span>
</div>
</td>
<td>
<div class="progress-bar" style="width: 100px; height: 6px;">
<div class="progress-fill" style="width: 87%"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="country-info">
<img src="https://picsum.photos/seed/ukflag/24/24.jpg" alt="UK" class="country-flag">
<span class="country-name">United Kingdom</span>
</div>
</td>
<td class="table-value">$2,415k</td>
<td>
<div class="table-change positive">
<i class="fas fa-arrow-up"></i>
<span>6.2%</span>
</div>
</td>
<td>
<div class="progress-bar" style="width: 100px; height: 6px;">
<div class="progress-fill" style="width: 65%"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="country-info">
<img src="https://picsum.photos/seed/brflag/24/24.jpg" alt="Brazil" class="country-flag">
<span class="country-name">Brazil</span>
</div>
</td>
<td class="table-value">$1,879k</td>
<td>
<div class="table-change negative">
<i class="fas fa-arrow-down"></i>
<span>4.1%</span>
</div>
</td>
<td>
<div class="progress-bar" style="width: 100px; height: 6px;">
<div class="progress-fill" style="width: 42%"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="country-info">
<img src="https://picsum.photos/seed/inflag/24/24.jpg" alt="India" class="country-flag">
<span class="country-name">India</span>
</div>
</td>
<td class="table-value">$3,648k</td>
<td>
<div class="table-change positive">
<i class="fas fa-arrow-up"></i>
<span>12.4%</span>
</div>
</td>
<td>
<div class="progress-bar" style="width: 100px; height: 6px;">
<div class="progress-fill" style="width: 73%"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="country-info">
<img src="https://picsum.photos/seed/auflag/24/24.jpg" alt="Australia" class="country-flag">
<span class="country-name">Australia</span>
</div>
</td>
<td class="table-value">$2,084k</td>
<td>
<div class="table-change positive">
<i class="fas fa-arrow-up"></i>
<span>9.3%</span>
</div>
</td>
<td>
<div class="progress-bar" style="width: 100px; height: 6px;">
<div class="progress-fill" style="width: 58%"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Total Earning Card -->
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">Total Earning</h3>
<div class="chart-options">
<button class="chart-option active">This Year</button>
<button class="chart-option">Last Year</button>
</div>
</div>
<div class="chart-container">
<div class="bar-chart" id="earningChart">
<!-- Chart bars will be generated by JavaScript -->
</div>
</div>
</div>
</div>
</main>
</div>
<script>
// DOM Elements
const menuToggle = document.getElementById('menuToggle');
const sidebar = document.getElementById('sidebar');
const salesChart = document.getElementById('salesChart');
const earningChart = document.getElementById('earningChart');
const chartOptions = document.querySelectorAll('.chart-option');
// Toggle Sidebar
menuToggle.addEventListener('click', () => {
sidebar.classList.toggle('active');
});
// Close sidebar when clicking outside on mobile
document.addEventListener('click', (e) => {
if (window.innerWidth <= 768) {
if (!sidebar.contains(e.target) && !menuToggle.contains(e.target)) {
sidebar.classList.remove('active');
}
}
});
// Generate Bar Chart
function generateBarChart(containerId, data) {
const container = document.getElementById(containerId);
container.innerHTML = '';
data.forEach(item => {
const barGroup = document.createElement('div');
barGroup.className = 'bar-group';
const bar = document.createElement('div');
bar.className = 'bar';
bar.style.height = `${item.value}%`;
const label = document.createElement('div');
label.className = 'bar-label';
label.textContent = item.label;
barGroup.appendChild(bar);
barGroup.appendChild(label);
container.appendChild(barGroup);
// Animate bars on load
setTimeout(() => {
bar.style.height = `${item.value}%`;
}, 100);
});
}
// Sales Chart Data
const salesData = [
{label: 'Jan', value: 65},
{label: 'Feb', value: 78},
{label: 'Mar', value: 90},
{label: 'Apr', value: 81},
{label: 'May', value: 56},
{label: 'Jun', value: 75},
{label: 'Jul', value: 88},
{label: 'Aug', value: 92},
{label: 'Sep', value: 73},
{label: 'Oct', value: 85},
{label: 'Nov', value: 79},
{label: 'Dec', value: 95}
];
// Earning Chart Data
const earningData = [
{label: 'Jan', value: 45},
{label: 'Feb', value: 52},
{label: 'Mar', value: 68},
{label: 'Apr', value: 74},
{label: 'May', value: 62},
{label: 'Jun', value: 85},
{label: 'Jul', value: 78},
{label: 'Aug', value: 92},
{label: 'Sep', value: 88},
{label: 'Oct', value: 95},
{label: 'Nov', value: 82},
{label: 'Dec', value: 98}
];
// Initialize Charts
generateBarChart('salesChart', salesData);
generateBarChart('earningChart', earningData);
// Chart Options Click Handler
chartOptions.forEach(option => {
option.addEventListener('click', function() {
// Remove active class from all options in the same group
const parent = this.parentElement;
parent.querySelectorAll('.chart-option').forEach(opt => {
opt.classList.remove('active');
});
// Add active class to clicked option
this.classList.add('active');
// Regenerate chart with new data (in a real app, this would fetch different data)
if (parent.parentElement.parentElement.querySelector('#salesChart')) {
// Randomize data for demo purposes
const newData = salesData.map(item => ({
...item,
value: Math.floor(Math.random() * 60) + 40
}));
generateBarChart('salesChart', newData);
} else if (parent.parentElement.parentElement.querySelector('#earningChart')) {
// Randomize data for demo purposes
const newData = earningData.map(item => ({
...item,
value: Math.floor(Math.random() * 60) + 40
}));
generateBarChart('earningChart', newData);
}
});
});
// Animate progress bars on scroll
const progressBars = document.querySelectorAll('.progress-fill');
function animateProgressBars() {
progressBars.forEach(bar => {
const width = bar.style.width;
bar.style.width = '0';
setTimeout(() => {
bar.style.width = width;
}, 100);
});
}
// Initial animation
setTimeout(animateProgressBars, 500);
// Handle window resize
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
sidebar.classList.remove('active');
}
});
// Simulate real-time data updates
setInterval(() => {
// Update a random stat card
const statValues = document.querySelectorAll('.stat-value');
const randomIndex = Math.floor(Math.random() * statValues.length);
const statValue = statValues[randomIndex];
// Store original value
const originalValue = statValue.textContent;
// Add loading animation
statValue.innerHTML = '<span class="loading"></span>';
// Simulate data fetch
setTimeout(() => {
// Restore with slight change
if (originalValue.includes('%')) {
const numValue = parseFloat(originalValue);
const change = (Math.random() * 2 - 1).toFixed(1);
statValue.textContent = `${(numValue + parseFloat(change)).toFixed(1)}%`;
} else if (originalValue.includes('$')) {
const numValue = parseFloat(originalValue.replace(/[$,k]/g, ''));
const change = Math.floor(Math.random() * 1000 - 500);
if (originalValue.includes('k')) {
statValue.textContent = `$${((numValue + change / 1000).toFixed(1))}k`;
} else {
statValue.textContent = `$${(numValue + change).toLocaleString()}`;
}
}
}, 1000);
}, 10000); // Update every 10 seconds
</script>
</body>
</html>