Skip to content

Commit 86acd92

Browse files
S1M0N38S1M0N38
committed
feat: add hist and pie charts
1 parent 0bfc92a commit 86acd92

2 files changed

Lines changed: 127 additions & 7 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>BalatroBench Leaderboard v2</title>
7+
<title>BalatroBench</title>
88
<script src="https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/outline/index.js"></script>
99
<script src="https://cdn.tailwindcss.com"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1011
<script src="script.js"></script>
1112
</head>
1213

1314
<body class="bg-gray-50 min-h-screen py-8">
1415
<div class="container mx-auto px-4">
15-
<h1 class="text-4xl font-bold text-center text-gray-800 mb-8">BalatroBench Leaderboard</h1>
16+
<h1 class="text-4xl font-bold text-center text-gray-800 mb-8">BalatroBench</h1>
1617

1718
<div class="overflow-x-auto bg-white rounded-lg shadow-lg">
1819
<table id="leaderboard" class="w-full table-auto">

‎script.js‎

Lines changed: 124 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,117 @@ async function loadDetails(vendor, model) {
33
try {
44
const response = await fetch(`data/benchmarks/v0.8.0/default/${vendor}/${model}.json`);
55
const data = await response.json();
6-
return data.stats;
6+
return data;
77
} catch (error) {
88
console.error('Error loading model details:', error);
9-
return [];
9+
return {
10+
stats: [],
11+
providers: {}
12+
};
1013
}
1114
}
1215

16+
// Create round distribution histogram
17+
function createRoundHistogram(stats, canvasId) {
18+
const rounds = stats.map(stat => stat.final_round);
19+
const maxRound = Math.max(...rounds);
20+
const minRound = 1;
21+
22+
// Create bins from 1 to maxRound
23+
const bins = Array.from({
24+
length: maxRound
25+
}, (_, i) => i + minRound);
26+
const counts = bins.map(round => rounds.filter(r => r === round).length);
27+
const maxCount = Math.max(...counts);
28+
29+
const ctx = document.getElementById(canvasId).getContext('2d');
30+
new Chart(ctx, {
31+
type: 'bar',
32+
data: {
33+
labels: bins,
34+
datasets: [{
35+
data: counts,
36+
}]
37+
},
38+
options: {
39+
responsive: true,
40+
maintainAspectRatio: false,
41+
interaction: {
42+
intersect: false,
43+
mode: 'none'
44+
},
45+
plugins: {
46+
legend: {
47+
display: false
48+
},
49+
title: {
50+
display: true,
51+
text: 'Rounds'
52+
}
53+
},
54+
scales: {
55+
x: {
56+
title: {
57+
display: false,
58+
text: 'Round'
59+
}
60+
},
61+
y: {
62+
beginAtZero: true,
63+
max: maxCount + 1,
64+
title: {
65+
display: false,
66+
text: 'Frequency'
67+
},
68+
ticks: {
69+
stepSize: 1
70+
}
71+
}
72+
}
73+
}
74+
});
75+
}
76+
77+
// Create provider distribution pie chart
78+
function createProviderPieChart(data, canvasId) {
79+
const providers = Object.keys(data.providers || {});
80+
const counts = Object.values(data.providers || {});
81+
82+
const ctx = document.getElementById(canvasId).getContext('2d');
83+
new Chart(ctx, {
84+
type: 'doughnut',
85+
data: {
86+
labels: providers,
87+
datasets: [{
88+
data: counts,
89+
borderWidth: 2,
90+
}]
91+
},
92+
options: {
93+
responsive: true,
94+
maintainAspectRatio: false,
95+
plugins: {
96+
legend: {
97+
display: true,
98+
position: 'bottom',
99+
labels: {
100+
boxWidth: 10,
101+
font: {
102+
size: 11
103+
}
104+
}
105+
},
106+
title: {
107+
display: true,
108+
text: 'Providers',
109+
}
110+
}
111+
}
112+
});
113+
}
114+
13115
// Create inline detail row after clicked row
14-
function createDetailRow(stats, modelName) {
116+
function createDetailRow(stats, modelName, data) {
15117
const detailRow = document.createElement('tr');
16118
detailRow.className = 'detail-row bg-gray-50';
17119

@@ -75,8 +177,19 @@ function createDetailRow(stats, modelName) {
75177
`;
76178
});
77179

180+
const histogramCanvasId = `histogram-${modelName.replace(/[^a-zA-Z0-9]/g, '-')}`;
181+
const pieChartCanvasId = `pie-${modelName.replace(/[^a-zA-Z0-9]/g, '-')}`;
182+
78183
detailRow.innerHTML = `
79184
<td colspan="12" class="p-4">
185+
<div class="mb-4 flex flex-col lg:flex-row gap-4">
186+
<div class="flex-1">
187+
<canvas id="${histogramCanvasId}" width="400" height="200"></canvas>
188+
</div>
189+
<div class="w-full lg:w-80">
190+
<canvas id="${pieChartCanvasId}" width="300" height="200"></canvas>
191+
</div>
192+
</div>
80193
<div class="overflow-x-auto rounded-lg shadow-lg" style="max-height: 180px; overflow-y: auto;">
81194
<table class="w-full table-auto">
82195
<thead class="bg-gray-100 sticky top-0">
@@ -186,6 +299,12 @@ function createDetailRow(stats, modelName) {
186299
</td>
187300
`;
188301

302+
// Add charts after DOM is updated
303+
setTimeout(() => {
304+
createRoundHistogram(stats, histogramCanvasId);
305+
createProviderPieChart(data, pieChartCanvasId);
306+
}, 0);
307+
189308
return detailRow;
190309
}
191310

@@ -215,8 +334,8 @@ async function loadLeaderboard() {
215334
document.querySelectorAll('.detail-row').forEach(dr => dr.remove());
216335

217336
// Load and show details
218-
const stats = await loadDetails(vendor, model);
219-
const detailRow = createDetailRow(stats, model);
337+
const data = await loadDetails(vendor, model);
338+
const detailRow = createDetailRow(data.stats, model, data);
220339
row.insertAdjacentElement('afterend', detailRow);
221340
}
222341
}

0 commit comments

Comments
 (0)
⚡