From 78fb737f5a2d7c2867812d8060cd5bf564f0a097 Mon Sep 17 00:00:00 2001
From: Nelson Jovel <memoryman51@hotmail.com>
Date: Tue, 29 Mar 2022 14:02:43 -0700
Subject: [PATCH] Make measure titles clickable on the variance chart

---
 .../variance_chart_row_presenter.rb           |  13 +-
 .../categories/_measures_section.html.erb     |   2 +-
 app/views/overview/_variance_chart.html.erb   | 281 +++++++++---------
 spec/views/overview/index.html.erb_spec.rb    |   5 +-
 .../overview/variance_chart.html.erb_spec.rb  |   6 +
 5 files changed, 155 insertions(+), 152 deletions(-)

diff --git a/app/presenters/variance_chart_row_presenter.rb b/app/presenters/variance_chart_row_presenter.rb
index 75e6e294..2c9dfa29 100644
--- a/app/presenters/variance_chart_row_presenter.rb
+++ b/app/presenters/variance_chart_row_presenter.rb
@@ -1,27 +1,22 @@
 class VarianceChartRowPresenter
   include Comparable
 
-  attr_reader :score
+  attr_reader :score, :measure_name, :measure_id, :category
 
   def initialize(measure:, score:)
     @measure = measure
     @score = score.average
     @meets_teacher_threshold = score.meets_teacher_threshold?
     @meets_student_threshold = score.meets_student_threshold?
+    @measure_name = @measure.name
+    @measure_id = @measure.measure_id
+    @category = @measure.subcategory.category
   end
 
   def sufficient_data?
     @score != nil
   end
 
-  def measure_name
-    @measure.name
-  end
-
-  def measure_id
-    @measure.measure_id
-  end
-
   def bar_color
     "fill-#{zone.type}"
   end
diff --git a/app/views/categories/_measures_section.html.erb b/app/views/categories/_measures_section.html.erb
index d9e534c8..562b4a87 100644
--- a/app/views/categories/_measures_section.html.erb
+++ b/app/views/categories/_measures_section.html.erb
@@ -1,4 +1,4 @@
-<div class="measure-section mx-4">
+<div id="<%= measure_presenter.id %>" class="measure-section mx-4">
   <p class="construct-id">Measure <%= measure_presenter.id %></p>
   <h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3>
   <div>
diff --git a/app/views/overview/_variance_chart.html.erb b/app/views/overview/_variance_chart.html.erb
index 1e754913..a48aa780 100644
--- a/app/views/overview/_variance_chart.html.erb
+++ b/app/views/overview/_variance_chart.html.erb
@@ -2,165 +2,164 @@
 <% not_displayed_presenters = presenters - displayed_presenters %>
 
 <% if displayed_presenters.none? %>
-  <p class="caption mb-5">Note: No measures can be displayed due to limited availability of school admin data and/or low survey response rates.</p>
+<p class="caption mb-5">Note: No measures can be displayed due to limited availability of school admin data and/or low survey response rates.</p>
 <% elsif not_displayed_presenters.present? %>
-  <p class="caption mb-5">Note: The following measures are not displayed due to limited availability of school admin data and/or low survey response rates: <%= not_displayed_presenters.map(&:measure_name).join('; ') %>.</p>
+<p class="caption mb-5">Note: The following measures are not displayed due to limited availability of school admin data and/or low survey response rates: <%= not_displayed_presenters.map(&:measure_name).join('; ') %>.</p>
 <% end %>
 
 <svg width="100%" height=<%= graph_height(displayed_presenters.size) %> xmlns="http://www.w3.org/2000/svg">
 
-  <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
-    <feComponentTransfer in=SourceAlpha>
-      <feFuncA type="table" tableValues="1 0"/>
-    </feComponentTransfer>
-    <feGaussianBlur stdDeviation="4"/>
-    <feOffset dx="0" dy="0" result="offsetblur"/>
-    <feFlood flood-color="rgb(62, 58, 56, 0.25)" result="color"/>
-    <feComposite in2="offsetblur" operator="in"/>
-    <feComposite in2="SourceAlpha" operator="in"/>
-    <feMerge>
-      <feMergeNode in="SourceGraphic"/>
-      <feMergeNode/>
-    </feMerge>
-  </filter>
+<filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
+  <feComponentTransfer in=SourceAlpha>
+    <feFuncA type="table" tableValues="1 0"/>
+  </feComponentTransfer>
+  <feGaussianBlur stdDeviation="4"/>
+  <feOffset dx="0" dy="0" result="offsetblur"/>
+  <feFlood flood-color="rgb(62, 58, 56, 0.25)" result="color"/>
+  <feComposite in2="offsetblur" operator="in"/>
+  <feComposite in2="SourceAlpha" operator="in"/>
+  <feMerge>
+    <feMergeNode in="SourceGraphic"/>
+    <feMergeNode/>
+  </feMerge>
+</filter>
 
