get data from all envs

static/js/custom.js

@@ -158,5 +158,85 @@ function readingTime() {
     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.grid.tf/stats?status=standby",
+  "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,70 +1,63 @@
 {% 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">
-                    <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">
-                    <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">
-                    <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">
-                   <img class="mx-auto p-4" src="images/V3-11.png" width="150" alt="">
+                    <img
-                <div class="leading-none font-extrabold text-3xl">
+                        class="mx-auto p-4"
-                {{ cores | num_format }}
+                        src="images/V3-11.png"
+                        width="150"
+                        alt=""
+                    >
+                    <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 class="my-8"><a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">Explore
+            </button>
-                    ThreeFold Grid Capacity</a></button>
         </div>
     </div>
 </section>
-{% endif %}
 <style>
     dd {
         display: inline-block;