diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss new file mode 100644 index 00000000..8115108c --- /dev/null +++ b/app/assets/stylesheets/buttons.scss @@ -0,0 +1,12 @@ +@import "colors"; + +.view-details { + background-color: #01788E; + font-family: 'Bitter', sans-serif; + font-weight: 600; + font-size: 14px; + color: $white; + padding: 8px 16px; + border: 0px; + width: 70%; +} diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss index a87e7cbf..e3422d17 100644 --- a/app/assets/stylesheets/colors.scss +++ b/app/assets/stylesheets/colors.scss @@ -2,6 +2,8 @@ $black: #3E3A38; $gray-1: #595959; $gray-2: #CECECE; $gray-3: #F9F9F9; +$gray-4: #F3F3F3; + $white: #FFFFFF; $blue: #01788E; $red: #C93047; @@ -48,6 +50,10 @@ $ideal: #C0FF73; fill: $black; } +.bg-gray { + background-color: $gray-4; +} + .fill-warning { fill: $warning; } diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 946215c6..dd7b8bed 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -8,3 +8,50 @@ .graph-footer { font-family: 'Cabin', sans-serif; } + +.category-card { + flex-basis: 20%; + align-items: center; + padding: 0 10px; +} + +.category-card__title { + flex-basis: 20%; + text-align: center; +} + +.category-card__description { + flex-basis: 20%; + text-align: center; +} + +.subcategory-card { + flex-basis: 20%; + border: 1px solid #CECECE; + background-color: $gray-4; + width: 90%; + padding: 8px; + border: 1px solid #CECECE; + font-size: 14px; +} + +.subcategory-card__benchmark-icon { + fill: Red; +} +.subcategory-card__name { + flex-basis: 20%; +} +.subcategory-card__benchmark-item { + align-items: center; +} +.subcategory-card__circle-container { + flex-basis: 30%; +} + +.subcategory-card__benchmark-label { + font-size: 30px; +} +.school-quality-frameworks { + background-color: $white; +} + diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss index 30a49fb4..25eaad49 100644 --- a/app/assets/stylesheets/fonts.scss +++ b/app/assets/stylesheets/fonts.scss @@ -20,25 +20,25 @@ font-weight: 400; } -.h1 { +.sub-header { @extend .font-bitter; @extend .weight-600; font-size: 40px; } -.h2 { +.sub-header-2 { @extend .font-bitter; @extend .weight-700; font-size: 28px; } -.h3 { +.sub-header-3 { @extend .font-bitter; @extend .weight-700; font-size: 20px; } -.h4 { +.sub-header-4 { @extend .font-bitter; @extend .weight-600; font-size: 16px; diff --git a/app/assets/stylesheets/sqm_application.scss b/app/assets/stylesheets/sqm_application.scss index f132a9fa..ae0f1718 100644 --- a/app/assets/stylesheets/sqm_application.scss +++ b/app/assets/stylesheets/sqm_application.scss @@ -5,6 +5,7 @@ @import "fonts"; @import "borders"; @import "dashboard"; +@import "buttons"; .height-56 { height: 56px; diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb index d7831eaf..f85a93a8 100644 --- a/app/controllers/dashboard_controller.rb +++ b/app/controllers/dashboard_controller.rb @@ -1,13 +1,21 @@ class DashboardController < SqmApplicationController def index - @presenters = measure_ids - .map { |measure_id| Measure.find_by_measure_id measure_id } - .map(&method(:presenter_for_measure)) - .sort - .reverse + @measure_graph_row_presenters = measure_ids + .map { |measure_id| Measure.find_by_measure_id measure_id } + .map(&method(:presenter_for_measure)) + .sort + .reverse + + @category_presenters = SqmCategory.all.map { |sqm_category| CategoryPresenter.new( + category: sqm_category, + academic_year: academic_year, + school: school, + )} + end + private def measure_ids diff --git a/app/presenters/subcategory_card_presenter.rb b/app/presenters/subcategory_card_presenter.rb new file mode 100644 index 00000000..c5e199ec --- /dev/null +++ b/app/presenters/subcategory_card_presenter.rb @@ -0,0 +1,45 @@ +class SubcategoryCardPresenter + + def initialize(scale:, score:) + @scale = scale + @score = score + end + + def abbreviation + abbreviations = { approval: "A", ideal: "I", growth: "G", watch: "Wa", warning: "Wr" , no_zone: "N"} + abbreviations[zone.type] + end + + def svg + + end + + def offset + return 40 unless abbreviation.length > 1 + 27 + end + + def color + case zone.type + when :warning + return "fill-warning" + when :watch + return "fill-watch" + when :growth + return "fill-growth" + when :approval + return "fill-approval" + when :ideal + return "fill-ideal" + else + return "fill-warning" + end + + end + + private + + def zone + @scale.zone_for_score(@score) + end +end diff --git a/app/presenters/subcategory_presenter.rb b/app/presenters/subcategory_presenter.rb index 1915e297..b4523f8a 100644 --- a/app/presenters/subcategory_presenter.rb +++ b/app/presenters/subcategory_presenter.rb @@ -14,11 +14,17 @@ class SubcategoryPresenter end def gauge_presenter - average_score = SurveyItemResponse.for_measures(measures) + GaugePresenter.new(scale: scale, score: average_score) + end + + def subcategory_card_presenter + SubcategoryCardPresenter.new(scale: scale, score: average_score) + end + + def average_score + SurveyItemResponse.for_measures(measures) .where(academic_year: @academic_year, school: @school) .average(:likert_score) - - GaugePresenter.new(scale: scale, score: average_score) end private diff --git a/app/views/dashboard/_quality_framework_indicators.erb b/app/views/dashboard/_quality_framework_indicators.erb new file mode 100644 index 00000000..2dd90bee --- /dev/null +++ b/app/views/dashboard/_quality_framework_indicators.erb @@ -0,0 +1,30 @@ +
+

School Quality Framework Indicators

+ +
+ <% category_presenters.each do |category_presenter| %> +
+

<%= category_presenter.name %>

+

This category measures the relevant abilities of a school's teachers and the degree to which they are receiving the support they need to grow as professionals.

+
+
+ <% category_presenter.subcategories.each do |subcategory | %> + <% presenter = subcategory.subcategory_card_presenter %> +
+
+ + + <%= presenter.abbreviation %> + +
+

<%= subcategory.name %>

+
+ <% end %> +
+
+ +
+ <% end %> + +
+
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb index 0eac4587..3462197a 100644 --- a/app/views/dashboard/index.html.erb +++ b/app/views/dashboard/index.html.erb @@ -7,5 +7,7 @@

Distance from benchmark

- <%= render partial: "variance_graph", locals: { presenters: @presenters } %> + <%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %> + + <%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %> diff --git a/spec/features/school_dashboard_feature_spec.rb b/spec/features/school_dashboard_feature_spec.rb index c0cd8f21..3c8038da 100644 --- a/spec/features/school_dashboard_feature_spec.rb +++ b/spec/features/school_dashboard_feature_spec.rb @@ -104,7 +104,7 @@ feature 'School dashboard', type: feature do expect(page).to have_text('Teachers & Leadership') expect(page).to have_text('Approval') - end + end scenario 'user sees schools in the same district' do page.driver.browser.basic_authorize(username, password)