Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added year comparison to tables #718

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

Added year comparison to tables #718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b9c1052
[Scorecards] Added year variation placeholders in council table
lucascumsille Jan 22, 2025
b3da814
[Scorecards] Improved styling for council table
lucascumsille Jan 22, 2025
7feb51a
[Scorecards] Added tooltip to year variation element
lucascumsille Jan 22, 2025
8a4a2f5
[Scorecards][General] Added percentage ring component
lucascumsille Oct 16, 2024
d05adbb
[Scorecards] Added percentage rings to council table
lucascumsille Jan 23, 2025
4a669ff
[Scorecards] Changed fractions to 'Out of' in question marking
lucascumsille Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scoring/static/scoring/scss/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,4 @@
@import "open-graph-preview";
@import "years";
@import "gallery-component";
@import "percentage-ring";
36 changes: 36 additions & 0 deletions scoring/static/scoring/scss/percentage-ring.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/* USAGE:
Always check how the ring will look at 100% and if there is an overlap between elements.

<div class="progress-ring" style="--ring-size: 40px;--ring-percentage: {% widthratio answer.council_count council_count 100%};">
<div class="percentage fs-8">
{% widthratio answer.council_count council_count 100%}%
</div>
</div>
*/

.progress-ring {
min-width: var(--ring-size, 150px);
height: var(--ring-size, 150px);
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: conic-gradient(
var(--ring-primary-color, $primary) 0% calc(var(--ring-percentage) * 1%),
var(--ring-secondary-color, $primary-200) calc(var(--ring-percentage) * 1%) 100%
);

.percentage {
font-weight: bold;
color: var(--ring-primary-color, $primary);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--ring-size, 150px) * 0.7);
height: calc(var(--ring-size, 150px) * 0.7);
background: white;
border-radius: 50%;
}
}
126 changes: 90 additions & 36 deletions scoring/templates/scoring/council.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,29 +243,29 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
{% for section in sections %}
<tbody class="table-question-council__section">

{% if section.has_negative_points %}
<tr data-has-plan="no" class="section-row bg-red-100 text-red-900">
{% else %}
<tr data-has-plan="no" class="section-row bg-primary-100">
{% endif %}
<tr data-has-plan="no" class="section-row fw-bold">

<td colspan="1" class="section-cell border-bottom border-end border-opacity-25 border-primary text-start">
<td colspan="1" class="section-cell border-bottom border-start border-end border-opacity-25 border-primary text-start">
{{ section.description }}

{% if section.has_negative_points %}
<div class="d-flex flex-column mb-0 mt-2 fs-7 text-warning">
<div class="d-flex flex-column mb-0 mt-2 fs-7 rounded p-2 bg-red-100 text-warning">
<p class="mb-1">
{% include 'caps/icons/warning.html' with classes='me-1 mb-1' width='1.1em' height='1.1em' role='presentation' %}
<strong class="me-2">Penalty marks</strong>
</p>
{% if section.only_negative %}
{{ council.name }} was only awarded penalty marks in this section
{% else %}
{{ council.name }} incurred a penalty of {{ section.negative_percent|floatformat:0 }}% in this section
{% endif %}
<p class="fw-normal mb-1">
{% if section.only_negative %}
{{ council.name }} was only awarded penalty marks in this section
{% else %}
{{ council.name }} incurred a penalty of {{ section.negative_percent|floatformat:0 }}% in this section
{% endif %}
</p>
<p class="fw-normal mt-1 mb-0">
{{ section.score }} &equals; Total score ({{ section.non_negative_max|floatformat:"-2" }}) &minus; Penalty points ({{ section.negative_points }})
</p>
</div>
{% endif %}

<button type="button" class="d-block mt-2 d-md-none btn btn-outline-primary btn-sm js-toggle-council-question-table-section rounded-0" aria-label="Expand this section" title="Expand this section">
{% include 'caps/icons/chevron-down.html' with classes='align-text-bottom' width='1.2em' height='1.2em' role='presentation' %}
Show questions
Expand All @@ -276,25 +276,39 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
{% include 'caps/icons/scorecards-star.html' with classes='text-info align-text-bottom me-1' width='1.2em' height='1.2rem' role='presentation' %}
<span>{{ section.weighted_score|floatformat:0 }}%</span>
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
<!-- TODO: Change text-success to text-danger if comparison is negative -->
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
<!-- TODO: Change text-success to text-dark if there is no comparison -->
<!-- TODO: If there is no comparison then display '-' -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>
{% else %}
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
<span>{{section.weighted_score|floatformat:0 }}%</span>
{% if section.has_negative_points %}
<div class="fs-7 mt-2">
{{ section.score }} &equals; Total score ({{ section.non_negative_max|floatformat:"-2" }}) &minus; Penalty points ({{ section.negative_points }})
</div>
{% endif %}
<span>{{section.weighted_score|floatformat:0 }}%</span>
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
<!-- TODO: Change text-success to text-danger if comparison is negative -->
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
<!-- TODO: Change text-success to text-dark if there is no comparison -->
<!-- TODO: If there is no comparison then display '-' -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>
{% endif %}

