gabehf/Dashboard
1
0
Fork 0
mirror of https://github.com/edcommonwealth/Dashboard.git synced 2026-03-15 17:45:53 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: start adding overview page

Browse source
This commit is contained in:
Nelson Jovel 2024-01-17 12:49:23 -08:00
parent 1b0af124f7
commit 64b4d599c7
33 changed files with 783 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

23
app/views/dashboard/overview/_quality_framework_indicators.erb Normal file
View file

@ -0,0 +1,23 @@
<div class="mt-5 school-quality-frameworks">
<% category_presenters.each do |category_presenter| %>
<div class="text-center">
<i class="<%= category_presenter.icon_class %> <%= category_presenter.icon_color_class %> fa-2x"></i>
</div>
<div class="text-center">
<h3 class="sub-header-3">
<%= link_to [@district, @school, category_presenter, { year: @academic_year.range }] do %>
<%= category_presenter.name %>
<% end %>
</h3>
</div>
<p class="body-small text-center m-0"><%= category_presenter.short_description %></p>
<div class="subcategory-card">
<div class="subcategory-card__benchmark-list">
<%= render partial: 'subcategory_card', collection: category_presenter.subcategories(academic_year: @academic_year, school: @school).map(&:subcategory_card_presenter) %>
</div>
</div>
<% end %>
</div>

14
app/views/dashboard/overview/_response_rate.html.erb Normal file
View file

@ -0,0 +1,14 @@
<div
class="overall-response-rate-container"
data-bs-toggle="popover"
data-bs-trigger="hover focus"
data-bs-content="<%= response_rate_presenter.hover_message %>"
data-bs-placement="top"
>
<div><%= response_rate_presenter.date_message %> </div>
<div style="display: flex; justify-content:space-between; width: 100px;">
<div><%= response_rate_presenter.focus.capitalize %> </div>
<%= render partial: "response_rate_graphic", locals: {response_rate_presenter: response_rate_presenter}, cached: true %>
<div><%= response_rate_presenter.percentage %>% </div>
</div>
</div>

35
app/views/dashboard/overview/_response_rate_graphic.html.erb Normal file
View file

@ -0,0 +1,35 @@
<style>
/*
For some reason, none of the sizing in the pie class works, and it always
fills 100% of the containing frame, so the size has to be dictated by .prog
*/
.prog {
width: 16px;
height: 16px;
position: relative;
border: 1px solid black;
border-radius: 50%;
margin-top: 0.2em;
}
.pie {
aspect-ratio: 1;
display: inline-grid;
place-content: center;
margin: 5px;
font-size: 25px;
font-weight: bold;
font-family: sans-serif;
}
#response-rate-pie-<%= response_rate_presenter.focus %>:before{
content: "";
position: absolute;
border-radius: 50%;
inset: 0;
background: conic-gradient(var(--color-<%= response_rate_presenter.color %>) calc(<%= response_rate_presenter.percentage %>*1%),#0000 0);
}
</style>
<div class="prog">
<div id="response-rate-pie-<%= response_rate_presenter.focus %>" class="pie"></div>
</div>

7
app/views/dashboard/overview/_subcategory_card.html.erb Normal file
View file

@ -0,0 +1,7 @@
<div class="subcategory-card__benchmark-item">
<svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg" <%= "data-bs-toggle=popover" if subcategory_card.insufficient_data? %> data-bs-placement="top" data-bs-content="This subcategory is not displayed due to limited availability of school admin data and/or low survey response rates.">
<use class="harvey-ball harvey-ball--<%= subcategory_card.color %>" xlink:href="#<%= subcategory_card.harvey_ball_icon %>"></use>
</svg>
<%= link_to(subcategory_card.name, district_school_category_path( @district, @school, subcategory_card.category, {year: @academic_year.range, anchor: "#{subcategory_card.subcategory_id}"})) %>
</div>

165
app/views/dashboard/overview/_variance_chart.html.erb Normal file
View file

@ -0,0 +1,165 @@
<% displayed_presenters = presenters.filter { |p| p.sufficient_data? }.sort %>
<% 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>
<% 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>
<% 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>
<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">
<%= 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="measure-row-bars"
x="<%= label_width_percentage %>%"
y="<%= heading_gutter %>"
width="<%= graph_width_percentage %>%"
>
<% 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>

100
app/views/dashboard/overview/index.html.erb Normal file
View file

