mirror of
https://github.com/edcommonwealth/sqm-dashboards.git
synced 2026-03-07 21:48:16 -08:00
Make measure titles clickable on the variance chart
This commit is contained in:
Nelson Jovel
parent
bf8b824ab8
commit
78fb737f5a
5 changed files with 159 additions and 156 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 %>
|
||||
|
||||
<% 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>
|
||||
|
||||
<svg
|
||||
id="measure-row-bars"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="<%= heading_gutter %>"
|
||||
width="<%= graph_width_percentage %>%"
|
||||
<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"
|
||||
>
|
||||
<% 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>
|
||||
<%= zone.capitalize %>
|
||||
</text>
|
||||
<% end %>
|
||||
</g>
|
||||
|
||||
<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%"
|
||||
transform="translate(-1, 0)"
|
||||
y="0"
|
||||
width="4"
|
||||
height="100%"
|
||||
fill="black"
|
||||
/>
|
||||
</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="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">
|
||||
|
||||
<%= 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 %>
|
||||
|
||||
<% 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>
|
||||
|
||||
<svg
|
||||
id="legend"
|
||||
id="measure-row-bars"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="0"
|
||||
y="<%= heading_gutter %>"
|
||||
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>
|
||||
<% 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="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%"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) }
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue