From 514bdad4848bf53fc0e40df60f1f0d538f5fda00 Mon Sep 17 00:00:00 2001
From: Gabe Farrell <gabe@mnrva.dev>
Date: Fri, 30 Jun 2023 21:23:47 +0000
Subject: [PATCH] Add cutpoint table popover to gauges

---
 app/javascript/overview.js                 |  2 +-
 app/presenters/gauge_presenter.rb          | 13 +++++++
 app/views/categories/_gauge_graph.html.erb | 42 ++++++++++++++++++++--
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/app/javascript/overview.js b/app/javascript/overview.js
index 27b0daa6..b6939e28 100644
--- a/app/javascript/overview.js
+++ b/app/javascript/overview.js
@@ -27,6 +27,6 @@ export function initializePopovers() {
   document
     .querySelectorAll('[data-bs-toggle="popover"]')
     .forEach((popoverElement) => {
-      new Popover(popoverElement, { trigger: "hover focus" });
+      new Popover(popoverElement, { trigger: "hover focus", html: true });
     });
 }
diff --git a/app/presenters/gauge_presenter.rb b/app/presenters/gauge_presenter.rb
index 10d76d35..66a64938 100644
--- a/app/presenters/gauge_presenter.rb
+++ b/app/presenters/gauge_presenter.rb
@@ -33,6 +33,19 @@ class GaugePresenter
     end
   end
 
+  def cutpoint_for(zone)
+    case zone
+    when :watch
+      @zones.watch_zone.low_benchmark.round(2)
+    when :growth
+      @zones.growth_zone.low_benchmark.round(2)
+    when :approval
+      @zones.approval_zone.low_benchmark.round(2)
+    when :ideal
+      @zones.ideal_zone.low_benchmark.round(2)
+    end
+  end
+
   attr_reader :score
 
   private
diff --git a/app/views/categories/_gauge_graph.html.erb b/app/views/categories/_gauge_graph.html.erb
index fec3775a..92bbe00a 100644
--- a/app/views/categories/_gauge_graph.html.erb
+++ b/app/views/categories/_gauge_graph.html.erb
@@ -1,8 +1,41 @@
 <div class="d-flex flex-column align-items-center position-relative">
   <% if ENV["SCORES"].present?  && ENV["SCORES"].upcase == "SHOW" %>
-    <p>Score is : <%= gauge.score  %> </p>
+    <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 %>"
@@ -55,5 +88,10 @@
     />
   <% 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>