Update Score UI
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Gregory Trullemans 2021-12-19 20:42:32 +01:00
parent e4080de1d5
commit 9148c2b8e2
1 changed files with 44 additions and 5 deletions

View File

@ -190,6 +190,26 @@
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var ctx = document.getElementById("chartjs_chrono").getContext("2d");
var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);
var gradient_stroke_3 = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_1.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
gradient_stroke_1.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
gradient_stroke_1.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
gradient_stroke_1.addColorStop(0.25, 'rgba(255, 99, 132, 0)');
gradient_stroke_2.addColorStop(1, 'rgba(255, 159, 64, 0.4)');
gradient_stroke_2.addColorStop(0.75, 'rgba(255, 159, 64, 0.3)');
gradient_stroke_2.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
gradient_stroke_2.addColorStop(0.25, 'rgba(255, 159, 64, 0)');
gradient_stroke_3.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
gradient_stroke_3.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
gradient_stroke_3.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
gradient_stroke_3.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
new Chart(document.getElementById("chartjs_routine"),{ new Chart(document.getElementById("chartjs_routine"),{
type: 'line', type: 'line',
data:{ data:{
@ -197,7 +217,7 @@
{% if score_routine1_list %} {% if score_routine1_list %}
{ {
label: 'L1', label: 'L1',
backgroundColor: 'rgb(255, 99, 132, 0.25)', backgroundColor: gradient_stroke_1,
borderColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)',
fill: true, fill: true,
data: [ data: [
@ -214,7 +234,7 @@
{% if score_routine2_list %} {% if score_routine2_list %}
{ {
label: 'L2', label: 'L2',
backgroundColor: 'rgb(255, 159, 64, 0.25)', backgroundColor: gradient_stroke_2,
borderColor: 'rgb(255, 159, 64)', borderColor: 'rgb(255, 159, 64)',
fill: true, fill: true,
data: [ data: [
@ -231,7 +251,7 @@
{% if score_routine3_list %} {% if score_routine3_list %}
{ {
label: 'L3', label: 'L3',
backgroundColor: 'rgb(54, 162, 235, 0.25)', backgroundColor: gradient_stroke_3,
borderColor: 'rgb(54, 162, 235)', borderColor: 'rgb(54, 162, 235)',
fill: true, fill: true,
data: [ data: [
@ -283,6 +303,25 @@
http://www.chartjs.org/samples/latest/scales/time/line-point-data.html http://www.chartjs.org/samples/latest/scales/time/line-point-data.html
*/ */
var ctx = document.getElementById("chartjs_chrono").getContext("2d");
var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_1.addColorStop(1, 'rgba(75, 192, 192, 0.4)');
gradient_stroke_1.addColorStop(0.75, 'rgba(75, 192, 192, 0.3)');
gradient_stroke_1.addColorStop(0.5, 'rgba(75, 192, 192, 0.2)');
gradient_stroke_1.addColorStop(0.25, 'rgba(75, 192, 192, 0)');
gradient_stroke_2.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
gradient_stroke_2.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
gradient_stroke_2.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
gradient_stroke_2.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
gradient_stroke_3.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
gradient_stroke_3.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
gradient_stroke_3.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
gradient_stroke_3.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
new Chart(document.getElementById("chartjs_chrono"),{ new Chart(document.getElementById("chartjs_chrono"),{
type: 'line', type: 'line',
data:{ data:{
@ -290,7 +329,7 @@
{% if chrono_10c %} {% if chrono_10c %}
{ {
label: '10 |', label: '10 |',
backgroundColor: 'rgb(75, 192, 192, 0.25)', backgroundColor: gradient_stroke_1,
borderColor: 'rgb(75, 192, 192)', borderColor: 'rgb(75, 192, 192)',
fill: true, fill: true,
data: [ data: [
@ -307,7 +346,7 @@
{% if chrono_r1 %} {% if chrono_r1 %}
{ {
label: 'L1', label: 'L1',
backgroundColor: 'rgb(54, 162, 235, 0.25)', backgroundColor: gradient_stroke_2,
borderColor: 'rgb(54, 162, 235)', borderColor: 'rgb(54, 162, 235)',
fill: true, fill: true,
data: [ data: [