Make measure titles clickable on the variance chart

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

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>

app/views/overview/_variance_chart.html.erb

@@ -2,14 +2,14 @@
 <% 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%">
+<filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
   <feComponentTransfer in=SourceAlpha>
     <feFuncA type="table" tableValues="1 0"/>
   </feComponentTransfer>
@@ -22,16 +22,16 @@
     <feMergeNode in="SourceGraphic"/>
     <feMergeNode/>
   </feMerge>
-  </filter>
+</filter>
 
-  <svg
+<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
@@ -60,9 +60,9 @@
     />
     <% end %>
   </g>
-  </svg>
+</svg>
 
-  <g id="measure-rows">
+<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? %>
@@ -89,9 +89,8 @@
       data-variance-row-label
       width="550"
       height="200">
-          <p class="measure-row-label" xmlns="http://www.w3.org/1999/xhtml">
-            <%= presenter.measure_name %>
-          </p>
+
+      <%= 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 %>
 
@@ -126,15 +125,15 @@
     />
     <% end %>
   </svg>
-  </g>
+</g>
 
-  <svg
+<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"
@@ -146,14 +145,14 @@
       fill="black"
     />
   </g>
-  </svg>
+</svg>
 
-  <svg
+<svg
   id="legend"
   x="<%= label_width_percentage %>%"
   y="0"
   width="<%= graph_width_percentage %>%"
-  >
+>
   <text
     class="graph-footer"
     x="60%"
@@ -162,5 +161,5 @@
   >
     Benchmark
   </text>
-  </svg>
+</svg>
 </svg>

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

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