@ -0,0 +1,100 @@
<% content_for :navigation do %>
<h2 class="sub-header-2 color-white m-0">Areas Of Interest</h2>
<select id="select-academic-year" class="form-select" name="academic-year">
<% @academic_years.each do |year| %>
<option value="<%= district_school_overview_index_path(@district, @school, {year: year.range}) %>" <%= @academic_year == year ? "selected" : nil %>><%= year.formatted_range %></option>
<% end %>
</select>
<% end %>
<% cache do %>
<svg class="d-none">
<symbol viewBox="0 0 24 24" id="warning-harvey-ball">
<circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
<path d="
M 12 0
A 12 12 0 0 1 24 12
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" />
</symbol>
<symbol viewBox="0 0 24 24" id="watch-harvey-ball">
<circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
<path d="
M 12 0
A 12 12 0 1 1 12 24
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" />
</symbol>
<symbol viewBox="0 0 24 24" id="growth-harvey-ball">
<circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
<path d="
M 12 0
A 12 12 0 1 1 0 12
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" />
</symbol>
<symbol viewBox="0 0 24 24" id="approval-harvey-ball">
<circle cx="12" cy="12" r="11.5" />
<path d="M19 8C19 8.28125 18.875 8.53125 18.6875 8.71875L10.6875 16.7188C10.5 16.9062 10.25 17 10 17C9.71875 17 9.46875 16.9062 9.28125 16.7188L5.28125 12.7188C5.09375 12.5312 5 12.2812 5 12C5 11.4375 5.4375 11 6 11C6.25 11 6.5 11.125 6.6875 11.3125L10 14.5938L17.2812 7.3125C17.4688 7.125 17.7188 7 18 7C18.5312 7 19 7.4375 19 8Z"
stroke-width=".5" stroke="white" fill="white" />
</symbol>
<symbol viewBox="0 0 24 24" id="ideal-harvey-ball">
<circle cx="12" cy="12" r="11.5" />
<path d="M9.28125 11.7188C9.46875 11.9062 9.71875 12 10 12C10.25 12 10.5 11.9062 10.6875 11.7188L15.6875 6.71875C15.875 6.53125 16 6.28125 16 6C16 5.4375 15.5312 5 15 5C14.7188 5 14.4688 5.125 14.2812 5.3125L10 9.59375L8.1875 7.8125C8 7.625 7.75 7.5 7.5 7.5C6.9375 7.5 6.5 7.9375 6.5 8.5C6.5 8.78125 6.59375 9.03125 6.78125 9.21875L9.28125 11.7188ZM19 10C19 9.4375 18.5312 9 18 9C17.7188 9 17.4688 9.125 17.2812 9.3125L10 16.5938L6.6875 13.3125C6.5 13.125 6.25 13 6 13C5.4375 13 5 13.4375 5 14C5 14.2812 5.09375 14.5312 5.28125 14.7188L9.28125 18.7188C9.46875 18.9062 9.71875 19 10 19C10.25 19 10.5 18.9062 10.6875 18.7188L18.6875 10.7188C18.875 10.5312 19 10.2812 19 10Z"
stroke-width=".5" stroke="white" fill="white" />
</symbol>
<symbol viewBox="0 0 24 24" id="insufficient_data-harvey-ball">
<circle cx="12" cy="12" r="11.5" />
</symbol>
</svg>
<% end %>
<% cache [@school, @academic_year] do %>
<div class="card">
<div class="d-flex justify-content-between align-items-center">
<h2 class="sub-header-2">School Quality Framework Indicators</h2>
<div class="harvey-ball-legend">
<div class="font-size-14">Warning</div>
<svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball--warning" xlink:href="#warning-harvey-ball"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball--watch" xlink:href="#watch-harvey-ball"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball--growth" xlink:href="#growth-harvey-ball"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball--approval" xlink:href="#approval-harvey-ball"></use>
</svg>
<svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball--ideal" xlink:href="#ideal-harvey-ball"></use>
</svg>
<div class="font-size-14">Ideal</div>
</div>
</div>
<%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
<div class="overall-response-rate-row">
<%= render partial: "response_rate", locals: {response_rate_presenter: @student_response_rate_presenter} %>
<%= render partial: "response_rate", locals: {response_rate_presenter: @teacher_response_rate_presenter} %>
</div>
</div>
<div class="card">
<h2 class="sub-header-2 mb-4">Distance From Benchmark</h2>
<%= render partial: "variance_chart", locals: { presenters: @variance_chart_row_presenters } %>
</div>
<% if @district == District.find_by_name("Boston") %>
<%= render partial: 'layouts/boston_modal' %>
<% elsif @has_empty_dataset %>
<%= render partial: 'layouts/empty_dataset_modal' %>
<% end %>
<% end %>