Spaces:

saq1b
/

Jailreak-Trading-Data-Visualization

Running

App Files Files Community

saq1b commited on Mar 3

Commit

b61cc42

verified ·

1 Parent(s): 65ca3e3

Upload 4 files

Browse files

Files changed (4) hide show

Dockerfile +24 -0
index.html +94 -0
script.js +302 -0
styles.css +60 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,24 @@

+FROM nginx:alpine
+# Copy all files to the NGINX html directory
+COPY . /usr/share/nginx/html/
+# Set proper permissions
+RUN chmod -R 755 /usr/share/nginx/html
+# Create default.conf for nginx to listen on port 7860 (Hugging Face's default port)
+RUN echo 'server { \
+    listen 7860; \
+    server_name _; \
+    location / { \
+        root /usr/share/nginx/html; \
+        index index.html; \
+        try_files $uri $uri/ /index.html; \
+    } \
+}' > /etc/nginx/conf.d/default.conf
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+# Start NGINX
+CMD ["nginx", "-g", "daemon off;"]

index.html ADDED Viewed

	@@ -0,0 +1,94 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jailbreak Trading Data Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <link href="styles.css" rel="stylesheet">
+    <script defer src="script.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <nav class="bg-indigo-600 text-white p-4 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-2xl font-bold">Jailbreak Trading Analytics</h1>
+            <div class="hidden md:block">
+                <span id="lastUpdated" class="text-indigo-200"></span>
+            </div>
+        </div>
+    </nav>
+    <div class="container mx-auto p-4">
+        <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
+            <div class="flex flex-col md:flex-row justify-between items-center mb-6">
+                <h2 class="text-xl font-semibold text-gray-700">Trading Data Overview</h2>
+                <div class="flex space-x-2 mt-4 md:mt-0">
+                    <input type="text" id="searchInput" placeholder="Search items..." class="border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    <select id="typeFilter" class="border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                        <option value="all">All Types</option>
+                    </select>
+                </div>
+            </div>
+            <div id="statsCards" class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+                <div class="bg-blue-50 rounded-lg p-4 shadow border border-blue-200">
+                    <h3 class="text-sm text-blue-700 font-medium">Total Items</h3>
+                    <p id="totalItems" class="text-2xl font-bold text-blue-800">-</p>
+                </div>
+                <div class="bg-green-50 rounded-lg p-4 shadow border border-green-200">
+                    <h3 class="text-sm text-green-700 font-medium">Total Trades</h3>
+                    <p id="totalTrades" class="text-2xl font-bold text-green-800">-</p>
+                </div>
+                <div class="bg-purple-50 rounded-lg p-4 shadow border border-purple-200">
+                    <h3 class="text-sm text-purple-700 font-medium">Avg. Demand Multiple</h3>
+                    <p id="avgDemandMultiple" class="text-2xl font-bold text-purple-800">-</p>
+                </div>
+                <div class="bg-amber-50 rounded-lg p-4 shadow border border-amber-200">
+                    <h3 class="text-sm text-amber-700 font-medium">Total Circulation</h3>
+                    <p id="totalCirculation" class="text-2xl font-bold text-amber-800">-</p>
+                </div>
+            </div>
+            <div class="overflow-x-auto">
+                <table id="tradingTable" class="min-w-full bg-white">
+                    <thead>
+                        <tr class="bg-gray-100 text-gray-600 uppercase text-sm leading-normal">
+                            <th class="py-3 px-6 text-left cursor-pointer hover:bg-gray-200" data-sort="Name">Name <span class="sort-icon"></span></th>
+                            <th class="py-3 px-6 text-left cursor-pointer hover:bg-gray-200" data-sort="Type">Type <span class="sort-icon"></span></th>
+                            <th class="py-3 px-6 text-right cursor-pointer hover:bg-gray-200" data-sort="TimesTraded">Times Traded <span class="sort-icon"></span></th>
+                            <th class="py-3 px-6 text-right cursor-pointer hover:bg-gray-200" data-sort="UniqueCirculation">Circulation <span class="sort-icon"></span></th>
+                            <th class="py-3 px-6 text-right cursor-pointer hover:bg-gray-200" data-sort="DemandMultiple">Demand Multiple <span class="sort-icon"></span></th>
+                        </tr>
+                    </thead>
+                    <tbody id="tableBody" class="text-gray-600 text-sm">
+                        <tr>
+                            <td colspan="5" class="text-center py-4">Loading data...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div class="bg-white rounded-lg shadow-lg p-6">
+                <h2 class="text-xl font-semibold text-gray-700 mb-4">Top 10 by Demand Multiple</h2>
+                <div class="h-64" id="demandChart"></div>
+            </div>
+            <div class="bg-white rounded-lg shadow-lg p-6">
+                <h2 class="text-xl font-semibold text-gray-700 mb-4">Distribution by Type</h2>
+                <div class="h-64" id="typeChart"></div>
+            </div>
+        </div>
+    </div>
+    <footer class="bg-gray-800 text-white p-4 mt-8">
+        <div class="container mx-auto text-center">
+            <p>Jailbreak Trading Data Visualization - Data refreshed daily</p>
+        </div>
+    </footer>
+    <!-- Include Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,302 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // API URL
+    const apiUrl = 'https://badimo.nyc3.digitaloceanspaces.com/trade/frequency/snapshot/month/latest.json';
+    // Global variables
+    let tradingData = [];
+    let currentSortColumn = 'DemandMultiple';
+    let currentSortDirection = 'desc';
+    let demandChart = null;
+    let typeChart = null;
+    // Fetch data from API
+    async function fetchData() {
+        try {
+            const response = await fetch(apiUrl);
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            tradingData = await response.json();
+            // Update last updated date
+            const now = new Date();
+            document.getElementById('lastUpdated').textContent = `Data as of ${now.toLocaleDateString()} ${now.toLocaleTimeString()}`;
+            // Process data
+            processData();
+            // Update UI
+            updateStatistics();
+            populateTypeFilter();
+            renderTable();
+            createCharts();
+        } catch (error) {
+            console.error('Failed to fetch data:', error);
+            document.getElementById('tableBody').innerHTML = `
+                <tr>
+                    <td colspan="5" class="text-center py-4 text-red-500">
+                        Error loading data. Please try again later.
+                    </td>
+                </tr>
+            `;
+        }
+    }
+    // Process data for additional insights
+    function processData() {
+        // You can add any data preprocessing here if needed
+        // For now we'll just sort the data by the default column
+        sortData(currentSortColumn, currentSortDirection);
+    }
+    // Update statistics cards
+    function updateStatistics() {
+        const totalItems = tradingData.length;
+        const totalTrades = tradingData.reduce((sum, item) => sum + item.TimesTraded, 0);
+        const avgDemandMultiple = (tradingData.reduce((sum, item) => sum + item.DemandMultiple, 0) / totalItems).toFixed(2);
+        const totalCirculation = tradingData.reduce((sum, item) => sum + item.UniqueCirculation, 0);
+        document.getElementById('totalItems').textContent = totalItems.toLocaleString();
+        document.getElementById('totalTrades').textContent = totalTrades.toLocaleString();
+        document.getElementById('avgDemandMultiple').textContent = avgDemandMultiple;
+        document.getElementById('totalCirculation').textContent = totalCirculation.toLocaleString();
+    }
+    // Populate type filter dropdown
+    function populateTypeFilter() {
+        const types = [...new Set(tradingData.map(item => item.Type))];
+        const select = document.getElementById('typeFilter');
+        types.forEach(type => {
+            const option = document.createElement('option');
+            option.value = type;
+            option.textContent = type;
+            select.appendChild(option);
+        });
+    }
+    // Sort data based on column and direction
+    function sortData(column, direction) {
+        tradingData.sort((a, b) => {
+            let comparison = 0;
+            if (typeof a[column] === 'string') {
+                comparison = a[column].localeCompare(b[column]);
+            } else {
+                comparison = a[column] - b[column];
+            }
+            return direction === 'asc' ? comparison : -comparison;
+        });
+    }
+    // Render table with current data and filters
+    function renderTable() {
+        const tableBody = document.getElementById('tableBody');
+        const searchInput = document.getElementById('searchInput').value.toLowerCase();
+        const typeFilter = document.getElementById('typeFilter').value;
+        // Filter data
+        const filteredData = tradingData.filter(item => {
+            const nameMatch = item.Name.toLowerCase().includes(searchInput);
+            const typeMatch = typeFilter === 'all' || item.Type === typeFilter;
+            return nameMatch && typeMatch;
+        });
+        // Clear table
+        tableBody.innerHTML = '';
+        // Add rows
+        if (filteredData.length === 0) {
+            tableBody.innerHTML = `
+                <tr>
+                    <td colspan="5" class="text-center py-4">No matching results found</td>
+                </tr>
+            `;
+            return;
+        }
+        filteredData.forEach(item => {
+            const row = document.createElement('tr');
+            row.className = 'border-b border-gray-200 hover:bg-gray-50';
+            // Calculate demand level for color coding
+            const demandLevel = getDemandLevel(item.DemandMultiple);
+            row.innerHTML = `
+                <td class="py-3 px-6 text-left">${item.Name}</td>
+                <td class="py-3 px-6 text-left">${formatType(item.Type)}</td>
+                <td class="py-3 px-6 text-right">${item.TimesTraded.toLocaleString()}</td>
+                <td class="py-3 px-6 text-right">${item.UniqueCirculation.toLocaleString()}</td>
+                <td class="py-3 px-6 text-right">
+                    <span class="px-2 py-1 rounded ${demandLevel.color} text-white">
+                        ${item.DemandMultiple.toFixed(2)}
+                    </span>
+                </td>
+            `;
+            tableBody.appendChild(row);
+        });
+    }
+    // Format type for better display
+    function formatType(type) {
+        if (type.includes('.')) {
+            return type.split('.').pop();
+        }
+        return type;
+    }
+    // Get demand level for color coding
+    function getDemandLevel(demand) {
+        if (demand >= 5) return { level: 'Very High', color: 'bg-red-600' };
+        if (demand >= 3) return { level: 'High', color: 'bg-orange-500' };
+        if (demand >= 2) return { level: 'Medium', color: 'bg-yellow-500' };
+        if (demand >= 1) return { level: 'Low', color: 'bg-green-500' };
+        return { level: 'Very Low', color: 'bg-blue-500' };
+    }
+    // Create data visualizations
+    function createCharts() {
+        createDemandChart();
+        createTypeDistributionChart();
+    }
+    // Create demand multiple chart
+    function createDemandChart() {
+        const top10ByDemand = [...tradingData]
+            .sort((a, b) => b.DemandMultiple - a.DemandMultiple)
+            .slice(0, 10);
+        const ctx = document.getElementById('demandChart').getContext('2d');
+        if (demandChart) {
+            demandChart.destroy();
+        }
+        demandChart = 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.7)',
+                    borderColor: 'rgb(79, 70, 229)',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        title: {
+                            display: true,
+                            text: 'Demand Multiple'
+                        }
+                    }
+                }
+            }
+        });
+    }
+    // Create type distribution chart
+    function createTypeDistributionChart() {
+        const typeDistribution = {};
+        tradingData.forEach(item => {
+            const type = formatType(item.Type);
+            if (!typeDistribution[type]) {
+                typeDistribution[type] = 0;
+            }
+            typeDistribution[type]++;
+        });
+        const ctx = document.getElementById('typeChart').getContext('2d');
+        if (typeChart) {
+            typeChart.destroy();
+        }
+        const colors = [
+            'rgba(99, 102, 241, 0.7)',
+            'rgba(239, 68, 68, 0.7)',
+            'rgba(16, 185, 129, 0.7)',
+            'rgba(245, 158, 11, 0.7)',
+            'rgba(139, 92, 246, 0.7)',
+            'rgba(14, 165, 233, 0.7)'
+        ];
+        typeChart = new Chart(ctx, {
+            type: 'pie',
+            data: {
+                labels: Object.keys(typeDistribution),
+                datasets: [{
+                    label: 'Item Count',
+                    data: Object.values(typeDistribution),
+                    backgroundColor: colors,
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'right',
+                    }
+                }
+            }
+        });
+    }
+    // Set up event listeners
+    function setupEventListeners() {
+        // Sort headers
+        document.querySelectorAll('th[data-sort]').forEach(header => {
+            header.addEventListener('click', () => {
+                const column = header.dataset.sort;
+                // Toggle sort direction or set to asc if it's a new column
+                const direction =
+                    column === currentSortColumn && currentSortDirection === 'asc' ? 'desc' : 'asc';
+                // Update sort variables
+                currentSortColumn = column;
+                currentSortDirection = direction;
+                // Update UI
+                updateSortIcons();
+                sortData(column, direction);
+                renderTable();
+            });
+        });
+        // Search input
+        document.getElementById('searchInput').addEventListener('input', renderTable);
+        // Type filter
+        document.getElementById('typeFilter').addEventListener('change', renderTable);
+    }
+    // Update sort icons
+    function updateSortIcons() {
+        document.querySelectorAll('th[data-sort]').forEach(header => {
+            const icon = header.querySelector('.sort-icon');
+            if (header.dataset.sort === currentSortColumn) {
+                icon.textContent = currentSortDirection === 'asc' ? ' ↑' : ' ↓';
+                header.classList.add('font-bold');
+            } else {
+                icon.textContent = '';
+                header.classList.remove('font-bold');
+            }
+        });
+    }
+    // Initialize
+    fetchData();
+    setupEventListeners();
+    updateSortIcons();
+});

styles.css ADDED Viewed

	@@ -0,0 +1,60 @@

+.sort-icon {
+    display: inline-block;
+    width: 1em;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+/* Animation for loading state */
+@keyframes pulse {
+    0% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.6;
+    }
+}
+.loading-pulse {
+    animation: pulse 1.5s infinite;
+}
+/* Responsive table adjustments */
+@media (max-width: 640px) {
+    table th, table td {
+        padding: 0.5rem 0.25rem;
+        font-size: 0.75rem;
+    }
+}
+/* Enhance transition effects */
+.hover\:bg-gray-50:hover {
+    background-color: #f9fafb;
+    transition: background-color 0.2s ease;
+}
+th.hover\:bg-gray-200:hover {
+    background-color: #e5e7eb;
+    transition: background-color 0.2s ease;
+}