Skip to content

Commit

Permalink
feat: status section
Browse files Browse the repository at this point in the history
  • Loading branch information
@akurilov
akurilov committed Mar 12, 2024
1 parent ea47351 commit 67a6e44
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 25 deletions.
2 changes: 1 addition & 1 deletion web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1040,7 +1040,7 @@ <h1 class="text-3xl font-semibold capitalize lg:text-4xl justify-center text-cen
<div class="grid grid-cols-4 sm:text-center p-1 sm:p-2 space-x-2 sm:space-y-2">
<div class="col-span-4 text-xl">
<p>Active Reader Streams</p>
<p class="text-neutral-400 dark:text-neutral-600 text-sm">All active subscription readers.</p>
<p class="text-neutral-400 dark:text-neutral-600 text-sm">All subscriptions being read.</p>
</div>
<div class="text-neutral-600 dark:text-neutral-400 text-center">
<p>Current</p>
Expand Down
68 changes: 44 additions & 24 deletions web/status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,28 @@ async function loadStatus() {
if (data) {

const evtCountCurrent = data.eventsSubmitted.current;
document.getElementById("evt-count-curr").innerHTML = `${formatNumberShort(evtCountCurrent)}`;
if (evtCountCurrent > 0) {
document.getElementById("evt-count-curr").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">${formatNumberShort(evtCountCurrent)}</span>`;
} else {
document.getElementById("evt-count-curr").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(evtCountCurrent)}</span>`;
}
const evtCount1hChange = evtCountCurrent - data.eventsSubmitted.past.hour;
if (evtCount1hChange > 0) {
document.getElementById("evt-count-1h").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(evtCount1hChange)}</span>`;
} else {
document.getElementById("evt-count-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">${evtCount1hChange === 0 ? '': '-'}${formatNumberShort(evtCount1hChange)}</span>`;
document.getElementById("evt-count-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(evtCount1hChange)}</span>`;
}
const evtCount1dChange = evtCountCurrent - data.eventsSubmitted.past.day;
if (evtCount1dChange > 0) {
document.getElementById("evt-count-1d").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(evtCount1dChange)}</span>`;
} else {
document.getElementById("evt-count-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">${evtCount1dChange === 0 ? '': '-'}${formatNumberShort(evtCount1dChange)}</span>`;
document.getElementById("evt-count-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(evtCount1dChange)}</span>`;
}
const evtCount1wChange = evtCountCurrent - data.eventsSubmitted.past.week;
if (evtCount1wChange > 0) {
document.getElementById("evt-count-1w").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(evtCount1wChange)}</span>`;
} else {
document.getElementById("evt-count-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">${evtCount1wChange === 0 ? '': '-'}${formatNumberShort(evtCount1wChange)}</span>`;
document.getElementById("evt-count-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(evtCount1wChange)}</span>`;
}

const evtQueueCurrent = data.queueLength.current;
Expand All @@ -39,131 +43,147 @@ async function loadStatus() {
}
const evtQueue1hChange = evtQueueCurrent - data.queueLength.past.hour;
if (evtQueue1hChange < 0) {
document.getElementById("evt-queue-1h").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">-${formatNumberShort(evtQueue1hChange)}</span>`;
document.getElementById("evt-queue-1h").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">${formatNumberShort(evtQueue1hChange)}</span>`;
} else if (evtQueue1hChange > 0) {
document.getElementById("evt-queue-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">+${formatNumberShort(evtQueue1hChange)}</span>`;
} else {
document.getElementById("evt-queue-1h").innerHTML = `${formatNumberShort(evtQueue1hChange)}`;
}
const evtQueue1dChange = evtQueueCurrent - data.queueLength.past.day;
if (evtQueue1dChange < 0) {
document.getElementById("evt-queue-1d").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">-${formatNumberShort(evtQueue1dChange)}</span>`;
document.getElementById("evt-queue-1d").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">${formatNumberShort(evtQueue1dChange)}</span>`;
} else if (evtQueue1dChange > 0) {
document.getElementById("evt-queue-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">+${formatNumberShort(evtQueue1dChange)}</span>`;
} else {
document.getElementById("evt-queue-1d").innerHTML = `${formatNumberShort(evtQueue1hChange)}`;
}
const evtQueue1wChange = evtQueueCurrent - data.queueLength.past.week;
if (evtQueue1wChange < 0) {
document.getElementById("evt-queue-1w").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">-${formatNumberShort(evtQueue1wChange)}</span>`;
document.getElementById("evt-queue-1w").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">${formatNumberShort(evtQueue1wChange)}</span>`;
} else if (evtQueue1wChange > 0) {
document.getElementById("evt-queue-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">+${formatNumberShort(evtQueue1wChange)}</span>`;
} else {
document.getElementById("evt-queue-1w").innerHTML = `${formatNumberShort(evtQueue1hChange)}`;
}

const subscriptionsCurrent = data.subscriptions.current;
document.getElementById("subscriptions-curr").innerHTML = `${formatNumberShort(subscriptionsCurrent)}`;
if (subscriptionsCurrent > 0) {
document.getElementById("subscriptions-curr").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">${formatNumberShort(subscriptionsCurrent)}</span>`;
} else {
document.getElementById("subscriptions-curr").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(subscriptionsCurrent)}</span>`;
}
const subscriptions1hChange = subscriptionsCurrent - data.subscriptions.past.hour;
if (subscriptions1hChange < 0) {
document.getElementById("subscriptions-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(subscriptions1hChange)}</span>`;
document.getElementById("subscriptions-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(subscriptions1hChange)}</span>`;
} else if(subscriptions1hChange > 0) {
document.getElementById("subscriptions-1h").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(subscriptions1hChange)}</span>`;
} else {
document.getElementById("subscriptions-1h").innerHTML = `${formatNumberShort(subscriptions1hChange)}</span>`;
}
const subscriptions1dChange = subscriptionsCurrent - data.subscriptions.past.day;
if (subscriptions1dChange < 0) {
document.getElementById("subscriptions-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(subscriptions1dChange)}</span>`;
document.getElementById("subscriptions-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(subscriptions1dChange)}</span>`;
} else if (subscriptions1dChange > 0) {
document.getElementById("subscriptions-1d").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(subscriptions1dChange)}</span>`;
} else {
document.getElementById("subscriptions-1d").innerHTML = `${formatNumberShort(subscriptions1dChange)}</span>`;
}
const subscriptions1wChange = subscriptionsCurrent - data.subscriptions.past.week;
if (subscriptions1wChange < 0) {
document.getElementById("subscriptions-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(subscriptions1wChange)}</span>`;
document.getElementById("subscriptions-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(subscriptions1wChange)}</span>`;
} else if (subscriptions1wChange > 0) {
document.getElementById("subscriptions-1w").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(subscriptions1wChange)}</span>`;
} else {
document.getElementById("subscriptions-1w").innerHTML = `${formatNumberShort(subscriptions1wChange)}</span>`;
}

const readersCurrent = data.telegramReaderChats.current;
document.getElementById("readers-curr").innerHTML = `${formatNumberShort(readersCurrent)}`;
if (readersCurrent > 0) {
document.getElementById("readers-curr").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">${formatNumberShort(readersCurrent)}</span>`;
} else {
document.getElementById("readers-curr").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(readersCurrent)}</span>`;
}
const readers1hChange = readersCurrent - data.telegramReaderChats.past.hour;
if (readers1hChange < 0) {
document.getElementById("readers-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(readers1hChange)}</span>`;
document.getElementById("readers-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(readers1hChange)}</span>`;
} else if (readers1hChange > 0) {
document.getElementById("readers-1h").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(readers1hChange)}</span>`;
} else {
document.getElementById("readers-1h").innerHTML = `${formatNumberShort(readers1hChange)}</span>`;
}
const readers1dChange = readersCurrent - data.telegramReaderChats.past.day;
if (readers1dChange < 0) {
document.getElementById("readers-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(readers1dChange)}</span>`;
document.getElementById("readers-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(readers1dChange)}</span>`;
} else if (readers1dChange > 0) {
document.getElementById("readers-1d").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(readers1dChange)}</span>`;
} else {
document.getElementById("readers-1d").innerHTML = `${formatNumberShort(readers1dChange)}</span>`;
}
const readers1wChange = readersCurrent - data.telegramReaderChats.past.week;
if (readers1wChange < 0) {
document.getElementById("readers-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(readers1wChange)}</span>`;
document.getElementById("readers-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(readers1wChange)}</span>`;
} if (readers1wChange > 0) {
document.getElementById("readers-1w").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(readers1wChange)}</span>`;
} else {
document.getElementById("readers-1w").innerHTML = `${formatNumberShort(readers1wChange)}</span>`;
}

const subscribersCurrent = data.uniqueSubscribers.current;
document.getElementById("subscribers-curr").innerHTML = `${formatNumberShort(subscribersCurrent)}`;
if (subscribersCurrent > 0) {
document.getElementById("subscribers-curr").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">${formatNumberShort(subscribersCurrent)}</span>`;
} else {
document.getElementById("subscribers-curr").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(subscribersCurrent)}</span>`;
}
const subscribers1hChange = subscribersCurrent - data.uniqueSubscribers.past.hour;
if (subscribers1hChange < 0) {
document.getElementById("subscribers-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(subscribers1hChange)}</span>`;
document.getElementById("subscribers-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(subscribers1hChange)}</span>`;
} if (subscribers1hChange > 0) {
document.getElementById("subscribers-1h").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(subscribers1hChange)}</span>`;
} else {
document.getElementById("subscribers-1h").innerHTML = `${formatNumberShort(subscribers1hChange)}</span>`;
}
const subscribers1dChange = subscribersCurrent - data.uniqueSubscribers.past.day;
if (subscribers1dChange < 0) {
document.getElementById("subscribers-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(subscribers1dChange)}</span>`;
document.getElementById("subscribers-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(subscribers1dChange)}</span>`;
} else if (subscribers1dChange > 0) {
document.getElementById("subscribers-1d").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(subscribers1dChange)}</span>`;
} else {
document.getElementById("subscribers-1d").innerHTML = `${formatNumberShort(subscribers1dChange)}</span>`;
}
const subscribers1wChange = subscribersCurrent - data.uniqueSubscribers.past.week;
if (subscribers1wChange < 0) {
document.getElementById("subscribers-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(subscribers1wChange)}</span>`;
document.getElementById("subscribers-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(subscribers1wChange)}</span>`;
} else if (subscribers1wChange > 0) {
document.getElementById("subscribers-1w").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(subscribers1wChange)}</span>`;
} else {
document.getElementById("subscribers-1w").innerHTML = `${formatNumberShort(subscribers1wChange)}</span>`;
}

const publishersCurrent = data.uniquePublishers.current;
document.getElementById("publishers-curr").innerHTML = `${formatNumberShort(publishersCurrent)}`;
if (publishersCurrent > 0) {
document.getElementById("publishers-curr").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">${formatNumberShort(publishersCurrent)}</span>`;
} else {
document.getElementById("publishers-curr").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(publishersCurrent)}</span>`;
}
const publishers1hChange = publishersCurrent - data.uniquePublishers.past.hour;
if (publishers1hChange < 0) {
document.getElementById("publishers-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(publishers1hChange)}</span>`;
document.getElementById("publishers-1h").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(publishers1hChange)}</span>`;
} if (publishers1hChange > 0) {
document.getElementById("publishers-1h").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(publishers1hChange)}</span>`;
} else {
document.getElementById("publishers-1h").innerHTML = `${formatNumberShort(publishers1hChange)}</span>`;
}
const publishers1dChange = publishersCurrent - data.uniquePublishers.past.day;
if (publishers1dChange < 0) {
document.getElementById("publishers-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(publishers1dChange)}</span>`;
document.getElementById("publishers-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(publishers1dChange)}</span>`;
} else if (publishers1dChange > 0) {
document.getElementById("publishers-1d").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(publishers1dChange)}</span>`;
} else {
document.getElementById("publishers-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(publishers1dChange)}</span>`;
document.getElementById("publishers-1d").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(publishers1dChange)}</span>`;
}
const publishers1wChange = publishersCurrent - data.uniquePublishers.past.week;
if (publishers1wChange < 0) {
document.getElementById("publishers-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">-${formatNumberShort(publishers1wChange)}</span>`;
document.getElementById("publishers-1w").innerHTML = `<span class="text-red-600 dark:text-red-400">${formatNumberShort(publishers1wChange)}</span>`;
} else if (publishers1wChange > 0) {
document.getElementById("publishers-1w").innerHTML = `<span class="text-emerald-600 dark:text-emerald-400">+${formatNumberShort(publishers1wChange)}</span>`;
} else {
Expand Down

0 comments on commit 67a6e44

Please sign in to comment.