Fixed the chart generation page with the new ChartJS version and DB schema
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed

This commit is contained in:
2025-07-28 10:48:49 -04:00
parent 5cc3b8f824
commit 42a0b95015
7 changed files with 186 additions and 64 deletions

View File

@ -1,3 +1,3 @@
$ ->
# run foundation scripts
$(document).foundation()
console.log('Ready.')

View File

@ -1,55 +1,113 @@
$(document).ready ->
$('#generate_button').on 'click', (e) ->
e.preventDefault()
$.ajax(
method: 'POST'
url: '/reports'
data:
type: $('#report_type').val()
choice: $('#report_choice').val()
compare: $('#report_compare').val()
).done (data) ->
benchChart.options.title.text = data.choice
benchChart.data.labels = data.names
benchChart.data.datasets[0].data = data.avg_results
benchChart.data.datasets[1].data = data.min_results
benchChart.update()
return
return
return
$ ->
chartInstance = null
benchChart = new Chart(document.getElementById('chart_canvas').getContext('2d'),
type: 'horizontalBar'
data:
labels: []
datasets: [
{
label: 'Average FPS'
data: []
backgroundColor: 'hotpink'
borderColor: '#212121'
borderWidth: 1
}
{
label: 'Minimum FPS'
data: []
backgroundColor: 'cornflowerblue'
borderColor: '#212121'
borderWidth: 1
}
]
options:
title:
display: true
text: 'N/a'
scales: xAxes: [ {
display: true
ticks: beginAtZero: true
} ]
animation: onComplete: ->
dwnbtn = $('#download_button')
dwnbtn.attr 'href', benchChart.toBase64Image()
dwnbtn.attr 'download', 'benchmark_chart.png'
dwnbtn.attr 'disabled', false
return
)
$('#reports-download').on 'click', (e) ->
e.preventDefault()
canvas = $('#benchmark-chart')[0]
a = document.createElement 'a'
a.href = canvas.toDataURL 'image/png'
a.download = 'chart.png'
a.click()
$('#reports-button').on 'click', (e) ->
e.preventDefault()
$('#reports-download').attr('disabled', true)
chartInstance.destroy() if chartInstance
benchmarkId = $('#report-benchmarks').val()
testIds = $('#report-tests').val()
benchmarkSearchParams = new URLSearchParams
benchmark_id: benchmarkId
benchmarkRes = await fetch("/api/v1/benchmark/details?#{benchmarkSearchParams}")
benchmarkData = await benchmarkRes.json()
data =
labels: []
datasets: []
switch benchmarkData.scoring
when 'pts'
data.datasets.push({
label: 'Average Score'
data: []
})
when 'fps'
data.datasets.push({
label: 'Average FPS'
data: []
})
data.datasets.push({
label: 'Minimum FPS'
data: []
})
when 'ms'
data.datasets.push({
label: 'Average Frame Time'
data: []
})
data.datasets.push({
label: 'Minimum Frame Time'
data: []
})
for testId in testIds
try
testSearchParams = new URLSearchParams
test_id: testId
testRes = await fetch("/api/v1/test/details?#{testSearchParams}")
testData = await testRes.json()
resultSearchParams = new URLSearchParams
test_id: testId
benchmark_id: benchmarkId
resultRes = await fetch("/api/v1/result/list?#{resultSearchParams}")
resultData = await resultRes.json()
avg_total = 0
min_total = 0
max_total = 0
for result in resultData
avg_total += result.avg_score
min_total += result.min_score if result.min_score
max_total += result.max_score if result.max_score
data.labels.push(testData.name)
data.datasets[0].data.push(avg_total / resultData.length)
console.log(data.datasets[0].data)
switch benchmarkData.scoring
when 'fps', 'ms'
data.datasets[1].data.push(min_total / resultData.length)
catch error
console.error 'An error occurred while fetching benchmark results.', error
ctx = $('#benchmark-chart')[0].getContext('2d')
options =
indexAxis: 'y'
plugins:
title:
display: true
text: benchmarkData.name
font:
size: '24'
datalabels:
anchor: 'end'
align: 'left'
color: 'black'
font:
weight: 'bold'
formatter: (value) -> value
scales:
y:
beginAtZero: true
chartInstance = new Chart ctx,
type: 'bar'
data: data
options: options
plugins: [ChartDataLabels]
$('#reports-download').attr('disabled', false)
$('#benchmark-chart').removeClass('disabled')

View File

@ -0,0 +1,55 @@
$(document).ready ->
$('#generate_button').on 'click', (e) ->
e.preventDefault()
$.ajax(
method: 'POST'
url: '/reports'
data:
type: $('#report_type').val()
choice: $('#report_choice').val()
compare: $('#report_compare').val()
).done (data) ->
benchChart.options.title.text = data.choice
benchChart.data.labels = data.names
benchChart.data.datasets[0].data = data.avg_results
benchChart.data.datasets[1].data = data.min_results
benchChart.update()
return
return
return
benchChart = new Chart(document.getElementById('chart_canvas').getContext('2d'),
type: 'horizontalBar'
data:
labels: []
datasets: [
{
label: 'Average FPS'
data: []
backgroundColor: 'hotpink'
borderColor: '#212121'
borderWidth: 1
}
{
label: 'Minimum FPS'
data: []
backgroundColor: 'cornflowerblue'
borderColor: '#212121'
borderWidth: 1
}
]
options:
title:
display: true
text: 'N/a'
scales: xAxes: [ {
display: true
ticks: beginAtZero: true
} ]
animation: onComplete: ->
dwnbtn = $('#download_button')
dwnbtn.attr 'href', benchChart.toBase64Image()
dwnbtn.attr 'download', 'benchmark_chart.png'
dwnbtn.attr 'disabled', false
return
)

View File

@ -10,7 +10,7 @@ fetchTestBenchmarkResults = (testId, benchmarkId) ->
resultSearchParams = new URLSearchParams
test_id: testId
benchmark_id: benchmarkId
resultRes = await fetch("/api/v1/results?#{resultSearchParams}")
resultRes = await fetch("/api/v1/result/list?#{resultSearchParams}")
resultData = await resultRes.json()
avg_total = 0