benchstat: html table adjustments

Now that it's one table, move configurations in general case
to top row, not repeated once per metric.

Change-Id: I3c5c53da09b98a6d010ce51cdd7326ce5ebd635e
Reviewed-on: https://go-review.googlesource.com/35940Reviewed-by: Quentin Smith <quentin@golang.org>

cmd/benchstat/html.go

@@ -10,23 +10,31 @@ import (
 )
 
 var htmlTemplate = template.Must(template.New("").Parse(`
-<table class='benchstat'>
+{{with index . 0}}
+<table class='benchstat {{if .OldNewDelta}}oldnew{{end}}'>
+{{if .OldNewDelta -}}
+{{- else if eq (len .Configs) 1}}
+{{- else -}}
+<tr class='configs'><th>{{range .Configs}}<th>{{.}}{{end}}
+{{end}}
+{{end}}
 {{- range $i, $table := .}}
-<tbody {{if .OldNewDelta}}class='oldnew'{{end}}>
+<tbody>
 {{if .OldNewDelta -}}
-<tr><th>name<th>old {{.Metric}}<th>new {{.Metric}}<th>delta
+<tr><th><th>old {{.Metric}}<th>new {{.Metric}}<th>delta<th>
 {{else if eq (len .Configs) 1}}
-<tr><th>name<th>{{.Metric}}
+<tr><th><th>{{.Metric}}
 {{else -}}
-<tr><th>name \ {{.Metric}}{{range .Configs}}<th>{{.}}{{end}}
+<tr><th><th colspan='{{len .Configs}}' class='metric'>{{.Metric}}
 {{end}}{{range $row := $table.Rows -}}
 {{if $table.OldNewDelta -}}
 <tr class='{{if eq .Change 1}}better{{else if eq .Change -1}}worse{{else}}unchanged{{end}}'>
 {{- else -}}
 <tr>
 {{- end -}}
-<td>{{.Benchmark}}{{range .Metrics}}<td>{{.Format $row.Scaler}}{{end}}{{if $table.OldNewDelta}}<td>{{.Delta}}<td class='note'>{{.Note}}{{end}}
+<td>{{.Benchmark}}{{range .Metrics}}<td>{{.Format $row.Scaler}}{{end}}{{if $table.OldNewDelta}}<td{{if eq .Delta "~"}} class='nodelta'{{end}}>{{.Delta}}<td class='note'>{{.Note}}{{end}}
 {{end -}}
+<tr><td>&nbsp;
 </tbody>
 {{end}}
 </table>

cmd/benchstat/main.go

@@ -155,5 +155,10 @@ func main() {
 	os.Stdout.Write(buf.Bytes())
 }
 
-var htmlStyle = `<style>.benchstat tbody td:nth-child(1n+2):not(.note) { text-align: right; padding: 0em 1em; }</style>
+var htmlStyle = `<style>
+.benchstat th:nth-child(1) { text-align: left; }
+.benchstat tbody td:nth-child(1n+2):not(.note) { text-align: right; padding: 0em 1em; }
+.benchstat tr:not(.configs) th { border-top: 1px solid #666; border-bottom: 1px solid #ccc; }
+.benchstat .nodelta { text-align: center !important; }
+</style>
 `

cmd/benchstat/testdata/examplehtml.golden

-<style>.benchstat tbody td:nth-child(1n+2):not(.note) { text-align: right; padding: 0em 1em; }</style>
+<style>
+.benchstat th:nth-child(1) { text-align: left; }
+.benchstat tbody td:nth-child(1n+2):not(.note) { text-align: right; padding: 0em 1em; }
+.benchstat tr:not(.configs) th { border-top: 1px solid #666; border-bottom: 1px solid #ccc; }
+.benchstat .nodelta { text-align: center !important; }
+</style>
 
-<table class='benchstat'>
-<tbody class='oldnew'>
-<tr><th>name<th>old time/op<th>new time/op<th>delta
+
+<table class='benchstat oldnew'>
+
+
+<tbody>
+<tr><th><th>old time/op<th>new time/op<th>delta<th>
 <tr class='better'><td>GobEncode<td>13.6ms ± 1%<td>11.8ms ± 1%<td>-13.31%<td class='note'>(p=0.016 n=4&#43;5)
-<tr class='unchanged'><td>JSONEncode<td>32.1ms ± 1%<td>31.8ms ± 1%<td>~<td class='note'>(p=0.286 n=4&#43;5)
+<tr class='unchanged'><td>JSONEncode<td>32.1ms ± 1%<td>31.8ms ± 1%<td class='nodelta'>~<td class='note'>(p=0.286 n=4&#43;5)
+<tr><td>&nbsp;
 </tbody>
 
-<tbody class='oldnew'>
-<tr><th>name<th>old speed<th>new speed<th>delta
+<tbody>
+<tr><th><th>old speed<th>new speed<th>delta<th>
 <tr class='better'><td>GobEncode<td>56.4MB/s ± 1%<td>65.1MB/s ± 1%<td>&#43;15.36%<td class='note'>(p=0.016 n=4&#43;5)
-<tr class='unchanged'><td>JSONEncode<td>60.4MB/s ± 1%<td>61.1MB/s ± 2%<td>~<td class='note'>(p=0.286 n=4&#43;5)
+<tr class='unchanged'><td>JSONEncode<td>60.4MB/s ± 1%<td>61.1MB/s ± 2%<td class='nodelta'>~<td class='note'>(p=0.286 n=4&#43;5)
+<tr><td>&nbsp;
 </tbody>
 
 </table>

cmd/benchstat/testdata/exampleoldhtml.golden

-<style>.benchstat tbody td:nth-child(1n+2):not(.note) { text-align: right; padding: 0em 1em; }</style>
+<style>
+.benchstat th:nth-child(1) { text-align: left; }
+.benchstat tbody td:nth-child(1n+2):not(.note) { text-align: right; padding: 0em 1em; }
+.benchstat tr:not(.configs) th { border-top: 1px solid #666; border-bottom: 1px solid #ccc; }
+.benchstat .nodelta { text-align: center !important; }
+</style>
 
-<table class='benchstat'>
-<tbody >
 
-<tr><th>name<th>time/op
+<table class='benchstat '>
+
+
+<tbody>
+
+<tr><th><th>time/op
 <tr><td>GobEncode<td>13.6ms ± 1%
 <tr><td>JSONEncode<td>32.1ms ± 1%
+<tr><td>&nbsp;
 </tbody>
 
-<tbody >
+<tbody>
 
-<tr><th>name<th>speed
+<tr><th><th>speed
 <tr><td>GobEncode<td>56.4MB/s ± 1%
 <tr><td>JSONEncode<td>60.4MB/s ± 1%
+<tr><td>&nbsp;
 </tbody>
 
 </table>

cmd/benchstat/testdata/oldnew4html.golden

-<style>.benchstat tbody td:nth-child(1n+2):not(.note) { text-align: right; padding: 0em 1em; }</style>
+<style>
+.benchstat th:nth-child(1) { text-align: left; }
+.benchstat tbody td:nth-child(1n+2):not(.note) { text-align: right; padding: 0em 1em; }
+.benchstat tr:not(.configs) th { border-top: 1px solid #666; border-bottom: 1px solid #ccc; }
+.benchstat .nodelta { text-align: center !important; }
+</style>
 
-<table class='benchstat'>
-<tbody >
-<tr><th>name \ time/op<th>old.txt<th>new.txt<th>slashslash4.txt
+
+<table class='benchstat '>
+<tr class='configs'><th><th>old.txt<th>new.txt<th>slashslash4.txt
+
+
+<tbody>
+<tr><th><th colspan='3' class='metric'>time/op
 <tr><td>CRC32/poly=IEEE/size=15/align=0-8<td>46.9ns ± 8%<td>44.5ns ± 3%<td>
 <tr><td>CRC32/poly=IEEE/size=15/align=1-8<td>44.7ns ± 5%<td>44.5ns ± 4%<td>
 <tr><td>CRC32/poly=IEEE/size=40/align=0-8<td>41.0ns ± 1%<td>42.5ns ± 6%<td>42.1ns ± 3%
@@ -39,10 +48,11 @@
 <tr><td>CRC32/poly=Koopman/size=4kB/align=1-8<td>8.94µs ±10%<td>9.05µs ±12%<td>9.46µs ± 8%
 <tr><td>CRC32/poly=Koopman/size=32kB/align=0-8<td>72.4µs ± 9%<td>72.9µs ± 4%<td>
 <tr><td>CRC32/poly=Koopman/size=32kB/align=1-8<td>69.6µs ± 3%<td>74.3µs ± 3%<td>
+<tr><td>&nbsp;
 </tbody>
 
-<tbody >
-<tr><th>name \ speed<th>old.txt<th>new.txt<th>slashslash4.txt
+<tbody>
+<tr><th><th colspan='3' class='metric'>speed
 <tr><td>CRC32/poly=IEEE/size=15/align=0-8<td>321MB/s ± 8%<td>337MB/s ± 3%<td>
 <tr><td>CRC32/poly=IEEE/size=15/align=1-8<td>336MB/s ± 4%<td>337MB/s ± 4%<td>
 <tr><td>CRC32/poly=IEEE/size=40/align=0-8<td>975MB/s ± 1%<td>942MB/s ± 5%<td>951MB/s ± 3%
@@ -79,6 +89,7 @@
 <tr><td>CRC32/poly=Koopman/size=4kB/align=1-8<td>459MB/s ± 9%<td>455MB/s ±11%<td>434MB/s ± 9%
 <tr><td>CRC32/poly=Koopman/size=32kB/align=0-8<td>453MB/s ± 8%<td>450MB/s ± 4%<td>
 <tr><td>CRC32/poly=Koopman/size=32kB/align=1-8<td>471MB/s ± 3%<td>441MB/s ± 3%<td>
+<tr><td>&nbsp;
 </tbody>
 
 </table>