From 0076f5265aad25f22e8826c923761a2f53c680db Mon Sep 17 00:00:00 2001
From: aceberg <1502200+aceberg@users.noreply.github.com>
Date: Mon, 22 Jan 2024 02:03:50 +0700
Subject: [PATCH] Stats chart

---
 internal/web/public/js/stats.js        | 70 ++++++++++++++++++++++++++
 internal/web/public/js/weight-chart.js |  6 +--
 internal/web/public/js/weight.js       |  2 +-
 internal/web/templates/stats.html      |  8 +--
 4 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/internal/web/public/js/stats.js b/internal/web/public/js/stats.js
index f905e9a..5345e4b 100644
--- a/internal/web/public/js/stats.js
+++ b/internal/web/public/js/stats.js
@@ -1,5 +1,75 @@
+var sChart = null;
+
+function addSet(date, reps, weight) {
+
+    html_code = '<tr><td>'+date+'</td><td>'+reps+'</td><td>'+weight+'</td></tr>';
+
+    document.getElementById('stats-table').insertAdjacentHTML('beforeend', html_code);
+};
+
 
 function setStatsPage(sets, hcolor) {
+    let dates = [], ws = []; reps = [];
+
     let ex = document.getElementById("ex-value").value;
     console.log("EX =", ex);
+
+    let start = 0;
+    let end = sets.length;
+
+    document.getElementById('stats-table').innerHTML = "";
+
+    for (let i = start ; i < end; i++) {
+        if (sets[i].Name === ex) {
+            addSet(sets[i].Date, sets[i].Reps, sets[i].Weight);
+
+            dates.push(sets[i].Date);
+            reps.push(sets[i].Reps);
+            ws.push(sets[i].Weight);
+        };
+    };
+
+    console.log("REPS =", reps);
+
+    statsChart('stats-reps', dates, reps, hcolor, true);
+    weightChart('stats-weight', dates, ws, hcolor, true);
+};
+
+function statsChart(id, dates, ws, wcolor, xticks) {
+    
+    const ctx = document.getElementById(id);
+
+    if (sChart){
+      sChart.clear();
+      sChart.destroy();
+    };
+
+    sChart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: dates,
+        datasets: [{
+          data: ws,
+          borderColor: wcolor,
+          borderWidth: 1
+        }]
+      },
+      options: {
+        scales: {
+          x: {
+            ticks: {
+                display: xticks
+            },
+          },
+          y: {
+            beginAtZero: false
+          }
+        },
+        plugins:{
+            legend: {
+             display: false
+            }
+        }
+      }
+    });
 };
\ No newline at end of file
diff --git a/internal/web/public/js/weight-chart.js b/internal/web/public/js/weight-chart.js
index 6409567..f02781f 100644
--- a/internal/web/public/js/weight-chart.js
+++ b/internal/web/public/js/weight-chart.js
@@ -14,9 +14,9 @@ function splitWeight(weight, show) {
     return { dates, ws };
 };
 
-function weightChart(dates, ws, wcolor, xticks) {
+function weightChart(id, dates, ws, wcolor, xticks) {
     
-    const ctx = document.getElementById('weight-chart');
+    const ctx = document.getElementById(id);
 
     if (wChart){
       wChart.clear();
@@ -57,6 +57,6 @@ function generateWeightChart(weight, wcolor, show) {
   if (weight) {
     let { dates, ws } = splitWeight(weight, show);
 
-    weightChart(dates, ws, wcolor, false);
+    weightChart('weight-chart', dates, ws, wcolor, false);
   };
 };
\ No newline at end of file
diff --git a/internal/web/public/js/weight.js b/internal/web/public/js/weight.js
index c4dc858..2ff0e74 100644
--- a/internal/web/public/js/weight.js
+++ b/internal/web/public/js/weight.js
@@ -46,5 +46,5 @@ function setWeights(weights, wcolor, off) {
         ws.push(weights[i].Weight);
         addWeight(i+1, weights[i].Date, weights[i].Weight, weights[i].ID)
     };
-    weightChart(dates, ws, wcolor, true);
+    weightChart('weight-chart', dates, ws, wcolor, true);
 };
\ No newline at end of file
diff --git a/internal/web/templates/stats.html b/internal/web/templates/stats.html
index 6ec759c..f370c0e 100644
--- a/internal/web/templates/stats.html
+++ b/internal/web/templates/stats.html
@@ -19,14 +19,14 @@
                                 {{ end }}
                             </select>
                         </form>
+                        <br>
                         <table class="table table-borderless">
                             <thead>
-                                <th class="col-1"></th>
                                 <th class="col-3">Date</th>
                                 <th class="col-4">Reps</th>
                                 <th class="col-4">Weight</th>
                             </thead>
-                            <tbody id="stats-exs">
+                            <tbody id="stats-table">
                             </tbody>
                         </table>
                     </div>
@@ -37,14 +37,14 @@
                 <div class="card border-primary">
                     <div class="card-header">Reps</div>
                     <div class="card-body">
-                        <canvas id="stats-reps" style="max-height: 110px;"></canvas>
+                        <canvas id="stats-reps" style="max-height: 200px;"></canvas>
                     </div>
                 </div>
                 <br>
                 <div class="card border-primary">
                     <div class="card-header">Weight</div>
                     <div class="card-body">
-                        <canvas id="stats-weight" style="max-height: 110px;"></canvas>
+                        <canvas id="stats-weight" style="max-height: 200px;"></canvas>
                     </div>
                 </div>
             </div>