Spaces:

progressivesanjit
/

dataviz-insight-hub

Running

App Files Files Community

progressivesanjit commited on Oct 11, 2025

Commit

9f8cc02

verified ·

1 Parent(s): 61e84a4

Prepoare repoet with this data

Browse files

Files changed (2) hide show

index.html +9 -5
report.html +311 -0

index.html CHANGED Viewed

@@ -18,10 +18,13 @@
         <div class="relative z-10 text-center text-white px-4">
             <h1 class="text-5xl md:text-7xl font-bold mb-6">DataViz Insight Hub</h1>
             <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Transform raw data into beautiful, interactive visual reports</p>
-            <button onclick="scrollToReports()" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg shadow-lg transition-all duration-300 transform hover:scale-105 flex items-center mx-auto">
-                <i data-feather="bar-chart-2" class="mr-2"></i> Explore Reports
-            </button>
-        </div>
     </div>
     <!-- Reports Section -->
@@ -164,9 +167,10 @@
                 <h4 class="font-semibold mb-4">Quick Links</h4>
                 <ul class="space-y-2">
                     <li><a href="#" class="text-gray-300 hover:text-white transition-colors">All Reports</a></li>
                     <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Data Sources</a></li>
                     <li><a href="#" class="text-gray-300 hover:text-white transition-colors">API Documentation</a></li>
-                </ul>
             </div>
             <div>
                 <h4 class="font-semibold mb-4">Connect With Us</h4>

         <div class="relative z-10 text-center text-white px-4">
             <h1 class="text-5xl md:text-7xl font-bold mb-6">DataViz Insight Hub</h1>
             <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Transform raw data into beautiful, interactive visual reports</p>
+                <button onclick="scrollToReports()" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg shadow-lg transition-all duration-300 transform hover:scale-105 flex items-center mx-auto">
+                    <i data-feather="bar-chart-2" class="mr-2"></i> Explore Reports
+                </button>
+                <a href="report.html" class="mt-4 bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-8 rounded-lg shadow-lg transition-all duration-300 transform hover:scale-105 flex items-center mx-auto">
+                    <i data-feather="file-text" class="mr-2"></i> View Full Report
+                </a>
+</div>
     </div>
     <!-- Reports Section -->
                 <h4 class="font-semibold mb-4">Quick Links</h4>
                 <ul class="space-y-2">
                     <li><a href="#" class="text-gray-300 hover:text-white transition-colors">All Reports</a></li>
+                    <li><a href="report.html" class="text-gray-300 hover:text-white transition-colors">Full Report</a></li>
                     <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Data Sources</a></li>
                     <li><a href="#" class="text-gray-300 hover:text-white transition-colors">API Documentation</a></li>
+</ul>
             </div>
             <div>
                 <h4 class="font-semibold mb-4">Connect With Us</h4>

report.html ADDED Viewed

	@@ -0,0 +1,311 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Comprehensive Data Report - DataViz Insight Hub</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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-50">
