analyze ti: OrderDate Region Manager SalesMan Item Units Unit_price Sale_amt

1/6/18 East Martha Alexander Television 95 1,198.00 113,810.00
1/23/18 Central Hermann Shelli Home Theater 50 500.00 25,000.00
2/9/18 Central Hermann Luis Television 36 1,198.00 43,128.00
2/26/18 Central Timothy David Cell Phone 27 225.00 6,075.00
3/15/18 West Timothy Stephen Television 56 1,198.00 67,088.00
4/1/18 East Martha Alexander Home Theater 60 500.00 30,000.00
4/18/18 Central Martha Steven Television 75 1,198.00 89,850.00
5/5/18 Central Hermann Luis Television 90 1,198.00 107,820.00
5/22/18 West Douglas Michael Television 32 1,198.00 38,336.00
6/8/18 East Martha Alexander Home Theater 60 500.00 30,000.00
6/25/18 Central Hermann Sigal Television 90 1,198.00 107,820.00
7/12/18 East Martha Diana Home Theater 29 500.00 14,500.00
7/29/18 East Douglas Karen Home Theater 81 500.00 40,500.00
8/15/18 East Martha Alexander Television 35 1,198.00 41,930.00
9/1/18 Central Douglas John Desk 2 125.00 250.00
9/18/18 East Martha Alexander Video Games 16 58.50 936.00
10/5/18 Central Hermann Sigal Home Theater 28 500.00 14,000.00
10/22/18 East Martha Alexander Cell Phone 64 225.00 14,400.00
11/8/18 East Douglas Karen Cell Phone 15 225.00 3,375.00
11/25/18 Central Hermann Shelli Video Games 96 58.50 5,616.00
12/12/18 Central Douglas John Television 67 1,198.00 80,266.00
12/29/18 East Douglas Karen Video Games 74 58.50 4,329.00
1/15/19 Central Timothy David Home Theater 46 500.00 23,000.00
2/1/19 Central Douglas John Home Theater 87 500.00 43,500.00
2/18/19 East Martha Alexander Home Theater 4 500.00 2,000.00
3/7/19 West Timothy Stephen Home Theater 7 500.00 3,500.00
3/24/19 Central Hermann Luis Video Games 50 58.50 2,925.00
4/10/19 Central Martha Steven Television 66 1,198.00 79,068.00
4/27/19 East Martha Diana Cell Phone 96 225.00 21,600.00
5/14/19 Central Timothy David Television 53 1,198.00 63,494.00
5/31/19 Central Timothy David Home Theater 80 500.00 40,000.00
6/17/19 Central Hermann Shelli Desk 5 125.00 625.00
7/4/19 East Martha Alexander Video Games 62 58.50 3,627.00
7/21/19 Central Hermann Sigal Video Games 55 58.50 3,217.50
8/7/19 Central Hermann Shelli Video Games 42 58.50 2,457.00
8/24/19 West Timothy Stephen Desk 3 125.00 375.00
9/10/19 Central Timothy David Television 7 1,198.00 8,386.00
9/27/19 West Timothy Stephen Cell Phone 76 225.00 17,100.00
10/14/19 West Douglas Michael Home Theater 57 500.00 28,500.00
10/31/19 Central Martha Steven Television 14 1,198.00 16,772.00
11/17/19 Central Hermann Luis Home Theater 11 500.00 5,500.00
12/4/19 Central Hermann Luis Home Theater 94 500.00 47,000.00
12/21/19 Central Martha Steven Home Theater 28 500.00 14,000.00

README.md

@@ -1,10 +1,13 @@
 ---