-  <svg
-    id="graph-background"
-    x="<%= label_width_percentage %>%"
-    y="0"
-    width="<%= graph_width_percentage %>%"
-    height="<%= graph_background_height(number_of_rows: displayed_presenters.size) %>"
-    filter="url(#inset-shadow)"
-  >
-    <g id="zone-headings">
-      <% zones.each_with_index do |zone, index| %>
-        <text
-          class="zone-header"
-          x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
-          y="<%= heading_gutter / 2 %>"
-          text-anchor="middle"
-          dominant-baseline="middle"
-        >
-          <%= zone.capitalize %>
-        </text>
-      <% end %>
-    </g>
+<svg
+  id="graph-background"
+  x="<%= label_width_percentage %>%"
+  y="0"
+  width="<%= graph_width_percentage %>%"
+  height="<%= graph_background_height(number_of_rows: displayed_presenters.size) %>"
+  filter="url(#inset-shadow)"
+>
+  <g id="zone-headings">
+    <% zones.each_with_index do |zone, index| %>
+    <text
+      class="zone-header"
+      x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
+      y="<%= heading_gutter / 2 %>"
+      text-anchor="middle"
+      dominant-baseline="middle"
+    >
+      <%= zone.capitalize %>
+    </text>
+    <% end %>
+  </g>
 
-    <g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
-      <% zones.each_with_index do |zone, index| %>
-        <rect
-          id="<%= zone %>-zone"
-          class="zone-background bg-fill-<%= zone %>"
-          x="<%= index * zone_width_percentage %>%"
-          y="0"
-          width="<%= zone_width_percentage %>%"
-          height="100%"
-          stroke="#CECECE"
-          stroke-width="1"
-          />
-      <% end %>
-    </g>
-  </svg>
+  <g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
+    <% zones.each_with_index do |zone, index| %>
+    <rect
+      id="<%= zone %>-zone"
+      class="zone-background bg-fill-<%= zone %>"
+      x="<%= index * zone_width_percentage %>%"
+      y="0"
+      width="<%= zone_width_percentage %>%"
+      height="100%"
+      stroke="#CECECE"
+      stroke-width="1"
+    />
+    <% end %>
+  </g>
+</svg>
 
-  <g id="measure-rows">
-    <svg id=measure-row-limited-availability-indicator x="0" y="<%= heading_gutter %>">
-      <% displayed_presenters.each_with_index do |presenter, index| %>
-        <% if presenter.show_partial_data_indicator? %>
-          <foreignObject
-            width="<%= partial_data_indicator_size %>"
-            height="<%= partial_data_indicator_size %>"
-            x="<%= partial_data_indicator_size / 2 %>"
-            y="<%= index * measure_row_height + measure_row_height / 2  - partial_data_indicator_size / 2 %>"
-            dominant-baseline="middle" >
-            <i class="fas fa-exclamation-circle"
-              data-bs-toggle="popover" data-bs-placement="right"
-              data-bs-content="The following sources are not included in this measure due to insufficient data: <%= presenter.partial_data_sources.join(' and ') %>." ></i>
-          </foreignObject>
-        <% end %>
-      <% end %>
-    </svg>
+<g id="measure-rows">
+  <svg id=measure-row-limited-availability-indicator x="0" y="<%= heading_gutter %>">
+    <% displayed_presenters.each_with_index do |presenter, index| %>
+    <% if presenter.show_partial_data_indicator? %>
+    <foreignObject
+      width="<%= partial_data_indicator_size %>"
+      height="<%= partial_data_indicator_size %>"
+      x="<%= partial_data_indicator_size / 2 %>"
+      y="<%= index * measure_row_height + measure_row_height / 2  - partial_data_indicator_size / 2 %>"
+      dominant-baseline="middle" >
+      <i class="fas fa-exclamation-circle"
+        data-bs-toggle="popover" data-bs-placement="right"
+        data-bs-content="The following sources are not included in this measure due to insufficient data: <%= presenter.partial_data_sources.join(' and ') %>." ></i>
+    </foreignObject>
+    <% end %>
+    <% end %>
+  </svg>
 
-    <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
-      <% displayed_presenters.each_with_index do |presenter, index| %>
-        <foreignObject
-          x="<%= availability_indicator_percentage %>%"
-          y="<%= index * measure_row_height + measure_row_height / 4 %>"
-          dominant-baseline="middle"
-          data-variance-row-label
-          width="550"
-          height="200">
-          <p class="measure-row-label" xmlns="http://www.w3.org/1999/xhtml">
-            <%= presenter.measure_name %>
-          </p>
-        </foreignObject>
-      <% end %>
+  <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
+    <% displayed_presenters.each_with_index do |presenter, index| %>
+    <foreignObject
+      x="<%= availability_indicator_percentage %>%"
+      y="<%= index * measure_row_height + measure_row_height / 4 %>"
+      dominant-baseline="middle"
+      data-variance-row-label
+      width="550"
+      height="200">
 
