Skip to content

Commit

Permalink
[Scorecards] Added year comparison question page
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucascumsille
lucascumsille committed Mar 6, 2025
1 parent 59acd8e commit fa27431
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 65 deletions.
50 changes: 50 additions & 0 deletions scoring/static/scoring/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -546,3 +546,53 @@ document.querySelectorAll('.js-social-graphic-download').forEach(function(el) {
});
});
});

// Question display improved or worsened councils
// Function to update table visibility based on checkbox states
function updateTableVisibility() {
var improvedChecked = document.querySelector('.js-checkbox-improved-councils').checked;
var worsenedChecked = document.querySelector('.js-checkbox-worsened-councils').checked;

// If no checkboxes are checked, show all rows
var showAll = !improvedChecked && !worsenedChecked;

// Update visibility for rows with year-difference-status
forEachElement('tr[year-difference-status]', function(row) {
var status = row.getAttribute('year-difference-status');

// Show the row if:
// 1. No filters are active (show all)
// 2. The row's status matches the active filter
if (showAll ||
(improvedChecked && status === 'improved') ||
(worsenedChecked && status === 'worsened')) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
}

forEachElement('.js-checkbox-improved-councils', function(checkbox) {
checkbox.addEventListener('change', function() {
// If this checkbox is checked, uncheck the other one
if (this.checked) {
forEachElement('.js-checkbox-worsened-councils', function(otherCheckbox) {
otherCheckbox.checked = false;
});
}
updateTableVisibility();
});
});

forEachElement('.js-checkbox-worsened-councils', function(checkbox) {
checkbox.addEventListener('change', function() {
// If this checkbox is checked, uncheck the other one
if (this.checked) {
forEachElement('.js-checkbox-improved-councils', function(otherCheckbox) {
otherCheckbox.checked = false;
});
}
updateTableVisibility();
});
});
16 changes: 15 additions & 1 deletion scoring/static/scoring/scss/table-question-council.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,22 @@
.question-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(13.625rem, 18.75rem), 1fr));
gap: 2rem;

&__item {
margin-bottom: 1rem;

@media (min-width: 576px) {
margin-bottom: 0;
}
}
}

.table-question-council,
.section-question-table,
.table-council-question-performance {
th {
vertical-align: top;
vertical-align: middle;
}

th, td {
Expand Down
202 changes: 138 additions & 64 deletions scoring/templates/scoring/question.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,74 +76,148 @@ <h2 class="h3 mt-5 mb-4" id="performance">Question performance</h2>
</div>
</div>

{% if scoring_group and totals %}
<div class="row mt-4 mb-n4 mb-sm-0">
{% for t in totals %}
<div class="col-sm mb-4 mb-sm-0">
<div class="card h-100">
<div class="card-header py-3 text-bg-primary">
<h3 class="fs-4 mb-0 text-center">
{% if question.is_negatively_marked and t.score == 0 %}
Councils without penalty marks
{% else %}
{{ t.score|floatformat:0 }} point{{ t.score|pluralize }}
{% endif %}
</h3>
{% if scoring_group and totals %}
<div class="question-summary-grid mt-5">
{% for t in totals %}
<div class="question-summary-grid__item">
<div class="card">
<div class="card-header bg-primary text-light">
<h3 class="fs-4 mb-0 text-center">
{% if question.is_negatively_marked and t.score == 0 %}
Councils without penalty marks
{% else %}
{{ t.score|floatformat:0 }} point{{ t.score|pluralize }}
{% endif %}
</h3>
</div>
<div class="card-body d-flex flex-column align-items-center justify-content-center">
<span class="fs-1 lh-1 {% if t.score < 0 %}text-warning{% endif %}">
{{ t.count }}
</span>
<span>
{% if t.count == 1 %}
{% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=0 %}
{% else %}
{% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=1 %}
{% endif %}
</span>
</div>
{% comment %} TODO: Add a conditional for the .card-footer, if question didn't exist in 2023 then it won't get displayed. {% endcomment %}
<div class="card-footer d-flex flex-row justify-content-between">
<div>
{% comment %} TODO: {% endcomment %}
<span class="fs-4 lh-1">122</span>
<span class="fs-8">in 2023</span>
</div>
<div>
{% comment %} {% endcomment %}
<span class="fs-4 lh-1"><span class="fs-6">&#9650;</span>12</span>
</div>
</div>
</div>
</div>
{% endfor %}
</div>

<h3 class="h4 mb-1 mt-5">Performance comparison between 2023 and 2025</h3>
<p class="text-capitalize mb-3 fs-5">{% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=1 %}</p>
<div class="d-flex flex-row flex-wrap gap-3 mt-3">
<div class="card overflow-hidden">
<div class="card-body bg-green-600 text-light d-flex flew-row flex-nowrap gap-1">
<div class="d-flex align-items-baseline">
{% include 'caps/icons/arrow-up.html' with classes='opacity-50' width='2.5rem' height='2.5rem' role='presentation' %}
<span class="display-3 fw-bold lh-1">35</span>
</div>
<div class="d-flex flex-column">
<span class="display-6 lh-1">councils</span>
<span class="lh-1">scored higher in 2025</span>
</div>
</div>
<div class="card-footer bg-green-100 text-dark">
<div class="form-check">
<input class="form-check-input js-checkbox-improved-councils" type="checkbox" value="" id="checkbox-improved-councils">
<label class="form-check-label" for="checkbox-improved-councils">
Show councils
</label>
</div>
</div>
<div class="card-body d-flex flex-column align-items-center justify-content-center text-center {% if t.score < 0 %}bg-red-100{% endif %}">
<span class="fs-1 lh-1 mb-2">
{{ t.count }}
</span>
<span>
{% if t.count == 1 %}
{% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=0 %}
{% else %}
{% include 'scoring/includes/scoring-group-name.html' with group=scoring_group.slug plural=1 %}
{% endif %}
</span>
</div>

<div class="card overflow-hidden">
<div class="card-body bg-red-600 text-light d-flex flew-row flex-nowrap gap-1">
<div class="d-flex align-items-baseline">
{% include 'caps/icons/arrow-down.html' with classes='opacity-50' width='2.5rem' height='2.5rem' role='presentation' %}
<span class="display-3 fw-bold lh-1">5</span>
</div>
<div class="d-flex flex-column">
<span class="display-6 lh-1">councils</span>
<span class="lh-1">scored lower in 2025</span>
</div>
</div>
<div class="card-footer bg-red-100 text-dark">
<div class="form-check">
<input class="form-check-input js-checkbox-worsened-councils" type="checkbox" value="" id="checkbox-worsened-councils">
<label class="form-check-label" for="checkbox-worsened-councils">
Show councils
</label>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}

{% if scores %}
<table class="table-council-question-performance w-100 mt-4">
<thead class="text-bg-primary position-sticky z-index-3 top-0">
<tr>
<th scope="col" class="text-start border-end border-opacity-25 border-primary">Council</th>
<th scope="col" class="text-center border-end border-opacity-25 border-primary">Score</th>
<th scope="col" class="text-start border-end border-opacity-25 border-primary">Evidence</th>
</tr>
</thead>
<tbody>
{% for score in scores %}
<tr data-jump-slug="{{ score.plan_score.council.slug }}">
<td class="text-start border-bottom border-start border-end border-opacity-25 border-primary">
<a href="{% url 'scoring:council' score.plan_score.council.slug %}">
{{ score.plan_score.council.name }}
</a>
</td>
<td class="text-center border-bottom border-end border-opacity-25 border-primary {% if score.score < 0 %}bg-red-100{% endif %}">
{{ score.score|floatformat:"-2" }}/{{ score.max_score }}
</td>
<td class="text-start border-bottom border-end border-opacity-25 border-primary">
{% if score.score != 0 %}
{% for evidence_link in score.evidence_links_cleaned %}
{% if not forloop.first %}<br>{% endif %}
{% if evidence_link|slice:":4" == "http" %}
<a href="{{ evidence_link }}">{{ evidence_link|domain_human }}</a>
{% else %}
{{ evidence_link }}
{% endif %}
{% endfor %}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% comment %} TODO: if there are changes between scores display the following message: {% endcomment %}
<div class="alert alert-dark mt-3 w-md-50" role="alert">
<h3 class="h5">Score comparison unavailable</h3>
<p class="mb-0">There is no comparison between 2025 and 2023 data because this question's maximum score was modified in 2025.</p>
</div>
{% comment %} TODO: if new 2025 question display this: {% endcomment %}
<div class="alert alert-dark mt-3 w-md-50" role="alert">
<h3 class="h5">Score comparison unavailable</h3>
<p class="mb-0">This question was introduced in the 2025 Action Scorecards and has no historical data for comparison.</p>
</div>
{% endif %}

{% if scores %}
<table class="table-council-question-performance w-100 mt-4">
<thead class="text-bg-primary position-sticky z-index-3 top-0">
<tr>
<th scope="col" class="text-start border-end border-opacity-25 border-primary">Council</th>
<th scope="col" class="text-center border-end border-opacity-25 border-primary">Score</th>
<th scope="col" class="text-center border-end border-opacity-25 border-primary"><span class="d-block mb-0 lh-1">Difference </span><span class="fs-8 lh-1">2023</span></th>
<th scope="col" class="text-start border-end border-opacity-25 border-primary">Evidence</th>
</tr>
</thead>
<tbody>
{% for score in scores %}
{% comment %} TODO: Replace 'year-difference' for the actual value {% endcomment %}
<tr data-jump-slug="{{ score.plan_score.council.slug }}" year-difference-status="improved">
<td class="text-start border-bottom border-start border-end border-opacity-25 border-primary">
<a href="{% url 'scoring:council' score.plan_score.council.slug %}">
{{ score.plan_score.council.name }}
</a>
</td>
<td class="text-center border-bottom border-end border-opacity-25 border-primary {% if score.score < 0 %}bg-red-100{% endif %}">
{{ score.score|floatformat:"-2" }}/{{ score.max_score }}
</td>
<td class="text-warning text-center border-bottom border-end border-opacity-25 border-primary {% if score.score < 0 %}bg-red-100{% endif %}">
&#9660; {{ score.score|floatformat:"-2" }}
</td>
<td class="text-start border-bottom border-end border-opacity-25 border-primary">
{% if score.score != 0 %}
{% for evidence_link in score.evidence_links_cleaned %}
{% if not forloop.first %}<br>{% endif %}
{% if evidence_link|slice:":4" == "http" %}
<a href="{{ evidence_link }}">{{ evidence_link|domain_human }}</a>
{% else %}
{{ evidence_link }}
{% endif %}
{% endfor %}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
{% endblock %}

0 comments on commit fa27431

Please sign in to comment.