| <!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 class="mb-8">
|
| <h1 class="text-4xl font-bold text-indigo-600 mb-2">Jailbreak Trading Data Analytics</h1>
|
| <p class="text-gray-600">Analyze trading data for Jailbreak items</p>
|
| </header>
|
|
|
|
|
| <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>
|
|
|
|
|
| <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>
|
|
|
| </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>
|
|
|
|
|
| <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>
|
|
|
|
|
| <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">
|
|
|
| <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>
|
|
|
| const API_URL = '/api/trading-data';
|
|
|
|
|
| let tradeData = [];
|
| let filteredData = [];
|
|
|
|
|
| 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: ${error.message}. Please try again later.
|
| </td></tr>`;
|
| }
|
| }
|
|
|
|
|
| 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);
|
| });
|
| }
|
|
|
|
|
| function formatType(type) {
|
| if (type.includes('VehicleCustomization.')) {
|
| return type.replace('VehicleCustomization.', '');
|
| }
|
| return type;
|
| }
|
|
|
|
|
| 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`;
|
| }
|
|
|
|
|
| function renderTable() {
|
| const tableBody = document.getElementById('data-table-body');
|
| const sortBy = document.getElementById('sort-by').value;
|
| const sortOrder = document.getElementById('sort-order').value;
|
|
|
|
|
| filteredData.sort((a, b) => {
|
| if (sortOrder === 'asc') {
|
| return a[sortBy] > b[sortBy] ? 1 : -1;
|
| } else {
|
| return a[sortBy] < b[sortBy] ? 1 : -1;
|
| }
|
| });
|
|
|
|
|
| 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('');
|
| }
|
|
|
|
|
| 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';
|
| }
|
|
|
|
|
| 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';
|
| }
|
|
|
|
|
| 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';
|
| }
|
|
|
|
|
| function initCharts() {
|
| renderDemandChart();
|
| renderTypeChart();
|
| }
|
|
|
|
|
| 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
|
| }
|
| }
|
| }
|
| }
|
| });
|
| }
|
|
|
|
|
| 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)',
|
| 'rgba(236, 72, 153, 0.6)',
|
| 'rgba(245, 158, 11, 0.6)',
|
| 'rgba(16, 185, 129, 0.6)',
|
| 'rgba(239, 68, 68, 0.6)',
|
| 'rgba(59, 130, 246, 0.6)',
|
| 'rgba(139, 92, 246, 0.6)',
|
| 'rgba(249, 115, 22, 0.6)',
|
| 'rgba(107, 114, 128, 0.6)'
|
| ];
|
|
|
| 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'
|
| }
|
| }
|
| }
|
| });
|
| }
|
|
|
|
|
| function setupEventListeners() {
|
|
|
| document.getElementById('type-filter').addEventListener('change', applyFilters);
|
|
|
|
|
| document.getElementById('sort-by').addEventListener('change', renderTable);
|
| document.getElementById('sort-order').addEventListener('change', renderTable);
|
|
|
|
|
| document.getElementById('search-input').addEventListener('input', applyFilters);
|
|
|
|
|
| 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) {
|
|
|
| sortOrderSelect.value = sortOrderSelect.value === 'asc' ? 'desc' : 'asc';
|
| } else {
|
|
|
| sortBySelect.value = sortField;
|
| sortOrderSelect.value = 'desc';
|
| }
|
|
|
| renderTable();
|
| });
|
| });
|
| }
|
|
|
|
|
| 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();
|
|
|
|
|
| const charts = Chart.instances;
|
| for (let chart of charts) {
|
| chart.destroy();
|
| }
|
| initCharts();
|
| }
|
|
|
|
|
| initialize();
|
| </script>
|
| </body>
|
| </html>
|
|
|
