diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 95065602..ccc1b59b 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,5 +1,8 @@ @import "bootstrap"; +@import "fonts"; +@import "colors"; +@import "flex"; @import "scaffolds"; -@import "recipients"; @import "school_categories"; @import "questions"; +@import "dashboard"; diff --git a/app/assets/stylesheets/categories.scss b/app/assets/stylesheets/categories.scss deleted file mode 100644 index 42976cbc..00000000 --- a/app/assets/stylesheets/categories.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the Categories controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss new file mode 100644 index 00000000..6f6c1e2f --- /dev/null +++ b/app/assets/stylesheets/colors.scss @@ -0,0 +1,14 @@ +$red: #C92F47; +$beige: #EFEBE1; + +.red { + color: $red; +} + +.beige-bg { + background-color: $beige; +} + +.white-bg { + background-color: white; +} diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss new file mode 100644 index 00000000..2dcb863a --- /dev/null +++ b/app/assets/stylesheets/dashboard.scss @@ -0,0 +1,6 @@ +@import 'fonts'; + +.graph-header { + @extend .font-bitter; + @extend .weight-700; +} diff --git a/app/assets/stylesheets/districts.scss b/app/assets/stylesheets/districts.scss deleted file mode 100644 index 54a6e37d..00000000 --- a/app/assets/stylesheets/districts.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the Districts controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/flex.scss b/app/assets/stylesheets/flex.scss new file mode 100644 index 00000000..a8d54dde --- /dev/null +++ b/app/assets/stylesheets/flex.scss @@ -0,0 +1,25 @@ +.fdr { + display: flex; + flex-direction: row; +} + +.fdc { + display: flex; + flex-direction: column; +} + +.fjc { + justify-content: center; +} + +.fjb { + justify-content: space-between; +} + +.fjl { + justify-content: left; +} + +.fac { + align-items: center; +} diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss new file mode 100644 index 00000000..ee41e459 --- /dev/null +++ b/app/assets/stylesheets/fonts.scss @@ -0,0 +1,33 @@ + +.font-bitter { + font-family: 'Bitter', serif; +} + +.font-cabin { + font-family: 'Cabin', sans-serif; +} + +.weight-700 { + font-weight: 700; +} + +.weight-600 { + font-weight: 600; +} + +.weight-400 { + font-weight: 400; +} + +.h1 { + @extend .font-bitter; + @extend .weight-600; + font-size: 40px; +} + +.p { + @extend .font-cabin; + @extend .weight-400; + font-size: 17px; +} + diff --git a/app/assets/stylesheets/question_lists.scss b/app/assets/stylesheets/question_lists.scss deleted file mode 100644 index c5b1e232..00000000 --- a/app/assets/stylesheets/question_lists.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the QuestionLists controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/recipient_lists.scss b/app/assets/stylesheets/recipient_lists.scss deleted file mode 100644 index d6141781..00000000 --- a/app/assets/stylesheets/recipient_lists.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the recipient_lists controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/recipients.scss b/app/assets/stylesheets/recipients.scss deleted file mode 100644 index 5266397c..00000000 --- a/app/assets/stylesheets/recipients.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the Recipients controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/schedules.scss b/app/assets/stylesheets/schedules.scss deleted file mode 100644 index a89cec95..00000000 --- a/app/assets/stylesheets/schedules.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the schedules controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/schools.scss b/app/assets/stylesheets/schools.scss deleted file mode 100644 index 813d2d05..00000000 --- a/app/assets/stylesheets/schools.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the Schools controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb index fde360fa..81a54e27 100644 --- a/app/controllers/dashboard_controller.rb +++ b/app/controllers/dashboard_controller.rb @@ -16,7 +16,11 @@ class DashboardController < ApplicationController end def district - @district ||= school.district + @district ||= District.find_by_slug district_slug + end + + def district_slug + params[:district_id] end def school_slug diff --git a/app/models/construct_graph_parameters.rb b/app/models/construct_graph_parameters.rb index 7b3e2e03..96dc2332 100644 --- a/app/models/construct_graph_parameters.rb +++ b/app/models/construct_graph_parameters.rb @@ -1,9 +1,4 @@ module ConstructGraphParameters - TOTAL_GRAPH_WIDTH = 1152 - GRAPH_WIDTH = 0.75 * TOTAL_GRAPH_WIDTH - CONSTRUCT_ROW_HEIGHT = 40 - CONSTRUCT_ROW_BAR_HEIGHT = 20 - module ZoneColor WARNING = "#FF73C0" WATCH = "#F096AD" @@ -11,26 +6,4 @@ module ConstructGraphParameters APPROVAL = "#D0DD86" IDEAL = "#C0FF73" end - - class ZoneParams - attr_reader :left_edge - attr_reader :width - - def initialize(left_edge:, width:) - @left_edge = left_edge - @width = width - end - - def right_edge - left_edge + width - end - end - - WARNING_ZONE = ZoneParams.new left_edge: 0, width: (GRAPH_WIDTH / 2) / 3 - WATCH_ZONE = ZoneParams.new left_edge: WARNING_ZONE.right_edge, width: (GRAPH_WIDTH / 2) / 3 - GROWTH_ZONE = ZoneParams.new left_edge: WATCH_ZONE.right_edge, width: (GRAPH_WIDTH / 2) / 3 - APPROVAL_ZONE = ZoneParams.new left_edge: GROWTH_ZONE.right_edge, width: (GRAPH_WIDTH / 2) / 2 - IDEAL_ZONE = ZoneParams.new left_edge: APPROVAL_ZONE.right_edge, width: (GRAPH_WIDTH / 2) / 2 - - KEY_BENCHMARK_WIDTH = 2 end diff --git a/app/presenters/construct_graph_row_presenter.rb b/app/presenters/construct_graph_row_presenter.rb index 187acb6c..a16e06ed 100644 --- a/app/presenters/construct_graph_row_presenter.rb +++ b/app/presenters/construct_graph_row_presenter.rb @@ -24,32 +24,38 @@ class ConstructGraphRowPresenter end def bar_width - unrounded_bar_width.round + "#{(bar_width_percentage * 100).round(2)}%" end def x_offset case zone.type when :ideal, :approval - 0 + "50%" else - -1 * bar_width + "#{((0.5 - bar_width_percentage) * 100).round(2)}%" end end private - def unrounded_bar_width + 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 + + def bar_width_percentage case zone.type when :ideal - percentage * ideal_zone_params.width + approval_zone_params.width + percentage * IDEAL_ZONE_WIDTH_PERCENTAGE + APPROVAL_ZONE_WIDTH_PERCENTAGE when :approval - percentage * approval_zone_params.width + percentage * APPROVAL_ZONE_WIDTH_PERCENTAGE when :growth - percentage * growth_zone_params.width + percentage * GROWTH_ZONE_WIDTH_PERCENTAGE when :watch - percentage * watch_zone_params.width + growth_zone_params.width + percentage * WATCH_ZONE_WIDTH_PERCENTAGE + GROWTH_ZONE_WIDTH_PERCENTAGE else - percentage * warning_zone_params.width + watch_zone_params.width + growth_zone_params.width + percentage * WARNING_ZONE_WIDTH_PERCENTAGE + WATCH_ZONE_WIDTH_PERCENTAGE + GROWTH_ZONE_WIDTH_PERCENTAGE end end @@ -60,24 +66,4 @@ class ConstructGraphRowPresenter def zone @construct.zone_for_score(@score) end - - def ideal_zone_params - ConstructGraphParameters::IDEAL_ZONE - end - - def approval_zone_params - ConstructGraphParameters::APPROVAL_ZONE - end - - def growth_zone_params - ConstructGraphParameters::GROWTH_ZONE - end - - def watch_zone_params - ConstructGraphParameters::WATCH_ZONE - end - - def warning_zone_params - ConstructGraphParameters::WARNING_ZONE - end end diff --git a/app/views/dashboard/_construct_bar_graph.erb b/app/views/dashboard/_construct_bar_graph.erb new file mode 100644 index 00000000..fa27bb70 --- /dev/null +++ b/app/views/dashboard/_construct_bar_graph.erb @@ -0,0 +1,43 @@ +
+ + <% heading_gutter = 30 %> + <% construct_row_height = 40 %> + <% graph_height = construct_graph_row_presenters.length * construct_row_height + heading_gutter %> + <% construct_row_bar_height = 20 %> + <% label_padding_right = 24 %> + xmlns="http://www.w3.org/2000/svg"> + + + text-anchor="middle" dominant-baseline="middle">Warning + text-anchor="middle" dominant-baseline="middle">Watch + text-anchor="middle" dominant-baseline="middle">Growth + text-anchor="middle" dominant-baseline="middle">Approval + text-anchor="middle" dominant-baseline="middle">Ideal + + + + fill-opacity="0.2" /> + fill-opacity="0.2" /> + fill-opacity="0.2" /> + fill-opacity="0.2" /> + fill-opacity="0.2" /> + + + + + + + > + <%= construct_graph_row_presenters.each_with_index do |presenter, index| %> + y=<%= index * construct_row_height + construct_row_height / 2 %> text-anchor="end" dominant-baseline="middle"><%= presenter.construct_name %> + <% end %> + + + width="75%"> + <%= construct_graph_row_presenters.each_with_index do |presenter, index| %> + width="<%= presenter.bar_width %>" height=<%= construct_row_bar_height %> fill=<%= presenter.bar_color %> /> + <% end %> + + + +
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb index e59ba1ab..841f9272 100644 --- a/app/views/dashboard/index.html.erb +++ b/app/views/dashboard/index.html.erb @@ -1,74 +1,28 @@

