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

Replace harvey balls with new SVGs

Browse Source
pull/1/head
rebuilt 4 years ago committed by Liam Morley
parent b5badfaef5
commit 221f0cb0bf
5 changed files with 32 additions and 40 deletions
Show Stats Download Patch File Download Diff File

16
app/assets/stylesheets/dashboard.scss
Unescape View File

@ -72,26 +72,14 @@
stroke: $black;
}
.harvey-ball--ideal {
.harvey-ball--approval, .harvey-ball--ideal {
fill: $purple;
}
.harvey-ball--approval {
fill: $purple;
}
.harvey-ball--growth {
fill: $gold;
}
.harvey-ball--watch {
.harvey-ball--warning, .harvey-ball--watch, .harvey-ball--growth {
fill: $gold;
}
.harvey-ball--warning {
fill: $white;
}
.harvey-ball--insufficient_data {
stroke: $gray-2;
fill: $gray-3;

10
app/presenters/subcategory_card_presenter.rb
Unescape View File

@ -8,15 +8,7 @@ class SubcategoryCardPresenter
end
def harvey_ball_icon
icons_by_zone_type = {
ideal: "full-circle",
approval: "three-quarter-circle",
growth: "half-circle",
watch: "one-quarter-circle",
warning: "full-circle",
insufficient_data: "full-circle"
}
icons_by_zone_type[zone.type]
"#{zone.type}-harvey-ball"
end
def color

2
app/views/dashboard/_quality_framework_indicators.erb
Unescape View File

@ -1,7 +1,7 @@
<div class="mt-5 school-quality-frameworks">
<% category_presenters.each do |category_presenter| %>
<div class="text-center">
<i class="<%= category_presenter.icon_class %> fa-2x color-gray-2"></i>
<i class="<%= category_presenter.icon_class %> <%= category_presenter.icon_color_class %> fa-2x"></i>
</div>
<div class="text-center">
<h3 class="sub-header-3">

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

@ -3,7 +3,8 @@
<% end %>
<svg class="d-none">
<symbol viewBox="0 0 24 24" id="one-quarter-circle">
<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
@ -15,8 +16,7 @@
<circle cx="12" cy="12" r="11.5" fill="none" />
</symbol>
<symbol viewBox="0 0 24 24" id="half-circle">
<circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
<symbol viewBox="0 0 24 24" id="watch-harvey-ball">
<path d="
M 12 0
A 12 12 0 1 1 12 24
@ -27,7 +27,7 @@
<circle cx="12" cy="12" r="11.5" fill="none" />
</symbol>
<symbol viewBox="0 0 24 24" id="three-quarter-circle">
<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
@ -39,7 +39,19 @@
<circle cx="12" cy="12" r="11.5" fill="none" />
</symbol>
<symbol viewBox="0 0 24 24" id="full-circle">
<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>
@ -51,19 +63,19 @@
<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="#full-circle"></use>
<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="#one-quarter-circle"></use>
<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="#half-circle"></use>
<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="#three-quarter-circle"></use>
<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="#full-circle"></use>
<use class="harvey-ball harvey-ball--ideal" xlink:href="#ideal-harvey-ball"></use>
</svg>
<div class="font-size-14">Ideal</div>
</div>

12
spec/presenters/subcategory_card_presenter_spec.rb
Unescape View File

@ -16,7 +16,7 @@ describe SubcategoryCardPresenter do
let(:score) { 1 }
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
expect(subcategory_card_presenter.harvey_ball_icon).to eq "warning-harvey-ball"
end
it 'returns the color class of the zone' do
@ -28,7 +28,7 @@ describe SubcategoryCardPresenter do
let(:score) { 2 }
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "one-quarter-circle"
expect(subcategory_card_presenter.harvey_ball_icon).to eq "watch-harvey-ball"
end
it 'returns the color class of the zone' do
@ -40,7 +40,7 @@ describe SubcategoryCardPresenter do
let(:score) { 3 }
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "half-circle"
expect(subcategory_card_presenter.harvey_ball_icon).to eq "growth-harvey-ball"
end
it 'returns the color class of the zone' do
@ -52,7 +52,7 @@ describe SubcategoryCardPresenter do
let(:score) { 4 }
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "three-quarter-circle"
expect(subcategory_card_presenter.harvey_ball_icon).to eq "approval-harvey-ball"
end
it 'returns the color class of the zone' do
@ -64,7 +64,7 @@ describe SubcategoryCardPresenter do
let(:score) { 5 }
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
expect(subcategory_card_presenter.harvey_ball_icon).to eq "ideal-harvey-ball"
end
it 'returns the color class of the zone' do
@ -76,7 +76,7 @@ describe SubcategoryCardPresenter do
let(:score) { 0 }
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
expect(subcategory_card_presenter.harvey_ball_icon).to eq "insufficient_data-harvey-ball"
end
it 'reports that there is insufficient data' do

Write Preview
Loading…
Cancel
Save