Use category presenters on page.

Show category and subcategory cards

Conditionally render subcategory icons

fix styling

app/assets/stylesheets/buttons.scss

@@ -0,0 +1,12 @@
+@import "colors";
+
+.view-details {
+  background-color: #01788E;
+  font-family: 'Bitter', sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  color: $white;
+  padding: 8px 16px;
+  border: 0px;
+  width: 70%;
+}

app/assets/stylesheets/colors.scss

@@ -2,6 +2,8 @@ $black: #3E3A38;
 $gray-1: #595959;
 $gray-2: #CECECE;
 $gray-3: #F9F9F9;
+$gray-4: #F3F3F3;
+
 $white: #FFFFFF;
 $blue: #01788E;
 $red: #C93047;
@@ -48,6 +50,10 @@ $ideal: #C0FF73;
   fill: $black;
 }
 
+.bg-gray {
+  background-color: $gray-4;
+}
+
 .fill-warning {
   fill: $warning;
 }

app/assets/stylesheets/dashboard.scss

@@ -8,3 +8,50 @@
 .graph-footer {
   font-family: 'Cabin', sans-serif;
 }
+
+.category-card {
+  flex-basis: 20%;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.category-card__title {
+  flex-basis: 20%;
+  text-align: center;
+}
+
+.category-card__description {
+  flex-basis: 20%;
+  text-align: center;
+}
+
+.subcategory-card {
+  flex-basis: 20%;
+  border: 1px solid #CECECE;
+  background-color: $gray-4;
+  width: 90%;
+  padding: 8px;
+  border: 1px solid #CECECE;
+  font-size: 14px;
+}
+
+.subcategory-card__benchmark-icon {
+  fill: Red;
+}
+.subcategory-card__name {
+  flex-basis: 20%;
+}
+.subcategory-card__benchmark-item {
+  align-items: center;
+}
+.subcategory-card__circle-container {
+  flex-basis: 30%;
+}
+
+.subcategory-card__benchmark-label {
+  font-size: 30px;
+}
+.school-quality-frameworks {
+  background-color: $white;
+}
+

app/assets/stylesheets/fonts.scss

@@ -20,25 +20,25 @@
   font-weight: 400;
 }
 
-.h1 {
+.sub-header {
   @extend .font-bitter;
   @extend .weight-600;
   font-size: 40px;
 }
 
-.h2 {
+.sub-header-2 {
   @extend .font-bitter;
   @extend .weight-700;
   font-size: 28px;
 }
 
-.h3 {
+.sub-header-3 {
   @extend .font-bitter;
   @extend .weight-700;
   font-size: 20px;
 }
 
-.h4 {
+.sub-header-4 {
   @extend .font-bitter;
   @extend .weight-600;
   font-size: 16px;

app/assets/stylesheets/sqm_application.scss

@@ -5,6 +5,7 @@
 @import "fonts";
 @import "borders";
 @import "dashboard";
+@import "buttons";
 
 .height-56 {
   height: 56px;

app/controllers/dashboard_controller.rb

@@ -1,13 +1,21 @@
 class DashboardController < SqmApplicationController
 
   def index
-    @presenters = measure_ids
-                    .map { |measure_id| Measure.find_by_measure_id measure_id }
-                    .map(&method(:presenter_for_measure))
-                    .sort
-                    .reverse
+    @measure_graph_row_presenters = measure_ids
+                                      .map { |measure_id| Measure.find_by_measure_id measure_id }
+                                      .map(&method(:presenter_for_measure))
+                                      .sort
+                                      .reverse
+
+    @category_presenters = SqmCategory.all.map { |sqm_category| CategoryPresenter.new(
+      category: sqm_category,
+      academic_year: academic_year,
+      school: school,
+    )}
+
   end
 
+
   private
 
   def measure_ids

app/presenters/subcategory_card_presenter.rb

@@ -0,0 +1,45 @@
+class SubcategoryCardPresenter 
+
+  def initialize(scale:, score:)
+    @scale = scale
+    @score = score
+  end
+
+  def abbreviation
+    abbreviations = { approval: "A", ideal: "I", growth: "G", watch: "Wa", warning: "Wr" , no_zone: "N"}
+    abbreviations[zone.type]
+  end
+
+  def svg
+
+  end
+
+  def offset
+    return 40 unless abbreviation.length > 1
+    27
+  end
+
+  def color
+    case zone.type
+    when :warning
+      return "fill-warning"
+    when :watch
+      return "fill-watch"
+    when :growth
+      return "fill-growth"
+    when :approval
+      return "fill-approval"
+    when :ideal
+      return "fill-ideal"
+    else
+      return "fill-warning"
+    end
+
+  end
+
+  private
+
+  def zone
+    @scale.zone_for_score(@score)
+  end
+end

app/presenters/subcategory_presenter.rb

@@ -14,11 +14,17 @@ class SubcategoryPresenter
   end
 
   def gauge_presenter
-    average_score = SurveyItemResponse.for_measures(measures)
+    GaugePresenter.new(scale: scale, score: average_score)
+  end
+
+  def subcategory_card_presenter
+    SubcategoryCardPresenter.new(scale: scale, score: average_score)
+  end
+
+  def average_score
+    SurveyItemResponse.for_measures(measures)
       .where(academic_year: @academic_year, school: @school)
       .average(:likert_score)
-
-    GaugePresenter.new(scale: scale, score: average_score)
   end
 
   private

app/views/dashboard/_quality_framework_indicators.erb

@@ -0,0 +1,30 @@
+<div class="school-quality-frameworks mt-5 p-4 border-radius-8">
+  <h2 class="sub-header">School Quality Framework Indicators</h2>
+
+  <div class="row">
+    <% category_presenters.each do |category_presenter| %>
+      <section class="category-card column">
+        <div class="category-card__title"><h3><%= category_presenter.name %></h3></div>
+        <p class="category-card__description">This category measures the relevant abilities of a school's teachers and the degree to which they are receiving the support they need to grow as professionals. </p>
+        <div class="subcategory-card border-radius-8 fdc">
+          <div class="subcategory-card__benchmark-list" >
+            <% category_presenter.subcategories.each do |subcategory | %>
+              <% presenter = subcategory.subcategory_card_presenter %>
+              <div class="subcategory-card__benchmark-item row">
+                <div class="subcategory-card__circle-container " style="width:50px; height:50px;">
+                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                    <circle class="subcategory-card__benchmark-icon <%= presenter.color %>" cx="50" cy="50" r="35"/>
+                    <text class="subcategory-card__benchmark-label" x="<%= presenter.offset %>" y= "55"><%= presenter.abbreviation %></text>
+                  </svg>
+                </div>
+                  <p class="subcategory-card__name"><%= subcategory.name %></p>
+                </div>
+            <% end %>
+          </div>
+        </div>
+        <button class="view-details mt-3">View Details</button>
+      </section>
+    <% end %>
+
+  </div>
+</div>

app/views/dashboard/index.html.erb

@@ -7,5 +7,7 @@
     <h2 class="h2 color-black">Distance from benchmark</h2>
   </div>
 
-  <%= render partial: "variance_graph", locals: { presenters: @presenters } %>
+  <%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %>
+
+  <%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
 </div>