fix grid stats

static/js/custom.js

@@ -3,19 +3,6 @@ var hamburgerShown = false;
 let width = screen.width;
 var isMobile = width < 1024;
 
-function readingTime() {
-  let articles = document.querySelectorAll(".article");
-  let times = document.querySelectorAll(".time");
-  const wpm = 225;
-  let words;
-  for (var i = 0; i < articles.length; i++) {
-    words = articles[i].innerText.trim().split(/\s+/).length;
-    let time = Math.ceil(words / wpm);
-    times[i].innerText = `${time} minute read`;
-  }
-}
-readingTime();
-
 function toggleMenu(button) {
   if (displayedMenu === button.id.split("-")[0]) {
     button.className = button.className.replace(
@@ -40,6 +27,17 @@ function toggleMenu(button) {
     );
     displayedMenu = button.id.split("-")[0];
   }
+
+  document.addEventListener("click", function (e) {
+    if (!button.contains(e.target)) {
+      hideMenu(button.id.split("-")[0]);
+      button.lastElementChild.className = button.lastElementChild.className.replace(
+        "rotate-0",
+        "-rotate-90"
+      );
+      displayedMenu = "";
+    }
+  });
 }
 
 function handleClick(button) {
@@ -88,13 +86,19 @@ function showMenu(menuName) {
 function hideMenu(menuName) {
   var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
   var menuElement = document.getElementById(menuId);
+  var btnId = `${menuElement.id}-btn`;
+  let btn = document.getElementById(btnId);
   menuElement.className = menuElement.className.replace(
     "duration-150 ease-out opacity-1 -translate-y-0",
     "duration-200 ease-in opacity-0 -translate-y-1"
   );
-  setTimeout(function () {
+  btn.lastElementChild.className = btn.lastElementChild.className.replace(
-    menuElement.className = menuElement.className + " hidden";
+    "rotate-0",
-  }, 300);
+    "-rotate-90"
+  );
+  if (!menuElement.classList.contains("hidden")) {
+    menuElement.classList.add("hidden");
+  }
 }
 
 function showHamburger() {
@@ -119,6 +123,7 @@ function hideHamburger() {
     hideMenu(displayedMenu);
   }
 }
+
 function toggleFilter() {
   var filterMenu = document.getElementById("filter-menu");
   if (filterMenu.className.includes("hidden")) {
@@ -136,16 +141,102 @@ window.onload = function () {
       handleClick(button);
     });
   });
-  if (document.getElementById("filter-btn")) {
-    document
-      .getElementById("filter-btn")
-      .addEventListener("click", toggleFilter);
-    document
-      .getElementById("mobile-learn-btn")
-      .addEventListener("click", toggleMenu);
-  }
 };
 
 function openInNewTab(url) {
   window.open(url, "_blank").focus();
 }
+
+function readingTime() {
+  let articles = document.querySelectorAll(".article");
+  let times = document.querySelectorAll(".time");
+  const wpm = 225;
+  let words;
+  for (var i = 0; i < articles.length; i++) {
+    words = articles[i].innerText.trim().split(/\s+/).length;
+    let time = Math.ceil(words / wpm);
+    times[i].innerText = `${time} minute read`;
+  }
+}
+
+const urls = [
+  "https://gridproxy.grid.tf/stats?status=up",
+  "https://gridproxy.dev.grid.tf/stats?status=up",
+  "https://gridproxy.test.grid.tf/stats?status=up",
+  "https://gridproxy.bknd1.ninja.tf/stats?status=standby", // will change to mainnet when release
+  "https://gridproxy.dev.grid.tf/stats?status=standby",
+  "https://gridproxy.test.grid.tf/stats?status=standby",
+];
+
+async function getStats() {
+  try {
+    const stats = await Promise.all(
+      urls.map((url) => fetch(url).then((resp) => resp.json()))
+    );
+    return mergeStatsData(stats);
+  } catch (error) {
+    throw new Error(
+      `Failed to retrieve data from network statistics: ${error}`
+    );
+  }
+}
+
+function mergeStatsData(stats) {
+  const res = stats[0];
+  for (let i = 1; i < stats.length; i++) {
+    res.nodes += stats[i].nodes;
+    res.totalCru += stats[i].totalCru;
+    res.totalHru += stats[i].totalHru;
+    res.totalSru += stats[i].totalSru;
+    res.nodesDistribution = mergeNodeDistribution([
+      res.nodesDistribution,
+      stats[i].nodesDistribution,
+    ]);
+    res.countries = Object.keys(res.nodesDistribution).length;
+  }
+  let capacity = toTeraOrGiga(res.totalHru + res.totalSru);
+  document.getElementById("capacity").innerHTML = capacity;
+  document.getElementById("nodes").innerHTML = res.nodes;
+  document.getElementById("countries").innerHTML = res.countries;
+  document.getElementById("cores").innerHTML = res.totalCru
+    .toString()
+    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+function mergeNodeDistribution(stats) {
+  const keys = new Set(stats.map((obj) => Object.keys(obj)).flat());
+
+  return Array.from(keys).reduce((res, key) => {
+    res[key] = 0;
+    stats.forEach((country) => {
+      res[key] += country[key] ?? 0;
+    });
+    return res;
+  }, {});
+}
+
+function toTeraOrGiga(value) {
+  const giga = 1024 ** 3;
+
+  if (!value) return "0";
+
+  const val = +value;
+  if (val === 0 || isNaN(val)) return "0";
+
+  if (val < giga) return val.toString();
+
+  let gb = val / giga;
+
+  if (gb < 1024) return `${gb.toFixed(2)} GB`;
+
+  gb = gb / 1024;
+
+  if (gb < 1024) return `${gb.toFixed(2)} TB`;
+
+  gb = gb / 1024;
+  return `${gb.toFixed(2)} PB`;
+}
+
+readingTime();
+getStats();
+document.getElementById("year").innerHTML = new Date().getFullYear();

templates/shortcodes/grid_stats.html

@@ -1,69 +1,67 @@
 {% set styles = "background-image: url('images/V3.png');" %}
-{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
-{% if data %}
-{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
-{% set nodes = data.nodes %}
-  {% set countries = data.countries %}
-  {% set cores = data.totalCru %}
-{% endif %}
-
-{% if data %}
 <section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
     <div class="relative lg:max-w-6xl mx-auto">
         <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
             {{body | markdown | safe }}
-
             <div class="my-10 grid lg:grid-cols-4 lg:gap-8">
-                
-
                 <!-- capacity -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="images/V3-08.png" width="150" alt="">
+                    <img
-                <div class="leading-none font-extrabold text-3xl">
+                        class="mx-auto p-4"
-                    {{ capacity | round(precision=2) }}PB
+                        src="images/V3-08.png"
+                        width="150"
+                        alt=""
+                    >
+                    <div id="capacity" class="leading-none font-extrabold text-3xl"></div>
                     <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
                 </div>
-            </div>
-                
-
                 <!-- Nodes -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="images/V3-09.png" width="150" alt="">
+                    <img
-                <div class="leading-none font-extrabold text-3xl">
+                        class="mx-auto p-4"
-                    {{ nodes }}
+                        src="images/V3-09.png"
+                        width="150"
+                        alt=""
+                    >
+                    <div id="nodes" class="leading-none font-extrabold text-3xl"></div>
                     <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
                 </div>
-            </div>
-                
-                
-
                 <!-- countries -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="images/V3-10.png" width="150" alt="">
+                    <img
-                <div class="leading-none font-extrabold text-3xl">
+                        class="mx-auto p-4"
-                    {{ countries }}
+                        src="images/V3-10.png"
+                        width="150"
+                        alt=""
+                    >
+                    <div id="countries" class="leading-none font-extrabold text-3xl"></div>
                     <span class="block text-lg mt-4 font-normal capitalize">countries</span>
                 </div>
-            </div>
+                <!-- cores -->
-
+                <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-              <!-- cores -->
+                    <img
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                        class="mx-auto p-4"
-                   <img class="mx-auto p-4" src="images/V3-11.png" width="150" alt="">
+                        src="images/V3-11.png"
-                <div class="leading-none font-extrabold text-3xl">
+                        width="150"
-                {{ cores | num_format }}
+                        alt=""
-                <span class="block text-lg mt-4 font-normal capitalize">cores</span>
+                    >
+                    <div id="cores" class="leading-none font-extrabold text-3xl"></div>
+                    <span class="block text-lg mt-4 font-normal capitalize">cores</span>
                 </div>
             </div>
-
+            <button class="my-8">
- 
+                <a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">
-            </div>
+                    Explore ThreeFold Grid Capacity
-            
+                </a>
-        <button><a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">Explore Grid Capacity</a></button>
+            </button>
-        <button><a href="/host">Become a Host</a></button>
+            <button class="my-8">
+                <a href="/farm" target="_self">
+                    Become a Cloud Provider
+                </a>
+            </button>
         </div>
     </div>
 </section>
-{% endif %}
 <style>
     dd {
         display: inline-block;