| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Spotfire MOD Dashboard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); |
| } |
| .sidebar-item:hover { |
| background-color: rgba(255, 255, 255, 0.1); |
| transform: translateX(5px); |
| } |
| .chart-container { |
| transition: all 0.3s ease; |
| } |
| .chart-container:hover { |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| transform: translateY(-5px); |
| } |
| .data-table tr:nth-child(even) { |
| background-color: #f8fafc; |
| } |
| .data-table tr:hover { |
| background-color: #f1f5f9; |
| } |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="gradient-bg text-white w-64 flex-shrink-0 flex flex-col"> |
| <div class="p-4 flex items-center border-b border-blue-700"> |
| <div class="bg-white rounded-lg p-2 mr-3"> |
| <i class="fas fa-chart-line text-blue-600 text-xl"></i> |
| </div> |
| <h1 class="text-xl font-bold">Spotfire MOD</h1> |
| </div> |
| <div class="p-4"> |
| <div class="relative mb-4"> |
| <input type="text" placeholder="Search..." class="w-full bg-blue-800 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 placeholder-blue-300"> |
| <i class="fas fa-search absolute right-3 top-3 text-blue-300"></i> |
| </div> |
| <nav class="space-y-1"> |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg text-white font-medium transition-all duration-200"> |
| <i class="fas fa-home mr-3"></i> |
| Dashboard |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg text-blue-200 font-medium transition-all duration-200"> |
| <i class="fas fa-database mr-3"></i> |
| Data Sources |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg text-blue-200 font-medium transition-all duration-200"> |
| <i class="fas fa-chart-pie mr-3"></i> |
| Visualizations |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg text-blue-200 font-medium transition-all duration-200"> |
| <i class="fas fa-sliders-h mr-3"></i> |
| Analysis |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg text-blue-200 font-medium transition-all duration-200"> |
| <i class="fas fa-users mr-3"></i> |
| Collaboration |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg text-blue-200 font-medium transition-all duration-200"> |
| <i class="fas fa-cog mr-3"></i> |
| Settings |
| </a> |
| </nav> |
| </div> |
| <div class="mt-auto p-4 border-t border-blue-700"> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <p class="font-medium">Sarah Johnson</p> |
| <p class="text-xs text-blue-200">Admin</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| |
| <header class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between"> |
| <h2 class="text-xl font-semibold text-gray-800">Sales Performance Dashboard</h2> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-plus mr-2"></i> |
| New Analysis |
| </button> |
| <button class="p-2 text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-bell"></i> |
| </button> |
| <button class="p-2 text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-question-circle"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main class="p-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-6"> |
| <div class="flex flex-wrap items-center gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Time Range</label> |
| <select class="border border-gray-300 rounded-lg px-3 py-2 w-40"> |
| <option>Last 7 Days</option> |
| <option selected>Last 30 Days</option> |
| <option>Last Quarter</option> |
| <option>Last Year</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Region</label> |
| <select class="border border-gray-300 rounded-lg px-3 py-2 w-40"> |
| <option selected>All Regions</option> |
| <option>North America</option> |
| <option>Europe</option> |
| <option>Asia</option> |
| <option>South America</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Product Category</label> |
| <select class="border border-gray-300 rounded-lg px-3 py-2 w-40"> |
| <option selected>All Categories</option> |
| <option>Electronics</option> |
| <option>Clothing</option> |
| <option>Home Goods</option> |
| <option>Food & Beverage</option> |
| </select> |
| </div> |
| <div class="ml-auto"> |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-filter mr-2"></i> |
| Advanced Filters |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-gray-500">Total Revenue</p> |
| <h3 class="text-2xl font-bold mt-1">$1,245,678</h3> |
| <p class="text-sm mt-2"><span class="text-green-500 font-medium">+12.5%</span> vs last period</p> |
| </div> |
| <div class="bg-blue-100 p-3 rounded-lg"> |
| <i class="fas fa-dollar-sign text-blue-600 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4 h-2 bg-gray-100 rounded-full"> |
| <div class="h-2 bg-blue-500 rounded-full" style="width: 72%"></div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-gray-500">Orders</p> |
| <h3 class="text-2xl font-bold mt-1">8,542</h3> |
| <p class="text-sm mt-2"><span class="text-green-500 font-medium">+8.3%</span> vs last period</p> |
| </div> |
| <div class="bg-purple-100 p-3 rounded-lg"> |
| <i class="fas fa-shopping-cart text-purple-600 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4 h-2 bg-gray-100 rounded-full"> |
| <div class="h-2 bg-purple-500 rounded-full" style="width: 65%"></div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-gray-500">Avg. Order Value</p> |
| <h3 class="text-2xl font-bold mt-1">$145.89</h3> |
| <p class="text-sm mt-2"><span class="text-green-500 font-medium">+3.9%</span> vs last period</p> |
| </div> |
| <div class="bg-green-100 p-3 rounded-lg"> |
| <i class="fas fa-chart-bar text-green-600 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4 h-2 bg-gray-100 rounded-full"> |
| <div class="h-2 bg-green-500 rounded-full" style="width: 48%"></div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-sm text-gray-500">Conversion Rate</p> |
| <h3 class="text-2xl font-bold mt-1">3.42%</h3> |
| <p class="text-sm mt-2"><span class="text-red-500 font-medium">-0.8%</span> vs last period</p> |
| </div> |
| <div class="bg-yellow-100 p-3 rounded-lg"> |
| <i class="fas fa-percent text-yellow-600 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4 h-2 bg-gray-100 rounded-full"> |
| <div class="h-2 bg-yellow-500 rounded-full" style="width: 34%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-gray-800">Revenue Trend</h3> |
| <div class="flex space-x-2"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="revenueChart"></canvas> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-gray-800">Sales by Region</h3> |
| <div class="flex space-x-2"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="regionChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-gray-800">Top Products</h3> |
| <div class="flex space-x-2"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Smartphone X</span> |
| <span class="text-sm font-medium">$324,500</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 72%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Laptop Pro</span> |
| <span class="text-sm font-medium">$278,300</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 64%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Wireless Earbuds</span> |
| <span class="text-sm font-medium">$198,750</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Smart Watch</span> |
| <span class="text-sm font-medium">$156,200</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 36%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Tablet Mini</span> |
| <span class="text-sm font-medium">$128,900</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 30%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-gray-800">Customer Satisfaction</h3> |
| <div class="flex space-x-2"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="h-64 flex items-center justify-center"> |
| <div class="relative w-40 h-40"> |
| <svg class="w-full h-full" viewBox="0 0 100 100"> |
| <circle class="text-gray-200" stroke-width="10" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> |
| <circle class="text-green-500" stroke-width="10" stroke-dasharray="251.2" stroke-dashoffset="75.36" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> |
| </svg> |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center"> |
| <span class="text-3xl font-bold text-gray-800">70%</span> |
| <p class="text-sm text-gray-500 mt-1">Satisfied</p> |
| </div> |
| </div> |
| </div> |
| <div class="grid grid-cols-3 gap-2 mt-4"> |
| <div class="text-center"> |
| <div class="h-2 bg-green-500 rounded-full"></div> |
| <p class="text-xs mt-1">5 Stars (30%)</p> |
| </div> |
| <div class="text-center"> |
| <div class="h-2 bg-blue-400 rounded-full"></div> |
| <p class="text-xs mt-1">4 Stars (40%)</p> |
| </div> |
| <div class="text-center"> |
| <div class="h-2 bg-yellow-400 rounded-full"></div> |
| <p class="text-xs mt-1">3 Stars (20%)</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 chart-container"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-gray-800">Sales Funnel</h3> |
| <div class="flex space-x-2"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="funnelChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="font-semibold text-gray-800">Recent Transactions</h3> |
| <div class="flex space-x-2"> |
| <button class="text-gray-400 hover:text-gray-600 p-1"> |
| <i class="fas fa-download"></i> |
| </button> |
| <button class="text-gray-400 hover:text-gray-600 p-1"> |
| <i class="fas fa-filter"></i> |
| </button> |
| </div> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200 data-table"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-8451</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Smith</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$1,245.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="text-gray-600 hover:text-gray-900"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-8450</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Processing</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$890.50</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="text-gray-600 hover:text-gray-900"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-8449</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Brown</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$2,340.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="text-gray-600 hover:text-gray-900"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-8448</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Emily Davis</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-13</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$1,560.75</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="text-gray-600 hover:text-gray-900"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-8447</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Robert Wilson</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-12</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Cancelled</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$765.30</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3"> |
| <i class="fas fa-eye"></i> |
| </button> |
| <button class="text-gray-600 hover:text-gray-900"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
| <div class="flex-1 flex justify-between sm:hidden"> |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> |
| </div> |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
| <div> |
| <p class="text-sm text-gray-700"> Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> results </p> |
| </div> |
| <div> |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <span class="sr-only">Previous</span> <i class="fas fa-chevron-left"></i> </a> |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <span class="sr-only">Next</span> <i class="fas fa-chevron-right"></i> </a> |
| </nav> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| |
| const revenueCtx = document.getElementById('revenueChart').getContext('2d'); |
| const revenueChart = new Chart(revenueCtx, { |
| type: 'line', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
| datasets: [{ |
| label: 'Revenue', |
| data: [85000, 92000, 105000, 112000, 125000, 135000, 142000, 148000, 132000, 118000, 105000, 95000], |
| borderColor: '#3B82F6', |
| backgroundColor: 'rgba(59, 130, 246, 0.05)', |
| borderWidth: 2, |
| tension: 0.4, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: false, |
| grid: { |
| drawBorder: false |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const regionCtx = document.getElementById('regionChart').getContext('2d'); |
| const regionChart = new Chart(regionCtx, { |
| type: 'bar', |
| data: { |
| labels: ['North America', 'Europe', 'Asia', 'South America', 'Africa'], |
| datasets: [{ |
| label: 'Sales', |
| data: [650000, 420000, 380000, 180000, 75000], |
| backgroundColor: [ |
| 'rgba(99, 102, 241, 0.7)', |
| 'rgba(59, 130, 246, 0.7)', |
| 'rgba(16, 185, 129, 0.7)', |
| 'rgba(245, 158, 11, 0.7)', |
| 'rgba(239, 68, 68, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(99, 102, 241, 1)', |
| 'rgba(59, 130, 246, 1)', |
| 'rgba(16, 185, 129, 1)', |
| 'rgba(245, 158, 11, 1)', |
| 'rgba(239, 68, 68, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const funnelCtx = document.getElementById('funnelChart').getContext('2d'); |
| const funnelChart = new Chart(funnelCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Visitors', 'Leads', 'Opportunities', 'Customers'], |
| datasets: [{ |
| data: [10000, 4500, 2000, 850], |
| backgroundColor: [ |
| 'rgba(99, 102, 241, 0.7)', |
| 'rgba(59, 130, 246, 0.7)', |
| 'rgba(16, 185, 129, 0.7)', |
| 'rgba(245, 158, 11, 0.7)' |
| ], |
| borderColor: [ |
| 'rgba(99, 102, 241, 1)', |
| 'rgba(59, 130, 246, 1)', |
| 'rgba(16, 185, 129, 1)', |
| 'rgba(245, 158, 11, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| position: 'right', |
| } |
| }, |
| cutout: '70%' |
| } |
| }); |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-pulse'); |
| setTimeout(() => { |
| entry.target.classList.remove('animate-pulse'); |
| }, 2000); |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| document.querySelectorAll('.chart-container').forEach(container => { |
| observer.observe(container); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tousifahamed/spotfire-mod-template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
