Skip to content

Commit adf52e1

Browse files
S1M0N38S1M0N38
committed
feat: add total card to detail page
1 parent 86acd92 commit adf52e1

1 file changed

Lines changed: 101 additions & 4 deletions

File tree

‎script.js‎

Lines changed: 101 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function createRoundHistogram(stats, canvasId) {
4747
display: false
4848
},
4949
title: {
50-
display: true,
50+
display: false,
5151
text: 'Rounds'
5252
}
5353
},
@@ -104,7 +104,7 @@ function createProviderPieChart(data, canvasId) {
104104
}
105105
},
106106
title: {
107-
display: true,
107+
display: false,
108108
text: 'Providers',
109109
}
110110
}
@@ -182,13 +182,110 @@ function createDetailRow(stats, modelName, data) {
182182

183183
detailRow.innerHTML = `
184184
<td colspan="12" class="p-4">
185-
<div class="mb-4 flex flex-col lg:flex-row gap-4">
185+
<div class="mb-8 pb-4 flex flex-col lg:flex-row gap-4 h-52">
186+
<!-- Rounds -->
186187
<div class="flex-1">
188+
<h4 class="text-sm font-semibold text-gray-700 mb-2 text-center">Rounds</h4>
187189
<canvas id="${histogramCanvasId}" width="400" height="200"></canvas>
188190
</div>
189-
<div class="w-full lg:w-80">
191+
<!-- Providers -->
192+
<div>
193+
<h4 class="text-sm font-semibold text-gray-700 mb-2 text-center">Providers</h4>
190194
<canvas id="${pieChartCanvasId}" width="300" height="200"></canvas>
191195
</div>
196+
<!-- Totals -->
197+
<div class="min-w-36 ml-4 mr-4">
198+
<h4 class="text-sm font-semibold text-gray-700 mb-2 text-center">Totals</h4>
199+
<table class="w-full">
200+
<tbody>
201+
<tr>
202+
<td class="py-1">
203+
<div class="flex items-center justify-left space-x-1">
204+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
205+
<path d="M8 7c3.314 0 6-1.343 6-3s-2.686-3-6-3-6 1.343-6 3 2.686 3 6 3Z" />
206+
<path d="M8 8.5c1.84 0 3.579-.37 4.914-1.037A6.33 6.33 0 0 0 14 6.78V8c0 1.657-2.686 3-6 3S2 9.657 2 8V6.78c.346.273.72.5 1.087.683C4.42 8.131 6.16 8.5 8 8.5Z" />
207+
<path d="M8 12.5c1.84 0 3.579-.37 4.914-1.037.366-.183.74-.41 1.086-.684V12c0 1.657-2.686 3-6 3s-6-1.343-6-3v-1.22c.346.273.72.5 1.087.683C4.42 12.131 6.16 12.5 8 12.5Z" />
208+
</svg>
209+
<span>in</span>
210+
</div>
211+
</td>
212+
<td class="text-right py-1">
213+
<span class="text-sm font-mono text-gray-700">${(data.total.input_tokens / 1000000).toFixed(2)} M</span>
214+
</td>
215+
</tr>
216+
<tr>
217+
<td class="py-1">
218+
<div class="flex items-center justify-left space-x-1">
219+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
220+
<path d="M8 7c3.314 0 6-1.343 6-3s-2.686-3-6-3-6 1.343-6 3 2.686 3 6 3Z" />
221+
<path d="M8 8.5c1.84 0 3.579-.37 4.914-1.037A6.33 6.33 0 0 0 14 6.78V8c0 1.657-2.686 3-6 3S2 9.657 2 8V6.78c.346.273.72.5 1.087.683C4.42 8.131 6.16 8.5 8 8.5Z" />
222+
<path d="M8 12.5c1.84 0 3.579-.37 4.914-1.037.366-.183.74-.41 1.086-.684V12c0 1.657-2.686 3-6 3s-6-1.343-6-3v-1.22c.346.273.72.5 1.087.683C4.42 12.131 6.16 12.5 8 12.5Z" />
223+
</svg>
224+
<span>out</span>
225+
</div>
226+
</td>
227+
<td class="text-right py-1">
228+
<span class="text-sm font-mono text-gray-700">${(data.total.output_tokens / 1000000).toFixed(2)} M</span>
229+
</td>
230+
</tr>
231+
<tr>
232+
<td class="py-1">
233+
<div class="flex items-center justify-left space-x-1">
234+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
235+
<path d="M6.375 5.5h.875v1.75h-.875a.875.875 0 1 1 0-1.75ZM8.75 10.5V8.75h.875a.875.875 0 0 1 0 1.75H8.75Z" />
236+
<path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM7.25 3.75a.75.75 0 0 1 1.5 0V4h2.5a.75.75 0 0 1 0 1.5h-2.5v1.75h.875a2.375 2.375 0 1 1 0 4.75H8.75v.25a.75.75 0 0 1-1.5 0V12h-2.5a.75.75 0 0 1 0-1.5h2.5V8.75h-.875a2.375 2.375 0 1 1 0-4.75h.875v-.25Z" clip-rule="evenodd" />
237+
</svg>
238+
<span>in</span>
239+
</div>
240+
</td>
241+
<td class="text-right py-1">
242+
<span class="text-sm font-mono text-gray-700">${(data.total.input_cost).toFixed(2)} $</span>
243+
</td>
244+
</tr>
245+
<tr>
246+
<td class="py-1">
247+
<div class="flex items-center justify-left space-x-1">
248+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
249+
<path d="M6.375 5.5h.875v1.75h-.875a.875.875 0 1 1 0-1.75ZM8.75 10.5V8.75h.875a.875.875 0 0 1 0 1.75H8.75Z" />
250+
<path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM7.25 3.75a.75.75 0 0 1 1.5 0V4h2.5a.75.75 0 0 1 0 1.5h-2.5v1.75h.875a2.375 2.375 0 1 1 0 4.75H8.75v.25a.75.75 0 0 1-1.5 0V12h-2.5a.75.75 0 0 1 0-1.5h2.5V8.75h-.875a2.375 2.375 0 1 1 0-4.75h.875v-.25Z" clip-rule="evenodd" />
251+
</svg>
252+
<span>out</span>
253+
</div>
254+
</td>
255+
<td class="text-right py-1">
256+
<span class="text-sm font-mono text-gray-700">${(data.total.output_cost).toFixed(2)} $</span>
257+
</td>
258+
</tr>
259+
<tr>
260+
<td class="py-1">
261+
<div class="flex items-center justify-left space-x-1">
262+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
263+
<path d="M6.375 5.5h.875v1.75h-.875a.875.875 0 1 1 0-1.75ZM8.75 10.5V8.75h.875a.875.875 0 0 1 0 1.75H8.75Z" />
264+
<path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM7.25 3.75a.75.75 0 0 1 1.5 0V4h2.5a.75.75 0 0 1 0 1.5h-2.5v1.75h.875a2.375 2.375 0 1 1 0 4.75H8.75v.25a.75.75 0 0 1-1.5 0V12h-2.5a.75.75 0 0 1 0-1.5h2.5V8.75h-.875a2.375 2.375 0 1 1 0-4.75h.875v-.25Z" clip-rule="evenodd" />
265+
</svg>
266+
<span>total</span>
267+
</div>
268+
</td>
269+
<td class="text-right py-1">
270+
<span class="text-sm font-mono text-gray-700">${(data.total.total_cost).toFixed(2)} $</span>
271+
</td>
272+
</tr>
273+
<tr>
274+
<td class="py-1">
275+
<div class="flex items-center justify-left space-x-1">
276+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
277+
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.75-4.25a.75.75 0 0 0-1.5 0V8c0 .414.336.75.75.75h3.25a.75.75 0 0 0 0-1.5h-2.5v-3.5Z" clip-rule="evenodd" />
278+
</svg>
279+
<span>time</span>
280+
</div>
281+
</td>
282+
<td class="text-right py-1">
283+
<span class="text-sm font-mono text-gray-700">${(data.total.time_ms / 1000).toFixed(0)} s</span>
284+
</td>
285+
</tr>
286+
</tbody>
287+
</table>
288+
</div>
192289
</div>
193290
<div class="overflow-x-auto rounded-lg shadow-lg" style="max-height: 180px; overflow-y: auto;">
194291
<table class="w-full table-auto">

0 commit comments

Comments
 (0)
⚡