Extract view helpers for gauge graph

app/helpers/gauge_helper.rb

@@ -0,0 +1,97 @@
+Point = Struct.new(:x, :y)
+Rect = Struct.new(:x, :y, :width, :height)
+
+module GaugeHelper
+  def outer_radius
+    100
+  end
+
+  def inner_radius
+    50
+  end
+
+  def stroke_width
+    1
+  end
+
+  def key_benchmark_indicator_gutter
+    10
+  end
+
+  def viewbox
+    x = -(outer_radius + stroke_width)
+    y = -(outer_radius + key_benchmark_indicator_gutter + stroke_width)
+    width = 2*outer_radius + 2*stroke_width
+    height = outer_radius + key_benchmark_indicator_gutter + 2*stroke_width
+    Rect.new(x, y, width, height)
+  end
+
+  def arc_center
+    Point.new(0, 0)
+  end
+
+  def indicator_tip
+    Point.new(arc_center.x, arc_center.y - outer_radius - 2)
+  end
+
+  def indicator_right_corner
+    Point.new(key_benchmark_indicator_gutter/Math.sqrt(3), arc_center.y - outer_radius - key_benchmark_indicator_gutter)
+  end
+
+  def indicator_left_corner
+    Point.new(-key_benchmark_indicator_gutter/Math.sqrt(3), arc_center.y - outer_radius - key_benchmark_indicator_gutter)
+  end
+
+  def arc_radius(radius)
+    "#{radius} #{radius}"
+  end
+
+  def angle_for(percentage:)
+    -Math::PI * (1 - percentage)
+  end
+
+  def arc_end_point_for(radius:, percentage:)
+    angle = angle_for(percentage: percentage)
+
+    x = arc_center.x + radius * Math.cos(angle)
+    y = arc_center.y + radius * Math.sin(angle)
+    Point.new(x, y)
+  end
+
+  def arc_end_line_destination(radius:, percentage:)
+    x = arc_center.x + radius * Math.cos(angle_for(percentage: percentage))
+    y = arc_center.y + radius * Math.sin(angle_for(percentage: percentage))
+    Point.new(x, y)
+  end
+
+  def arc_start_point
+    Point.new(arc_center.x - outer_radius, arc_center.y)
+  end
+
+  def move_to(point:)
+    "M #{coordinates_for(point)}"
+  end
+
+  def draw_arc(radius:, percentage:, clockwise:)
+    sweep_flag = clockwise ? 1 : 0
+    "A #{arc_radius(radius)} 0 0 #{sweep_flag} #{coordinates_for(arc_end_point_for(radius: radius, percentage: percentage))}"
+  end
+
+  def draw_line_to(point:)
+    "L #{coordinates_for(point)}"
+  end
+
+  def benchmark_line_point(radius, angle)
+    x = "#{radius * Math.cos(angle)}"
+    y = "#{radius * Math.sin(angle) + arc_center.y}"
+    Point.new(x, y)
+  end
+
+  def rotation_angle_for(percentage:)
+    180.0 * percentage - 90
+  end
+
+  def coordinates_for(point)
+    "#{point.x} #{point.y}"
+  end
+end

app/views/browse/_gauge_graph.html.erb

@@ -1,29 +1,23 @@
-<% outer_radius = 100 %>
-<% inner_radius = 50 %>
-<% stroke_width = 1 %>
-<% key_benchmark_indicator_height = 10 %>
-<% scale = -Math::PI %>
-
 <svg
-  viewBox="<%= -(outer_radius + stroke_width) %> <%= -(outer_radius + stroke_width) %> <%= 2*(outer_radius + stroke_width) %> <%= outer_radius + 2*stroke_width + key_benchmark_indicator_height %>"
+  viewBox="<%= viewbox.x %> <%= viewbox.y %> <%= viewbox.width %> <%= viewbox.height %>"
   width="400"
   height="200"
 >
   <path
     class="gauge-fill <%= gauge.color_class %>"
-    d="M <%= -outer_radius %> <%= key_benchmark_indicator_height %>
-       A <%= outer_radius %> <%= outer_radius %> 0 0 1 <%= outer_radius * Math.cos((1 - gauge.score_percentage) * scale) %> <%= outer_radius * Math.sin((1 - gauge.score_percentage) * scale) + key_benchmark_indicator_height %>
-       L <%= inner_radius * Math.cos((1 - gauge.score_percentage) * scale) %> <%= inner_radius * Math.sin((1 - gauge.score_percentage) * scale) + key_benchmark_indicator_height %>
-       A <%= inner_radius %> <%= inner_radius %> 0 0 0 <%= -inner_radius %> <%= key_benchmark_indicator_height %>
-       L <%= -outer_radius %> <%= key_benchmark_indicator_height %>"
+    d="<%= move_to(point: arc_start_point) %>
+       <%= draw_arc(radius: outer_radius, percentage: gauge.score_percentage, clockwise: true) %>
+       <%= draw_line_to(point: arc_end_line_destination(radius: inner_radius, percentage: gauge.score_percentage)) %>
+       <%= draw_arc(radius: inner_radius, percentage: 0, clockwise: false) %>
+       <%= draw_line_to(point: arc_end_line_destination(radius: outer_radius, percentage: 0)) %>"
     fill="none"
     stroke="none"
   />
 
   <text
     class="gauge-title font-bitter fill-black"
-    x="0"
-    y="<% -10 + key_benchmark_indicator_height %>"
+    x="<%= arc_center.x %>"
+    y="<%= arc_center.y - 10 %>"
     text-anchor="middle"
     dominant-baseline="middle"
   >
@@ -32,29 +26,31 @@
 
   <path
     class="gauge-outline stroke-gray-2"
-    d="M <%= -outer_radius %> <%= key_benchmark_indicator_height %>
-       A <%= outer_radius %> <%= outer_radius %> 0 0 1 <%= outer_radius * Math.cos(0) %> <%= outer_radius * Math.sin(0) + key_benchmark_indicator_height %>
-       L <%= inner_radius * Math.cos(0) %> <%= inner_radius * Math.sin(0) + key_benchmark_indicator_height %>
-       A <%= inner_radius %> <%= inner_radius %> 0 0 0 <%= -inner_radius %> <%= key_benchmark_indicator_height %>
-       L <%= -outer_radius %> <%= key_benchmark_indicator_height %>"
+    d="<%= move_to(point: arc_start_point) %>
+       <%= draw_arc(radius: outer_radius, percentage: 1, clockwise: true) %>
+       <%= draw_line_to(point: arc_end_line_destination(radius: inner_radius, percentage: 1)) %>
+       <%= draw_arc(radius: inner_radius, percentage: 0, clockwise: false) %>
+       <%= draw_line_to(point: arc_end_line_destination(radius: outer_radius, percentage: 0)) %>"
     fill="none"
     stroke-width="<%= stroke_width %>"
   />
 
   <line
-    class="zone-benchmark stroke-gray-2"
-    x1="<%= outer_radius * Math.cos((1 - gauge.key_benchmark_percentage) * scale) %>" y1="<%= outer_radius * Math.sin((1 - gauge.key_benchmark_percentage) * scale) + key_benchmark_indicator_height %>"
-    x2="<%= inner_radius * Math.cos((1 - gauge.key_benchmark_percentage) * scale) %>" y2="<%= inner_radius * Math.sin((1 - gauge.key_benchmark_percentage) * scale) + key_benchmark_indicator_height %>"
+    class="zone-benchmark stroke-black"
+    x1="<%= benchmark_line_point(outer_radius, angle_for(percentage: gauge.key_benchmark_percentage)).x %>"
+    y1="<%= benchmark_line_point(outer_radius, angle_for(percentage: gauge.key_benchmark_percentage)).y %>"
+    x2="<%= benchmark_line_point(inner_radius, angle_for(percentage: gauge.key_benchmark_percentage)).x %>"
+    y2="<%= benchmark_line_point(inner_radius, angle_for(percentage: gauge.key_benchmark_percentage)).y %>"
     stroke-width="<%= stroke_width %>"
   />
 
   <path
     class="key-benchmark-indicator fill-black"
-    d="M 0 <%= -(outer_radius - key_benchmark_indicator_height + 2) %>
-       L <%= key_benchmark_indicator_height/Math.sqrt(3) %> <%= -outer_radius %>
-       L <%= -key_benchmark_indicator_height/Math.sqrt(3) %> <%= -outer_radius %>
-       L 0 <%= -(outer_radius - key_benchmark_indicator_height + 2) %>"
-    transform="rotate(<%= 180.0 * gauge.key_benchmark_percentage - 90 %> 0 <%= key_benchmark_indicator_height %>)"
+    d="<%= move_to(point: indicator_tip) %>
+       <%= draw_line_to(point: indicator_right_corner) %>
+       <%= draw_line_to(point: indicator_left_corner) %>
+       <%= draw_line_to(point: indicator_tip) %>"
+    transform="rotate(<%= rotation_angle_for(percentage: gauge.key_benchmark_percentage) %> <%= arc_center.x %> <%= arc_center.y %>)"
     stroke="none"
   />
 </svg>