BitGoblin/colossus
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Added ability to generate a basic chart using chart.js

Browse Source
This commit is contained in:
Gregory Ballantine
2025-06-29 01:56:17 -04:00
parent 728c249c15
commit fec91b1c1c
5 changed files with 115 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
assets/scripts/reports.coffee Normal file
View File

@@ -0,0 +1,76 @@
$ ->
$('#reports-download').on 'click', ->
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) ->
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: [
{
label: 'Average Score'
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.average
min_total += result.minimum if result.minimum
max_total += result.maximum if result.maximum
data.labels.push(testData.title)
data.datasets[0].data.push(avg_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:
datalabels:
anchor: 'end'
align: 'left'
color: 'black'
font:
weight: 'bold'
formatter: (value) -> value
scales:
y:
beginAtZero: true
new Chart ctx,
type: 'bar'
data: data
options: options
plugins: [ChartDataLabels]
$('#reports-download').attr('disabled', false)

12
src/Controllers/ApiController.php
View File

@@ -7,6 +7,7 @@ use Psr\Http\Message\ServerRequestInterface as Request;
use Slim\Routing\RouteContext; use Slim\Routing\RouteContext;
use BitGoblin\Colossus\Models\Benchmark; use BitGoblin\Colossus\Models\Benchmark;
use BitGoblin\Colossus\Models\Result; use BitGoblin\Colossus\Models\Result;
use BitGoblin\Colossus\Models\Test;
class ApiController extends Controller { class ApiController extends Controller {
@@ -65,4 +66,15 @@ class ApiController extends Controller {
->withHeader('Content-Type', 'application/json'); ->withHeader('Content-Type', 'application/json');
} }
public function getTestDetails(Request $request, Response $response, array $args): Response {
$urlParams = $request->getQueryParams();
$test = Test::where('id', $urlParams['test_id'])->first();
$payload = json_encode($test);
$response->getBody()->write($payload);
return $response
->withHeader('Content-Type', 'application/json');
}
} }

2
src/routes.php
View File

@@ -50,5 +50,7 @@ $app->group('/api', function(RouteCollectorProxy $group) {
$apiv1->get('/result/list', '\\BitGoblin\\Colossus\\Controllers\\ApiController:getResultList')->setName('api.resultList'); $apiv1->get('/result/list', '\\BitGoblin\\Colossus\\Controllers\\ApiController:getResultList')->setName('api.resultList');
$apiv1->post('/result/add', '\\BitGoblin\\Colossus\\Controllers\\ApiController:postResultAdd')->setName('api.resultAdd'); $apiv1->post('/result/add', '\\BitGoblin\\Colossus\\Controllers\\ApiController:postResultAdd')->setName('api.resultAdd');
$apiv1->get('/test/details', '\\BitGoblin\\Colossus\\Controllers\\ApiController:getTestDetails')->setName('api.testDetails');
}); });
}); });

1
views/layout.twig
View File

@@ -9,6 +9,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.min.js"></script>
<script src="/js/bedabin.js"></script> <script src="/js/bedabin.js"></script>
{% block scripts %}{% endblock %}
</head> </head>
<body> <body>
{% include 'partials/navbar.twig' %} {% include 'partials/navbar.twig' %}

28
views/reports/generate.twig
View File

@@ -2,6 +2,12 @@
{% block title %}Dashboard{% endblock %} {% block title %}Dashboard{% endblock %}
{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" charset="utf-8"></script>
<script src="/js/reports.js" charset="utf-8"></script>
{% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row">
@@ -13,16 +19,16 @@
<hr> <hr>
<div class="row"> <div class="row">
<div class="five columns"> <div class="col-5">
<select id="report-benchmarks" class="u-full-width"> <select id="report-benchmarks" class="form-select">
{% for b in benchmarks %} {% for b in benchmarks %}
<option value="{{ b.id }}">{{ b.name }}</option> <option value="{{ b.id }}">{{ b.name }}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div class="seven columns"> <div class="col-7">
<select id="report-tests" class="u-full-width" multiple> <select id="report-tests" class="form-select" multiple>
{% for t in benchmarks[0].tests %} {% for t in benchmarks[0].tests %}
<option value="{{ t.id }}">{{ t.title }}</option> <option value="{{ t.id }}">{{ t.title }}</option>
{% endfor %} {% endfor %}
@@ -30,4 +36,18 @@
</div> </div>
</div> </div>
<div class="row">
<div class="col-12">
<button id="reports-button" class="btn btn-primary" type="button" name="button">Generate Chart</button>
<button id="reports-download" class="btn btn-primary" type="button" name="button" disabled>Download Chart</button>
</div>
</div>
<div class="row">
<div class="col-5">
<canvas id="benchmark-chart" width="800" height="400"></canvas>
</div>
</div>
{% endblock %} {% endblock %}