When there is insufficient data to display gauge graph, change title of

graph to insufficient Data

app/assets/stylesheets/dashboard.scss

@@ -92,7 +92,7 @@
   fill: $white;
 }
 
-.harvey-ball--no_zone {
+.harvey-ball--insufficient_data {
   stroke: $gray-2;
   fill: $gray-3;
 }

app/assets/stylesheets/sqm_application.scss

@@ -39,8 +39,11 @@
 }
 
 .gauge-title {
-  margin-top: -1.5em;
+  line-height: 1.2;
-  margin-bottom: 0;
+  max-width: 10ch;
+  text-align: center;
+  bottom: 0;
+  position: absolute;
 }
 
 .measure-section {

app/presenters/gauge_presenter.rb

@@ -5,7 +5,7 @@ class GaugePresenter
   end
 
   def title
-    zone.type.to_s.capitalize
+    zone.type.to_s.titleize
   end
 
   def color_class

app/presenters/scale.rb

@@ -29,8 +29,8 @@ class Scale
     Zone.new(@ideal_low_benchmark, 5.0, :ideal)
   end
 
-  def no_zone
+  def insufficient_data
-    Zone.new(0,@warning_low_benchmark,:no_zone)
+    Zone.new(0,@warning_low_benchmark,:insufficient_data)
   end
 
   def zone_for_score(score)
@@ -46,7 +46,7 @@ class Scale
     when 1..warning_zone.high_benchmark
       warning_zone
     else
-      no_zone
+      insufficient_data
     end
   end
 end

app/presenters/subcategory_card_presenter.rb

@@ -14,7 +14,7 @@ class SubcategoryCardPresenter
       growth: "half-circle",
       watch: "one-quarter-circle",
       warning: "full-circle",
-      no_zone: "full-circle"
+      insufficient_data: "full-circle"
     }
     icons_by_zone_type[zone.type]
   end
@@ -24,7 +24,7 @@ class SubcategoryCardPresenter
   end
 
   def insufficient_data?
-    zone.type == :no_zone
+    zone.type == :insufficient_data
   end
 
   private

app/presenters/variance_chart_row_presenter.rb

@@ -43,7 +43,7 @@ class VarianceChartRowPresenter
       bar_width_percentage
     when :warning, :watch, :growth
       -bar_width_percentage
-    when :no_zone
+    when :insufficient_data
       -100
     end
   end

app/views/sqm_categories/_gauge_graph.html.erb

@@ -1,4 +1,4 @@
-<div class="d-flex flex-column align-items-center">
+<div class="d-flex flex-column align-items-center position-relative">
 <svg
   viewBox="<%= viewbox.x %> <%= viewbox.y %> <%= viewbox.width %> <%= viewbox.height %>"
   class="<%= gauge_class %>"
@@ -46,5 +46,5 @@
   />
 </svg>
 
-<p class="gauge-title <%= font_class %> fill-black"><%= gauge.title %></p>
+<span class="gauge-title <%= font_class %> fill-black"><%= gauge.title %></span>
 </div>