fix grid stats
This commit is contained in:
samaradel
@@ -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();
|
||||
|
||||
@@ -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">
|
||||
<img class="mx-auto p-4" src="images/V3-08.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ capacity | round(precision=2) }}PB
|
||||
<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=""
|
||||
>
|
||||
<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="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ 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=""
|
||||
>
|
||||
<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="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ 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=""
|
||||
>
|
||||
<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="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ cores | num_format }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">cores</span>
|
||||
<!-- 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=""
|
||||
>
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<button><a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">Explore Grid Capacity</a></button>
|
||||
<button><a href="/host">Become a Host</a></button>
|
||||
<button class="my-8">
|
||||
<a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">
|
||||
Explore ThreeFold Grid Capacity
|
||||
</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;
|
||||
@@ -79,4 +77,4 @@
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user