Stats chart

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
+ }
+ }
+ }
+ });
 };

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);
  };
 };

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);
 };

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>