|
<!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>
|
|
|
