gabehf/sqm-dashboards
1
0
Fork 0
mirror of https://github.com/edcommonwealth/sqm-dashboards.git synced 2026-03-07 21:48:16 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add cutpoint table popover to gauges

Browse source
This commit is contained in:
Gabe Farrell 2023-06-30 21:23:47 +00:00
parent 151dbb2a88
commit 514bdad484
3 changed files with 54 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/overview.js
View file

@ -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 });
});
}

13
app/presenters/gauge_presenter.rb
View file

@ -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

42
app/views/categories/_gauge_graph.html.erb
View file

@ -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>