history plot
This commit is contained in:
flo_isea committed
1 parent
8ade787421
commit
624ff1da42
3 files changed
+139
-5
No files matched your search
@@ -4,6 +4,7 @@ import (
|
||||
"embed"
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"log"
|
||||
"net/http"
|
||||
@@ -21,6 +22,12 @@ type store struct {
|
||||
mu sync.RWMutex
|
||||
value int
|
||||
updatedAt time.Time
|
||||
history []sample
|
||||
}
|
||||
|
||||
type sample struct {
|
||||
at time.Time
|
||||
value int
|
||||
}
|
||||
|
||||
func (s *store) get() int {
|
||||
@@ -32,14 +39,25 @@ func (s *store) get() int {
|
||||
func (s *store) set(v int) {
|
||||
s.mu.Lock()
|
||||
s.value = v
|
||||
s.updatedAt = time.Now()
|
||||
now := time.Now()
|
||||
s.updatedAt = now
|
||||
s.history = append(s.history, sample{at: now, value: v})
|
||||
cutoff := now.Add(-12 * time.Hour)
|
||||
keep := s.history[:0]
|
||||
for _, point := range s.history {
|
||||
if point.at.After(cutoff) {
|
||||
keep = append(keep, point)
|
||||
}
|
||||
}
|
||||
s.history = keep
|
||||
s.mu.Unlock()
|
||||
}
|
||||
|
||||
func (s *store) snapshot() (int, time.Time) {
|
||||
func (s *store) snapshot() (int, time.Time, []sample) {
|
||||
s.mu.RLock()
|
||||
defer s.mu.RUnlock()
|
||||
return s.value, s.updatedAt
|
||||
history := append([]sample(nil), s.history...)
|
||||
return s.value, s.updatedAt, history
|
||||
}
|
||||
|
||||
func main() {
|
||||
@@ -117,16 +135,101 @@ func (s *server) handleIndex(w http.ResponseWriter, r *http.Request) {
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
watts, updatedAt := s.store.snapshot()
|
||||
watts, updatedAt, history := s.store.snapshot()
|
||||
updatedLabel := "not updated yet"
|
||||
if !updatedAt.IsZero() {
|
||||
updatedLabel = updatedAt.Format("02.01.2006 15:04:05")
|
||||
}
|
||||
if err := page.Execute(w, map[string]any{"Watts": watts, "UpdatedAt": updatedLabel}); err != nil {
|
||||
if err := page.Execute(w, map[string]any{
|
||||
"Watts": watts,
|
||||
"UpdatedAt": updatedLabel,
|
||||
"HistoryChart": buildHistoryChart(history),
|
||||
}); err != nil {
|
||||
http.Error(w, "render error", http.StatusInternalServerError)
|
||||
}
|
||||
}
|
||||
|
||||
func buildHistoryChart(history []sample) template.HTML {
|
||||
const (
|
||||
width = 640
|
||||
height = 220
|
||||
padL = 52
|
||||
padR = 18
|
||||
padT = 18
|
||||
padB = 42
|
||||
)
|
||||
|
||||
if len(history) == 0 {
|
||||
return template.HTML(`<svg viewBox="0 0 640 220" class="chart-svg" aria-label="Power history chart" role="img"><rect x="0" y="0" width="640" height="220" rx="16" fill="#0b1220" stroke="#1e293b"/><text x="320" y="112" text-anchor="middle" fill="#64748b" font-size="16" font-family="system-ui, sans-serif">No power history yet</text></svg>`)
|
||||
}
|
||||
|
||||
minV, maxV := 0, history[0].value
|
||||
start := history[0].at
|
||||
end := history[len(history)-1].at
|
||||
for _, point := range history[1:] {
|
||||
if point.value > maxV {
|
||||
maxV = point.value
|
||||
}
|
||||
if point.at.Before(start) {
|
||||
start = point.at
|
||||
}
|
||||
if point.at.After(end) {
|
||||
end = point.at
|
||||
}
|
||||
}
|
||||
if maxV <= 0 {
|
||||
maxV = 1
|
||||
}
|
||||
span := end.Sub(start)
|
||||
if span <= 0 {
|
||||
span = time.Minute
|
||||
}
|
||||
|
||||
plotW := float64(width - padL - padR)
|
||||
plotH := float64(height - padT - padB)
|
||||
|
||||
points := make([]string, 0, len(history))
|
||||
var lastX, lastY float64
|
||||
for _, point := range history {
|
||||
x := float64(padL) + plotW*point.at.Sub(start).Seconds()/span.Seconds()
|
||||
y := float64(height-padB) - plotH*(float64(point.value-minV)/float64(maxV-minV))
|
||||
points = append(points, fmt.Sprintf("%.1f,%.1f", x, y))
|
||||
lastX, lastY = x, y
|
||||
}
|
||||
|
||||
midV := minV + (maxV-minV)/2
|
||||
midT := start.Add(span / 2)
|
||||
x0 := float64(padL)
|
||||
x1 := float64(width - padR)
|
||||
yTop := float64(padT)
|
||||
yMid := float64(padT) + plotH/2
|
||||
yBottom := float64(height - padB)
|
||||
|
||||
var b strings.Builder
|
||||
b.WriteString(`<svg viewBox="0 0 640 220" class="chart-svg" aria-label="Power history chart" role="img">`)
|
||||
b.WriteString(`<rect x="0" y="0" width="640" height="220" rx="16" fill="#0b1220" stroke="#1e293b"/>`)
|
||||
b.WriteString(`<g stroke="#1e293b" stroke-width="1">`)
|
||||
fmt.Fprintf(&b, `<path d="M %.1f %.1f H %.1f"/>`, x0, yTop, x1)
|
||||
fmt.Fprintf(&b, `<path d="M %.1f %.1f H %.1f"/>`, x0, yMid, x1)
|
||||
fmt.Fprintf(&b, `<path d="M %.1f %.1f H %.1f"/>`, x0, yBottom, x1)
|
||||
fmt.Fprintf(&b, `<path d="M %.1f %.1f V %.1f"/>`, x0, yTop, yBottom)
|
||||
fmt.Fprintf(&b, `<path d="M %.1f %.1f V %.1f"/>`, x0+(plotW/2), yTop, yBottom)
|
||||
fmt.Fprintf(&b, `<path d="M %.1f %.1f V %.1f"/>`, x1, yTop, yBottom)
|
||||
b.WriteString(`</g>`)
|
||||
b.WriteString(`<g fill="#64748b" font-size="12" font-family="system-ui, sans-serif">`)
|
||||
fmt.Fprintf(&b, `<text x="%.1f" y="%d" text-anchor="end">%d W</text>`, x0-10, int(yTop)+14, maxV)
|
||||
fmt.Fprintf(&b, `<text x="%.1f" y="%d" text-anchor="end">%d W</text>`, x0-10, int(yMid)+14, midV)
|
||||
fmt.Fprintf(&b, `<text x="%.1f" y="%d" text-anchor="end">0 W</text>`, x0-10, int(yBottom)+14)
|
||||
fmt.Fprintf(&b, `<text x="%.1f" y="%d" text-anchor="middle">%s</text>`, x0, int(height)-10, start.Format("15:04"))
|
||||
fmt.Fprintf(&b, `<text x="%.1f" y="%d" text-anchor="middle">%s</text>`, x0+(plotW/2), int(height)-10, midT.Format("15:04"))
|
||||
fmt.Fprintf(&b, `<text x="%.1f" y="%d" text-anchor="middle">%s</text>`, x1, int(height)-10, end.Format("15:04"))
|
||||
b.WriteString(`</g>`)
|
||||
fmt.Fprintf(&b, `<polyline fill="none" stroke="#38bdf8" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" points="%s"/>`, strings.Join(points, " "))
|
||||
fmt.Fprintf(&b, `<circle cx="%.1f" cy="%.1f" r="4" fill="#22c55e"/>`, lastX, lastY)
|
||||
b.WriteString(`</svg>`)
|
||||
return template.HTML(b.String())
|
||||
}
|
||||
|
||||
const faviconSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Power meter">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="16" y1="12" x2="48" y2="52" gradientUnits="userSpaceOnUse">
|
||||
|
||||
@@ -81,3 +81,31 @@ func TestLoadConfig(t *testing.T) {
|
||||
t.Fatalf("addr = %q, want %q", cfg.Addr, ":9090")
|
||||
}
|
||||
}
|
||||
|
||||
func TestBuildHistoryChartEmpty(t *testing.T) {
|
||||
chart := buildHistoryChart(nil)
|
||||
if !strings.Contains(string(chart), "No power history yet") {
|
||||
t.Fatalf("empty chart did not contain fallback text: %s", string(chart))
|
||||
}
|
||||
}
|
||||
|
||||
func TestBuildHistoryChartRendersPolyline(t *testing.T) {
|
||||
history := []sample{
|
||||
{at: time.Date(2026, 4, 20, 0, 0, 0, 0, time.UTC), value: 100},
|
||||
{at: time.Date(2026, 4, 20, 6, 0, 0, 0, time.UTC), value: 200},
|
||||
{at: time.Date(2026, 4, 20, 12, 0, 0, 0, time.UTC), value: 150},
|
||||
}
|
||||
|
||||
chart := buildHistoryChart(history)
|
||||
if !strings.Contains(string(chart), "<polyline") {
|
||||
t.Fatalf("chart did not contain polyline: %s", string(chart))
|
||||
}
|
||||
for _, want := range []string{"W", "00:00", "06:00", "12:00"} {
|
||||
if !strings.Contains(string(chart), want) {
|
||||
t.Fatalf("chart did not include %q: %s", want, string(chart))
|
||||
}
|
||||
}
|
||||
if !strings.Contains(string(chart), "0 W") {
|
||||
t.Fatalf("chart did not include zero baseline: %s", string(chart))
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,8 @@
|
||||
.value { font-size: clamp(3rem, 12vw, 8rem); font-weight: 800; line-height: 1; }
|
||||
.unit { margin-top: 0.75rem; font-size: 1.25rem; color: #94a3b8; }
|
||||
.updated-at { margin-top: 0.5rem; font-size: 0.875rem; color: #64748b; }
|
||||
.chart { margin-top: 1.25rem; width: min(92vw, 42rem); }
|
||||
.chart-svg { display: block; width: 100%; height: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -19,6 +21,7 @@
|
||||
<div class="value">{{.Watts}}</div>
|
||||
<div class="unit">watts</div>
|
||||
<div class="updated-at">Last updated: {{.UpdatedAt}}</div>
|
||||
<div class="chart">{{.HistoryChart}}</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user