<%= @school.name %>

-
-

Areas Of Interest

+
+
+

Areas Of Interest

+
+ + + + + +
+
+ +
+

Distance from benchmark

+

This graph shows how much a score is above or below the benchmark of any given scale.

+
+ + <%= render partial: "construct_bar_graph", locals: {construct_graph_row_presenters: @construct_graph_row_presenters}%> - - - - - -
- -
-

Top & Bottom 5 Distance From Benchmark

- -<% heading_gutter = 30 %> -<% graph_height = @construct_graph_row_presenters.length * ConstructGraphParameters::CONSTRUCT_ROW_HEIGHT + heading_gutter %> - height=<%= graph_height %> xmlns="http://www.w3.org/2000/svg"> - <% graph_center = ConstructGraphParameters::GRAPH_WIDTH / 2 %> - <% label_padding_right = 24 %> - - <% warning_zone = ConstructGraphParameters::WARNING_ZONE %> - <% watch_zone = ConstructGraphParameters::WATCH_ZONE %> - <% growth_zone = ConstructGraphParameters::GROWTH_ZONE %> - <% approval_zone = ConstructGraphParameters::APPROVAL_ZONE %> - <% ideal_zone = ConstructGraphParameters::IDEAL_ZONE %> - - <% key_benchmark_width = ConstructGraphParameters::KEY_BENCHMARK_WIDTH %> - <% key_benchmark_left_edge = graph_center - key_benchmark_width / 2 %> - - <% construct_row_height = ConstructGraphParameters::CONSTRUCT_ROW_HEIGHT %> - <% construct_row_bar_height = ConstructGraphParameters::CONSTRUCT_ROW_BAR_HEIGHT %> - - - - y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Warning - y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Watch - y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Growth - y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Approval - y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Ideal - - - - y="0" width=<%= warning_zone.width %> height="100%" fill=<%= ConstructGraphParameters::ZoneColor::WARNING %> fill-opacity="0.2" /> - y="0" width=<%= watch_zone.width %> height="100%" fill=<%= ConstructGraphParameters::ZoneColor::WATCH %> fill-opacity="0.2" /> - y="0" width=<%= growth_zone.width %> height="100%" fill=<%= ConstructGraphParameters::ZoneColor::GROWTH %> fill-opacity="0.2" /> - y="0" width=<%= approval_zone.width %> height="100%" fill=<%= ConstructGraphParameters::ZoneColor::APPROVAL %> fill-opacity="0.2" /> - y="0" width=<%= ideal_zone.width %> height="100%" fill=<%= ConstructGraphParameters::ZoneColor::IDEAL %> fill-opacity="0.2" /> - - y="0" width=<%= key_benchmark_width %> height="100%" fill="black" /> - - - - - > - <%= @construct_graph_row_presenters.each_with_index do |presenter, index| %> - y=<%= index * construct_row_height + construct_row_height / 2 %> text-anchor="end" dominant-baseline="middle"><%= presenter.construct_name %> - <% end %> - - - > - <%= @construct_graph_row_presenters.each_with_index do |presenter, index| %> - y=<%= index * construct_row_height + (construct_row_height - construct_row_bar_height) / 2 %> width="<%= presenter.bar_width %>" height=<%= construct_row_bar_height %> fill=<%= presenter.bar_color %> /> - <% end %> - - - diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 57261ead..52d48f61 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -4,6 +4,8 @@ %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ %meta{:charset => "utf-8"}/ %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/ + %link{href: "https://fonts.googleapis.com/css?family=Bitter:400,600,700", rel: "stylesheet", type: "text/css"}/ + %link{href: "https://fonts.googleapis.com/css?family=Cabin:400,600,700", rel: "stylesheet", type: "text/css"}/ %title MCIEA = csrf_meta_tags = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' diff --git a/spec/presenters/construct_graph_row_presenter_spec.rb b/spec/presenters/construct_graph_row_presenter_spec.rb index d402be41..af56dd4d 100644 --- a/spec/presenters/construct_graph_row_presenter_spec.rb +++ b/spec/presenters/construct_graph_row_presenter_spec.rb @@ -37,11 +37,11 @@ RSpec.describe "construct graph row presenter" 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 324 + expect(presenter.bar_width).to eq "37.5%" end it('returns an x-offset of 0') do - expect(presenter.x_offset).to eq 0 + expect(presenter.x_offset).to eq "50%" end end @@ -55,11 +55,11 @@ RSpec.describe "construct graph row presenter" do end it('returns a bar width equal to the proportionate approval zone width') do - expect(presenter.bar_width).to eq 108 + expect(presenter.bar_width).to eq "12.5%" end it('returns an x-offset of 0') do - expect(presenter.x_offset).to eq 0 + expect(presenter.x_offset).to eq "50%" end end @@ -73,11 +73,11 @@ RSpec.describe "construct graph row presenter" do end it('returns a bar width equal to the proportionate growth zone width') do - expect(presenter.bar_width).to eq 29 + expect(presenter.bar_width).to eq "3.33%" end it('returns an x-offset equal to the bar width') do - expect(presenter.x_offset).to eq -29 + expect(presenter.x_offset).to eq "46.67%" end end @@ -91,11 +91,11 @@ RSpec.describe "construct graph row presenter" 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 216 + expect(presenter.bar_width).to eq "25.01%" end it('returns an x-offset equal to the bar width') do - expect(presenter.x_offset).to eq -216 + expect(presenter.x_offset).to eq "25.0%" end end @@ -109,11 +109,11 @@ RSpec.describe "construct graph row presenter" 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 424 + expect(presenter.bar_width).to eq "49.13%" end it('returns an x-offset equal to the bar width') do - expect(presenter.x_offset).to eq -424 + expect(presenter.x_offset).to eq "0.87%" end end end