From eaa22cd6b2d0eb134dfd63198528aad166605798 Mon Sep 17 00:00:00 2001 From: bedardk Date: Fri, 6 Dec 2024 15:42:05 -0500 Subject: [PATCH] icon counter --- .../franco-country-profiles/chart-v2.js | 78 ++---- .../franco-country-profiles/chart-v3.js | 150 +++++++++++ .../country-profiles-en-v2.html | 21 +- .../country-profiles-en-v3.html | 243 ++++++++++++++++++ prototypes/franco-country-profiles/custom.css | 15 +- 5 files changed, 443 insertions(+), 64 deletions(-) create mode 100644 prototypes/franco-country-profiles/chart-v3.js create mode 100644 prototypes/franco-country-profiles/country-profiles-en-v3.html diff --git a/prototypes/franco-country-profiles/chart-v2.js b/prototypes/franco-country-profiles/chart-v2.js index a576b82c..334d3728 100644 --- a/prototypes/franco-country-profiles/chart-v2.js +++ b/prototypes/franco-country-profiles/chart-v2.js @@ -1,6 +1,6 @@ - -let c1; + +let c1; let c2; let c1data = { @@ -9,7 +9,7 @@ let c1data = { { label: "Locuteurs francophones et autres", data: [33, 66], - backgroundColor: ["#00B1B2","#C6EFEF"] + backgroundColor: ["#00B1B2", "#C6EFEF"] } ] } @@ -29,7 +29,7 @@ c1 = new Chart( plugins: { legend: { position: "right" - }, + }, labels: [ { display: false @@ -50,8 +50,8 @@ c1 = new Chart( textMargin: 4 }, ] - - } + + } } } ); @@ -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"] } ] } @@ -82,7 +82,7 @@ c2 = new Chart( plugins: { legend: { position: "right" - }, + }, labels: [ { display: false @@ -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(); -}) - +}); diff --git a/prototypes/franco-country-profiles/chart-v3.js b/prototypes/franco-country-profiles/chart-v3.js new file mode 100644 index 00000000..bdbeb686 --- /dev/null +++ b/prototypes/franco-country-profiles/chart-v3.js @@ -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); + +}); diff --git a/prototypes/franco-country-profiles/country-profiles-en-v2.html b/prototypes/franco-country-profiles/country-profiles-en-v2.html index 6cd1b4a3..6e307354 100644 --- a/prototypes/franco-country-profiles/country-profiles-en-v2.html +++ b/prototypes/franco-country-profiles/country-profiles-en-v2.html @@ -71,23 +71,22 @@

Algérie

-
+
Population totale 2023 :
-
46,2 millions
+
46,2 millions
Population active :
- -

La tranche d'âge des 15 à 64 ans regroupe 78,2 % de la population

+

78,2 % de la population totale ont 15 à 64 ans

Langue(s) officielle(s) du pays :
Arabe et Tamazight
-
PIB :
+
PIB (produit intérieur brut) :
239,9 Milliards USD (2023)
Âge moyen :
28.2 ans (2023)
Niveau moyen d’éducation :
-
Modéré
+
12 années
Salaire moyen mensuel :
En 2021, il était de 42 800 DA (~ 437,89 $ CAN):
    @@ -98,7 +97,7 @@

    Algérie

-
+
Locuteurs francophones et autres langues
@@ -219,7 +218,7 @@

Info complémentaire

- +
@@ -232,11 +231,15 @@

Info complémentaire

+ - + + \ No newline at end of file diff --git a/prototypes/franco-country-profiles/country-profiles-en-v3.html b/prototypes/franco-country-profiles/country-profiles-en-v3.html new file mode 100644 index 00000000..47de641f --- /dev/null +++ b/prototypes/franco-country-profiles/country-profiles-en-v3.html @@ -0,0 +1,243 @@ + + + + + + + + + + Francophone Immigration: Country profiles - Canada.ca + + + + + + + + + + + + + +
+ + +
+
+
+
+

Francophone Immigration: Country profiles

+

Canadian employers can look for French speaking countries to source foreign francophone workers

+
+
+
+
+ + + +
+

Country list

+
+

Choose a country

+ + +
+ +
+
+

Algérie

+ +
+
+
+
+
+
Population totale 2023 :
+
46,2 millions
+
Population active :
+
+ +

La tranche d'âge des 15 à 64 ans regroupe 78,2 % de la population

+
+
Langue(s) officielle(s) du pays :
+
Arabe et Tamazight
+
PIB :
+
239,9 Milliards USD (2023)
+
Âge moyen :
+
28.2 ans (2023)
+
Niveau moyen d’éducation :
+
12 années
+
Salaire moyen mensuel :
+
En 2021, il était de 42 800 DA (~ 437,89 $ CAN): +
    +
  • 60 100 DA (~ 614,90 $ CAN) dans le public
    • +
  • 34 900 DA (~ 357,06 $ CAN) dans le privé
    • +
+
+
+
+
+
+
+
Locuteurs francophones et autres langues
+ + + +
+ Locuteurs francophones et autres langues - Tableaux + + + + + + + + + + + + + + + + + +
Locuteurs
Francophones33%
Autres66%
+
+
+
+

Locuteurs francophones et autres langues

+
+
+

Le français est enseigné de l’école primaire à l’université, et utilisé sur le lieu de travail comme moyen de communication.

+

Depuis quelques années, l’anglais s’impose progressivement dans l’environnement algérien.

+
+
+
+
+ +
Répartition des secteurs
+ +
+ Répartition des secteurs - Table + + + + + + + + + + + + + + + + + + + + + +
Répartion des secteurs
Primaire10,3%
Secondaire31%
Tertaire58,6%
+
+
+ + +
+ +
+
+ +
+
+

Principaux secteurs d’activités prédominants

+
    +
  1. Industrie pétrolière et gazière
    2. +
  2. Agriculture - pêche et production connexe
    3. +
  3. Finance - Banque - Assuranc
    4. +
  4. Transport - Industrie automobile et mécanique
    5. +
  5. Technologie de l’information et des communications
    6. +
+
+
+

Info complémentaire

+
+
Nom du pays:
+
République algérienne démocratique et populaire
+
Langue(s) officielle(s) du pays:
+
La langue Tamazight est devenue une langue
+
% locuteurs francophones et anglophones:
+
+

Le français est enseigné de l’école primaire à l’université, et utilisé sur le lieu de travail comme moyen de communication.

+

Depuis quelques années, l’anglais s’impose progressivement dans l’environnement algérien.

+
+
+
+
+
+ +
+
+
+

+
+
+

+ Algeria country profile + (PDF, 273 KB) +

+
+
+
+ +
+
+ + + + + +
+ + +
+ + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/prototypes/franco-country-profiles/custom.css b/prototypes/franco-country-profiles/custom.css index 94b98a35..b904ca87 100644 --- a/prototypes/franco-country-profiles/custom.css +++ b/prototypes/franco-country-profiles/custom.css @@ -63,6 +63,19 @@ #pop-active { display: block; border-radius: 8px; - width: 100%; min-height: 65px; +} + +.icon-counter { + display: block; + width: 100%; + color: #acacac; + padding-top: 15px; +} +.icon-counter .active { + color: #00B1B2; +} + +.text-primary { + color: #00B1B2; }/*# sourceMappingURL=custom.css.map */ \ No newline at end of file