Skip to content

Commit

Permalink
icon counter
Browse files Browse the repository at this point in the history
  • Loading branch information
bedardk committed Dec 6, 2024
1 parent 1f82bae commit eaa22cd
Show file tree
Hide file tree
Showing 5 changed files with 443 additions and 64 deletions.
78 changes: 24 additions & 54 deletions prototypes/franco-country-profiles/chart-v2.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

let c1;

let c1;
let c2;

let c1data = {
Expand All @@ -9,7 +9,7 @@ let c1data = {
{
label: "Locuteurs francophones et autres",
data: [33, 66],
backgroundColor: ["#00B1B2","#C6EFEF"]
backgroundColor: ["#00B1B2", "#C6EFEF"]
}
]
}
Expand All @@ -29,7 +29,7 @@ c1 = new Chart(
plugins: {
legend: {
position: "right"
},
},
labels: [
{
display: false
Expand All @@ -50,8 +50,8 @@ c1 = new Chart(
textMargin: 4
},
]
}

}
}
}
);
Expand All @@ -62,7 +62,7 @@ let c2data = {
{
label: "Répartition des secteurs",
data: [10.3, 31, 58.6],
backgroundColor: ["#987B06","#F9EBB4","#EFC519"]
backgroundColor: ["#987B06", "#F9EBB4", "#EFC519"]
}
]
}
Expand All @@ -82,7 +82,7 @@ c2 = new Chart(
plugins: {
legend: {
position: "right"
},
},
labels: [
{
display: false
Expand All @@ -103,59 +103,29 @@ c2 = new Chart(
textMargin: 4
},
]
}

}
}
}
);

let popActive = document.getElementById('pop-active');
let context = popActive.getContext('2d');

// Function to resize canvas and draw the rectangle
function resizeCanvas() {
// Set canvas dimensions
popActive.width = popActive.parentElement.getBoundingClientRect().width; // 100% width
popActive.height = 65; // Fixed height

// Draw background rectangle that fills the canvas
context.fillStyle = '#D8CDEC'; // Set rectangle color
context.fillRect(0, 0, popActive.width, popActive.height); // Draw rectangle

// Draw second rectangle (top bar)
let percentBar = parseFloat(document.getElementById('pop-active-percent').innerHTML) / 100;
console.log(percentBar);
const secondBarWidth = popActive.width * percentBar; // 70% of the full width
context.fillStyle = '#362950'; // Color for the second bar
context.fillRect(0, 0, secondBarWidth, 65); // Positioned over the first rectangle

const text = document.getElementById('pop-active-percent').innerHTML;
context.fillStyle = 'white'; // Text color
context.font = 'bold 24px Noto Sans'; // Font size and style
context.textAlign = 'left'; // left-align text
context.textBaseline = 'middle'; // Vertically center text
context.fillText(text, 25, popActive.height / 2); // Position text in the middle of the second bar
}

// // Initial canvas setup
// resizeCanvas();
$(document).ready(function () {

let iconCounter = document.querySelector('.icon-counter');
let activePopPercent = Math.round((parseInt(document.getElementById('pop-active-percent').innerHTML)/100)*10);

console.log(activePopPercent)

// Redraw the canvas on window resize
window.addEventListener('resize', resizeCanvas);

function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
for (let i = 0; i < 10; i++) {
let icon = document.createElement('span');
icon.classList.add('fas', 'fa-user', 'mrgn-lft-sm');
if (i <= (activePopPercent-1) ){
icon.classList.add('active');
}
iconCounter.appendChild(icon);
}
}

docReady(function() {
// Initial canvas setup
resizeCanvas();
})


});
150 changes: 150 additions & 0 deletions prototypes/franco-country-profiles/chart-v3.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@


let c1;
let c2;

let c1data = {
labels: ["Francophones", "Autres"],
datasets: [
{
label: "Locuteurs francophones et autres",
data: [33, 66],
backgroundColor: ["#00B1B2", "#C6EFEF"]
}
]
}

c1 = new Chart(
document.getElementById('ag-locuteurs'),
{
type: 'pie',
data: c1data,
options: {
responsive: true,
aspectRatio: 2,
layout: {
autoPadding: true,
padding: 20
},
plugins: {
legend: {
position: "right"
},
labels: [
{
display: false
},
{
render: 'percentage',
precision: 0,
showZero: true,
fontSize: 12,
fontColor: '#333',
fontStyle: 'bold',
textShadow: false,
arc: false,
position: 'default',
overlap: false,
showActualPercentages: true,
outsidePadding: 4,
textMargin: 4
},
]

}
}
}
);

let c2data = {
labels: ["Primaire: 10,3 %", "Secondaire: 31 %", "Tertiare: 58,6 %"],
datasets: [
{
label: "Répartition des secteurs",
data: [10.3, 31, 58.6],
backgroundColor: ["#987B06", "#F9EBB4", "#EFC519"]
}
]
}

c2 = new Chart(
document.getElementById('ag-secteurs'),
{
type: 'pie',
data: c2data,
options: {
responsive: true,
aspectRatio: 2,
layout: {
autoPadding: true,
padding: 20
},
plugins: {
legend: {
position: "right"
},
labels: [
{
display: false
},
{
render: 'percentage',
precision: 0,
showZero: true,
fontSize: 12,
fontColor: ["#fff", "#333", '#333'],
fontStyle: 'bold',
textShadow: false,
arc: false,
position: 'default',
overlap: false,
showActualPercentages: true,
outsidePadding: 4,
textMargin: 4
},
]

}
}
}
);




