add count and pie

package.json

@@ -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"

src/lib/Activity.svelte

@@ -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
   >

src/lib/Count.svelte

@@ -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>

src/lib/Pie.svelte

@@ -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>

src/routes/index.svelte

@@ -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} />
 

yarn.lock

@@ -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"