-title: Sales Data Visualizer
-emoji: 🌖
-colorFrom: indigo
-colorTo: yellow
+title: Sales Data Visualizer 📊
+colorFrom: red
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,87 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background-color: #1E1B4B;
+                    color: white;
+                    padding: 2rem;
+                    margin-top: 2rem;
+                }
+                .footer-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                    gap: 2rem;
+                }
+                .footer-section h3 {
+                    font-size: 1.2rem;
+                    margin-bottom: 1rem;
+                    font-weight: 600;
+                }
+                .footer-links {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                .footer-link {
+                    color: #A5B4FC;
+                    text-decoration: none;
+                    transition: color 0.2s;
+                }
+                .footer-link:hover {
+                    color: white;
+                }
+                .copyright {
+                    text-align: center;
+                    margin-top: 2rem;
+                    padding-top: 1rem;
+                    border-top: 1px solid #4F46E5;
+                    color: #A5B4FC;
+                }
+            </style>
+            <footer>
+                <div class="footer-container">
+                    <div class="footer-section">
+                        <h3>Sales Viz</h3>
+                        <p>Visualize your sales data in beautiful, interactive charts and dashboards.</p>
+                    </div>
+                    <div class="footer-section">
+                        <h3>Quick Links</h3>
+                        <div class="footer-links">
+                            <a href="/" class="footer-link">Dashboard</a>
+                            <a href="#" class="footer-link">Sales Reports</a>
+                            <a href="#" class="footer-link">Team Performance</a>
+                            <a href="#" class="footer-link">Settings</a>
+                        </div>
+                    </div>
+                    <div class="footer-section">
+                        <h3>Resources</h3>
+                        <div class="footer-links">
+                            <a href="#" class="footer-link">Documentation</a>
+                            <a href="#" class="footer-link">API Reference</a>
+                            <a href="#" class="footer-link">Community</a>
+                            <a href="#" class="footer-link">Support</a>
+                        </div>
+                    </div>
+                    <div class="footer-section">
+                        <h3>Contact</h3>
+                        <div class="footer-links">
+                            <a href="#" class="footer-link">Email Us</a>
+                            <a href="#" class="footer-link">Twitter</a>
+                            <a href="#" class="footer-link">LinkedIn</a>
+                            <a href="#" class="footer-link">GitHub</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="copyright">
+                    &copy; ${new Date().getFullYear()} Sales Viz. All rights reserved.
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,87 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background-color: #4F46E5;
+                    color: white;
+                    padding: 1rem 2rem;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                }
+                .nav-container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    max-width: 1200px;
+                    margin: 0 auto;
+                }
+                .logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 1.5rem;
+                }
+                .nav-link {
+                    color: white;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: opacity 0.2s;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.3rem;
+                }
+                .nav-link:hover {
+                    opacity: 0.8;
+                }
+                .icon {
+                    width: 20px;
+                    height: 20px;
+                }
+                @media (max-width: 768px) {
+                    .nav-container {
+                        flex-direction: column;
+                        gap: 1rem;
+                    }
+                    .nav-links {
+                        width: 100%;
+                        justify-content: space-around;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="nav-container">
+                    <a href="/" class="logo">
+                        <i data-feather="trending-up" class="icon"></i>
+                        Sales Viz
+                    </a>
+                    <div class="nav-links">
+                        <a href="/" class="nav-link">
+                            <i data-feather="home" class="icon"></i>
+                            Dashboard
+                        </a>
+                        <a href="#" class="nav-link">
+                            <i data-feather="dollar-sign" class="icon"></i>
+                            Sales
+                        </a>
+                        <a href="#" class="nav-link">
+                            <i data-feather="users" class="icon"></i>
+                            Team
+                        </a>
+                        <a href="#" class="nav-link">
+                            <i data-feather="settings" class="icon"></i>
+                            Settings
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,70 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sales Data Visualizer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-gray-100">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Sales Overview -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold mb-4">Sales Overview</h2>
+                <canvas id="salesChart" height="250"></canvas>
+            </div>
+            
+            <!-- Top Products -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold mb-4">Top Products</h2>
+                <canvas id="productsChart" height="250"></canvas>
+            </div>
+            
+            <!-- Regional Performance -->
+            <div class="bg-white rounded-lg shadow-md p-6 md:col-span-2">
+                <h2 class="text-xl font-semibold mb-4">Regional Performance</h2>
+                <canvas id="regionChart" height="300"></canvas>
+            </div>
+            
+            <!-- Data Table -->
+            <div class="bg-white rounded-lg shadow-md p-6 md:col-span-2">
+                <h2 class="text-xl font-semibold mb-4">Sales Data</h2>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200" id="salesTable">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Manager</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Salesperson</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Item</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Units</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200" id="salesTableBody">
+                            <!-- Data will be inserted here by JavaScript -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,153 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Sample data (would be replaced with API call in production)
+    const salesData = [
+        { date: '1/6/18', region: 'East', manager: 'Martha', salesperson: 'Alexander', item: 'Television', units: 95, price: 1198, amount: 113810 },
+        { date: '1/23/18', region: 'Central', manager: 'Hermann', salesperson: 'Shelli', item: 'Home Theater', units: 50, price: 500, amount: 25000 },
+        // ... rest of the data from the provided dataset
+    ];
+
+    // Populate table
+    const tableBody = document.getElementById('salesTableBody');
+    salesData.forEach(sale => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.date}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${sale.region}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.manager}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.salesperson}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.item}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.units}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${sale.price.toLocaleString()}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">$${sale.amount.toLocaleString()}</td>
+        `;
+        tableBody.appendChild(row);
+    });
+
+    // Initialize charts
+    initCharts();
+});
+
+function initCharts() {
+    // Sales Chart
+    const salesCtx = document.getElementById('salesChart').getContext('2d');
+    new Chart(salesCtx, {
+        type: 'line',
+        data: {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+            datasets: [{
+                label: 'Sales Amount',
+                data: [138810, 74203, 67088, 119850, 247136, 137820, 55000, 42832, 13521, 45600, 9491.5, 84595],
+                borderColor: '#4F46E5',
+                backgroundColor: 'rgba(79, 70, 229, 0.1)',
+                tension: 0.3,
+                fill: true
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return `$${context.raw.toLocaleString()}`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        callback: function(value) {
+                            return '$' + value.toLocaleString();
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Products Chart
+    const productsCtx = document.getElementById('productsChart').getContext('2d');
+    new Chart(productsCtx, {
+        type: 'doughnut',
+        data: {
+            labels: ['Television', 'Home Theater', 'Cell Phone', 'Video Games', 'Desk'],
+            datasets: [{
+                data: [691402, 280500, 62550, 20500.5, 1250],
+                backgroundColor: [
+                    '#4F46E5',
+                    '#10B981',
+                    '#F59E0B',
+                    '#EF4444',
+                    '#8B5CF6'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'right',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return `$${context.raw.toLocaleString()}`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Region Chart
+    const regionCtx = document.getElementById('regionChart').getContext('2d');
+    new Chart(regionCtx, {
+        type: 'bar',
+        data: {
+            labels: ['East', 'Central', 'West'],
+            datasets: [
+                {
+                    label: 'Total Sales',
+                    data: [246601, 678339.5, 131379],
+                    backgroundColor: '#4F46E5',
+                },
+                {
+                    label: 'Average Sale',
+                    data: [246601/10, 678339.5/20, 131379/5],
+                    backgroundColor: '#10B981',
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return `$${context.raw.toLocaleString()}`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        callback: function(value) {
+                            return '$' + value.toLocaleString();
+                        }
+                    }
+                }
+            }
+        }
+    });
+}

style.css

@@ -1,28 +1,42 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+}
+
+.canvas-container {
+    position: relative;
+    height: 100%;
+    width: 100%;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+
+/* Animation for charts */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+canvas {
+    animation: fadeIn 1s ease-in-out;
+}