$(document).ready(function () {
let popActive = document.getElementById('pop-active');
let context = popActive.getContext('2d');

// Function to resize canvas and draw the rectangle
function resizeCanvas() {
// Set canvas dimensions
popActive.width = popActive.parentElement.getBoundingClientRect().width; // 100% width
popActive.height = 65; // Fixed height

// Draw background rectangle that fills the canvas
context.fillStyle = '#D8CDEC'; // Set rectangle color
context.fillRect(0, 0, popActive.width, popActive.height); // Draw rectangle

// Draw second rectangle (top bar)
let percentBar = parseFloat(document.getElementById('pop-active-percent').innerHTML) / 100;
const secondBarWidth = popActive.width * percentBar; // 70% of the full width
context.fillStyle = '#362950'; // Color for the second bar
context.fillRect(0, 0, secondBarWidth, 65); // Positioned over the first rectangle

const text = document.getElementById('pop-active-percent').innerHTML;
context.fillStyle = 'white'; // Text color
context.font = 'bold 24px Noto Sans'; // Font size and style
context.textAlign = 'left'; // left-align text
context.textBaseline = 'middle'; // Vertically center text
context.fillText(text + " %", 25, popActive.height / 2); // Position text in the middle of the second bar
}

// // Initial canvas setup
resizeCanvas();


// Redraw the canvas on window resize
window.addEventListener('resize', resizeCanvas);

});
21 changes: 12 additions & 9 deletions prototypes/franco-country-profiles/country-profiles-en-v2.html
Original file line number Diff line number Diff line change
Expand Up @@ -71,23 +71,22 @@ <h2 class="d-flex mrgn-tp-0">Algérie</h2>
</div>
<div class="panel panel-card panel-body mrgn-bttm-lg">
<div class="row wb-eqht">
<div class="col-md-5">
<div class="col-md-5 mrgn-bttm-md">
<dl>
<dt>Population totale 2023&nbsp;:</dt>
<dd class="h2 mrgn-bttm-lg mrgn-tp-md">46,2 millions <span class="small text-dark"><span aria-hidden="true"><span class="fa fa-user "></span><span class="fa fa-user mrgn-lft-sm"></span><span class="fa fa-user mrgn-lft-sm"></span><span class="fa fa-user mrgn-lft-sm"></span><span class="fa fa-user mrgn-lft-sm"></span></span></span></dd>
<dd class="h1 mrgn-bttm-lg mrgn-tp-md"><b>46,2 millions</b> <div class="icon-counter small"></div></dd>
<dt>Population active&nbsp;:</dt>
<dd>
<canvas id="pop-active" class="full-width mrgn-bttm-md"></canvas>
<p>La tranche d'âge des 15 à 64 ans regroupe <span id="pop-active-percent">78,2</span>&nbsp;% de la population</p>
<p><span id="pop-active-percent" class="h2 text-primary mrgn-tp-0 bold-content">78,2&nbsp;%</span> de la population totale ont 15 à 64 ans</p>
</dd>
<dt>Langue(s) officielle(s) du pays&nbsp;:</dt>
<dd class="mrgn-bttm-lg">Arabe et Tamazight</dd>
<dt>PIB&nbsp;:</dt>
<dt>PIB (produit intérieur brut)&nbsp;:</dt>
<dd class="mrgn-bttm-lg">239,9 Milliards USD (2023)</dd>
<dt>Âge moyen&nbsp;:</dt>
<dd class="mrgn-bttm-lg">28.2 ans (2023)</dd>
<dt>Niveau moyen d’éducation&nbsp;:</dt>
<dd class="mrgn-bttm-lg">Modéré</dd>
<dd class="mrgn-bttm-lg">12 années</dd>
<dt>Salaire moyen mensuel&nbsp;:</dt>
<dd>En 2021, il était de 42 800 DA (~ 437,89&nbsp;$ CAN):
<ul>
Expand All @@ -98,7 +97,7 @@ <h2 class="d-flex mrgn-tp-0">Algérie</h2>
</dl>
</div>
<div class="col-md-7 brdr-lft">
<div class="mrgn-lft-md mrgn-rght-md">
<div class="mrgn-tp-md mrgn-lft-md mrgn-rght-md">
<figure class="mrgn-bttm-lg">
<figcaption class="h4 mrgn-tp-0">Locuteurs francophones et autres langues <a class="wb-lbx lbx-modal" href="#inline_content_modal"><i class="fas fa-info-circle"></i></a></figcaption>

Expand Down Expand Up @@ -219,7 +218,7 @@ <h2 class="h4 mrgn-tp-0">Info complémentaire</h2>



<script src="chart-v2.js" type="text/javascript" defer></script>


</div>

Expand All @@ -232,11 +231,15 @@ <h2 class="h4 mrgn-tp-0">Info complémentaire</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/wet-boew.min.js"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/js/theme.min.js"></script>
<script src="https://test.canada.ca/ircc/templates/js/components.js" type="text/javascript" defer></script>
<!-- <script src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@latest"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
<script src="https://test.canada.ca/ircc/templates/js/components.js" type="text/javascript" defer></script>
<script src="chart-v2.js" type="text/javascript"></script>
<script>

</script>
</body>

</html>
Loading

0 comments on commit eaa22cd

Please sign in to comment.