gabehf/sqm-dashboards
1
0
Fork 0
mirror of https://github.com/edcommonwealth/sqm-dashboards.git synced 2026-03-07 21:48:16 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Display harvey balls with white backgrounds and display no-zone harvey balls

Browse source
This commit is contained in:
Liam Morley 2021-10-26 17:31:10 -04:00 • committed by Alex Basson
parent cb3905b148
commit dfc49d109a
5 changed files with 50 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

34
app/assets/stylesheets/dashboard.scss
View file

@ -13,7 +13,7 @@
font-family: 'Cabin', sans-serif;
}
.harvey-ball__legend {
.harvey-ball-legend {
display: flex;
justify-content: space-around;
align-items: center;
@ -23,12 +23,11 @@
}
.subcategory-card {
border: 1px solid #CECECE;
border: 1px solid $gray-2;
background-color: $gray-3;
min-width: 95%;
margin: auto;
padding: 8px;
border: 1px solid #CECECE;
font-size: 14px;
}
@ -70,3 +69,32 @@
.zone-header {
@extend .sub-header-4;
}
.harvey-ball {
stroke: $black;
}
.harvey-ball__ideal {
fill: $purple;
}
.harvey-ball__approval {
fill: $purple;
}
.harvey-ball__growth {
fill: $gold;
}
.harvey-ball__watch {
fill: $gold;
}
.harvey-ball__warning {
fill: $white;
}
.harvey-ball__no_zone {
stroke: $gray-2;
fill: $gray-3;
}

8
app/presenters/subcategory_card_presenter.rb
View file

@ -5,18 +5,14 @@ class SubcategoryCardPresenter
@score = score
end
def display_icon?
zone.type != :no_zone
end
def harvey_ball_icon
icons_by_zone_type = {
ideal: "full-circle",
approval: "three-quarter-circle",
growth: "half-circle",
watch: "one-quarter-circle",
warning: "empty-circle",
no_zone: "empty-circle"
warning: "full-circle",
no_zone: "full-circle"
}
icons_by_zone_type[zone.type]
end

4
app/views/dashboard/_subcategory_card.html.erb
View file

@ -1,8 +1,6 @@
<div class="subcategory-card__benchmark-item">
<svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<% if presenter.display_icon? %>
<use class="fill-<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
<% end %>
<use class="harvey-ball harvey-ball__<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
</svg>
<div class="subcategory-card__name"><%= subcategory.name %></div>

27
app/views/dashboard/index.html.erb
View file

@ -3,11 +3,8 @@
<% end %>
<svg class="d-none">
<symbol viewBox="0 0 24 24" id="empty-circle">
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="one-quarter-circle">
<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
@ -15,10 +12,11 @@
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
<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" />
<path d="
M 12 0
A 12 12 0 1 1 12 24
@ -26,10 +24,11 @@
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
<circle cx="12" cy="12" r="11.5" fill="none" />
</symbol>
<symbol viewBox="0 0 24 24" id="three-quarter-circle">
<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
@ -37,11 +36,11 @@
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
<circle cx="12" cy="12" r="11.5" fill="none" />
</symbol>
<symbol viewBox="0 0 24 24" id="full-circle">
<circle cx="12" cy="12" r="11.5" stroke="#3E3A38"/>
<circle cx="12" cy="12" r="11.5" />
</symbol>
</svg>
@ -49,22 +48,22 @@
<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="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="fill-warning" xlink:href="#empty-circle"></use>
<use class="harvey-ball harvey-ball__warning" xlink:href="#full-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-watch" xlink:href="#one-quarter-circle"></use>
<use class="harvey-ball harvey-ball__watch" xlink:href="#one-quarter-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-growth" xlink:href="#half-circle"></use>
<use class="harvey-ball harvey-ball__growth" xlink:href="#half-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-approval" xlink:href="#three-quarter-circle"></use>
<use class="harvey-ball harvey-ball__approval" xlink:href="#three-quarter-circle"></use>
</svg>
<svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-ideal" xlink:href="#full-circle"></use>
<use class="harvey-ball harvey-ball__ideal" xlink:href="#full-circle"></use>
</svg>
<div class="font-size-14">Ideal</div>
</div>

26
spec/presenters/subcategory_card_presenter_spec.rb
View file

@ -15,12 +15,8 @@ describe SubcategoryCardPresenter do
context 'when the given score is in the Warning zone for the given scale' do
let(:score) { 1 }
it 'returns a boolean indicating that the icon should be displayed' do
expect(subcategory_card_presenter.display_icon?).to be_truthy
end
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "empty-circle"
expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
end
it 'returns the color class of the zone' do
@ -31,10 +27,6 @@ describe SubcategoryCardPresenter do
context 'when the given score is in the Watch zone for the given scale' do
let(:score) { 2 }
it 'returns a boolean indicating that the icon should be displayed' do
expect(subcategory_card_presenter.display_icon?).to be_truthy
end
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "one-quarter-circle"
end
@ -47,10 +39,6 @@ describe SubcategoryCardPresenter do
context 'when the given score is in the Growth zone for the given scale' do
let(:score) { 3 }
it 'returns a boolean indicating that the icon should be displayed' do
expect(subcategory_card_presenter.display_icon?).to be_truthy
end
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "half-circle"
end
@ -63,10 +51,6 @@ describe SubcategoryCardPresenter do
context 'when the given score is in the Approval zone for the given scale' do
let(:score) { 4 }
it 'returns a boolean indicating that the icon should be displayed' do
expect(subcategory_card_presenter.display_icon?).to be_truthy
end
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "three-quarter-circle"
end
@ -79,10 +63,6 @@ describe SubcategoryCardPresenter do
context 'when the given score is in the Ideal zone for the given scale' do
let(:score) { 5 }
it 'returns a boolean indicating that the icon should be displayed' do
expect(subcategory_card_presenter.display_icon?).to be_truthy
end
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
end
@ -95,8 +75,8 @@ describe SubcategoryCardPresenter do
context 'when the given score is invalid for the given scale' do
let(:score) { 0 }
it 'returns a boolean indicating that the icon should be displayed' do
expect(subcategory_card_presenter.display_icon?).to be_falsey
it 'returns the icon that represents the zone' do
expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
end
end
end