From 94da55e019c2800b7e52ebd5d79a13b43219f3e9 Mon Sep 17 00:00:00 2001
From: Gregory Trullemans <redj@MacBook-Pro-de-Gregory.local>
Date: Thu, 13 Oct 2022 15:14:32 +0200
Subject: [PATCH] Bug fix with charts generation

---
 .../people/gymnasts/tab_physiological.html    | 135 +++----
 .../gymnasts/tab_scores_and_chronos.html      | 353 +++++++++---------
 2 files changed, 247 insertions(+), 241 deletions(-)

diff --git a/templates/people/gymnasts/tab_physiological.html b/templates/people/gymnasts/tab_physiological.html
index 06ec3f9d85..6327497b5d 100644
--- a/templates/people/gymnasts/tab_physiological.html
+++ b/templates/people/gymnasts/tab_physiological.html
@@ -111,16 +111,7 @@
 
 <script type="text/javascript">
 
-    // var xAxes = [{
-    //     type: "time",
-    //     time: {
-    //         parser: 'DD-MM-YYYY',
-    //         round: 'day'
-    //     },
-    //     scaleLabel: {
-    //         display: true,
-    //     }
-    // }];
+    var timeFormat = 'DD-MM-YYYY';
 
     var ctx = document.getElementById("chart_height_weight_state").getContext("2d");
     var gradientStroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
@@ -136,6 +127,24 @@
     gradientStroke_2.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
     gradientStroke_2.addColorStop(0.25, 'rgba(255, 159, 64, 0)');
 
