Spaces:

saq1b
/

Jailreak-Trading-Data-Visualization

Sleeping

App Files Files Community

saq1b commited on Mar 3

Commit

b0f0c9f

verified ·

1 Parent(s): 430d0f8

Upload 2 files

Browse files

Files changed (2) hide show

Dockerfile +18 -8
index.html +443 -0

Dockerfile CHANGED Viewed

@@ -2,16 +2,26 @@ FROM python:3.9-slim
 WORKDIR /app
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-COPY . .
-# Create directories if they don't exist
-RUN mkdir -p templates static
-# Expose the port that Flask will run on
 EXPOSE 7860
-# Command to run the Flask app
-CMD ["python", "app.py"]

 WORKDIR /app
+# Install necessary packages
+RUN pip install --no-cache-dir flask gunicorn
+# Copy the HTML file
+COPY index.html /app/static/index.html
+# Create a simple Flask app to serve the static file
+RUN echo 'from flask import Flask, redirect\n\
+app = Flask(__name__, static_folder="static")\n\
+\n\
+@app.route("/")\n\
+def index():\n\
+    return redirect("/static/index.html")\n\
+\n\
+if __name__ == "__main__":\n\
+    app.run(host="0.0.0.0", port=7860)\n\
+' > /app/app.py
+# Expose the port that HuggingFace Spaces expects
 EXPOSE 7860
+# Start the server
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

index.html ADDED Viewed

	@@ -0,0 +1,443 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trading Data Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="mb-8">
