godev/cmd/telemetrygodev: further style / content tweaks for charts

Make the following changes to style and content of the charts browser:
 - improve the title for aggregate charts
 - share title logic with the individual charts pages
 - "All daily charts" -> "All charts"
 - increase size of chart text
 - use a more subtle color scheme for chart series

For golang/go#68204

Change-Id: I24134cc455ef9b01a45956f766871b0acd06f580
Reviewed-on: https://go-review.googlesource.com/c/telemetry/+/603835
Reviewed-by: Hongxiang Jiang <[email protected]>
LUCI-TryBot-Result: Go LUCI <[email protected]>

godev/cmd/telemetrygodev/main.go

@@ -167,12 +167,7 @@ func handleRoot(render renderer, fsys fs.FS, chartBucket storage.BucketHandle, l
 		if chartObj == "" {
 			page.ChartError = "No data."
 		} else {
-			start, end, aggregate := strings.Cut(strings.TrimSuffix(chartObj, ".json"), "_")
-			if aggregate {
-				page.ChartTitle = fmt.Sprintf("Uploaded data for %s-%s", start, end)
-			} else {
-				page.ChartTitle = fmt.Sprintf("Uploaded data for %s", start)
-			}
+			page.ChartTitle = chartTitle(chartObj)
 			charts, err := loadCharts(ctx, chartObj, chartBucket)
 			if err != nil {
 				log.ErrorContext(ctx, fmt.Sprintf("error loading index charts: %v", err))
@@ -185,6 +180,14 @@ func handleRoot(render renderer, fsys fs.FS, chartBucket storage.BucketHandle, l
 	}
 }
 
+func chartTitle(objName string) string {
+	start, end, aggregate := strings.Cut(strings.TrimSuffix(objName, ".json"), "_")
+	if aggregate {
+		return fmt.Sprintf("Aggregate charts for %s to %s", start, end)
+	}
+	return fmt.Sprintf("Charts for %s", start)
+}
+
 type chartsPage []string
 
 func (chartsPage) Breadcrumbs() []breadcrumb {
@@ -217,8 +220,9 @@ func handleCharts(render renderer, chartBucket storage.BucketHandle) content.Han
 }
 
 type chartPage struct {
-	Date   string
-	Charts map[string]any
+	Date       string
+	ChartTitle string
+	Charts     map[string]any
 }
 
 func (p chartPage) Breadcrumbs() []breadcrumb {
@@ -233,7 +237,9 @@ func handleChart(ctx context.Context, w http.ResponseWriter, date string, render
 	// TODO(rfindley): refactor to return a content.HandlerFunc once we can use Go 1.22 routing.
 	page := chartPage{Date: date}
 	var err error
-	page.Charts, err = loadCharts(ctx, date+".json", chartBucket)
+	objName := date + ".json"
+	page.ChartTitle = chartTitle(objName)
+	page.Charts, err = loadCharts(ctx, objName, chartBucket)
 	if errors.Is(err, storage.ErrObjectNotExist) {
 		return content.Status(w, http.StatusNotFound)
 	} else if err != nil {

internal/content/telemetrygodev/charts.html

@@ -15,7 +15,7 @@
 <section>
 <div class="Hero">
 <div class="Content">
-  <h1>Daily charts for {{.Date}}</h1>
+  <h1>{{.ChartTitle}}</h1>
   <p>Generated from {{.Charts.NumReports}} reports.</p>
 </div>
 </div>

internal/content/telemetrygodev/charts.ts

@@ -70,8 +70,8 @@ function partition({ Data, Name }: Chart) {
 
   return Plot.plot({
     color: {
-      type: "ordinal",
-      scheme: "Spectral",
+      type: "categorical",
+      scheme: "set2",
     },
     nice: true,
     x: {
@@ -85,7 +85,14 @@ function partition({ Data, Name }: Chart) {
       domain: [0, max + 1], // adjust domain to prevent rendering issues, especially with all-zero data.
     },
     width: 1024,
-    style: "overflow:visible;background:transparent;margin-bottom:3rem;",
+    style: {
+      overflow: "visible",
+      background: "transparent",
+      marginBottom: "3rem",
+      fontSize: "0.8rem",
+      marginTop: "1rem",
+    },
+    insetTop: 20, // leave enough space between the axis label and marks
     marks: [
       Plot.barY(Data, {
         tip: true,

internal/content/telemetrygodev/index.html

@@ -43,7 +43,7 @@ <h1>Go Telemetry &#128202;</h1>
   <div class="Charts-heading">
     <h2>{{.ChartTitle}}</h2>
     <ul>
-      <li><a href="/charts/">All daily charts</a></li>
+      <li><a href="/charts/">All charts</a></li>
       <li><a href="/data/">All raw data</a></li>
     </ul>
   </div>