Added ability to generate a basic chart using chart.js

This commit is contained in:
2025-06-29 01:56:17 -04:00
parent 728c249c15
commit fec91b1c1c
5 changed files with 115 additions and 4 deletions

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/bootstrap/5.3.7/js/bootstrap.min.js"></script>
<script src="/js/bedabin.js"></script>
{% block scripts %}{% endblock %}
</head>
<body>
{% include 'partials/navbar.twig' %}

View File

@ -2,6 +2,12 @@
{% 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 %}
<div class="row">
@ -13,16 +19,16 @@
<hr>
<div class="row">
<div class="five columns">
<select id="report-benchmarks" class="u-full-width">
<div class="col-5">
<select id="report-benchmarks" class="form-select">
{% for b in benchmarks %}
<option value="{{ b.id }}">{{ b.name }}</option>
{% endfor %}
</select>
</div>
<div class="seven columns">
<select id="report-tests" class="u-full-width" multiple>
<div class="col-7">
<select id="report-tests" class="form-select" multiple>
{% for t in benchmarks[0].tests %}
<option value="{{ t.id }}">{{ t.title }}</option>
{% endfor %}
@ -30,4 +36,18 @@
</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 %}