edcommonwealth
/
sqm-dashboards
mirror of https://github.com/edcommonwealth/sqm-dashboards.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make measure titles clickable on the variance chart

Browse Source
pull/1/head
Nelson Jovel 4 years ago
parent bf8b824ab8
commit 78fb737f5a
5 changed files with 155 additions and 152 deletions
Show Stats Download Patch File Download Diff File

13
app/presenters/variance_chart_row_presenter.rb
Unescape View File

@ -1,27 +1,22 @@
class VarianceChartRowPresenter class VarianceChartRowPresenter
include Comparable include Comparable
attr_reader :score attr_reader :score, :measure_name, :measure_id, :category
def initialize(measure:, score:) def initialize(measure:, score:)
@measure = measure @measure = measure
@score = score.average @score = score.average
@meets_teacher_threshold = score.meets_teacher_threshold? @meets_teacher_threshold = score.meets_teacher_threshold?
@meets_student_threshold = score.meets_student_threshold? @meets_student_threshold = score.meets_student_threshold?
@measure_name = @measure.name
@measure_id = @measure.measure_id
@category = @measure.subcategory.category
end end
def sufficient_data? def sufficient_data?
@score != nil @score != nil
end end
def measure_name
@measure.name
end
def measure_id
@measure.measure_id
end
def bar_color def bar_color
"fill-#{zone.type}" "fill-#{zone.type}"
end end

2
app/views/categories/_measures_section.html.erb
Unescape View File

@ -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> <p class="construct-id">Measure <%= measure_presenter.id %></p>
<h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3> <h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3>
<div> <div>

281
app/views/overview/_variance_chart.html.erb
Unescape View File

