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

Update to Bootstrap 5, basic styling

Browse Source
pull/1/head
Alex Basson 4 years ago
parent 00d0bf1e02
commit 5c352671da
12 changed files with 93 additions and 73 deletions
Show Stats Download Patch File Download Diff File

2
Gemfile
Unescape View File

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

17
Gemfile.lock
Unescape View File

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

7
app/assets/stylesheets/sqm_application.scss
Unescape View File

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

13
app/controllers/browse_controller.rb
Unescape View File

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

6
app/controllers/dashboard_controller.rb
Unescape View File

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

14
app/presenters/measure_graph_row_presenter.rb
Unescape View File

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

40
app/views/dashboard/_measure_bar_graph.erb
Unescape View File

@ -27,40 +27,46 @@
<svg id="graph-background" x="25%" y="0" width="75%" height=<%= graph_background_height %>> <svg id="graph-background" x="25%" y="0" width="75%" height=<%= graph_background_height %>>
<g id="scale-headings"> <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="10%" 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="30%" 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="50%" 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="70%" 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="90%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Ideal</text>
</g> </g>
<g id="scale-background" transform="translate(0, <%= heading_gutter %>)"> <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="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="16.67%" y="0" width="16.67%" 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="33.33%" y="0" width="16.67%" 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="50%" y="0" width="25%" 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="75%" y="0" width="25%" 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)"/>
<rect id="key-benchmark" x="50%" transform="translate(-1, 0)" y="0" width="2" height="100%" fill="black"/>
</g> </g>
</svg> </svg>
<g id="measure-rows"> <g id="measure-rows">
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>> <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
<%= measure_graph_row_presenters.each_with_index do |presenter, index| %> <%= 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 %> <% end %>
</svg> </svg>
<svg id="measure-row-bars" x="25%" y=<%= heading_gutter %> width="75%"> <svg id="measure-row-bars" x="25%" y=<%= heading_gutter %> width="75%">
<%= measure_graph_row_presenters.each_with_index do |presenter, index| %> <%= 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 %> <% end %>
</svg> </svg>
</g> </g>
<g id="legend"> <svg id="key-benchmark" x="25%" y="0" width="75%" height="<%= graph_background_height %>">
<text class="graph-footer" x="58.33%" y="<%= graph_background_height + (footer_gutter / 2) %>">Benchmark</text> <g transform="translate(0, <%= heading_gutter %>)">
</g> <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> </svg>
</div> </div>

4
app/views/dashboard/index.html.erb
Unescape 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"> <div class="fdr fjb fac">
<h2 class="h1">Areas Of Interest</h2> <h2 class="h1">Areas Of Interest</h2>
<div class="fdr"> <div class="fdr">

13
app/views/layouts/sqm/_header.html.erb
Unescape View File

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

10
app/views/layouts/sqm/application.html.erb
Unescape View File

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

12
spec/features/school_dashboard_feature_spec.rb
Unescape View File

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

28
spec/presenters/measure_graph_row_presenter_spec.rb
Unescape View File

@ -37,11 +37,11 @@ RSpec.describe MeasureGraphRowPresenter do
end end
it 'returns a bar width equal to the approval zone width plus the proportionate ideal zone width' do 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 end
it 'returns an x-offset of 0' do it 'returns an x-offset of 60%' do
expect(presenter.x_offset).to eq "50%" expect(presenter.x_offset).to eq "60%"
end end
end end
@ -55,11 +55,11 @@ RSpec.describe MeasureGraphRowPresenter do
end end
it 'returns a bar width equal to the proportionate approval zone width' do 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 end
it 'returns an x-offset of 0' do it 'returns an x-offset of 60%' do
expect(presenter.x_offset).to eq "50%" expect(presenter.x_offset).to eq "60%"
end end
end end
@ -73,12 +73,12 @@ RSpec.describe MeasureGraphRowPresenter do
end end
it 'returns a bar width equal to the proportionate growth zone width' do 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 end
context 'in order to achieve the visual effect' do 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 "36.67%" expect(presenter.x_offset).to eq "44.0%"
end end
end end
end end
@ -93,12 +93,12 @@ RSpec.describe MeasureGraphRowPresenter do
end end
it 'returns a bar width equal to the proportionate watch zone width plus the growth zone width' do 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 end
context 'in order to achieve the visual effect' do 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 "16.67%" expect(presenter.x_offset).to eq "20.0%"
end end
end end
end end
@ -113,11 +113,11 @@ RSpec.describe MeasureGraphRowPresenter do
end end
it 'returns a bar width equal to the proportionate warning zone width plus the watch & growth zone widths' do 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 end
context 'in order to achieve the visual effect' do 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%" expect(presenter.x_offset).to eq "0.0%"
end end
end end

Write Preview
Loading…
Cancel
Save