added display for categorical data
This commit is contained in:
parent
ba4b0859c8
commit
7d2221de01
3 changed files with 59 additions and 14 deletions
28
main.go
28
main.go
|
@ -499,14 +499,25 @@ func (web *Web) watchView(c *gin.Context) {
|
||||||
|
|
||||||
var values []FilterOutput
|
var values []FilterOutput
|
||||||
web.db.Model(&FilterOutput{}).Order("time asc").Where("watch_id = ?", watch.ID).Find(&values)
|
web.db.Model(&FilterOutput{}).Order("time asc").Where("watch_id = ?", watch.ID).Find(&values)
|
||||||
|
numericalMap := make(map[string][]*FilterOutput, len(values))
|
||||||
valueMap := make(map[string][]FilterOutput, len(values))
|
categoricalMap := make(map[string][]*FilterOutput, len(values))
|
||||||
names := make(map[string]bool, 5)
|
names := make(map[string]bool, 5)
|
||||||
for _, value := range values {
|
for i := range values {
|
||||||
|
value := &values[i]
|
||||||
names[value.Name] = true
|
names[value.Name] = true
|
||||||
valueMap[value.Name] = append(valueMap[value.Name], value)
|
_, err := strconv.ParseFloat(value.Value, 64)
|
||||||
|
if err == nil {
|
||||||
|
numericalMap[value.Name] = append(numericalMap[value.Name], value)
|
||||||
|
log.Println(value)
|
||||||
|
} else {
|
||||||
|
// probably very inefficient to prepend, but want newest values at the top
|
||||||
|
categoricalMap[value.Name] = append([]*FilterOutput{value}, categoricalMap[value.Name]...)
|
||||||
|
log.Println(value)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// reverse categoricalMap slice
|
||||||
|
|
||||||
colorMap := make(map[string]int, len(names))
|
colorMap := make(map[string]int, len(names))
|
||||||
index := 0
|
index := 0
|
||||||
for name := range names {
|
for name := range names {
|
||||||
|
@ -514,12 +525,11 @@ func (web *Web) watchView(c *gin.Context) {
|
||||||
index += 1
|
index += 1
|
||||||
}
|
}
|
||||||
|
|
||||||
//data := make([]map[string]string, len(valueMap))
|
|
||||||
|
|
||||||
c.HTML(http.StatusOK, "watchView", gin.H{
|
c.HTML(http.StatusOK, "watchView", gin.H{
|
||||||
"Watch": watch,
|
"Watch": watch,
|
||||||
"ValueMap": valueMap,
|
"numericalMap": numericalMap,
|
||||||
"colorMap": colorMap,
|
"categoricalMap": categoricalMap,
|
||||||
|
"colorMap": colorMap,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,14 +32,49 @@ GoWatch {{ .Watch.Name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{ if .numericalMap }}
|
||||||
|
<canvas id="chartCanvas">
|
||||||
|
|
||||||
<canvas id="chartCanvas">
|
</canvas>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if .categoricalMap }}
|
||||||
|
<ul class="nav nav-tabs" id="categoricalTab" role="tablist">
|
||||||
|
{{ range $name, $values := .categoricalMap }}
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button class="nav-link active" id="{{ $name }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $name }}-tab-pane" type="button" role="tab" aria-controls="{{ $name }}-tab-pane" aria-selected="true">{{ $name }}</button>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content" id="categoricalTabContent">
|
||||||
|
{{ range $name, $values := .categoricalMap }}
|
||||||
|
<div class="tab-pane fade show active" id="{{ $name }}-tab-pane" role="tabpanel" aria-labelledby="{{ $name }}-tab" tabindex="0">
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>When</th>
|
||||||
|
<th>Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{{ range $value := $values }}
|
||||||
|
<tr>
|
||||||
|
<td>{{ $value.Time.Format "2006-01-02 15:04:05" }}</td>
|
||||||
|
<td>{{ $value.Value }}</td>
|
||||||
|
</tr>
|
||||||
|
{{ end }}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
</canvas>
|
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
|
|
||||||
{{ define "scripts"}}
|
{{ define "scripts"}}
|
||||||
|
{{ if .numericalMap }}
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js" crossorigin="anonymous"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
|
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
|
||||||
|
@ -69,7 +104,7 @@ GoWatch {{ .Watch.Name }}
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: {
|
data: {
|
||||||
datasets:[
|
datasets:[
|
||||||
{{ range $name, $values := .ValueMap }}
|
{{ range $name, $values := .numericalMap }}
|
||||||
{
|
{
|
||||||
label: {{ $name }},
|
label: {{ $name }},
|
||||||
fill: false,
|
fill: false,
|
||||||
|
@ -96,4 +131,5 @@ GoWatch {{ .Watch.Name }}
|
||||||
}
|
}
|
||||||
document.addEventListener('DOMContentLoaded', canvasInit, false);
|
document.addEventListener('DOMContentLoaded', canvasInit, false);
|
||||||
</script>
|
</script>
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
1
todo.md
1
todo.md
|
@ -9,6 +9,5 @@
|
||||||
- json
|
- json
|
||||||
- add index to docs/compose to fix link in pages
|
- add index to docs/compose to fix link in pages
|
||||||
- safe escape {{ }} for pages
|
- safe escape {{ }} for pages
|
||||||
- add display of non numerical data
|
|
||||||
- xpath/css innerthtml option?
|
- xpath/css innerthtml option?
|
||||||
- fix css/js source maps
|
- fix css/js source maps
|
Loading…
Add table
Reference in a new issue