@ -2,165 +2,164 @@
<% not_displayed_presenters = presenters - displayed_presenters %> <% not_displayed_presenters = presenters - displayed_presenters %>
<% if displayed_presenters.none? %> <% 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? %> <% 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 %> <% end %>
<svg width="100%" height=<%= graph_height(displayed_presenters.size) %> xmlns="http://www.w3.org/2000/svg"> <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> <feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0"/> <feFuncA type="table" tableValues="1 0"/>
</feComponentTransfer> </feComponentTransfer>
<feGaussianBlur stdDeviation="4"/> <feGaussianBlur stdDeviation="4"/>
<feOffset dx="0" dy="0" result="offsetblur"/> <feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-color="rgb(62, 58, 56, 0.25)" result="color"/> <feFlood flood-color="rgb(62, 58, 56, 0.25)" result="color"/>
<feComposite in2="offsetblur" operator="in"/> <feComposite in2="offsetblur" operator="in"/>
<feComposite in2="SourceAlpha" operator="in"/> <feComposite in2="SourceAlpha" operator="in"/>
<feMerge> <feMerge>
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic"/>
<feMergeNode/> <feMergeNode/>
</feMerge> </feMerge>
</filter> </filter>
<svg <svg
id="graph-background" id="graph-background"
x="<%= label_width_percentage %>%" x="<%= label_width_percentage %>%"
y="0" y="0"
width="<%= graph_width_percentage %>%" width="<%= graph_width_percentage %>%"
height="<%= graph_background_height(number_of_rows: displayed_presenters.size) %>" height="<%= graph_background_height(number_of_rows: displayed_presenters.size) %>"
filter="url(#inset-shadow)" filter="url(#inset-shadow)"
> >
<g id="zone-headings"> <g id="zone-headings">
<% zones.each_with_index do |zone, index| %> <% zones.each_with_index do |zone, index| %>
<text <text
class="zone-header" class="zone-header"
x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%" x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
y="<%= heading_gutter / 2 %>" y="<%= heading_gutter / 2 %>"
text-anchor="middle" text-anchor="middle"
dominant-baseline="middle" dominant-baseline="middle"
> >
<%= zone.capitalize %> <%= zone.capitalize %>
</text> </text>
<% end %> <% end %>
</g> </g>
<g id="zone-background" transform="translate(0, <%= heading_gutter %>)"> <g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
<% zones.each_with_index do |zone, index| %> <% zones.each_with_index do |zone, index| %>
<rect <rect
id="<%= zone %>-zone" id="<%= zone %>-zone"
class="zone-background bg-fill-<%= zone %>" class="zone-background bg-fill-<%= zone %>"
x="<%= index * zone_width_percentage %>%" x="<%= index * zone_width_percentage %>%"
y="0" y="0"
width="<%= zone_width_percentage %>%" width="<%= zone_width_percentage %>%"
height="100%" height="100%"
stroke="#CECECE" stroke="#CECECE"
stroke-width="1" stroke-width="1"
/> />
<% end %> <% end %>
</g> </g>
</svg> </svg>
<g id="measure-rows"> <g id="measure-rows">
<svg id=measure-row-limited-availability-indicator x="0" y="<%= heading_gutter %>"> <svg id=measure-row-limited-availability-indicator x="0" y="<%= heading_gutter %>">
<% displayed_presenters.each_with_index do |presenter, index| %> <% displayed_presenters.each_with_index do |presenter, index| %>
<% if presenter.show_partial_data_indicator? %> <% if presenter.show_partial_data_indicator? %>
<foreignObject <foreignObject
width="<%= partial_data_indicator_size %>" width="<%= partial_data_indicator_size %>"
height="<%= partial_data_indicator_size %>" height="<%= partial_data_indicator_size %>"
x="<%= partial_data_indicator_size / 2 %>" x="<%= partial_data_indicator_size / 2 %>"
y="<%= index * measure_row_height + measure_row_height / 2 - partial_data_indicator_size / 2 %>" y="<%= index * measure_row_height + measure_row_height / 2 - partial_data_indicator_size / 2 %>"
dominant-baseline="middle" > dominant-baseline="middle" >
<i class="fas fa-exclamation-circle" <i class="fas fa-exclamation-circle"
data-bs-toggle="popover" data-bs-placement="right" 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> data-bs-content="The following sources are not included in this measure due to insufficient data: <%= presenter.partial_data_sources.join(' and ') %>." ></i>
</foreignObject> </foreignObject>
<% end %> <% end %>
<% end %> <% end %>
</svg> </svg>
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>> <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
<% displayed_presenters.each_with_index do |presenter, index| %> <% displayed_presenters.each_with_index do |presenter, index| %>
<foreignObject <foreignObject
x="<%= availability_indicator_percentage %>%" x="<%= availability_indicator_percentage %>%"
y="<%= index * measure_row_height + measure_row_height / 4 %>" y="<%= index * measure_row_height + measure_row_height / 4 %>"
dominant-baseline="middle" dominant-baseline="middle"
data-variance-row-label data-variance-row-label
width="550" width="550"
height="200"> height="200">
<p class="measure-row-label" xmlns="http://www.w3.org/1999/xhtml">
<%= presenter.measure_name %>
</p>
</foreignObject>
<% end %>
<% if displayed_presenters.none? %> <%= 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") %>
<text </foreignObject>
class="font-cabin" <% end %>
x="0"
y="<%= 0 * measure_row_height + measure_row_height / 2 %>"
dominant-baseline="middle"
data-variance-row-label
>
Insufficient data
</text>
<% end %>
</svg>
<svg <% if displayed_presenters.none? %>
id="measure-row-bars" <text
x="<%= label_width_percentage %>%" class="font-cabin"
y="<%= heading_gutter %>" x="0"
width="<%= graph_width_percentage %>%" y="<%= 0 * measure_row_height + measure_row_height / 2 %>"
dominant-baseline="middle"
data-variance-row-label
> >
<% displayed_presenters.each_with_index do |presenter, index| %> Insufficient data
<rect </text>
class="measure-row-bar <%= presenter.bar_color %>" <% end %>
x="<%= presenter.x_offset %>" </svg>
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 <svg
id="key-benchmark" id="measure-row-bars"
x="<%= label_width_percentage %>%" x="<%= label_width_percentage %>%"
y="0" y="<%= heading_gutter %>"
width="<%= graph_width_percentage %>%" width="<%= graph_width_percentage %>%"
height="<%= graph_background_height(number_of_rows: displayed_presenters.size) %>"
> >
<g transform="translate(0, <%= heading_gutter %>)"> <% displayed_presenters.each_with_index do |presenter, index| %>
<rect <rect
id="key-benchmark" class="measure-row-bar <%= presenter.bar_color %>"
x="60%" x="<%= presenter.x_offset %>"
transform="translate(-1, 0)" y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
y="0" width="<%= presenter.bar_width %>"
width="4" height="<%= measure_row_bar_height %>"
height="100%" data-for-measure-id="<%= presenter.measure_id %>"
fill="black" stroke="none"
/> />
</g> <% end %>
</svg> </svg>
</g>
<svg <svg
id="legend" id="key-benchmark"
x="<%= label_width_percentage %>%" x="<%= label_width_percentage %>%"
y="0" y="0"
width="<%= graph_width_percentage %>%" width="<%= graph_width_percentage %>%"
> height="<%= graph_background_height(number_of_rows: displayed_presenters.size) %>"
<text >
class="graph-footer" <g transform="translate(0, <%= heading_gutter %>)">
<rect
id="key-benchmark"
x="60%" x="60%"
y="<%= graph_background_height(number_of_rows: displayed_presenters.size) + (footer_gutter / 2) %>" transform="translate(-1, 0)"
text-anchor="middle" y="0"
> width="4"
Benchmark height="100%"
</text> fill="black"
</svg> />
</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> </svg>

5
spec/views/overview/index.html.erb_spec.rb
Unescape View File

@ -42,7 +42,10 @@ describe 'overview/index' do
before :each do before :each do
assign :category_presenters, [] assign :category_presenters, []
assign :variance_chart_row_presenters, variance_chart_row_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 render
end end

6
spec/views/overview/variance_chart.html.erb_spec.rb
Unescape View File

@ -1,6 +1,12 @@
require 'rails_helper' require 'rails_helper'
describe 'overview/_variance_chart.html.erb' do 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 context 'When there are scores to show' do
subject { Nokogiri::HTML(rendered) } subject { Nokogiri::HTML(rendered) }

Write Preview
Loading…
Cancel
Save