Skip to content

create a legend to better understand the sunburst chart in the label #105

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

create a legend to better understand the sunburst chart in the label #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file modified db.sqlite3
View file
Open in desktop
Binary file not shown.
22 changes: 11 additions & 11 deletions static/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,23 +67,23 @@ function validateAndHighlightFieldsByIds(elementIds, changeMadeFromButton=false)

function updateProgressBar(){
// Update progress bar
let assessmentForm = document.getElementById('assessment');
let assessmentForm = document.getElementById('assessment'); // create a variable called assessmentForm and assign it the form with the id of "assessment" (the form we are working with). where we can get any information stored inside the assessment form.

let inputs = assessmentForm.querySelectorAll('select');
let inputs = assessmentForm.querySelectorAll('select'); // “Inside the form I just got (assessmentForm), find all <select> dropdown elements.” --> This returns a NodeList (like an array) of all <select> elements inside the form — one for each metric.

let filledCount = 0; // Counter for filled elements
let total = 0;
inputs.forEach(element => {
let filledCount = 0; // This is a counter. We’ll increase it for every filled <select>.
let total = 0; // This is another counter to track how many <select> dropdowns exist in total (so we can later calculate a percentage).
inputs.forEach(element => { // what is "forEach"? This is a JavaScript loop designed to go over every item in an array or NodeList.
// Check if the element is filled
if (element.value && element.value.trim() !== '' && element.value.trim() !== '-') {
filledCount++;
if (element.value && element.value.trim() !== '' && element.value.trim() !== '-') { // Checks that the dropdown has some value selected and is not just a placeholder (like "-").
filledCount++; // If the dropdown has a value, we increase the filledCount by 1.
}
total++;
total++; // We increase the total count by 1 for every <select> we find, regardless of whether it’s filled or not. we need it to calculate the total percentage
});

let progressBar = document.getElementById('progress');
progressBar.style.width = ((filledCount / total) * 100) + "%";
progressBar.innerHTML = ((filledCount / total) * 100).toFixed(0) + "%";
let progressBar = document.getElementById('progress'); // This is the progress bar element we want to update. We’ll change its width and text to show how much of the form is filled out.
progressBar.style.width = ((filledCount / total) * 100) + "%"; // This calculates the percentage of filled dropdowns and sets the width of the progress bar accordingly. The width is set to a percentage value (e.g., "50%").
progressBar.innerHTML = ((filledCount / total) * 100).toFixed(0) + "%"; // This sets the text inside the progress bar to show the percentage of filled dropdowns. The toFixed(0) method rounds the number to 0 decimal places, so it shows a whole number (e.g., "50%").
}

function toggleVisibility(buttonId, elementId) {
Expand Down
39 changes: 38 additions & 1 deletion webapp/templates/dataset_label.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,12 @@
<h1 class="text-center mt-3" style="margin-bottom: 20px;">QUANTUM label</h1>

<div class="d-flex justify-content-center mb-5">
<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#helpSection" aria-expanded="false" aria-controls="helpSection">
<button class="btn btn-secondary me-3" type="button" data-bs-toggle="collapse" data-bs-target="#helpSection" aria-expanded="false" aria-controls="helpSection">
How to Use the Label Page?
</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#helpSection2" aria-expanded="false" aria-controls="helpSection">
Chart Interpretation
</button>
</div>

<div class="collapse" id="helpSection">
Expand Down Expand Up @@ -50,6 +53,40 @@ <h1 class="text-center mt-3" style="margin-bottom: 20px;">QUANTUM label</h1>
</div>
</div>
</div>
<div class="collapse" id="helpSection2">
<div class="d-flex justify-content-center mb-5">
<div class="card card-body" style="max-width: 1000px;">
<ul style="margin-bottom: 0%;">
<li><b>Chart Structure</b>: The sunburst chart consists of three levels:
<ul>
<li><b>Center</b>: Represents the overall quality & utility assessment.</li>
<li><b>Middle ring</b>: Represents the EHDS Categories. The score in each category is the sum of all dimensions scores within the category.</li>
<li><b>Outer ring</b>: Represents the DQ&U Dimensions. Shows the score per dimension.</li>
</ul>
</li>

<li><b>Color Gradient</b>: The base color of each category is assigned uniquely, while the dimensions inherit the same base color with varying opacity based on their score. As the score increases, the opacity of the color increases, making the slice more visible.</li>
<li><b>Stars & Score in Center</b>: The chart center displays the total DQ&U score and a star rating:
<ul>
<li>★☆☆☆☆ = 25% of DQ&U reached</li>
<li>★★☆☆☆ = 45% of DQ&U reached</li>
<li>★★★☆☆ = 60% of DQ&U reached</li>
<li>★★★★☆ = 80% of DQ&U reached</li>
<li>★★★★★ = ≥90% of DQ&U reached</li>
</ul>
</li>
<li><b>Hover Functionality</b>: Hover over any slice to see:
<ul>
<li>Category or dimension name</li>
<li>Score / Max possible score</li>
</ul>
</li>

<li><b>Note</b>: Even when the score is zero, the slice is still shown with a minimum visibility level to ensure no data is hidden.</li>
</ul>
</div>
</div>
</div>

<div class="col-md-2 col-sm-12"></div>
<div class="col-md-8 col-sm-12">
Expand Down