small fixes

com-480-data-visualization · May 31, 2024 · 2629bb7 · 2629bb7
1 parent 766b2a1
commit 2629bb7
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 34 deletions.
diff --git a/website/resources/process_index.js b/website/resources/process_index.js
diff --git a/website/resources/process_results.js b/website/resources/process_results.js
@@ -150,10 +150,14 @@ function generateBlocPartyRecomm(voteInfo, lang) {
 
 function localResultsCanton(infoFederalElection, cantonCode) {
     const ret = [];
+    const relevanceThreshold = 4;
+
     for (const partyInfo of infoFederalElection) {
         const partyAcronym = partyInfo["partei_bezeichnung_de"];
         const percentage = partyInfo["partei_staerke"][cantonCode];
-        if (partyAcronym in nameFromAcronym[lang] && percentage >= 4) ret.push({x: nameFromAcronym[lang][partyAcronym], y: percentage, fillColor: colorFromAcronym[partyAcronym]});
+
+        if (partyAcronym in nameFromAcronym[lang] && percentage >= relevanceThreshold)
+            ret.push({x: partyAcronym, y: percentage, fillColor: colorFromAcronym[partyAcronym]});
     }
 
     ret.sort((a, b) => b["y"]-a["y"]);
@@ -165,21 +169,18 @@ function getTheme(voteInfo, lang) {
     return [themes[lang][voteInfo["d1e1"]], themes[lang][voteInfo["d1e2"]], themes[lang][voteInfo["d1e3"]]];
 }
 
-function getLongTitle(voteInfo, lang) {
-    return (voteInfo["titre_complet_"+lang] || voteInfo["titre_complet_fr"]);
-}
-
 function writeBlurb(voteInfo, lang) {
     const blurbContent = "blurb-content";
     const theme = {"en": "Theme:", "fr": "Thème :", "de": "Politikbereich:"};
     const brochure = {"en": "Brochure", "fr": "Brochure", "de": "Broschüre"};
 
-    addInnerHTML(blurbContent, `<h2 class="font-semibold hyphens-auto" lang="${lang}">${getLongTitle(voteInfo, lang)}</h2>`);
+    addInnerHTML(blurbContent, `<h2 class="font-semibold hyphens-auto" lang="${lang}">${voteInfo["titre_complet_"+lang]}</h2>`);
     addInnerHTML(blurbContent, voteInfo["date"]);
     addInnerHTML(blurbContent, '<br/><br/>');
     addInnerHTML(blurbContent, `<h3 class="font-semibold hyphens-auto" lang="${lang}">${theme[lang]}`);
     for (const themeName of getTheme(voteInfo, lang))
         if (themeName) addInnerHTML(blurbContent, `<br/>&gt; ${themeName}`);
+
     addInnerHTML(blurbContent, "</h3>\n<br/>");
     addInnerHTML(blurbContent, `<a href="${voteInfo["swissvoteslink"]}/brochure-${(['fr', 'de'].includes(lang)) ? lang : 'fr'}.pdf" target="_blank"><div class="w-10/12 rounded-full text-center py-2 mx-auto text-white" style="background: #da291c;">${brochure[lang]}</div></a>`);
     if (voteInfo["easyvideo_fr"])
@@ -290,8 +291,12 @@ chart: {
     height: "100%"
 },
 title: {
-    text: {"en": "Results for the previous federal election", "fr": "Résultats de la précédente élection fédérale", "de": "Ergebnisse der letzten Bundestagswahl"}[lang] + ` (${cantonCode.toUpperCase()})`,
+    text: {"en": electionYear+" Federal Election", "fr": `Élection fédérale ${electionYear}`, "de": `Bundestagswahl ${electionYear}`}[lang] + ` (${cantonCode.toUpperCase()})`,
+    floating: 0,
     align: "center",
+    style: {
+        color: "#444"
+    }
 },
 plotOptions: {
     bar: {
@@ -303,33 +308,54 @@ plotOptions: {
     },
 },
 tooltip: {
+    x: {
+        formatter: function(val) {
+            return nameFromAcronym[lang][val];
+        }
+    },
+    y: {
+        formatter: function(val) {
+            return val.toFixed(1) + "%";
+        }
+    },
     shared: true,
+    fillSeriesColor: false,
     intersect: false,
+    marker: false,
     style: {
     fontFamily: "Helvetica, Arial, sans-serif",
     },
 },
-states: {
-    hover: {
-    filter: {
-        type: "darken",
-        value: 1,
-    },
-    },
-},
 grid: {
-    show: false,
+    show: true,
     strokeDashArray: 4,
 },
 dataLabels: {
     enabled: true,
-    textAnchor: "middle",
-    formatter: function (val, opts) {
-    return val.toFixed(1) + "%";
+    formatter: function(val) {
+        return val.toFixed(1) + "%";
+    },
+    background: {
+        enabled: true,
+        foreColor: '#fff',
+        padding: 4,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#fff',
+        opacity: 0.9,
+        dropShadow: {
+          enabled: false,
+          top: 1,
+          left: 1,
+          blur: 1,
+          color: '#000',
+          opacity: 0.45
+        }
     },
+    textAnchor:"middle",
     style: {
-    fontFamily: 'Helvetica, Aria, sans-serif',
-    cssClass: "text-xl font-bold"
+        fontSize: "13px",
+        colors: ["#304758"]
     }
 },
 legend: {
@@ -339,12 +365,15 @@ xaxis: {
     type: "category",
     floating: false,
     labels: {
-    show: false,
-    style: {
-        fontFamily: "Inter, sans-serif",
-        fontWeight: "bold",
-        cssClass: 'text-xs font-bold fill-gray-500 dark:fill-gray-400'
-    }
+        show: true,
+        style: {
+            fontFamily: "Inter, sans-serif",
+            fontWeight: "bold",
+            cssClass: 'text-xs font-bold text-gray-700 dark:text-gray-400'
+        },
+        formatter: function(val){
+            return val.toUpperCase();
+        }
     },
     axisBorder: {
     show: false,
@@ -360,7 +389,7 @@ fill: {
     opacity: 1,
 },
 series: [{
-    name: {"en": "Results for the previous federal election", "fr": "Résultats de la précédente élection fédérale", "de": "Ergebnisse der letzten Bundestagswahl"}[lang] + ` (${cantonCode.toUpperCase()})`,
+    name: electionYear,
     data: localResultsCanton(infoFederalElection, cantonCode)
 }],
 };

diff --git a/website/results.html b/website/results.html
@@ -56,8 +56,7 @@
 
       <!-- Federal Election chart -->
       <div class="border-4 border-black rounded-3xl" id="column-chart-container">
-         <div class="h-96" id="column-chart"></div>
-         <span class="text-center" id="election-year"></span>
+         <div class="h-80" id="column-chart"></div>
       </div>
     </div>
 
@@ -74,7 +73,7 @@
         <span id="title"></span>
       </header>
 
-      <!-- Je suis la carte -->
+      <!-- Map -->
       <div class="map-wrapper">
          <div class="map-title">
            <button title="Close the canton">
@@ -112,7 +111,7 @@
       <div class="block border-2 border-black w-72 mx-auto" id="party-recommendations">
       </div>
 
-      <div class="border-4 border-black w-14 h-8 mx-auto relative" id="toggle-sim">
+      <div class="border-4 border-black w-14 h-8 mx-auto relative" id="toggle-sim" title="Résultat simulé">
         <script>
           document.write(`<a href="results.html?refId=${refId}&lang=${lang}&simulated=${(simResult) ? 0 : 1}">`);
           document.write(`  <div class="absolute ${(simResult) ? "h-10 w-10" : "h-8 w-8"} rounded-full border-4 border-black bg-slate-300 my-auto cursor-pointer" style="${(simResult) ? "top:-8px; right:-12px;" : "top:-4px;left:-4px;"}"></div>`);