Spaces:
Running
Running
File size: 6,307 Bytes
fe0b542 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | document.addEventListener('DOMContentLoaded', function() {
// Data from the table
const data = [
{ hour: 1, search: 2400000, demand: 90000, bid: 1.5, budgetSpent: 3600000, percentage: '2%' },
{ hour: 2, search: 1100000, demand: 80000, bid: 1.6, budgetSpent: 1760000, percentage: '4%' },
{ hour: 3, search: 600000, demand: 80000, bid: 1.6, budgetSpent: 960000, percentage: '4%' },
{ hour: 4, search: 400000, demand: 80000, bid: 1.6, budgetSpent: 640000, percentage: '5%' },
{ hour: 5, search: 300000, demand: 90000, bid: 1.6, budgetSpent: 480000, percentage: '5%' },
{ hour: 6, search: 300000, demand: 100000, bid: 1.7, budgetSpent: 510000, percentage: '5%' },
{ hour: 7, search: 800000, demand: 100000, bid: 1.8, budgetSpent: 1440000, percentage: '6%' },
{ hour: 8, search: 1700000, demand: 100000, bid: 1.9, budgetSpent: 3230000, percentage: '9%' },
{ hour: 9, search: 2800000, demand: 100000, bid: 2.0, budgetSpent: 5600000, percentage: '12%' },
{ hour: 10, search: 4300000, demand: 100000, bid: 2.0, budgetSpent: 8600000, percentage: '18%' },
{ hour: 11, search: 5300000, demand: 90000, bid: 2.0, budgetSpent: 10600000, percentage: '25%' },
{ hour: 12, search: 5800000, demand: 80000, bid: 2.0, budgetSpent: 11600000, percentage: '33%' },
{ hour: 13, search: 5700000, demand: 70000, bid: 1.9, budgetSpent: 10830000, percentage: '40%' },
{ hour: 14, search: 5900000, demand: 60000, bid: 1.8, budgetSpent: 10620000, percentage: '48%' },
{ hour: 15, search: 5800000, demand: 50000, bid: 1.7, budgetSpent: 9860000, percentage: '54%' },
{ hour: 16, search: 5800000, demand: 40000, bid: 1.6, budgetSpent: 9280000, percentage: '60%' },
{ hour: 17, search: 6000000, demand: 30000, bid: 1.5, budgetSpent: 9000000, percentage: '67%' },
{ hour: 18, search: 5700000, demand: 30000, bid: 1.4, budgetSpent: 7980000, percentage: '72%' },
{ hour: 19, search: 5800000, demand: 30000, bid: 1.3, budgetSpent: 7540000, percentage: '77%' },
{ hour: 20, search: 6600000, demand: 30000, bid: 1.2, budgetSpent: 7920000, percentage: '82%' },
{ hour: 21, search: 7500000, demand: 25000, bid: 1.1, budgetSpent: 8250000, percentage: '88%' },
{ hour: 22, search: 7900000, demand: 20000, bid: 1.0, budgetSpent: 7900000, percentage: '93%' },
{ hour: 23, search: 6800000, demand: 20000, bid: 0.9, budgetSpent: 6120000, percentage: '97%' },
{ hour: 24, search: 4800000, demand: 20000, bid: 0.8, budgetSpent: 3840000, percentage: '100%' }
];
// Populate table
const tableBody = document.getElementById('dataTableBody');
data.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.hour}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.search.toLocaleString()}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.demand.toLocaleString()}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.bid}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.budgetSpent.toLocaleString()}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.percentage}</td>
`;
tableBody.appendChild(row);
});
// Initialize charts
initializeCharts(data);
});
function initializeCharts(data) {
// Budget Chart
const budgetCtx = document.getElementById('budgetChart').getContext('2d');
new Chart(budgetCtx, {
type: 'line',
data: {
labels: data.map(item => `Hour ${item.hour}`),
datasets: [
{
label: 'Budget Spent',
data: data.map(item => item.budgetSpent),
borderColor: 'rgb(99, 102, 241)',
backgroundColor: 'rgba(99, 102, 241, 0.1)',
tension: 0.3,
fill: true
},
{
label: 'Percentage of Budget',
data: data.map(item => parseFloat(item.percentage.replace('%', '')) * 100000),
borderColor: 'rgb(236, 72, 153)',
backgroundColor: 'rgba(236, 72, 153, 0.1)',
tension: 0.3,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return value >= 1000000 ? (value / 1000000) + 'M' : value;
}
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.datasetIndex === 1) {
const hour = context.dataIndex + 1;
const percentage = data.find(item => item.hour === hour).percentage;
label += percentage;
} else {
label += context.parsed.y.toLocaleString();
}
return label;
}
}
}
}
}
});
// Bid vs Demand Chart
const bidDemandCtx = document.getElementById('bidDemandChart').getContext('2d');
new Chart(bidDemandCtx, {
type: 'bar',
data: {
labels: data.map(item => `Hour ${item.hour}`),
datasets: [
{
label: 'Bid',
data: data.map(item => item.bid),
backgroundColor: 'rgba(16{"ok":false,"message":"terminated"} |