tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Add a background rectangle to the chart and fix NaN when max = 0

This commit is contained in:
jordi fita mas 2023-05-21 00:14:48 +02:00
parent 39b0b801b2
commit eb47988464
2 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pkg/dashboard.go
View File

@ -227,15 +227,19 @@ func buildDashboardChart(ctx context.Context, conn *Conn, company *Company, peri
max = math.Max(v.income, max) max = math.Max(v.income, max)
max = math.Max(v.expenses, max) max = math.Max(v.expenses, max)
} }
if max == 0 {
max = 1
}
if rows.Err() != nil { if rows.Err() != nil {
panic(rows.Err()) panic(rows.Err())
} }
width := 1024. width := 1024.
height := 300. height := 256.
dataPoints := float64(len(values)) dataPoints := float64(len(values)) - 1
var sb strings.Builder 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(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='") sb.WriteString("<polyline points='")
for i, v := range values { for i, v := range values {
sb.WriteString(fmt.Sprintf(" %f,%f", float64(i)/dataPoints*width, height-v.sales/max*height)) 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>") sb.WriteString("</svg>")
return template.HTML(sb.String()) 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>
`)
} }

4
web/static/numerus.css
View File

@ -900,6 +900,10 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
font-size: .66666em; font-size: .66666em;
} }
#income-chart rect {
fill: var(--numerus--header--background-color);
}
#income-chart polyline { #income-chart polyline {
fill: none; fill: none;
stroke-width: 5; stroke-width: 5;