From eb47988464084b0a72619ba5fa90353d4a580fe1 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Sun, 21 May 2023 00:14:48 +0200
Subject: [PATCH] Add a background rectangle to the chart and fix NaN when max
 = 0

---
 pkg/dashboard.go       | 19 ++++++-------------
 web/static/numerus.css |  4 ++++
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/pkg/dashboard.go b/pkg/dashboard.go
index 8b9173b..19d1f6e 100644
--- a/pkg/dashboard.go
+++ b/pkg/dashboard.go
@@ -227,15 +227,19 @@ func buildDashboardChart(ctx context.Context, conn *Conn, company *Company, peri
 		max = math.Max(v.income, max)
 		max = math.Max(v.expenses, max)
 	}
+	if max == 0 {
+		max = 1
+	}
 	if rows.Err() != nil {
 		panic(rows.Err())
 	}
 
 	width := 1024.
-	height := 300.
-	dataPoints := float64(len(values))
+	height := 256.
+	dataPoints := float64(len(values)) - 1
 	var sb strings.Builder
 	sb.WriteString(fmt.Sprintf("<svg id='income-chart' viewBox='-10 -10 %d %d'>", int(width)+20, int(height)+20))
+	sb.WriteString("<rect x='-10' y='-10' width='100%', height='100%'/>")
 	sb.WriteString("<polyline points='")
 	for i, v := range values {
 		sb.WriteString(fmt.Sprintf(" %f,%f", float64(i)/dataPoints*width, height-v.sales/max*height))
@@ -258,15 +262,4 @@ func buildDashboardChart(ctx context.Context, conn *Conn, company *Company, peri
 	}
 	sb.WriteString("</svg>")
 	return template.HTML(sb.String())
-	return template.HTML(`
-<svg id="income-chart" viewBox="0 0 500 200">
-  <polyline points="0,120 20,60 40,80 60,20"/>
-  <polyline points="10,130 30,70 50,90 70,30"/>
-  <polyline points="20,140 40,80 60,100 80,40"/>
-  <circle cx="0" cy="120" r="2"/>
-  <circle cx="20" cy="60" r="2"/>
-  <circle cx="40" cy="80" r="2"/>
-  <circle cx="60" cy="20" r="2"/>
-</svg>
-`)
 }
diff --git a/web/static/numerus.css b/web/static/numerus.css
index 6ac828d..14b2ebb 100644
--- a/web/static/numerus.css
+++ b/web/static/numerus.css
@@ -900,6 +900,10 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
     font-size: .66666em;
 }
 
+#income-chart rect {
+    fill: var(--numerus--header--background-color);
+}
+
 #income-chart polyline {
     fill: none;
     stroke-width: 5;