-      <% if displayed_presenters.none? %>
-        <text
-          class="font-cabin"
-          x="0"
-          y="<%= 0 * measure_row_height + measure_row_height / 2 %>"
-          dominant-baseline="middle"
-          data-variance-row-label
-        >
-        Insufficient data
-        </text>
-      <% end %>
-    </svg>
+      <%= link_to(presenter.measure_name, district_school_category_path( @district, @school, presenter.category, {year: @academic_year.range, anchor: "#{presenter.measure_id}"}), class: "measure-row-label") %>
+    </foreignObject>
+    <% end %>
 
-    <svg
-      id="measure-row-bars"
-      x="<%= label_width_percentage %>%"
-      y="<%= heading_gutter %>"
-      width="<%= graph_width_percentage %>%"
+    <% if displayed_presenters.none? %>
+    <text
+      class="font-cabin"
+      x="0"
+      y="<%= 0 * measure_row_height + measure_row_height / 2 %>"
+      dominant-baseline="middle"
+      data-variance-row-label
     >
-      <% displayed_presenters.each_with_index do |presenter, index| %>
-        <rect
-          class="measure-row-bar <%= presenter.bar_color %>"
-          x="<%= presenter.x_offset %>"
-          y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
-          width="<%= presenter.bar_width %>"
-          height="<%= measure_row_bar_height %>"
-          data-for-measure-id="<%= presenter.measure_id %>"
-          stroke="none"
-          />
-      <% end %>
-    </svg>
-  </g>
+      Insufficient data
+    </text>
+    <% end %>
+  </svg>
 
   <svg
-    id="key-benchmark"
+    id="measure-row-bars"
     x="<%= label_width_percentage %>%"
-    y="0"
+    y="<%= heading_gutter %>"
     width="<%= graph_width_percentage %>%"
-    height="<%= graph_background_height(number_of_rows: displayed_presenters.size) %>"
   >
-    <g transform="translate(0, <%= heading_gutter %>)">
-      <rect
-        id="key-benchmark"
-        x="60%"
-        transform="translate(-1, 0)"
-        y="0"
-        width="4"
-        height="100%"
-        fill="black"
-        />
-    </g>
+    <% displayed_presenters.each_with_index do |presenter, index| %>
+    <rect
+      class="measure-row-bar <%= presenter.bar_color %>"
+      x="<%= presenter.x_offset %>"
+      y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
+      width="<%= presenter.bar_width %>"
+      height="<%= measure_row_bar_height %>"
+      data-for-measure-id="<%= presenter.measure_id %>"
+      stroke="none"
+    />
+    <% end %>
   </svg>
+</g>
 
-  <svg
-    id="legend"
-    x="<%= label_width_percentage %>%"
-    y="0"
-    width="<%= graph_width_percentage %>%"
-  >
-    <text
-      class="graph-footer"
+<svg
+  id="key-benchmark"
+  x="<%= label_width_percentage %>%"
+  y="0"
+  width="<%= graph_width_percentage %>%"
+  height="<%= graph_background_height(number_of_rows: displayed_presenters.size) %>"
+>
+  <g transform="translate(0, <%= heading_gutter %>)">
+    <rect
+      id="key-benchmark"
       x="60%"
-      y="<%= graph_background_height(number_of_rows: displayed_presenters.size) + (footer_gutter / 2) %>"
-      text-anchor="middle"
-    >
-      Benchmark
-    </text>
-  </svg>
+      transform="translate(-1, 0)"
+      y="0"
+      width="4"
+      height="100%"
+      fill="black"
+    />
+  </g>
+</svg>
+
+<svg
+  id="legend"
+  x="<%= label_width_percentage %>%"
+  y="0"
+  width="<%= graph_width_percentage %>%"
+>
+  <text
+    class="graph-footer"
+    x="60%"
+    y="<%= graph_background_height(number_of_rows: displayed_presenters.size) + (footer_gutter / 2) %>"
+    text-anchor="middle"
+  >
+    Benchmark
+  </text>
+</svg>
 </svg>
diff --git a/spec/views/overview/index.html.erb_spec.rb b/spec/views/overview/index.html.erb_spec.rb
index 2d103557..58968f48 100644
--- a/spec/views/overview/index.html.erb_spec.rb
+++ b/spec/views/overview/index.html.erb_spec.rb
@@ -42,7 +42,10 @@ describe 'overview/index' do
   before :each do
     assign :category_presenters, []
     assign :variance_chart_row_presenters, variance_chart_row_presenters
-    assign :academic_years, []
+    @academic_year = create(:academic_year)
+    assign :academic_years, [@academic_year]
+    @district = create(:district)
+    @school = create(:school)
 
     render
   end
diff --git a/spec/views/overview/variance_chart.html.erb_spec.rb b/spec/views/overview/variance_chart.html.erb_spec.rb
index efa5c515..d4ea21e5 100644
--- a/spec/views/overview/variance_chart.html.erb_spec.rb
+++ b/spec/views/overview/variance_chart.html.erb_spec.rb
@@ -1,6 +1,12 @@
 require 'rails_helper'
 
 describe 'overview/_variance_chart.html.erb' do
+  before do
+    @academic_year = create(:academic_year)
+    @district = create(:district)
+    @school = create(:school)
+  end
+
   context 'When there are scores to show' do
     subject { Nokogiri::HTML(rendered) }