+            <h1 class="text-4xl font-bold text-indigo-600 mb-2">Trading Data Analytics</h1>
+            <p class="text-gray-600">Explore trading patterns and item demand insights</p>
+        </header>
+        <!-- Stats Overview -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+            <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
+                <h2 class="text-gray-500 text-sm font-medium">Total Items</h2>
+                <p class="text-3xl font-bold text-gray-800" id="total-items">Loading...</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-green-500">
+                <h2 class="text-gray-500 text-sm font-medium">Total Trades</h2>
+                <p class="text-3xl font-bold text-gray-800" id="total-trades">Loading...</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-yellow-500">
+                <h2 class="text-gray-500 text-sm font-medium">Avg. Demand Multiple</h2>
+                <p class="text-3xl font-bold text-gray-800" id="avg-demand">Loading...</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-purple-500">
+                <h2 class="text-gray-500 text-sm font-medium">Unique Item Types</h2>
+                <p class="text-3xl font-bold text-gray-800" id="unique-types">Loading...</p>
+            </div>
+        </div>
+        <!-- Controls -->
+        <div class="bg-white p-6 rounded-lg shadow-md mb-8">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
+                <div class="mb-4 md:mb-0">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Search:</label>
+                    <div class="relative">
+                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                            <i class="fas fa-search text-gray-400"></i>
+                        </div>
+                        <input type="text" id="search-input" class="block w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Search by name...">
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Type:</label>
+                        <select id="type-filter" class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="all">All Types</option>
+                            <!-- Will be populated dynamically -->
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Sort By:</label>
+                        <select id="sort-by" class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="Name">Name</option>
+                            <option value="TimesTraded">Times Traded</option>
+                            <option value="UniqueCirculation">Unique Circulation</option>
+                            <option value="DemandMultiple" selected>Demand Multiple</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Order:</label>
+                        <select id="sort-order" class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="desc" selected>Highest to Lowest</option>
+                            <option value="asc">Lowest to Highest</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Data Visualization -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Top Items by Demand</h2>
+                <div class="h-80">
+                    <canvas id="demand-chart"></canvas>
+                </div>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Distribution by Type</h2>
+                <div class="h-80">
+                    <canvas id="type-chart"></canvas>
+                </div>
+            </div>
+        </div>
+        <!-- Data Table -->
+        <div class="bg-white rounded-lg shadow-md overflow-hidden">
+            <div class="px-6 py-4 border-b border-gray-200">
+                <h2 class="text-xl font-semibold text-gray-800">Trading Data</h2>
+                <p class="text-sm text-gray-500" id="results-count">Showing 0 items</p>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" data-sort="Name">
+                                Name <i class="fas fa-sort ml-1"></i>
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" data-sort="Type">
+                                Type <i class="fas fa-sort ml-1"></i>
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" data-sort="TimesTraded">
+                                Times Traded <i class="fas fa-sort ml-1"></i>
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" data-sort="UniqueCirculation">
+                                Circulation <i class="fas fa-sort ml-1"></i>
+                            </th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" data-sort="DemandMultiple">
+                                Demand <i class="fas fa-sort ml-1"></i>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody id="data-table-body" class="bg-white divide-y divide-gray-200">
+                        <!-- Table rows will be inserted here -->
+                        <tr>
+                            <td colspan="5" class="px-6 py-4 text-center text-gray-500">Loading data...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <footer class="mt-8 text-center text-gray-600">
+            <p>Data refreshes periodically. Last updated: <span id="last-updated">Loading...</span></p>
+        </footer>
+    </div>
+    <script>
+        // API URL
+        const API_URL = 'https://badimo.nyc3.digitaloceanspaces.com/trade/frequency/snapshot/month/latest.json';
+        // Global data store
+        let tradeData = [];
+        let filteredData = [];
+        // Initialize the application
+        async function initialize() {
+            try {
+                const response = await fetch(API_URL);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                tradeData = await response.json();
+                filteredData = [...tradeData];
+                populateTypeFilter();
+                updateStats();
+                renderTable();
+                initCharts();
+                setupEventListeners();
+                document.getElementById('last-updated').textContent = new Date().toLocaleString();
+            } catch (error) {
+                console.error('Error fetching data:', error);
+                document.getElementById('data-table-body').innerHTML =
+                    `<tr><td colspan="5" class="px-6 py-4 text-center text-red-500">
+                        Error loading data. Please try again later.
+                    </td></tr>`;
+            }
+        }
+        // Populate the type filter dropdown
+        function populateTypeFilter() {
+            const typeFilter = document.getElementById('type-filter');
+            const types = [...new Set(tradeData.map(item => item.Type))].sort();
+            types.forEach(type => {
+                const option = document.createElement('option');
+                option.value = type;
+                option.textContent = formatType(type);
+                typeFilter.appendChild(option);
+            });
+        }
+        // Format type for display
+        function formatType(type) {
+            if (type.includes('VehicleCustomization.')) {
+                return type.replace('VehicleCustomization.', '');
+            }
+            return type;
+        }
+        // Update statistics
+        function updateStats() {
+            const totalItems = filteredData.length;
+            const totalTrades = filteredData.reduce((sum, item) => sum + item.TimesTraded, 0);
+            const avgDemand = filteredData.reduce((sum, item) => sum + item.DemandMultiple, 0) / totalItems;
+            const uniqueTypes = new Set(filteredData.map(item => item.Type)).size;
+            document.getElementById('total-items').textContent = totalItems.toLocaleString();
+            document.getElementById('total-trades').textContent = totalTrades.toLocaleString();
+            document.getElementById('avg-demand').textContent = avgDemand.toFixed(2);
+            document.getElementById('unique-types').textContent = uniqueTypes;
+            document.getElementById('results-count').textContent = `Showing ${totalItems} items`;
+        }
+        // Render the data table
+        function renderTable() {
+            const tableBody = document.getElementById('data-table-body');
+            const sortBy = document.getElementById('sort-by').value;
+            const sortOrder = document.getElementById('sort-order').value;
+            // Sort data
+            filteredData.sort((a, b) => {
+                if (sortOrder === 'asc') {
+                    return a[sortBy] > b[sortBy] ? 1 : -1;
+                } else {
+                    return a[sortBy] < b[sortBy] ? 1 : -1;
+                }
+            });
+            // Generate table HTML
+            tableBody.innerHTML = filteredData.map(item => `
+                <tr class="hover:bg-gray-50">
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="font-medium text-gray-900">${item.Name}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getTypeColor(item.Type)}">
+                            ${formatType(item.Type)}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-gray-800">
+                        ${item.TimesTraded.toLocaleString()}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-gray-800">
+                        ${item.UniqueCirculation.toLocaleString()}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="flex items-center">
+                            <span class="mr-2 font-medium ${getDemandColor(item.DemandMultiple)}">
+                                ${item.DemandMultiple.toFixed(2)}
+                            </span>
+                            <div class="w-16 bg-gray-200 rounded-full h-2.5">
+                                <div class="${getDemandBarColor(item.DemandMultiple)} h-2.5 rounded-full" style="width: ${Math.min(item.DemandMultiple * 10, 100)}%"></div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            `).join('');
+        }
+        // Get color class for type badge
+        function getTypeColor(type) {
+            if (type === 'Vehicle') return 'bg-blue-100 text-blue-800';
+            if (type.includes('Color')) return 'bg-purple-100 text-purple-800';
+            if (type.includes('Rim')) return 'bg-yellow-100 text-yellow-800';
+            if (type.includes('Texture')) return 'bg-green-100 text-green-800';
+            if (type.includes('Spoiler')) return 'bg-red-100 text-red-800';
+            return 'bg-gray-100 text-gray-800';
+        }
+        // Get color class for demand text
+        function getDemandColor(demand) {
+            if (demand >= 4) return 'text-red-600';
+            if (demand >= 3) return 'text-orange-600';
+            if (demand >= 2) return 'text-yellow-600';
+            return 'text-green-600';
+        }
+        // Get color class for demand progress bar
+        function getDemandBarColor(demand) {
+            if (demand >= 4) return 'bg-red-600';
+            if (demand >= 3) return 'bg-orange-500';
+            if (demand >= 2) return 'bg-yellow-500';
+            return 'bg-green-500';
+        }
+        // Initialize charts
+        function initCharts() {
+            renderDemandChart();
+            renderTypeChart();
+        }
+        // Render the demand chart
+        function renderDemandChart() {
+            const top10ByDemand = [...filteredData]
+                .sort((a, b) => b.DemandMultiple - a.DemandMultiple)
+                .slice(0, 10);
+            const ctx = document.getElementById('demand-chart').getContext('2d');
+            new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: top10ByDemand.map(item => item.Name),
+                    datasets: [{
+                        label: 'Demand Multiple',
+                        data: top10ByDemand.map(item => item.DemandMultiple),
+                        backgroundColor: 'rgba(99, 102, 241, 0.6)',
+                        borderColor: 'rgb(99, 102, 241)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Demand Multiple'
+                            }
+                        },
+                        x: {
+                            ticks: {
+                                autoSkip: false,
+                                maxRotation: 90,
+                                minRotation: 45
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        // Render the type distribution chart
+        function renderTypeChart() {
+            const typeDistribution = filteredData.reduce((acc, item) => {
+                const type = formatType(item.Type);
+                if (!acc[type]) acc[type] = 0;
+                acc[type]++;
+                return acc;
+            }, {});
+            const types = Object.keys(typeDistribution);
+            const counts = Object.values(typeDistribution);
+            const colors = [
+                'rgba(99, 102, 241, 0.6)', // Indigo
+                'rgba(236, 72, 153, 0.6)', // Pink
+                'rgba(245, 158, 11, 0.6)', // Amber
+                'rgba(16, 185, 129, 0.6)', // Emerald
+                'rgba(239, 68, 68, 0.6)',  // Red
+                'rgba(59, 130, 246, 0.6)', // Blue
+                'rgba(139, 92, 246, 0.6)', // Violet
+                'rgba(249, 115, 22, 0.6)', // Orange
+                'rgba(107, 114, 128, 0.6)' // Gray
+            ];
+            const ctx = document.getElementById('type-chart').getContext('2d');
+            new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: types,
+                    datasets: [{
+                        data: counts,
+                        backgroundColor: colors.slice(0, types.length),
+                        borderWidth: 1,
+                        borderColor: '#fff'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'right'
+                        }
+                    }
+                }
+            });
+        }
+        // Set up event listeners
+        function setupEventListeners() {
+            // Filter by type
+            document.getElementById('type-filter').addEventListener('change', applyFilters);
+            // Sort by column
+            document.getElementById('sort-by').addEventListener('change', renderTable);
+            document.getElementById('sort-order').addEventListener('change', renderTable);
+            // Search functionality
+            document.getElementById('search-input').addEventListener('input', applyFilters);
+            // Table header sorting
+            document.querySelectorAll('th[data-sort]').forEach(header => {
+                header.addEventListener('click', () => {
+                    const sortField = header.getAttribute('data-sort');
+                    const sortBySelect = document.getElementById('sort-by');
+                    const sortOrderSelect = document.getElementById('sort-order');
+                    if (sortBySelect.value === sortField) {
+                        // Toggle order if already sorting by this field
+                        sortOrderSelect.value = sortOrderSelect.value === 'asc' ? 'desc' : 'asc';
+                    } else {
+                        // Set new sort field and default to descending
+                        sortBySelect.value = sortField;
+                        sortOrderSelect.value = 'desc';
+                    }
+                    renderTable();
+                });
+            });
+        }
+        // Apply filters
+        function applyFilters() {
+            const typeFilter = document.getElementById('type-filter').value;
+            const searchTerm = document.getElementById('search-input').value.toLowerCase();
+            filteredData = tradeData.filter(item => {
+                const matchesType = typeFilter === 'all' || item.Type === typeFilter;
+                const matchesSearch = item.Name.toLowerCase().includes(searchTerm);
+                return matchesType && matchesSearch;
+            });
+            updateStats();
+            renderTable();
+            // Redraw charts with filtered data
+            const charts = Chart.instances;
+            for (let chart of charts) {
+                chart.destroy();
+            }
+            initCharts();
+        }
+        // Start the application
+        initialize();
+    </script>
+</body>
+</html>