+    var height_values = [
+        {% for height_weight in height_weight_list %}
+            {
+                x: '{{ height_weight.date | date:"d-m-Y" }}',
+                y: '{{ height_weight.weight }}'
+            },
+        {% endfor%}
+    ]
+
+    var weight_values = [
+        {% for height_weight in height_weight_list %}
+            {
+                x: '{{ height_weight.date | date:"d-m-Y" }}',
+                y: '{{ height_weight.height | add:"-100" }}'
+            },
+        {% endfor%}
+    ]
+
     var height_weight_data = {
         datasets:[
             {% if height_weight_list %}
@@ -146,14 +155,7 @@
                 borderColor: 'rgb(255, 99, 132)',
                 pointBackgroundColor: 'rgb(255, 99, 132)',
                 fill: true,
-                data: [
-                    {% for height_weight in height_weight_list %}
-                        {
-                            x: '{{ height_weight.date | date:"d-m-Y" }}',
-                            y: '{{ height_weight.weight }}'
-                        },
-                    {% endfor%}
-                ]
+                data: height_values,
             },
             {
                 label: 'Height',
@@ -162,50 +164,35 @@
                 borderColor: 'rgb(255, 159, 64)',
                 pointBackgroundColor: 'rgb(255, 159, 64)',
                 fill: true,
-                data: [
-                    {% for height_weight in height_weight_list %}
-                        {
-                            x: '{{ height_weight.date | date:"d-m-Y" }}',
-                            y: '{{ height_weight.height | add:"-100" }}'
-                        },
-                    {% endfor%}
-                ]
+                data: weight_values
             },
             {% endif %}
         ],
     };
 
     new Chart(ctx,{
-        // tooltips: {
-        //     backgroundColor: '#f5f5f5',
-        //     titleFontColor: '#333',
-        //     bodyFontColor: '#666',
-        //     bodySpacing: 4,
-        //     xPadding: 12,
-        //     mode: "nearest",
-        //     intersect: 0,
-        //     position: "nearest"
-        // },
         responsive: true,
         type: 'line',
         data: height_weight_data,
         options: {
             scales: {
-                xAxes: [{
-                    type: "time",
+                x: {
+                    type: 'time',
+                    display: true,
+                    scaleLabel: {
+                        display: true,
+                        labelString: 'Date',
+                        ticks: {
+                            autoSkip: true,
+                            source: 'data',
+                        },
+                    },
                     time: {
-                        parser: 'DD-MM-YYYY',
-                        round: 'day'
+                        parser: timeFormat,
+                        tooltipFormat: 'LL',
+                        round: 'day',
                     },
-                    scaleLabel: {
-                        display: true,
-                    }
-                }],
-                yAxes: [{
-                    scaleLabel: {
-                        display: true,
-                    },
-                }],
+                },
             },
             plugins: {
                 legend: {
@@ -224,6 +211,15 @@
     gradient_stroke_1.addColorStop(0.5, 'rgba(75, 192, 192, 0.2)');
     gradient_stroke_1.addColorStop(0.25, 'rgba(75, 192, 192, 0)');
 
+    var mindstate_values = [
+        {% for state in mindstate_list %}
+            {
+                x: '{{ state.date | date:"d-m-Y" }}',
+                y: '{{ state.score }}'
+            },
+        {% endfor%}
+    ]
+
     var mindstate_data = {
         datasets:[
             {% if mindstate_list %}
@@ -234,14 +230,7 @@
                 borderColor: 'rgb(75, 192, 192)',
                 pointBackgroundColor: 'rgb(75, 192, 192)',
                 fill: true,
-                data: [
-                    {% for state in mindstate_list %}
-                        {
-                            x: '{{ state.date | date:"d-m-Y" }}',
-                            y: '{{ state.score }}'
-                        },
-                    {% endfor%}
-                ]
+                data: mindstate_values,
             },
             {% endif %}
         ],
@@ -252,25 +241,23 @@
         data: mindstate_data,
         options: {
             scales: {
-                xAxes: [{
-                    type: "time",
+                x: {
+                    type: 'time',
+                    display: true,
+                    scaleLabel: {
+                        display: true,
+                        labelString: 'Date',
+                        ticks: {
+                            autoSkip: true,
+                            source: 'data',
+                        },
+                    },
                     time: {
-                        parser: 'DD-MM-YYYY',
-                        round: 'day'
+                        parser: timeFormat,
+                        tooltipFormat: 'LL',
+                        round: 'day',
                     },
-                    scaleLabel: {
-                        display: true,
-                    }
-                }],
-                yAxes: [{
-                    scaleLabel: {
-                        display: true,
-                    },
-                    ticks: {
-                        beginAtZero: true,
-                        max: 10
-                    }
-                }]
+                },
             },
             plugins: {
                 legend: {
diff --git a/templates/people/gymnasts/tab_scores_and_chronos.html b/templates/people/gymnasts/tab_scores_and_chronos.html
index 31f2aba652..4db227c48f 100644
--- a/templates/people/gymnasts/tab_scores_and_chronos.html
+++ b/templates/people/gymnasts/tab_scores_and_chronos.html
@@ -73,6 +73,8 @@
 </div>
 
 <script type="text/javascript">
+    var timeFormat = 'DD-MM-YYYY';
+
     {% if score_list %}
         var ctx = document.getElementById('chart_score_competition').getContext('2d');
         var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
@@ -94,85 +96,95 @@
         gradient_stroke_3.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
         gradient_stroke_3.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
 
+        var compulsory_routine_scrore = [
+            {% for score in score_routine1_list %}
+                {
+                    x: '{{ score.event.date_begin | date:"d-m-Y" }}',
+                    y: '{{ score.total }}'
+                },
+            {% endfor%}
+        ];
+
+        var voluntary_routine_scrore = [
+            {% for score in score_routine2_list %}
+                {
+                    x: '{{ score.event.date_begin | date:"d-m-Y" }}',
+                    y: '{{ score.total }}'
+                },
+            {% endfor%}
+        ];
+
+        var final_routine_scrore = [
+            {% for score in score_routine3_list %}
+                {
+                    x: '{{ score.event.date_begin | date:"d-m-Y" }}',
+                    y: '{{ score.total }}'
+                },
+            {% endfor%}
+        ];
+
+        var score_values = {
+            datasets:[
+                {% if score_routine1_list %}
+                {
+                    label: 'R1',
+                    cubicInterpolationMode: 'monotone',
+                    backgroundColor: gradient_stroke_1,
+                    borderColor: 'rgb(255, 99, 132)',
+                    pointBackgroundColor: 'rgb(255, 99, 132)',
+                    fill: true,
+                    data: compulsory_routine_scrore
+                },
+                {% endif %}
+
+                {% if score_routine2_list %}
+                {
+                    label: 'R2',
+                    cubicInterpolationMode: 'monotone',
+                    backgroundColor: gradient_stroke_2,
+                    borderColor: 'rgb(255, 159, 64)',
+                    pointBackgroundColor: 'rgb(255, 159, 64)',
+                    fill: true,
+                    data: voluntary_routine_scrore
+                },
+                {% endif %}
+
+                {% if score_routine3_list %}
+                {
+                    label: 'R3',
+                    cubicInterpolationMode: 'monotone',
+                    backgroundColor: gradient_stroke_3,
+                    borderColor: 'rgb(54, 162, 235)',
+                    pointBackgroundColor: 'rgb(54, 162, 235)',
+                    fill: true,
+                    data: final_routine_scrore
+                },
+                {% endif %}
+            ],
+        }
+
         new Chart(ctx,{
             type: 'line',
-            data:{
-                datasets:[
-                    {% if score_routine1_list %}
-                    {
-                        label: 'R1',
-                        cubicInterpolationMode: 'monotone',
-                        backgroundColor: gradient_stroke_1,
-                        borderColor: 'rgb(255, 99, 132)',
-                        pointBackgroundColor: 'rgb(255, 99, 132)',
-                        fill: true,
-                        data: [
-                            {% for score in score_routine1_list %}
-                                {
-                                    x: '{{ score.event.date_begin | date:"d-m-Y" }}',
-                                    y: '{{ score.total }}'
-                                },
-                            {% endfor%}
-                        ]
-                    },
-                    {% endif %}
-
-                    {% if score_routine2_list %}
-                    {
-                        label: 'R2',
-                        cubicInterpolationMode: 'monotone',
-                        backgroundColor: gradient_stroke_2,
-                        borderColor: 'rgb(255, 159, 64)',
-                        pointBackgroundColor: 'rgb(255, 159, 64)',
-                        fill: true,
-                        data: [
-                            {% for score in score_routine2_list %}
-                                {
-                                    x: '{{ score.event.date_begin | date:"d-m-Y" }}',
-                                    y: '{{ score.total }}'
-                                },
-                            {% endfor%}
-                        ]
-                    },
-                    {% endif %}
-
-                    {% if score_routine3_list %}
-                    {
-                        label: 'R3',
-                        cubicInterpolationMode: 'monotone',
-                        backgroundColor: gradient_stroke_3,
-                        borderColor: 'rgb(54, 162, 235)',
-                        pointBackgroundColor: 'rgb(54, 162, 235)',
-                        fill: true,
-                        data: [
-                            {% for score in score_routine3_list %}
-                                {
-                                    x: '{{ score.event.date_begin | date:"d-m-Y" }}',
-                                    y: '{{ score.total }}'
-                                },
-                            {% endfor%}
-                        ]
-                    },
-                    {% endif %}
-                ],
-            },
+            data: score_values,
             options: {
                 scales: {
-                    xAxes: [{
-                        type: "time",
+                    x: {
+						type: 'time',
+                        display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Date',
+                            ticks: {
+                                autoSkip: true,
+                                source: 'data',
+                            },
+						},
                         time: {
-                            parser: 'DD-MM-YYYY',
-                            round: 'day'
+                            parser: timeFormat,
+                            tooltipFormat: 'LL',
+                            round: 'day',
                         },
-                        scaleLabel: {
-                            display: true,
-                        }
-                    }, ],
-                    yAxes: [{
-                        scaleLabel: {
-                            display: true,
-                        }
-                    }]
+					},
                 },
                 plugins: {
                     legend: {
@@ -191,7 +203,6 @@
         blue: 'rgb(54, 162, 235)',
         purple: 'rgb(153, 102, 255)',
         grey: 'rgb(201, 203, 207)'
-
         http://www.chartjs.org/samples/latest/scales/time/line-point-data.html
     */
 
@@ -221,105 +232,113 @@
         gradient_stroke_4.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
         gradient_stroke_4.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
 
+        var straightjump_values = [
+            {% for chrono in chrono_10c %}
+                {
+                    x:'{{ chrono.date | date:"d-m-Y" }}',
+                    y:'{{ chrono.score_avg | floatformat:3 }}'
+                },
+            {% endfor%}
+        ];
+        var compulsory_routine_values = [
+            {% for chrono in chrono_r1 %}
+                {
+                    x:'{{ chrono.date | date:"d-m-Y" }}',
+                    y:'{{ chrono.score_avg | floatformat:3 }}'
+                },
+            {% endfor%}
+        ];
+        var volontary_routine_values = [
+            {% for chrono in chrono_r2 %}
+                {
+                    x:'{{ chrono.date | date:"d-m-Y" }}',
+                    y:'{{ chrono.score_avg | floatformat:3 }}'
+                },
+            {% endfor%}
+        ];
+        var final_routine_values = [
+            {% for chrono in chrono_rf %}
+                {
+                    x:'{{ chrono.date | date:"d-m-Y" }}',
+                    y:'{{ chrono.score_avg | floatformat:3 }}'
+                },
+            {% endfor%}
+        ];
+
+        var chrono_values = {
+            datasets: [
+                {% if chrono_10c %}
+                {
+                    label: '10 |',
+                    cubicInterpolationMode: 'monotone',
+                    backgroundColor: gradient_stroke_1,
+                    borderColor: 'rgb(75, 192, 192)',
+                    pointBackgroundColor: 'rgb(75, 192, 192)',
+                    fill: true,
+                    data: straightjump_values,
+                },
+                {% endif %}
+
+                {% if chrono_r1 %}
+                {
+                    label: 'R1',
+                    cubicInterpolationMode: 'monotone',
+                    backgroundColor: gradient_stroke_2,
+                    borderColor: 'rgb(255, 99, 132)',
+                    pointBackgroundColor: 'rgb(255, 99, 132)',
+                    fill: true,
+                    data: compulsory_routine_values,
+                },
+                {% endif %}
+
+                {% if chrono_r2 %}
+                {
+                    label: 'R2',
+                    cubicInterpolationMode: 'monotone',
+                    backgroundColor: gradient_stroke_3,
+                    borderColor: 'rgb(255, 159, 64)',
+                    pointBackgroundColor: 'rgb(255, 159, 64)',
+                    fill: true,
+                    data: volontary_routine_values,
+                },
+                {% endif %}
+
+                {% if chrono_rf %}
+                {
+                    label: 'R3',
+                    cubicInterpolationMode: 'monotone',
+                    backgroundColor: gradient_stroke_4,
+                    borderColor: 'rgb(255, 205, 86)',
+                    pointBackgroundColor: 'rgb(255, 205, 86)',
+                    fill: true,
+                    data: final_routine_values,
+                },
+                {% endif %}
+            ]
+        }
+
         new Chart(ctx,{
             type: 'line',
-            data:{
-                datasets:[
-                    {% if chrono_10c %}
-                    {
-                        label: '10 |',
-                        cubicInterpolationMode: 'monotone',
-                        backgroundColor: gradient_stroke_1,
-                        borderColor: 'rgb(75, 192, 192)',
-                        pointBackgroundColor: 'rgb(75, 192, 192)',
-                        fill: true,
-                        data: [
-                            {% for chrono in chrono_10c %}
-                                {
-                                    x: '{{ chrono.date | date:"d-m-Y" }}',
-                                    y: '{{ chrono.score_avg }}'
-                                },
-                            {% endfor%}
-                        ]
-                    },
-                    {% endif %}
-
-                    {% if chrono_r1 %}
-                    {
-                        label: 'R1',
-                        cubicInterpolationMode: 'monotone',
-                        backgroundColor: gradient_stroke_2,
-                        borderColor: 'rgb(255, 99, 132)',
-                        pointBackgroundColor: 'rgb(255, 99, 132)',
-                        fill: true,
-                        data: [
-                            {% for chrono in chrono_r1 %}
-                                {
-                                    x: '{{ chrono.date | date:"d-m-Y" }}',
-                                    y: '{{ chrono.score_avg }}'
-                                },
-                            {% endfor%}
-                        ]
-                    },
-                    {% endif %}
-
-                    {% if chrono_r2 %}
-                    {
-                        label: 'R2',
-                        cubicInterpolationMode: 'monotone',
-                        backgroundColor: gradient_stroke_3,
-                        borderColor: 'rgb(255, 159, 64)',
-                        pointBackgroundColor: 'rgb(255, 159, 64)',
-                        fill: true,
-                        data: [
-                            {% for chrono in chrono_r2 %}
-                                {
-                                    x: '{{ chrono.date | date:"d-m-Y" }}',
-                                    y: '{{ chrono.score_avg }}'
-                                },
-                            {% endfor%}
-                        ]
-                    },
-                    {% endif %}
-
-                    {% if chrono_rf %}
-                    {
-                        label: 'R3',
-                        cubicInterpolationMode: 'monotone',
-                        backgroundColor: gradient_stroke_4,
-                        borderColor: 'rgb(255, 205, 86)',
-                        pointBackgroundColor: 'rgb(255, 205, 86)',
-                        fill: true,
-                        data: [
-                            {% for chrono in chrono_rf %}
-                                {
-                                    x: '{{ chrono.date | date:"d-m-Y" }}',
-                                    y: '{{ chrono.score_avg }}'
-                                },
-                            {% endfor%}
-                        ]
-                    },
-                    {% endif %}
-                ],
-            },
-
+            data: chrono_values,
             options: {
                 scales: {
-                    xAxes: [{
-                        type: "time",
+                    x: {
+						type: 'time',
+                        display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Date',
+                            ticks: {
+                                autoSkip: true,
+                                source: 'data',
+                            },
+						},
                         time: {
-                            parser: 'DD-MM-YYYY',
-                            round: 'day'
+                            parser: timeFormat,
+                            tooltipFormat: 'LL',
+                            round: 'day',
                         },
-                        scaleLabel: {
-                            display: true,
-                        }
-                    }, ],
-                    yAxes: [{
-                        scaleLabel: {
-                            display: true,
-                        }
-                    }]
+					},
                 },
                 plugins: {
                     legend: {