From 6786eea1c46cd493e993d31355048522b04ac00d Mon Sep 17 00:00:00 2001
From: anperederi <antoine.perederii@etu.uca.fr>
Date: Fri, 22 Dec 2023 00:55:23 +0100
Subject: [PATCH] add heartRate Graph

---
 .../views/Templates/page/activity.html.twig   |  1 +
 .../views/Templates/page/analyze.html.twig    | 75 +++++++++++++++++++
 2 files changed, 76 insertions(+)

diff --git a/Sources/src/app/views/Templates/page/activity.html.twig b/Sources/src/app/views/Templates/page/activity.html.twig
index 89e9607b..e14809bc 100644
--- a/Sources/src/app/views/Templates/page/activity.html.twig
+++ b/Sources/src/app/views/Templates/page/activity.html.twig
@@ -67,6 +67,7 @@
                             <td>{{analyze.max}} Bpm</td>
                             <td>{{analyze.min}} Bpm</td>
                             <td>{{analyze.temperature}} °C</td>
+                            <td>{{analyze.idactivity}} °C</td>
                             <td><a href="/analyze?id={{ analyze.idactivity }}">En savoir plus</a></td>
                         </tr>
                     {% endfor %}
diff --git a/Sources/src/app/views/Templates/page/analyze.html.twig b/Sources/src/app/views/Templates/page/analyze.html.twig
index e1d4a5bb..712b9708 100755
--- a/Sources/src/app/views/Templates/page/analyze.html.twig
+++ b/Sources/src/app/views/Templates/page/analyze.html.twig
@@ -47,10 +47,85 @@
                 </tbody>
                 {% endfor %}
             </table>
+{#            <div>#}
+{#                <canvas id="myChart" width="400" height="200">#}
+{#                    <p>Hello Fallback World</p>#}
+{#                </canvas>#}
+{#            </div>#}
+{#            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>#}
+{#            <script>#}
+{#                const ctx = document.getElementById('myChart');#}
+
+{#                new Chart(ctx, {#}
+{#                    type: 'line',#}
+{#                    data: {#}
+{#                        labels: [#}
+{#                            {% for analyze in analyzes %}#}
+{#                                {{analyze.temps}}#}
+{#                            {% endfor %}#}
+{#                        ],#}
+{#                        datasets: [{#}
+{#                            label: 'Batement par minute',#}
+{#                            data: [#}
+{#                                {% for analyze in analyzes %}#}
+{#                                    {{analyze.bpm}}#}
+{#                                {% endfor %}#}
+{#                            ],#}
+{#                            borderWidth: 1#}
+{#                        }]#}
+{#                    },#}
+{#                    options: {#}
+{#                        scales: {#}
+{#                            y: {#}
+{#                                beginAtZero: true#}
+{#                            }#}
+{#                        }#}
+{#                    }#}
+{#                });#}
+{#            </script>#}
+            <div>
+                <canvas id="myChart" width="400" height="200">
+                    <p>Hello Fallback World</p>
+                </canvas>
+            </div>
+            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+            <script>
+                const ctx = document.getElementById('myChart');
+                const labels = [
+                    {% for analyze in analyzes %}
+                    '{{ analyze.temps }}',
+                    {% endfor %}
+                ];
+                const data = [
+                    {% for analyze in analyzes %}
+                    {{ analyze.bpm }},
+                    {% endfor %}
+                ];
+
+                new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Batement par minute',
+                            data: data,
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        scales: {
+                            y: {
+                                beginAtZero: false
+                            }
+                        }
+                    }
+                });
+            </script>
             <div class="card-body">
                 <div id="map" style="height: 500px;"></div>
                 <script>
                     document.addEventListener("DOMContentLoaded", function () {
+                        {#var lat = {{ analyze.latitude }}#}
                         var map = L.map('map').setView([45.75771709151474, 3.113484980409329], 14);
                         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                             attribution: '© OpenStreetMap contributors'