Add a background rectangle to the chart and fix NaN when max = 0
This commit is contained in:
parent
39b0b801b2
commit
eb47988464
|
@ -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>
|
|
||||||
`)
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue