benchstat: style significant deltas

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

cmd/benchstat/html.go

@@ -7,9 +7,10 @@ package main
 import (
 	"bytes"
 	"html/template"
+	"strings"
 )
 
-var htmlTemplate = template.Must(template.New("").Parse(`
+var htmlTemplate = template.Must(template.New("").Funcs(htmlFuncs).Parse(`
 {{with index . 0}}
 <table class='benchstat {{if .OldNewDelta}}oldnew{{end}}'>
 {{if .OldNewDelta -}}
@@ -32,7 +33,7 @@ var htmlTemplate = template.Must(template.New("").Parse(`
 {{- else -}}
 <tr>
 {{- 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}}
+<td>{{.Benchmark}}{{range .Metrics}}<td>{{.Format $row.Scaler}}{{end}}{{if $table.OldNewDelta}}<td class='{{if eq .Delta "~"}}nodelta{{else}}delta{{end}}'>{{replace .Delta "-" "−" -1}}<td class='note'>{{.Note}}{{end}}
 {{end -}}
 <tr><td>&nbsp;
 </tbody>
@@ -40,6 +41,10 @@ var htmlTemplate = template.Must(template.New("").Parse(`
 </table>
 `))
 
+var htmlFuncs = template.FuncMap{
+	"replace": strings.Replace,
+}
+
 // FormatHTML appends an HTML formatting of the tables to buf.
 func FormatHTML(buf *bytes.Buffer, tables []*Table) {
 	err := htmlTemplate.Execute(buf, tables)

cmd/benchstat/main.go

@@ -156,9 +156,12 @@ func main() {
 }
 
 var htmlStyle = `<style>
+.benchstat { border-collapse: collapse; }
 .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; }
+.benchstat .better td.delta { font-weight: bold; }
+.benchstat .worse td.delta { font-weight: bold; color: #c00; }
 </style>
 `

cmd/benchstat/testdata/examplehtml.golden

 <style>
+.benchstat { border-collapse: collapse; }
 .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; }
+.benchstat .better td.delta { font-weight: bold; }
+.benchstat .worse td.delta { font-weight: bold; color: #c00; }
 </style>
 
 
@@ -11,14 +14,14 @@
 
 <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='better'><td>GobEncode<td>13.6ms ± 1%<td>11.8ms ± 1%<td class='delta'>−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 class='nodelta'>~<td class='note'>(p=0.286 n=4&#43;5)
 <tr><td>&nbsp;
 </tbody>
 
 <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='better'><td>GobEncode<td>56.4MB/s ± 1%<td>65.1MB/s ± 1%<td class='delta'>&#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 class='nodelta'>~<td class='note'>(p=0.286 n=4&#43;5)
 <tr><td>&nbsp;
 </tbody>

cmd/benchstat/testdata/exampleoldhtml.golden

 <style>
+.benchstat { border-collapse: collapse; }
 .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; }
+.benchstat .better td.delta { font-weight: bold; }
+.benchstat .worse td.delta { font-weight: bold; color: #c00; }
 </style>
 
 

cmd/benchstat/testdata/oldnew4html.golden

 <style>
+.benchstat { border-collapse: collapse; }
 .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; }
+.benchstat .better td.delta { font-weight: bold; }
+.benchstat .worse td.delta { font-weight: bold; color: #c00; }
 </style>