+    <!-- Header -->
+    <header class="bg-white shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <div class="flex justify-between items-center">
+                <a href="index.html" class="text-blue-600 hover:text-blue-800 font-semibold flex items-center">
+                    <i data-feather="arrow-left" class="mr-2 h-5 w-5"></i> Back to Dashboard
+                </a>
+                <h1 class="text-2xl font-bold text-gray-800">Comprehensive Data Report</h1>
+                <div class="flex items-center space-x-4">
+                    <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center">
+                        <i data-feather="download" class="mr-2 h-4 w-4"></i> Export PDF
+                    </button>
+                    <span class="text-sm text-gray-500">Generated: <span id="current-date"></span></span>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Report Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Executive Summary -->
+        <section class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <h2 class="text-2xl font-bold text-gray-800 mb-4">Executive Summary</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                <div class="bg-blue-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="dollar-sign" class="text-blue-600 h-6 w-6 mr-2"></i>
+                        <h3 class="font-semibold text-gray-800">Total Revenue</h3>
+                    </div>
+                    <p class="text-3xl font-bold text-blue-600">$2.4M</p>
+                    <p class="text-sm text-green-600">+12.5% from last month</p>
+                </div>
+                <div class="bg-green-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="users" class="text-green-600 h-6 w-6 mr-2"></i>
+                        <h3 class="font-semibold text-gray-800">Active Users</h3>
+                    </div>
+                    <p class="text-3xl font-bold text-green-600">24.8K</p>
+                    <p class="text-sm text-green-600">+8.3% from last month</p>
+                </div>
+                <div class="bg-purple-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="shopping-cart" class="text-purple-600 h-6 w-6 mr-2"></i>
+                        <h3 class="font-semibold text-gray-800">New Orders</h3>
+                    </div>
+                    <p class="text-3xl font-bold text-purple-600">3.2K</p>
+                    <p class="text-sm text-green-600">+5.7% from last month</p>
+                </div>
+            </div>
+            <div class="prose max-w-none">
+                <p class="text-gray-700">
+                    Overall performance shows strong growth across key metrics. Revenue increased by 12.5% month-over-month,
+                    driven by improved conversion rates and increased user engagement. The marketing ROI improved significantly
+                    with social media campaigns showing the highest return.
+                </p>
+            </div>
+        </section>
+        <!-- Revenue Analysis -->
+        <section class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6">Revenue Analysis</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Quarterly Revenue Breakdown</h3>
+                    <canvas id="revenueChart" class="w-full h-64"></canvas>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Revenue by Category</h3>
+                    <canvas id="categoryChart" class="w-full h-64"></canvas>
+                </div>
+            </div>
+            <div class="mt-6 prose max-w-none">
+                <p class="text-gray-700">
+                    Q4 showed the strongest performance with $610,000 in revenue, representing a 5.2% increase from Q3.
+                    Product sales continue to be the primary revenue driver, accounting for 65% of total revenue.
+                </p>
+            </div>
+        </section>
+        <!-- User Engagement -->
+        <section class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6">User Engagement Metrics</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Monthly Active Users</h3>
+                    <canvas id="usersChart" class="w-full h-64"></canvas>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Session Duration</h3>
+                    <canvas id="sessionChart" class="w-full h-64"></canvas>
+                </div>
+            </div>
+            <div class="mt-6 prose max-w-none">
+                <p class="text-gray-700">
+                    User engagement continues to grow with average session duration increasing to 4.2 minutes.
+                    The mobile app shows higher engagement rates compared to web platforms.
+                </p>
+            </div>
+        </section>
+        <!-- Marketing Performance -->
+        <section class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6">Marketing Performance</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Campaign ROI</h3>
+                    <canvas id="roiChart" class="w-full h-64"></canvas>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Conversion Rates</h3>
+                    <canvas id="conversionChart" class="w-full h-64"></canvas>
+                </div>
+            </div>
+            <div class="mt-6 prose max-w-none">
+                <p class="text-gray-700">
+                    Social media campaigns delivered the highest ROI at 4.2x, while email marketing showed improved
+                    conversion rates of 3.8%. Overall marketing spend efficiency improved by 18% compared to last quarter.
+                </p>
+            </div>
+        </section>
+        <!-- Recommendations -->
+        <section class="bg-blue-50 rounded-xl shadow-md p-6">
+            <h2 class="text-2xl font-bold text-gray-800 mb-4">Recommendations</h2>
+            <div class="prose max-w-none">
+                <ul class="list-disc list-inside text-gray-700 space-y-2">
+                    <li>Increase investment in social media marketing campaigns due to high ROI</li>
+                    <li>Optimize mobile user experience to further improve engagement metrics</li>
+                    <li>Expand product categories based on customer demand analysis</li>
+                    <li>Implement A/B testing for email marketing campaigns to improve conversion rates</li>
+                    <li>Focus on retention strategies to maintain current growth trajectory</li>
+                </ul>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8 px-4 mt-12">
+        <div class="max-w-7xl mx-auto text-center">
+            <p>&copy; 2024 DataViz Insight Hub. All rights reserved.</p>
+            <p class="text-gray-300 mt-2">Report generated on <span id="report-date"></span></p>
+        </div>
+    </footer>
+    <script>
+        // Set current date
+        document.addEventListener('DOMContentLoaded', function() {
+            const now = new Date();
+            const options = { year: 'numeric', month: 'long', day: 'numeric' };
+            const dateString = now.toLocaleDateString('en-US', options);
+            document.getElementById('current-date').textContent = dateString;
+            document.getElementById('report-date').textContent = dateString;
+            feather.replace();
+            initReportCharts();
+        });
+        function initReportCharts() {
+            // Revenue Chart
+            new Chart(document.getElementById('revenueChart'), {
+                type: 'bar',
+                data: {
+                    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+                    datasets: [{
+                        label: 'Revenue ($)',
+                        data: [450000, 520000, 580000, 610000],
+                        backgroundColor: 'rgba(59, 130, 246, 0.8)',
+                        borderColor: 'rgba(59, 130, 246, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: { display: false },
+                        title: { display: false }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                callback: function(value) {
+                                    return '$' + (value / 1000) + 'K';
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            // Category Chart
+            new Chart(document.getElementById('categoryChart'), {
+                type: 'doughnut',
+                data: {
+                    labels: ['Product Sales', 'Services', 'Subscriptions', 'Other'],
+                    datasets: [{
+                        data: [65, 20, 10, 5],
+                        backgroundColor: [
+                            'rgba(59, 130, 246, 0.8)',
+                            'rgba(16, 185, 129, 0.8)',
+                            'rgba(139, 92, 246, 0.8)',
+                            'rgba(249, 115, 22, 0.8)'
+                        ]
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: { position: 'right' }
+                    }
+                }
+            });
+            // Users Chart
+            new Chart(document.getElementById('usersChart'), {
+                type: 'line',
+                data: {
+                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                    datasets: [{
+                        label: 'Active Users',
+                        data: [18000, 19500, 21000, 22500, 23800, 24800],
+                        borderColor: 'rgba(16, 185, 129, 1)',
+                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+            // Session Chart
+            new Chart(document.getElementById('sessionChart'), {
+                type: 'bar',
+                data: {
+                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                    datasets: [{
+                        label: 'Avg Session (min)',
+                        data: [3.2, 3.5, 3.7, 3.9, 4.0, 4.2],
+                        backgroundColor: 'rgba(139, 92, 246, 0.8)'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+            // ROI Chart
+            new Chart(document.getElementById('roiChart'), {
+                type: 'bar',
+                data: {
+                    labels: ['Social Media', 'Email', 'Search Ads', 'Direct'],
+                    datasets: [{
+                        label: 'ROI (x)',
+                        data: [4.2, 3.1, 2.8, 3.5],
+                        backgroundColor: 'rgba(249, 115, 22, 0.8)'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+            // Conversion Chart
+            new Chart(document.getElementById('conversionChart'), {
+                type: 'line',
+                data: {
+                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                    datasets: [{
+                        label: 'Conversion Rate (%)',
+                        data: [42.1, 43.5, 44.8, 45.2, 46.7, 47.3],
+                        borderColor: 'rgba(220, 38, 38, 1)',
+                        backgroundColor: 'rgba(220, 38, 38, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+        }
+    </script>
+</body>
+</html>