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

Style dashboard page

Browse Source
pull/1/head
Alex Basson 4 years ago
parent 45c5392b2e
commit 8cc6866c61
7 changed files with 141 additions and 143 deletions
Show Stats Download Patch File Download Diff File

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

@ -5,12 +5,11 @@ $gray-3: #F9F9F9;
$white: #FFFFFF; $white: #FFFFFF;
$blue: #01788E; $blue: #01788E;
$red: #C93047; $red: #C93047;
$light-blue: #FAFCFD;
$teal: #00B0B3; $teal: #00B0B3;
$mint: #B2D236; $mint: #B2D236;
$beige: #EFEBE1;
$warning: #FF73C0; $warning: #FF73C0;
$watch: #F096AD; $watch: #F096AD;
$growth: #E0BA9A; $growth: #E0BA9A;
@ -33,8 +32,8 @@ $ideal: #C0FF73;
color: $blue; color: $blue;
} }
.bg-color-beige { .bg-color-light-blue {
background-color: $beige; background-color: $light-blue;
} }
.bg-color-blue { .bg-color-blue {

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

@ -1,13 +1,13 @@
$spacer: 0.5rem; $spacer: 0.5rem;
$spacers: ( $spacers: (
0: 0, 0: 0,
1: ($spacer * .25), 1: ($spacer * .25),
2: ($spacer * .5), 2: ($spacer * .5),
3: $spacer, 3: $spacer,
4: ($spacer * 2), 4: ($spacer * 2),
5: ($spacer * 3), 5: ($spacer * 3),
6: ($spacer * 4), 6: ($spacer * 4),
7: ($spacer * 5), 7: ($spacer * 5),
); );
@import "bootstrap"; @import "bootstrap";
@ -21,3 +21,10 @@ $spacers: (
.height-56 { .height-56 {
height: 56px; height: 56px;
} }
.card {
@extend .bg-color-white;
@extend .p-5;
border-radius: 8px;
box-shadow: 0 0 6px rgba($black, 0.25);
}

2
app/helpers/variance_helper.rb
Unescape View File

@ -28,7 +28,7 @@ module VarianceHelper
end end
def label_width_percentage def label_width_percentage
25 30
end end
def graph_width_percentage def graph_width_percentage

223
app/views/dashboard/_variance_graph.erb
Unescape View File

@ -1,128 +1,125 @@
<div class="bg-color-white p-4 border-radius-8"> <svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">
<svg width="100%" height=<%= graph_height(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="5" result="offsetblur"/>
<feFlood flood-color="rgb(0, 0, 0)" result="color"/>
<feComposite in2="offsetblur" operator="in"/>
<feComposite in2="SourceAlpha" operator="in"/>
<feMerge>
<feMergeNode in="SourceGraphic"/>
<feMergeNode/>
</feMerge>
</filter>
<filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%"> <svg
<feComponentTransfer in=SourceAlpha> id="graph-background"
<feFuncA type="table" tableValues="1 0"/> x="<%= label_width_percentage %>%"
</feComponentTransfer> y="0"
<feGaussianBlur stdDeviation="4"/> width="<%= graph_width_percentage %>%"
<feOffset dx="0" dy="5" result="offsetblur"/> height=<%= graph_background_height(number_of_rows: presenters.size) %>
<feFlood flood-color="rgb(0, 0, 0)" result="color"/> >
<feComposite in2="offsetblur" operator="in"/> <g id="zone-headings">
<feComposite in2="SourceAlpha" operator="in"/> <%= zones.each_with_index do |zone, index| %>
<feMerge> <text
<feMergeNode in="SourceGraphic"/> class="zone-header weight-600"
<feMergeNode/> x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
</feMerge> y="<%= heading_gutter / 2 %>"
</filter> text-anchor="middle"
dominant-baseline="middle"
<svg >
id="graph-background" <%= zone.capitalize %>
x="<%= label_width_percentage %>%" </text>
y="0" <% end %>
width="<%= graph_width_percentage %>%"
height=<%= graph_background_height(number_of_rows: presenters.size) %>
>
<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 fill-<%= zone %>"
x="<%= index * zone_width_percentage %>%"
y="0"
width="<%= zone_width_percentage %>%"
height="100%"
opacity="0.2"
filter="url(#inset-shadow)"
/>
<% end %>
</g>
</svg>
<g id="measure-rows">
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
<%= presenters.each_with_index do |presenter, index| %>
<text
class="font-cabin"
x="<%= label_width_percentage %>%"
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="<%= label_width_percentage %>%"
y="<%= heading_gutter %>"
width="<%= graph_width_percentage %>%"
>
<%= 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> </g>
<svg <g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
id="key-benchmark" <%= zones.each_with_index do |zone, index| %>
x="<%= label_width_percentage %>%"
y="0"
width="<%= graph_width_percentage %>%"
height="<%= graph_background_height(number_of_rows: presenters.size) %>"
>
<g transform="translate(0, <%= heading_gutter %>)">
<rect <rect
id="key-benchmark" id="<%= zone %>-zone"
x="60%" class="zone-background fill-<%= zone %>"
transform="translate(-1, 0)" x="<%= index * zone_width_percentage %>%"
y="0" y="0"
width="4" width="<%= zone_width_percentage %>%"
height="100%" height="100%"
fill="black" opacity="0.2"
/> filter="url(#inset-shadow)"
</g> />
<% end %>
</g>
</svg>
<g id="measure-rows">
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
<%= presenters.each_with_index do |presenter, index| %>
<text
class="font-cabin"
x="<%= label_width_percentage %>%"
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>
<svg <svg
id="legend" id="measure-row-bars"
x="<%= label_width_percentage %>%" x="<%= label_width_percentage %>%"
y="0" y="<%= heading_gutter %>"
width="<%= graph_width_percentage %>%" width="<%= graph_width_percentage %>%"
> >
<text <%= presenters.each_with_index do |presenter, index| %>
class="graph-footer" <rect
x="60%" class="measure-row-bar <%= presenter.bar_color %>"
y="<%= graph_background_height(number_of_rows: presenters.size) + (footer_gutter / 2) %>" x="<%= presenter.x_offset %>"
text-anchor="middle" y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
> width="<%= presenter.bar_width %>"
Benchmark height=<%= measure_row_bar_height %> data-for-measure-id="<%= presenter.measure_id %>"
</text> stroke="none"
/>
<% end %>
</svg> </svg>
</g>
<svg
id="key-benchmark"
x="<%= label_width_percentage %>%"
y="0"
width="<%= graph_width_percentage %>%"
height="<%= graph_background_height(number_of_rows: 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: presenters.size) + (footer_gutter / 2) %>"
text-anchor="middle"
>
Benchmark
</text>
</svg> </svg>
</div> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

9
app/views/dashboard/index.html.erb
Unescape View File

@ -2,13 +2,10 @@
<h2 class="h1 color-white">Areas Of Interest</h2> <h2 class="h1 color-white">Areas Of Interest</h2>
<% end %> <% end %>
<div class="bg-color-beige mt-4 p-5"> <div class="card">
<div class="mb-5">
<div> <h2 class="h2 color-black">Distance from benchmark</h2>
<h2 class="h1 color-red">Distance from benchmark</h2>
<p class="body-large mb-6">This graph shows how much a score is above or below the benchmark of any given scale.</p>
</div> </div>
<%= render partial: "variance_graph", locals: { presenters: @presenters } %> <%= render partial: "variance_graph", locals: { presenters: @presenters } %>
</div> </div>

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

@ -2,13 +2,9 @@
<div class="container"> <div class="container">
<div class="row py-4 justify-content-between align-items-center"> <div class="row py-4 justify-content-between align-items-center">
<div class="col d-flex justify-content-start align-items-center"> <div class="col d-flex justify-content-start align-items-center">
<p class="me-6"><%= link_to image_tag('logo.png', class: 'height-56'), root_path %></p> <%= link_to image_tag('logo.png', class: 'height-56 me-7'), root_path %>
<p class="me-4"> <a class="h3 link me-4 <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
<a class="h3 link <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a> <a class="h3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
</p>
<p>
<a class="h3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
</p>
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">

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

@ -30,10 +30,12 @@
<%= render partial: 'layouts/sqm/header' %> <%= render partial: 'layouts/sqm/header' %>
</div> </div>
<div class="container"> <div class="bg-color-light-blue">
<div class="row"> <div class="container">
<div class="col-12"> <div class="row">
<%= yield %> <div class="col mt-7">
<%= yield %>
</div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save