gabehf/sqm-dashboards
1
0
Fork 0
mirror of https://github.com/edcommonwealth/sqm-dashboards.git synced 2026-03-08 23:18:18 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update to Bootstrap 5, basic styling

Browse source
This commit is contained in:
Alex Basson 2021-10-04 14:34:47 -04:00
parent 00d0bf1e02
commit 5c352671da
12 changed files with 93 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Gemfile
View file

@ -37,7 +37,7 @@ gem 'jbuilder', '~> 2.5'
gem 'haml'
gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'bootstrap'
gem 'jquery-ui-rails'
gem 'friendly_id', '~> 5.1.0'

17
Gemfile.lock
View file

@ -47,10 +47,10 @@ GEM
execjs (~> 2)
bcrypt (3.1.16)
bindex (0.8.1)
bootstrap (4.0.0)
autoprefixer-rails (>= 6.0.3)
popper_js (>= 1.12.9, < 2)
sass (>= 3.5.2)
bootstrap (5.1.0)
autoprefixer-rails (>= 9.1.0)
popper_js (>= 2.9.3, < 3)
sassc-rails (>= 2.0.0)
builder (3.2.4)
byebug (11.1.3)
capybara (3.35.3)
@ -134,7 +134,7 @@ GEM
rack-protection
orm_adapter (0.5.0)
pg (1.2.3)
popper_js (1.16.0)
popper_js (2.9.3)
public_suffix (4.0.6)
puma (3.12.6)
racc (1.5.2)
@ -195,11 +195,6 @@ GEM
rspec-mocks (~> 3.10)
rspec-support (~> 3.10)
rspec-support (3.10.2)
sass (3.7.4)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
sassc (2.4.0)
ffi (~> 1.9)
sassc-rails (2.1.2)
@ -258,7 +253,7 @@ PLATFORMS
DEPENDENCIES
activerecord-import
bootstrap (~> 4.0.0.alpha6)
bootstrap
byebug
capybara
database_cleaner

7
app/assets/stylesheets/sqm_application.scss
View file

