Move "theme" attributes to a root level yaml file and update some styles

lib/yjit-metrics/bench-results.rb

@@ -1,3 +1,7 @@
+# frozen_string_literal.
+
+require_relative "./theme"
+
 # Make sure YJITMetrics namespace is declared
 module YJITMetrics; end
 
@@ -700,6 +704,8 @@ module YJITMetrics
 
 # Shared utility methods for reports that use a single "blob" of results
 class YJITMetrics::Report
+    Theme = YJITMetrics::Theme
+
     include YJITMetrics::Stats
 
     def self.subclasses

lib/yjit-metrics/report_types/bloggable_speed_report.rb

@@ -310,9 +310,6 @@ def ratio_to_y(ratio)
         (ratio * 600.0).to_s
     end
 
-    # These will be assigned in order to each Ruby
-    RUBY_BAR_COLOURS = [ "#7070f8", "orange", "green", "#4F3A7A" ]
-
     def svg_object(benchmarks: @benchmark_names)
         # If we render a comparative report to file, we need victor for SVG output.
         require "victor"
@@ -322,11 +319,6 @@ def svg_object(benchmarks: @benchmark_names)
             :xmlns => "http://www.w3.org/2000/svg",
             "xmlns:xlink" => "http://www.w3.org/1999/xlink"  # background: '#ddd'
 
-        axis_colour = "#000"
-        background_colour = "#EEE"
-        text_colour = "#111"
-        top_legend_text_colour = "#EEE"
-
         # Reserve some width on the left for the axis. Include a bit of right-side whitespace.
         left_axis_width = 0.05
         right_whitespace = 0.01
@@ -344,13 +336,14 @@ def svg_object(benchmarks: @benchmark_names)
 
         svg.rect x: ratio_to_x(plot_left_edge), y: ratio_to_y(plot_top_edge),
             width: ratio_to_x(plot_width), height: ratio_to_y(plot_height),
-            stroke: axis_colour, fill: background_colour
+            stroke: Theme.axis_color,
+            fill: Theme.background_color
 
 
         # Basic info on Ruby configs and benchmarks
         ruby_configs = @configs_with_human_names.map { |name, config| config }
         ruby_human_names = @configs_with_human_names.map(&:first)
-        ruby_config_bar_colour = Hash[ruby_configs.zip(RUBY_BAR_COLOURS)]
+        ruby_config_bar_colour = Hash[ruby_configs.zip(Theme.bar_chart_colors)]
         baseline_colour = ruby_config_bar_colour[@baseline_config]
         baseline_strokewidth = 2
         n_configs = ruby_configs.size
@@ -420,28 +413,27 @@ def svg_object(benchmarks: @benchmark_names)
             tick_y = plot_effective_top + (1.0 - tick_distance_from_zero) * plot_effective_height
             svg.line x1: ratio_to_x(plot_left_edge - tick_length), y1: ratio_to_y(tick_y),
                 x2: ratio_to_x(plot_left_edge), y2: ratio_to_y(tick_y),
-                stroke: axis_colour
+                stroke: Theme.axis_color
             svg.text ("%.1f" % div_value),
                 x: ratio_to_x(plot_left_edge - 3 * tick_length), y: ratio_to_y(tick_y),
                 text_anchor: "end",
                 font_weight: "bold",
                 font_size: font_size,
-                fill: text_colour
+                fill: Theme.text_color
         end
 
         # Set up the top legend with coloured boxes and Ruby config names
-        top_legend_box_height = 0.03
+        top_legend_box_height = 0.032
         top_legend_box_width = 0.12
-        top_legend_text_height = 0.025  # Turns out we can't directly specify this...
-        legend_box_stroke_colour = "#888"
+        top_legend_text_height = 0.015
 
         top_legend_item_width = plot_effective_width / n_configs
         n_configs.times do |config_idx|
             item_center_x = plot_effective_left + top_legend_item_width * (config_idx + 0.5)
             item_center_y = plot_top_edge + 0.025
-            this_top_legend_text_colour = top_legend_text_colour
+            legend_text_color = Theme.text_on_bar_color
             if @configs_with_human_names[config_idx][1] == @baseline_config
-              this_top_legend_text_colour = axis_colour
+              legend_text_color = Theme.axis_color
               left = item_center_x - 0.5 * top_legend_box_width
               y = item_center_y - 0.5 * top_legend_box_height + top_legend_box_height
               svg.line \
@@ -458,15 +450,16 @@ def svg_object(benchmarks: @benchmark_names)
                 width: ratio_to_x(top_legend_box_width),
                 height: ratio_to_y(top_legend_box_height),
                 fill: ruby_config_bar_colour[ruby_configs[config_idx]],
-                stroke: legend_box_stroke_colour
+                **Theme.legend_box_attrs
             end
             svg.text @configs_with_human_names[config_idx][0],
                 x: ratio_to_x(item_center_x),
                 y: ratio_to_y(item_center_y + 0.5 * top_legend_text_height),
                 font_size: font_size,
                 text_anchor: "middle",
                 font_weight: "bold",
-                fill: this_top_legend_text_colour
+                fill: legend_text_color,
+                **(legend_text_color == Theme.text_on_bar_color ? Theme.legend_text_attrs : {})
         end
 
         baseline_y = plot_effective_top + (1.0 - (1.0 / max_speedup_ratio)) * plot_effective_height
@@ -519,29 +512,29 @@ def svg_object(benchmarks: @benchmark_names)
                     top_whisker_y = bar_top - stddev_ratio * plot_effective_height
                     svg.line x1: ratio_to_x(bar_left), y1: ratio_to_y(top_whisker_y),
                         x2: ratio_to_x(bar_right), y2: ratio_to_y(top_whisker_y),
-                        stroke: axis_colour
+                        **Theme.stddev_marker_attrs
                     bottom_whisker_y = bar_top + stddev_ratio * plot_effective_height
                     svg.line x1: ratio_to_x(bar_left), y1: ratio_to_y(bottom_whisker_y),
                         x2: ratio_to_x(bar_right), y2: ratio_to_y(bottom_whisker_y),
-                        stroke: axis_colour
+                        **Theme.stddev_marker_attrs
                     svg.line x1: ratio_to_x(bar_lr_center), y1: ratio_to_y(top_whisker_y),
                         x2: ratio_to_x(bar_lr_center), y2: ratio_to_y(bottom_whisker_y),
-                        stroke: axis_colour
+                        **Theme.stddev_marker_attrs
                 end
             end
 
             # Below all the bars, we'll want a tick on the bottom axis and a name of the benchmark
             bars_width_middle = bars_width_start + 0.5 * each_bench_width
             svg.line x1: ratio_to_x(bars_width_middle), y1: ratio_to_y(plot_bottom_edge),
                 x2: ratio_to_x(bars_width_middle), y2: ratio_to_y(plot_bottom_edge + tick_length),
-                stroke: axis_colour
+                stroke: Theme.axis_color
 
             text_end_x = bars_width_middle
             text_end_y = plot_bottom_edge + tick_length * 3
             svg.text bench_name.gsub(/\.rb$/, ""),
                 x: ratio_to_x(text_end_x),
                 y: ratio_to_y(text_end_y),
-                fill: text_colour,
+                fill: Theme.text_color,
                 font_size: font_size,
                 font_family: "monospace",
                 font_weight: "bold",

lib/yjit-metrics/theme.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "yaml"
+
+# Style information stored in root theme.yaml file.
+module YJITMetrics
+  module Theme
+    FILE = File.expand_path("../../theme.yaml", __dir__)
+    CONFIG = YAML.safe_load_file(FILE, aliases: true, symbolize_names: true)
+
+    # Define methods for each key in the yaml hash.
+    module_eval CONFIG.map { |key, _val| "def self.#{key}; CONFIG.fetch(:#{key}); end" }.join("\n")
+  end
+end

theme.yaml

@@ -0,0 +1,25 @@
+---
+# Assigned in order to each version of ruby shown in bar charts.
+bar_chart_colors:
+  # reordered IBM Palette: https://davidmathlogic.com/colorblind/#%23648FFF-%23785EF0-%23DC267F-%23FE6100-%23FFB000
+  # cooler colors for CRuby, warmer colors for YJIT
+  - '#648FFF'
+  - '#785EF0'
+  - '#FFB000'
+  - '#DC267F'
+  - '#FE6100'
+
+axis_color: &axis_color "#000"
+background_color: &background_color "#fff"
+text_color: "#111"
+text_on_bar_color: *background_color
+
+legend_box_attrs:
+  stroke: none
+
+legend_text_attrs:
+  style: "text-shadow: 0 0 1px #000;"
+
+stddev_marker_attrs:
+  stroke-dasharray: "1,0.5"
+  stroke: "#333c"