From 5d00d9ebd0d61089d0a9e9ff000b11c65932e0db Mon Sep 17 00:00:00 2001 From: samaradel Date: Mon, 4 Mar 2024 17:05:25 +0200 Subject: [PATCH] fix grid stats --- static/js/custom.js | 139 ++++++++++++++++++++++----- templates/shortcodes/grid_stats.html | 92 +++++++++--------- 2 files changed, 160 insertions(+), 71 deletions(-) diff --git a/static/js/custom.js b/static/js/custom.js index 0fc7f994e..0f63e1c7d 100644 --- a/static/js/custom.js +++ b/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 () { - menuElement.className = menuElement.className + " hidden"; - }, 300); + btn.lastElementChild.className = btn.lastElementChild.className.replace( + "rotate-0", + "-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(); diff --git a/templates/shortcodes/grid_stats.html b/templates/shortcodes/grid_stats.html index 8a970d026..9f35673a8 100644 --- a/templates/shortcodes/grid_stats.html +++ b/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 %}
{{body | markdown | safe }} -
- - -
- -
- {{ capacity | round(precision=2) }}PB +
+ +
capacity
-
- - -
- -
- {{ nodes }} +
+ +
nodes
-
- - - -
- -
- {{ countries }} +
+ +
countries
-
- - -
- -
- {{ cores | num_format }} - cores + +
+ +
+ cores
- - -
- - - + +
-{% endif %} \ No newline at end of file +