53 lines
2.8 KiB
HTML
53 lines
2.8 KiB
HTML
{{/* A chart's controls re-fetch only that chart (fitnessHandler.serveFragment),
|
|
sending every chart's controls so the server can update the page URL. */}}
|
|
{{define "fitnessChart"}}
|
|
<section class="fitness-chart panel" hx-get="./" hx-vals='{"chart": "{{.Param}}"}' hx-trigger="change" hx-include="closest .fitness-dash" hx-target="this" hx-swap="outerHTML" hx-sync="this:replace">
|
|
<div class="fitness-chart-header row space-between">
|
|
<span class="caption">{{.Title}}</span>
|
|
<div class="row fitness-controls">
|
|
<label class="fitness-absolute"><input type="checkbox" name="{{.Param}}-absolute" value="1"{{if .Absolute}} checked{{end}}> Absolute</label>
|
|
<select class="input fitness-range" name="{{.Param}}" aria-label="{{.Title}} time range">
|
|
{{range .Options}}<option value="{{.Value}}"{{if .Selected}} selected{{end}}>{{.Label}}</option>{{end}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{{if .Empty}}
|
|
<p class="fitness-empty is-empty">No data in this range.</p>
|
|
{{else}}
|
|
<svg class="fitness-svg{{if .Dense}} is-dense{{end}}" viewBox="0 0 {{.ViewW}} {{.ViewH}}" role="img" aria-label="{{.Title}}">
|
|
{{range .YTicks}}
|
|
<line class="chart-grid" x1="{{$.PlotX}}" y1="{{.Pos}}" x2="{{$.PlotR}}" y2="{{.Pos}}"/>
|
|
<text class="chart-label" x="{{$.YLabelX}}" y="{{.Pos}}" text-anchor="end" dominant-baseline="middle">{{.Label}}</text>
|
|
{{end}}
|
|
{{range .XTicks}}
|
|
<line class="chart-grid" x1="{{.Pos}}" y1="{{$.PlotY}}" x2="{{.Pos}}" y2="{{$.PlotB}}"/>
|
|
<text class="chart-label" x="{{.Pos}}" y="{{$.XLabelY}}" text-anchor="{{.Anchor}}">{{.Label}}</text>
|
|
{{end}}
|
|
<line class="chart-axis" x1="{{.PlotX}}" y1="{{.PlotY}}" x2="{{.PlotX}}" y2="{{.PlotB}}"/>
|
|
<line class="chart-axis" x1="{{.PlotX}}" y1="{{.PlotB}}" x2="{{.PlotR}}" y2="{{.PlotB}}"/>
|
|
{{range .Lines}}
|
|
<polyline class="chart-line" points="{{.}}"/>
|
|
{{end}}
|
|
{{range .Dots}}
|
|
<circle class="chart-dot" cx="{{.X}}" cy="{{.Y}}" r="2.5" data-date="{{.Date}}" data-value="{{.Value}}"/>
|
|
{{end}}
|
|
{{if .Goal}}
|
|
<line class="chart-goal" x1="{{.PlotX}}" y1="{{.Goal.Y}}" x2="{{.PlotR}}" y2="{{.Goal.Y}}"/>
|
|
<text class="chart-goal-label" x="{{.PlotR}}" y="{{.Goal.LabelY}}" text-anchor="end">{{.Goal.Label}}</text>
|
|
{{end}}
|
|
<line class="chart-cursor" x1="0" y1="{{.PlotY}}" x2="0" y2="{{.PlotB}}"/>
|
|
<circle class="chart-focus" r="4"/>
|
|
</svg>
|
|
<div class="fitness-tip" hidden><strong></strong><span></span></div>
|
|
{{end}}
|
|
</section>
|
|
{{end}}
|
|
<div class="fitness-dash col">
|
|
{{if .Notice}}
|
|
<p class="muted">{{.Notice}}</p>
|
|
{{else}}
|
|
{{range .Charts}}{{template "fitnessChart" .}}{{end}}
|
|
{{end}}
|
|
</div>
|
|
<script src="{{asset "fitness/fitness.js"}}"></script>
|