@ -1,4 +1,4 @@
$spacer: 8px;
$spacer: 0.5rem;
$spacers: (
0: 0,
1: ($spacer * .25),
@ -16,3 +16,8 @@ $spacers: (
@import "borders";
@import "flex";
@import "dashboard";
.height-56 {
height: 56px;
}

13
app/controllers/browse_controller.rb
View file

@ -1,5 +1,6 @@
class BrowseController < ApplicationController
layout "sqm/application"
before_action :authenticate_district
def show
@category = CategoryPresenter.new(
@ -11,10 +12,22 @@ class BrowseController < ApplicationController
private
def authenticate_district
authenticate(district.name.downcase, "#{district.name.downcase}!")
end
def district
@district ||= District.find_by_slug district_slug
end
def school
@school ||= School.find_by_slug school_slug
end
def district_slug
params[:district_id]
end
def school_slug
params[:school_id]
end

6
app/controllers/dashboard_controller.rb
View file

@ -1,10 +1,10 @@
class DashboardController < ApplicationController
layout "sqm/application"
before_action :authenticate_district
def index
schools
districts
authenticate(district.name.downcase, "#{district.name.downcase}!")
@measure_graph_row_presenters = measure_ids
.map { |measure_id| Measure.find_by_measure_id measure_id }
.map(&method(:presenter_for_measure))
@ -14,6 +14,10 @@ class DashboardController < ApplicationController
private
def authenticate_district
authenticate(district.name.downcase, "#{district.name.downcase}!")
end
def measure_ids
Measure.all.map(&:measure_id)
end

14
app/presenters/measure_graph_row_presenter.rb
View file

@ -24,9 +24,9 @@ class MeasureGraphRowPresenter
def x_offset
case zone.type
when :ideal, :approval
"50%"
"60%"
else
"#{((0.5 - bar_width_percentage) * 100).abs.round(2)}%"
"#{((0.6 - bar_width_percentage) * 100).abs.round(2)}%"
end
end
@ -47,11 +47,11 @@ class MeasureGraphRowPresenter
private
IDEAL_ZONE_WIDTH_PERCENTAGE = 0.5 / 2
APPROVAL_ZONE_WIDTH_PERCENTAGE = 0.5 / 2
GROWTH_ZONE_WIDTH_PERCENTAGE = 0.5 / 3
WATCH_ZONE_WIDTH_PERCENTAGE = 0.5 / 3
WARNING_ZONE_WIDTH_PERCENTAGE = 0.5 / 3
IDEAL_ZONE_WIDTH_PERCENTAGE = 0.2
APPROVAL_ZONE_WIDTH_PERCENTAGE = 0.2
GROWTH_ZONE_WIDTH_PERCENTAGE = 0.2
WATCH_ZONE_WIDTH_PERCENTAGE = 0.2
WARNING_ZONE_WIDTH_PERCENTAGE = 0.2
def bar_width_percentage
case zone.type

40
app/views/dashboard/_measure_bar_graph.erb
View file

@ -27,40 +27,46 @@
<svg id="graph-background" x="25%" y="0" width="75%" height=<%= graph_background_height %>>
<g id="scale-headings">
<text class="graph-header" x="8.335%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Warning</text>
<text class="graph-header" x="25%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Watch</text>
<text class="graph-header" x="41.665%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Growth</text>
<text class="graph-header" x="62.5%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Approval</text>
<text class="graph-header" x="87.5%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Ideal</text>
<text class="graph-header" x="10%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Warning</text>
<text class="graph-header" x="30%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Watch</text>
<text class="graph-header" x="50%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Growth</text>
<text class="graph-header" x="70%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Approval</text>
<text class="graph-header" x="90%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Ideal</text>
</g>
<g id="scale-background" transform="translate(0, <%= heading_gutter %>)">
<rect id="warning-zone" class="fill-warning" x="0" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="watch-zone" class="fill-watch" x="16.67%" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="growth-zone" class="fill-growth" x="33.33%" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="approval-zone" class="fill-approval" x="50%" y="0" width="25%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="ideal-zone" class="fill-ideal" x="75%" y="0" width="25%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="key-benchmark" x="50%" transform="translate(-1, 0)" y="0" width="2" height="100%" fill="black"/>
<rect id="warning-zone" class="fill-warning" x="0%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="watch-zone" class="fill-watch" x="20%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="growth-zone" class="fill-growth" x="40%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="approval-zone" class="fill-approval" x="60%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
<rect id="ideal-zone" class="fill-ideal" x="80%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
</g>
</svg>
<g id="measure-rows">
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
<%= measure_graph_row_presenters.each_with_index do |presenter, index| %>
<text class="font-cabin weight-600" x="25%" dx=<%= -1 * label_padding_right %> y=<%= index * measure_row_height + measure_row_height / 2 %> text-anchor="end" dominant-baseline="middle"><%= presenter.measure_name %></text>
<text class="font-cabin" x="25%" dx=<%= -1 * label_padding_right %> y=<%= index * measure_row_height + measure_row_height / 2 %> text-anchor="end" dominant-baseline="middle"><%= presenter.measure_name %></text>
<% end %>
</svg>
<svg id="measure-row-bars" x="25%" y=<%= heading_gutter %> width="75%">
<%= measure_graph_row_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 %>"/>
<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 %>" />
<% end %>
</svg>
</g>
<g id="legend">
<text class="graph-footer" x="58.33%" y="<%= graph_background_height + (footer_gutter / 2) %>">Benchmark</text>
</g>
<svg id="key-benchmark" x="25%" y="0" width="75%" height="<%= graph_background_height %>">
<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="key-benchmark" x="25%" y="0" width="75%">
<g id="legend">
<text class="graph-footer" x="60%" y="<%= graph_background_height + (footer_gutter / 2) %>" text-anchor="middle">Benchmark</text>
</g>
</svg>
</svg>
</div>

4
app/views/dashboard/index.html.erb
View file

@ -1,7 +1,3 @@
<a href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/browse/teachers-and-leadership?year=2020-21">Browse</a>
<h1><%= @school.name %></h1>
<div class="fdr fjb fac">
<h2 class="h1">Areas Of Interest</h2>
<div class="fdr">

13
app/views/layouts/sqm/_header.html.erb
View file

@ -1,10 +1,7 @@
<header class="row">
<div class="title col-12">
<div class="float-right">
<%= link_to("Frequently Asked Questions", "/MCIEA-Data-Dashboard-FAQ.pdf", class: 'faq', target: '_blank') %>
</div>
<h2 style="clear: right; text-align: center; margin-bottom: 30px;">
<%= link_to(image_tag('logo.png'), root_path) %>
</h2>
<header class="row py-4 align-items-center">
<div class="col">
<%= link_to image_tag('logo.png', class: 'height-56'), root_path %>
<a class="h3" href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/dashboard?year=2020-21">Dashboard</a>
<a class="h3" href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/browse/teachers-and-leadership?year=2020-21">Browse</a>
</div>
</header>

10
app/views/layouts/sqm/application.html.erb
View file

@ -25,10 +25,16 @@
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="container">
<%= render partial: 'layouts/sqm/header' %>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<%= render partial: 'layouts/sqm/header' %>
<%= yield %>
</div>

12
spec/features/school_dashboard_feature_spec.rb
View file

@ -68,17 +68,17 @@ feature 'School dashboard', type: feature do
expect(page).to have_text('Professional Qualifications')
professional_qualifications_row = measure_row_bars.find { |item| item['data-for-measure-id'] == '1A-i' }
expect(professional_qualifications_row['width']).to eq '10.33%'
expect(professional_qualifications_row['x']).to eq '50%'
expect(professional_qualifications_row['width']).to eq '8.26%'
expect(professional_qualifications_row['x']).to eq '60%'
expect(page).to have_text('Student Physical Safety')
student_physical_safety_row = measure_row_bars.find { |item| item['data-for-measure-id'] == '2A-i' }
expect(student_physical_safety_row['width']).to eq '50.0%'
expect(student_physical_safety_row['x']).to eq '50%'
expect(student_physical_safety_row['width']).to eq '40.0%'
expect(student_physical_safety_row['x']).to eq '60%'
expect(page).to have_text('Problem Solving Emphasis')
problem_solving_emphasis_row = measure_row_bars.find { |item| item['data-for-measure-id'] == '4C-i' }
expect(problem_solving_emphasis_row['width']).to eq '50.0%'
expect(problem_solving_emphasis_row['width']).to eq '60.0%'
expect(problem_solving_emphasis_row['x']).to eq '0.0%'
measure_row_bar_with_no_responses = measure_row_bars.find { |item| item['data-for-measure-id'] == '3A-i' }
@ -115,8 +115,6 @@ feature 'School dashboard', type: feature do
page.driver.browser.basic_authorize(username, password)
visit "/districts/#{district.slug}/schools/#{school.slug}/dashboard?year=#{ay_2020_21.range}"
assert_selector "h1", text: school.name
expected_num_of_schools = district.schools.count
expect(page.all('.school-options').count).to eq expected_num_of_schools
expect(page.all('.school-options[selected]').count).to eq 1

28
spec/presenters/measure_graph_row_presenter_spec.rb
View file

@ -37,11 +37,11 @@ RSpec.describe MeasureGraphRowPresenter do
end
it 'returns a bar width equal to the approval zone width plus the proportionate ideal zone width' do
expect(presenter.bar_width).to eq "37.5%"
expect(presenter.bar_width).to eq "30.0%"
end
it 'returns an x-offset of 0' do
expect(presenter.x_offset).to eq "50%"
it 'returns an x-offset of 60%' do
expect(presenter.x_offset).to eq "60%"
end
end
@ -55,11 +55,11 @@ RSpec.describe MeasureGraphRowPresenter do
end
it 'returns a bar width equal to the proportionate approval zone width' do
expect(presenter.bar_width).to eq "12.5%"
expect(presenter.bar_width).to eq "10.0%"
end
it 'returns an x-offset of 0' do
expect(presenter.x_offset).to eq "50%"
it 'returns an x-offset of 60%' do
expect(presenter.x_offset).to eq "60%"
end
end
@ -73,12 +73,12 @@ RSpec.describe MeasureGraphRowPresenter do
end
it 'returns a bar width equal to the proportionate growth zone width' do
expect(presenter.bar_width).to eq "13.33%"
expect(presenter.bar_width).to eq "16.0%"
end
context 'in order to achieve the visual effect' do
it 'returns an x-offset equal to 50% minus the bar width' do
expect(presenter.x_offset).to eq "36.67%"
it 'returns an x-offset equal to 60% minus the bar width' do
expect(presenter.x_offset).to eq "44.0%"
end
end
end
@ -93,12 +93,12 @@ RSpec.describe MeasureGraphRowPresenter do
end
it 'returns a bar width equal to the proportionate watch zone width plus the growth zone width' do
expect(presenter.bar_width).to eq "33.33%"
expect(presenter.bar_width).to eq "40.0%"
end
context 'in order to achieve the visual effect' do
it 'returns an x-offset equal to 50% minus the bar width' do
expect(presenter.x_offset).to eq "16.67%"
it 'returns an x-offset equal to 60% minus the bar width' do
expect(presenter.x_offset).to eq "20.0%"
end
end
end
@ -113,11 +113,11 @@ RSpec.describe MeasureGraphRowPresenter do
end
it 'returns a bar width equal to the proportionate warning zone width plus the watch & growth zone widths' do
expect(presenter.bar_width).to eq "50.0%"
expect(presenter.bar_width).to eq "60.0%"
end
context 'in order to achieve the visual effect' do
it 'returns an x-offset equal to 50% minus the bar width' do
it 'returns an x-offset equal to 60% minus the bar width' do
expect(presenter.x_offset).to eq "0.0%"
end
end