sqm-dashboards/app/views/categories/_gauge_graph.html.erb

<div class="d-flex flex-column align-items-center position-relative">
  <% if ENV["SCORES"].present?  && ENV["SCORES"].upcase == "SHOW" %>
    <p>
      Score is: <%= gauge.score  %> 
      <i 
        class="fas fa-exclamation-circle px-2"
        style="transform:rotate(180deg);"
        data-bs-toggle="popover"
        data-bs-title="Cut Points"
        data-bs-content=
        "
          <div class=&quot;container&quot;>
            <div class=&quot;row align-items-center&quot;>
              <p class=&quot;col mb-1&quot;>Watch</p>
              <p class=&quot;col mb-1 text-end&quot;><%= gauge.cutpoint_for(:watch) %></p>
            </div>
            <div class=&quot;row bg-color-gray-3 align-items-center&quot;>
              <p class=&quot;col mb-1&quot;>Growth</p>
              <p class=&quot;col mb-1 text-end&quot;><%= gauge.cutpoint_for(:growth) %></p>
            </div>
            <div class=&quot;row align-items-center&quot;>
              <p class=&quot;col mb-1&quot;>Approval</p>
              <p class=&quot;col mb-1 text-end&quot;><%= gauge.cutpoint_for(:approval) %></p>
            </div>
            <div class=&quot;row bg-color-gray-3 align-items-center&quot;>
              <p class=&quot;col mb-1&quot;>Ideal</p>
              <p class=&quot;col mb-1 text-end&quot;><%= gauge.cutpoint_for(:ideal) %></p>
            </div>
          </div>
        "
      ></i>
    </p>
    
  <% end %>
<div class="d-flex align-items-end">
<% if gauge_class == "gauge-graph-lg" %>
<h3 class="px-4 mb-n1">1</h3>
<% end %>
<svg
  viewBox="<%= viewbox.x %> <%= viewbox.y %> <%= viewbox.width %> <%= viewbox.height %>"
  class="<%= gauge_class %>"
>
  <% if gauge.score_percentage.present? %>
    <path
      class="gauge-fill <%= gauge.color_class %>"
      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"
    />
  <% end %>


  <path
    class="gauge-outline stroke-gray-2"
    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 %>"
  />

  <% benchmark_boundaries = [:watch_low, :growth_low, :ideal_low]%>
  <% benchmark_boundaries.each do |zone| %>
    <line
      class="zone-benchmark stroke-gray-2"
      x1="<%= benchmark_line_point(outer_radius, angle_for(percentage: gauge.boundary_percentage_for(zone))).x %>"
      y1="<%= benchmark_line_point(outer_radius, angle_for(percentage: gauge.boundary_percentage_for(zone))).y %>"
      x2="<%= benchmark_line_point(inner_radius, angle_for(percentage: gauge.boundary_percentage_for(zone))).x %>"
      y2="<%= benchmark_line_point(inner_radius, angle_for(percentage: gauge.boundary_percentage_for(zone))).y %>"
      stroke-width="<%= stroke_width %>"
    />
  <% end %>

  <% if gauge.key_benchmark_percentage.present? %>
    <line
      class="zone-benchmark stroke-black"
      x1="<%= benchmark_line_point(outer_radius + 5, angle_for(percentage: gauge.key_benchmark_percentage)).x %>"
      y1="<%= benchmark_line_point(outer_radius + 5, angle_for(percentage: gauge.key_benchmark_percentage)).y %>"
      x2="<%= benchmark_line_point(inner_radius - 5 , angle_for(percentage: gauge.key_benchmark_percentage)).x %>"
      y2="<%= benchmark_line_point(inner_radius - 5, angle_for(percentage: gauge.key_benchmark_percentage)).y %>"
      stroke-width="<%= stroke_width + 2 %>"
    />
  <% end %>
</svg>

<% if gauge_class == "gauge-graph-lg" %>
<h3 class="px-4">5</h3>
<% end %>
</div>
<span class="gauge-title <%= font_class %> fill-black"><%= gauge.title %></span>
</div>