{% for comparison in section.comparisons %}
<td class="d-none d-md-table-cell score border-bottom border-opacity-25 border-primary is--section-score {% if comparison.top_performer %}top-performer{% endif %}">
{{ comparison.weighted_score|floatformat:0 }}%
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
<!-- TODO: Change text-success to text-danger if comparison is negative -->
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
<!-- TODO: Change text-success to text-dark if there is no comparison -->
<!-- TODO: If there is no comparison then display '-' -->
<!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
<button button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>
{% endfor %}

<td class="d-none d-md-table-cell top-tier-score border-bottom border-opacity-25 border-primary"></td>
<td class="d-none d-md-table-cell top-tier-score border-end border-bottom border-opacity-25 border-primary"></td>

<td class="button-wrapper p-0 bg-white d-none d-md-table-cell text-start">
<button type="button" class="btn btn-outline-primary js-toggle-council-question-table-section border-start-0 rounded-0" aria-label="Expand this section" title="Expand this section">
Expand All @@ -310,27 +324,55 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
</td>

<td data-column="score" class="score border-bottom">
<span>{{ answer.score|format_mark }}/{{ answer.max }}</span>
<div class="d-flex flex-row gap-3 justify-content-end align-items-center">
<p class="mb-0">
<span class="fs-5">{{ answer.score|format_mark }} <span class="fs-7">out of </span> {{ answer.max }}
</span>
</p>
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
<!-- TODO: Change text-success to text-danger if comparison is negative -->
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
<!-- TODO: Change text-success to text-dark if there is no comparison -->
<!-- TODO: If there is no comparison then display '-' -->
<!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
</div>
</td>

{% for comparison in answer.comparisons %}
<td data-column="score" class="d-none d-md-table-cell score border-bottom">
<span>{{ comparison.score|format_mark }}/{{ comparison.max }}</span>
<div class="d-flex flex-row gap-3 justify-content-end align-items-center">
<p class="mb-0">
<span class="fs-5">{{ comparison.score|format_mark }} <span class="fs-7">out of </span> {{ comparison.max }}
</span>
</p>
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
<!-- TODO: Change text-success to text-danger if comparison is negative -->
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
<!-- TODO: Change text-success to text-dark if there is no comparison -->
<!-- TODO: If there is no comparison then display '-' -->
<!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
</div>
</td>
{% endfor %}

<td class="d-none d-md-table-cell top-tier-score border-bottom border-end">
<a href="{% url 'scoring:question' answer.code %}?type={{ council.get_scoring_group.slug }}" class="mx-auto" style="text-transform: none">
{{ answer.council_count }} out of {{ council_count }}
</a>
<span class="fs-8 mt-1 me-0 ms-auto d-block">
{% include 'scoring/includes/scoring-group-name.html' with group=council.get_scoring_group.slug plural=True %}
{% if answer.type == "negative" %}
got <strong>no penalty marks</strong> for this question.
{% else %}
got full marks for this question.
{% endif %}
</span>
<div class="d-flex flex-row gap-2 justify-content-end">
<div class="progress-ring" style="--ring-size: 40px;--ring-percentage: {% widthratio answer.council_count council_count 100%};">
<div class="percentage fs-8">
{% widthratio answer.council_count council_count 100%}%
</div>
</div>
<span class="fs-8 mt-1 me-0 text-start">
{% include 'scoring/includes/scoring-group-name.html' with group=council.get_scoring_group.slug plural=True %}
{% if answer.type == "negative" %}
got <strong>no penalty marks</strong> for this question.
{% else %}
got full marks for this question.
{% endif %}
</span>
</div>
</td>
</tr>
{% endfor %}
Expand All @@ -339,21 +381,33 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
{% endfor %}

<tbody class="table-question-council__section">
<tr data-has-plan="no" class="section-row bg-purple-200 fw-bold">
<td colspan="1" class="section-cell border-bottom border-end border-opacity-25 border-primary text-start">
<tr data-has-plan="no" class="section-row bg-purple-100 fw-bold">
<td colspan="1" class="section-cell border-bottom border-start border-end border-opacity-25 border-primary text-start">
Total score
</td>
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
{{ plan_score.weighted_total|floatformat:0 }}%
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
<!-- TODO: Change text-success to text-danger if comparison is negative -->
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
<!-- TODO: Change text-success to text-dark if there is no comparison -->
<!-- TODO: If there is no comparison then display '-' -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>

{% for comparison in comparisons %}
<td class="d-none d-md-table-cell score border-bottom border-opacity-25 border-primary is--section-score">
{{ comparison.weighted_total|floatformat:0 }}%
<!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
<!-- TODO: Change text-success to text-danger if comparison is negative -->
<!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
<!-- TODO: Change text-success to text-dark if there is no comparison -->
<!-- TODO: If there is no comparison then display '-' -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>
{% endfor %}

<td class="d-none d-md-table-cell top-tier-score border-bottom border-opacity-25 border-primary"></td>
<td class="d-none d-md-table-cell top-tier-score border-end border-bottom border-opacity-25 border-primary"></td>
<td class="button-wrapper p-0 bg-white d-none d-md-table-cell"></td>
</tr>
</tbody>
Expand Down
Loading