Rediseño rankings por safeScore, generación de json de territorios con safeScore para poder ordenar (#130)

* Rediseño rankings por safeScore, generación de json de territorios con safeScore para poder ordenar * Update pages/ranking.njk Co-authored-by: Guido García <palmerabollo@gmail.com>
2024-05-29 10:43:27 +02:00 · 2021-02-13 21:26:38 +01:00 · 2021-02-13 21:26:38 +01:00 · fe52bb1d04
commit fe52bb1d04
parent 109715c479
4 changed files with 146 additions and 74 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -5,18 +5,34 @@ const fs = require("fs");
 // y que aparezcan al final al ordenar de menos a más seguro.
 const NO_SCORE = 9000;

+const getSafeScore = (value) => {
+  let safe = value.filter((v) => v.score > 69 && v.score < NO_SCORE).length;
+  let safeScore = (safe * 100) / value.length;
+  return safeScore.toFixed(0);
+};
+
+const filterByTerritorioId = (value, territorio_id) =>
+  value.filter((v) => v.territorio_id === territorio_id);
+
+const filenameToData = (f) => ({
+  file: JSON.parse(fs.readFileSync(f, "utf8")),
+  id: /^_data.*\/(.*)\.json$/.exec(f)[1],
+});
+
 (function createGlobalDataFile() {
-  const files = glob.sync([
-    "_data/{comunidades,provincias}/*.json",
+  const territoriesLevel1 = glob.sync("_data/comunidades/*.json");
+  const territoriesLevel2 = glob.sync("_data/provincias/*.json");
+
+  const files = [
+    ...territoriesLevel1,
+    ...territoriesLevel2,
    "_data/general.json",
-  ]);
-  let all = files
-    .map((f) => ({
-      file: JSON.parse(fs.readFileSync(f, "utf8")),
-      territorio_id: /^_data.*\/(.*)\.json$/.exec(f)[1],
-    }))
-    .map(({ file, territorio_id }) => ({
-      territorio_id,
+  ];
+
+  const all = files
+    .map(filenameToData)
+    .map(({ file, id }) => ({
+      territorio_id: id,
      territorio: file.name,
      webs: file.webs,
    }))
@ -27,7 +43,7 @@ const NO_SCORE = 9000;
        url: web.url,
        name: web.name,
        twitter: web.twitter,
-        tags: web.tags
+        tags: web.tags,
      }))
    )
    .flat()
@ -36,7 +52,10 @@ const NO_SCORE = 9000;
      try {
        results = JSON.parse(
          fs.readFileSync(
-            `_data/results/${obj.url.replace(new RegExp("\\.", "g"), "!")}.json`,
+            `_data/results/${obj.url.replace(
+              new RegExp("\\.", "g"),
+              "!"
+            )}.json`,
            "utf8"
          )
        );
@ -57,6 +76,28 @@ const NO_SCORE = 9000;
    }));

  fs.writeFileSync("_data/all.json", JSON.stringify(all));
