Skip to content

Commit

Permalink
Stats page
Browse files Browse the repository at this point in the history
  • Loading branch information
aceberg committed Jan 20, 2024
1 parent d046714 commit 172a166
Show file tree
Hide file tree
Showing 8 changed files with 75 additions and 130 deletions.
2 changes: 1 addition & 1 deletion docs/ROADMAP.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@

## IN PROGRESS
- [ ] Mobile layout
- [ ] Statistics page

## TODO
- [ ] Login/Password
- [ ] Statistics page
- [ ] PostgreSQL DB option

## MAYBE
Expand Down
5 changes: 5 additions & 0 deletions internal/web/public/js/stats.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@

function setStatsPage(sets, hcolor) {
let ex = document.getElementById("ex-value").value;
console.log("EX =", ex);
};
20 changes: 16 additions & 4 deletions internal/web/stats.go
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ package web
import (
// "log"
"net/http"
// "strconv"
"sort"

"github.com/gin-gonic/gin"

Expand All @@ -14,10 +14,22 @@ import (
func statsHandler(c *gin.Context) {
var guiData models.GuiData

exData.Sets = db.SelectSet(appConfig.DBPath)

guiData.ExData.Sets = db.SelectSet(appConfig.DBPath)
guiData.Config = appConfig
guiData.HeatMap = generateHeatMap()

guiData.GroupMap = make(map[string]string)

for _, ex := range guiData.ExData.Sets {
_, ok := guiData.GroupMap[ex.Name]
if !ok {
guiData.GroupMap[ex.Name] = ex.Name
}
}

// Sort Sets by Date
sort.Slice(guiData.ExData.Sets, func(i, j int) bool {
return guiData.ExData.Sets[i].Date < guiData.ExData.Sets[j].Date
})

c.HTML(http.StatusOK, "header.html", guiData)
c.HTML(http.StatusOK, "stats.html", guiData)
Expand Down
3 changes: 2 additions & 1 deletion internal/web/templates/config.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{{ define "config.html" }}

<body>
<div class="container-lg mt-5">
<div class="container-lg">
<br>
<div class="row">
<div class="col-md">
<div class="card border-primary">
Expand Down
3 changes: 2 additions & 1 deletion internal/web/templates/exercise.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{{ define "exercise.html" }}

<body>
<div class="container-lg mt-5">
<div class="container-lg">
<br>
<div class="row">
<div class="col-md">
<div class="card border-primary">
Expand Down
3 changes: 2 additions & 1 deletion internal/web/templates/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,11 @@
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/exercise/?id=new">Add Exercise</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="/stats/">Stats</a></li>
<li><a class="dropdown-item" href="/weight/">Weight</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="/config/">Config</a></li>
<!-- <li><a class="dropdown-item" href="/stats/">Stats</a></li> -->
</ul>
</li>
</ul>
Expand Down
166 changes: 45 additions & 121 deletions internal/web/templates/stats.html
Original file line number Diff line number Diff line change
@@ -1,134 +1,58 @@
{{ define "stats.html" }}
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="/fs/public/js/stats.js"></script>
<script src="/fs/public/js/weight-chart.js"></script>
<link rel="stylesheet" type="text/css" href="/fs/public/css/index.css" />
<body>
<div class="container mt-5">
<div class="row">
<div class="col-8">
<div class="card border-primary">
<div class="card-header">HeatMap</div>
<div class="card-body">
<div class="chart-container">
<canvas id="matrix-chart" style="max-height: 110px;">
<div class="container-lg">
<br>
<div class="row">
<div class="col-md">
<div class="card border-primary">
<div class="card-header">Exercise stats</div>
<div class="card-body">
<div class="chart-container">
<form onchange='setStatsPage({{ .ExData.Sets }}, {{ .Config.HeatColor }});'>
<select class="form-select" id="ex-value">
{{ range $gr := .GroupMap }}
<option value="{{ $gr }}">{{ $gr }}</option>
{{ end }}
</select>
</form>
<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>
</table>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="card border-primary">
<div class="card-header">Reps</div>
<div class="card-body">
<canvas id="stats-reps" style="max-height: 110px;"></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>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card border-primary">
<div class="card-header">About</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>

<script>

// HeatMap
var heat = {{ .HeatMap }};

function lowerData() {
var ldata = [];
let arrayLength = heat.length;
for (let i = 0 ; i < arrayLength; i++) {
let val = heat[i];
ldata.push({
x: val.X,
y: val.Y,
d: val.D,
v: val.V
});
}
return ldata;
}

var ctx = document.getElementById("matrix-chart").getContext("2d");
window.myMatrix = new Chart(ctx, {
type: 'matrix',
data: {
datasets: [{
label: 'Heatmap',
data: lowerData(),
backgroundColor(context) {
const value = context.dataset.data[context.dataIndex].v;
const alpha = value / 7;
return Chart.helpers.color('green').alpha(alpha).rgbString();
},
borderColor(context) {
const value = context.dataset.data[context.dataIndex].v;
const alpha = 0.5;
return Chart.helpers.color('grey').alpha(alpha).rgbString();
},
borderWidth: 1,
hoverBackgroundColor: 'lightgrey',
hoverBorderColor: 'grey',
width() {
return 12;
},
height() {
return 12;
}
}]
},
options: {
onClick: (e) => {
const res = window.myMatrix.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);

console.log('res =', res[0].element.$context.raw.d);

// window.location.href = "/diary_show?from="+dayD+"&to="+dayD+"";
},
plugins: {
legend: false,
tooltip: {
callbacks: {
title() {
return '';
},
label(context) {
const v = context.dataset.data[context.dataIndex];
return [v.v, v.d];
}
}
}
},
scales: {
x: {
type: 'category',
offset: true,
reverse: false,
ticks: {
display: false
},
border: {
display: false
},
grid: {
display: false
}
},
y: {
type: 'category',
labels: ['Mo', 'Tu', 'We','Th','Fr','Sa','Su'],
reverse: false,
ticks: {
stepSize: 1,
display: true
},
border: {
display: false
},
grid: {
display: false
}
},
}
}
});

setStatsPage({{ .ExData.Sets }}, {{ .Config.HeatColor }});
</script>

{{ template "footer.html" }}
Expand Down
3 changes: 2 additions & 1 deletion internal/web/templates/weight.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<script src="/fs/public/js/weight-chart.js"></script>
<link rel="stylesheet" type="text/css" href="/fs/public/css/index.css" />
<body>
<div class="container-lg mt-5">
<div class="container-lg">
<br>
<div class="row">
<div class="col-md-4">
<div class="card border-primary">
Expand Down

0 comments on commit 172a166

Please sign in to comment.