add count and pie

This commit is contained in:
Vincent Liao
2022-03-22 00:36:43 +07:00
parent f11bc89dcc
commit e91c8f3a07
6 changed files with 78 additions and 1 deletions

View File

@@ -27,6 +27,7 @@
},
"type": "module",
"dependencies": {
"svelte-chartjs": "^1.1.4",
"timeago.js": "^4.0.2",
"underscore": "^1.13.2",
"ws": "^8.5.0"

View File

@@ -16,7 +16,7 @@
}
</script>
<div class="rounded-md shadow p-3 bg-white">
<div class="rounded-md p-3 bg-white">
<span class="block text-center pb-3 text-sm text-neutral-400 font-mono"
>NETWORK ACTIVITY (24H, UTC)</span
>

20
src/lib/Count.svelte Normal file
View File

@@ -0,0 +1,20 @@
<script>
export let count1h;
export let count24h;
</script>
<div class="rounded-md shadow p-3 bg-white">
<span class="block text-center pb-3 text-sm text-neutral-400 font-mono"
>NOSTR NETWORK'S EVENT COUNT</span
>
<div class="flex">
<div class="flex-1 text-center">
<span class="text-2xl">{count1h}</span>
<span class="text-neutral-400">last 1h</span>
</div>
<div class="flex-1 text-center">
<span class="text-2xl">{count24h}</span>
<span class="text-neutral-400">last 24h</span>
</div>
</div>
</div>

40
src/lib/Pie.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script>
import Pie from "svelte-chartjs/src/Pie.svelte";
export let kinds = {};
const kindArr = [0, 0, 0, 0, 0, 0];
for (let i = 0; i < kindArr.length; i++) {
kindArr[i] = kinds[i] || 0;
}
let data = {
labels: [
"metadata",
"tweet",
"relay share",
"contact list",
"encrypted msg",
"other",
],
datasets: [
{
label: "Event types",
data: kindArr,
backgroundColor: [
"hsl(326, 85%, 90%)",
"hsl(267, 85%, 90%)",
"hsl(207, 85%, 90%)",
"hsl(147, 85%, 90%)",
"hsl(87, 85%, 90%)",
"hsl(27, 85%, 90%)",
],
},
],
};
</script>
<div class="rounded-md shadow p-3 bg-white">
<span class="block text-center pb-3 text-sm text-neutral-400 font-mono"
>EVENT TYPES (24H)</span
>
<Pie {data} />
</div>

View File

@@ -15,6 +15,8 @@
<script>
export let data = {};
import Activity from "$lib/Activity.svelte";
import Count from "$lib/Count.svelte";
import Pie from "$lib/Pie.svelte";
import Relay from "$lib/Relay.svelte";
import Tweet from "$lib/Tweet.svelte";
@@ -23,6 +25,8 @@
console.log(data);
</script>
<Count count1h={data.count1h} count24h={data.count24h} />
<Pie kinds={data.kinds} />
<Relay relayData={data.relays} />
<Activity networkActivity={data.utc} />

View File

@@ -345,6 +345,11 @@ chalk@^4.0.0, chalk@^4.1.2:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chart.js@^3.5.0:
version "3.7.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada"
integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==
chokidar@^3.5.3:
version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -1478,6 +1483,13 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
svelte-chartjs@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/svelte-chartjs/-/svelte-chartjs-1.1.4.tgz#468868aec8a2469ba3480628f77c81ae992ac2de"
integrity sha512-G+G3h1yDFKNTamwq1iDSK1nthStVpEKaCh8K17cUlMPRX1bFF14sK2kWNv0tPj+OGWDTJgDM3X18EU0o3/kH5Q==
dependencies:
chart.js "^3.5.0"
svelte-hmr@^0.14.11:
version "0.14.11"
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.11.tgz#63d532dc9c2c849ab708592f034765fa2502e568"