+
+  const territories = territoriesLevel1
+    .map(filenameToData)
+    .map(({ file, id }) => ({
+      name: file.name,
+      id,
+    }))
+    .map(({ name, id }) => ({
+      name,
+      id,
+      safeScore: getSafeScore(filterByTerritorioId(all, id)),
+      subTerritories: territoriesLevel2
+        .map(filenameToData)
+        .filter(({ file }) => id === file.comunidad)
+        .map(({ file, id }) => ({ id, ...file }))
+        .map(({ name, id }) => ({
+          name,
+          safeScore: getSafeScore(filterByTerritorioId(all, id)),
+        })),
+    }));
+
+  fs.writeFileSync("_data/territories.json", JSON.stringify(territories));
 })();

 module.exports = function (eleventyConfig) {
@ -118,27 +159,25 @@ module.exports = function (eleventyConfig) {
    value.filter((v) => v.tests_passed < testsPassed)
  );

-  eleventyConfig.addFilter(
-    "scoreGt", (value, score) => value.filter((v) => v.score > score && v.score < NO_SCORE)
+  eleventyConfig.addFilter("scoreGt", (value, score) =>
+    value.filter((v) => v.score > score && v.score < NO_SCORE)
  );

-  eleventyConfig.addFilter(
-    "tagged", (value, tag) => value.filter((v) => {
+  eleventyConfig.addFilter("tagged", (value, tag) =>
+    value.filter((v) => {
      return v.tags && v.tags.indexOf(tag.name) >= 0;
    })
  );

-  // Devolvemos el safeScore, o % de webs seguras
-  eleventyConfig.addFilter(
-    "safeScore",
-    (value) => {
-        let safe = value.filter((v) => v.score > 69 && v.score < NO_SCORE).length
-        let safeScore = (safe * 100)/value.length
-        return safeScore.toFixed(0);
-    }
-  );
+  // % de webs seguras
+  eleventyConfig.addFilter("safeScore", getSafeScore);

-  eleventyConfig.addFilter("filterByTerritorioId", (value, territorio_id) =>
-    value.filter((v) => v.territorio_id === territorio_id)
+  eleventyConfig.addFilter("filterByTerritorioId", filterByTerritorioId);
+
+  eleventyConfig.addFilter("getSubTerritories", (value) =>
+    value.reduce(
+      (previous, current) => [...previous, ...current.subTerritories],
+      []
+    )
  );
 };
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 _site
 node_modules
 _data/all.json
+_data/territories.json
 assets/css
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -162,12 +162,12 @@ p.subtitle {
    border-radius: 5px;
    background: #f25757;

-      .score-progress {
-        position: absolute;
-        height: 12px;
-        background: #34ca96;
-        border-radius: 5px 0 0 5px;
-      }
+    .score-progress {
+      position: absolute;
+      height: 12px;
+      background: #34ca96;
+      border-radius: 5px 0 0 5px;
+    }
  }

  p {
@ -177,14 +177,6 @@ p.subtitle {
  }
 }

-#ranking-provincial {
-  column-count: 2;
-
-  .score-container {
-    margin: 1em 0;
-  }
-}
-
 p.centered {
  text-align: center;
 }
@ -199,13 +191,13 @@ p.featured .emoticon {
 }

 p.featured .cta-twitter {
-    background-color: rgb(29, 161, 242);
-    color: #FFF;
-    padding: 4px;
-    border-radius: 3px;
-    display: block;
-    max-width: 600px;
-    margin: auto;
+  background-color: rgb(29, 161, 242);
+  color: #fff;
+  padding: 4px;
+  border-radius: 3px;
+  display: block;
+  max-width: 600px;
+  margin: auto;
 }

 #resultados table {
@ -228,7 +220,7 @@ p.tablefooter {
 }

 #score {
-  color: #FFF;
+  color: #fff;
  font-weight: bold;
  font-size: 80px;
  width: 128px;
@ -241,7 +233,7 @@ p.tablefooter {
  border: 6px solid;
 }

-@include breakpoint('<=small') {
+@include breakpoint("<=small") {
  #score {
    width: 80px;
    height: 80px;
@ -274,14 +266,27 @@ p.tablefooter {
 }

 img[src*="#thumbnail"] {
-   width:250px;
-   display: block;
-   float: left;
-   padding-right: 1em;
+  width: 250px;
+  display: block;
+  float: left;
+  padding-right: 1em;

-   @include breakpoint('<=small') {
-     float:none;
-     margin: auto;
-     width: 100%;
-   }
+  @include breakpoint("<=small") {
+    float: none;
+    margin: auto;
+    width: 100%;
+  }
+}
+
+.score-list-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 3em;
+
+  .score-container {
+    flex: 1;
+    min-width: 300px;
+    margin: 0 0.5em 1em;
+  }
 }
--- a/pages/ranking.njk
+++ b/pages/ranking.njk
@ -11,16 +11,28 @@ title: "Ranking: Las mejores y las peores webs"
  -
  {{ title }}</p>

-<h1>🏆 {{ title }}</h1>
+<h1>🏆
+  {{ title }}</h1>

 <ul>
-  <li><a href="#hall-of-fame">🎖️ Hall de la fama</a></li>
-  <li><a href="#hall-of-shame">☠️ Hall de la vergüenza</a></li>
-  <li><a href="#ranking-provincial">📊 Ranking provincial</a></li>
+  <li>
+    <a href="#hall-of-fame">🎖️ Hall de la fama</a>
+  </li>
+  <li>
+    <a href="#hall-of-shame">☠️ Hall de la vergüenza</a>
+  </li>
+  <li>
+    <a href="#ranking-provincial">📊 Ranking provincial</a>
+  </li>
+  <li>
+    <a href="#ranking-autonomico">📊 Ranking autonómico</a>
+  </li>
  <li>🏷️ Rankings temáticos:
-  {% for tag in tags %}
-    <a href="/l/{{ tag.name }}">{{ tag.name }}</a>{% if not loop.last %}, {% endif %}
-  {% endfor %}
+    {% for tag in tags %}
+      <a href="/l/{{ tag.name }}">{{ tag.name }}</a>
+      {% if not loop.last %},
+      {% endif %}
+    {% endfor %}
  </li>
 </ul>

@ -36,14 +48,29 @@ title: "Ranking: Las mejores y las peores webs"
  </div>

  <h2>📊 Ranking provincial</h2>
-  <div class="table-wrapper" id="ranking-provincial">
-      {% for code, p in provincias %}
-        <div class="score-container" title="{{ all | filterByTerritorioId(code)| safeScore }}% de las webs completamente seguras">
-          <a href="/p/{{ code }}/">{{ p.name }}</a>
-          <div class="score-bar">
-            <div class="score-progress" data-score="{{ all | filterByTerritorioId(code)| safeScore }}"></div>
-          </div>
+  <p>Porcentajes de sitios provinciales o locales seguros.</p>
+  <div class="score-list-wrapper" id="ranking-provincial">
+    {% for p in territories | getSubTerritories | sort(reverse = true, attribute = 'safeScore') %}
+      <div class="score-container" title="{{ p.safeScore }}% de las webs suficientemente seguras">
+        <a href="/p/{{ p.id }}/">{{ p.name }}</a>
+        <div class="score-bar">
+          <div class="score-progress" data-score="{{ p.safeScore }}"></div>
        </div>
-      {% endfor %}
+      </div>
+    {% endfor %}
  </div>
+
+  <h2>📊 Ranking autonómico</h2>
+  <p>Porcentajes de sitios autonómicos seguros.</p>
+  <div class="score-list-wrapper" id="ranking-autonomico">
+    {% for c in territories | sort(reverse = true, attribute = 'safeScore') %}
+      <div class="score-container" title="{{ c.safeScore }}% de las webs suficientemente seguras">
+        <a href="/c/{{ c.id }}/">{{ c.name }}</a>
+        <div class="score-bar">
+          <div class="score-progress" data-score="{{ c.safeScore }}"></div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+
 </section>