add activity and relay

src/lib/Activity.svelte

@@ -0,0 +1,45 @@
+<script>
+  // this component can be refactored
+  export let networkActivity;
+
+  let timeArrFirst = [];
+  let timeArrSecond = [];
+  for (let i = 0; i < 12; i++) {
+    const stringUtc = "000" + i;
+    const hour = stringUtc.slice(-2);
+    timeArrFirst.push(hour + ":00—");
+  }
+  for (let i = 12; i < 24; i++) {
+    const stringUtc = "000" + i;
+    const hour = stringUtc.slice(-2);
+    timeArrSecond.push(hour + ":00—");
+  }
+</script>
+
+<div class="rounded-md shadow p-3 bg-white">
+  <span class="block text-center pb-3 text-sm text-neutral-400 font-mono"
+    >NETWORK ACTIVITY (24H, UTC)</span
+  >
+  <div class="flex px-4">
+    <div class="flex flex-col flex-1">
+      {#each timeArrFirst as time, i}
+        <div class="flex p-2">
+          <span class="text-neutral-400">{time}</span>
+          <span class="text-neutral-500 self-start"
+            >{networkActivity[i] || 0} evt</span
+          >
+        </div>
+      {/each}
+    </div>
+    <div class="flex flex-col flex-1">
+      {#each timeArrSecond as time, i}
+        <div class="flex p-2">
+          <span class="text-neutral-400">{time}</span>
+          <span class="text-neutral-500"
+            >{networkActivity[i + 12] || 0} evt</span
+          >
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

src/lib/Relay.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let relayData;
+  const relays = Object.keys(relayData);
+</script>
+
+<div class="rounded-md shadow p-3 bg-white">
+  <span class="block text-center pb-3 text-sm text-neutral-400 font-mono"
+    >EVENTS RECEIVED BY RELAY LAST 24H</span
+  >
+  <div class="flex flex-col">
+    {#each relays as relay, i}
+      <div class="flex p-2 break-words">
+        <span class="flex-1 mr-3 text-neutral-500">{relay}</span>
+        <span class="shrink text-neutral-400">{relayData[relay]}</span>
+      </div>
+    {/each}
+    <a
+      href="https://github.com/vinliao/nashboard"
+      class="p-2 text-center block text-orange-700 underline">Add your relay?</a
+    >
+  </div>
+</div>

src/lib/Tweet.svelte

@@ -8,7 +8,7 @@
 <div class="p-3 rounded-md">
   <div class="flex justify-between mb-2">
     <span>{pubkey.slice(0, 5) + "..." + pubkey.slice(-5)}</span>
-    <span class="text-neutral-400">{time}</span>
+    <span class="text-neutral-400">{format(time * 1000)}</span>
   </div>
   <div class="mb-2 break-words text-neutral-600">{message}</div>
 </div>

src/routes/index.svelte

@@ -14,13 +14,22 @@
 
 <script>
   export let data = {};
+  import Activity from "$lib/Activity.svelte";
+  import Relay from "$lib/Relay.svelte";
   import Tweet from "$lib/Tweet.svelte";
 
   const tweets = data.events;
 
-  console.log(tweets);
+  console.log(data);
 </script>
 
+<Relay relayData={data.relays} />
+<Activity networkActivity={data.utc} />
+
 {#each tweets as tweet}
-  <Tweet time={tweet.created_at} message={tweet.content} pubkey={tweet.pubkey}/>
+  <Tweet
+    time={tweet.created_at}
+    message={tweet.content}
+    pubkey={tweet.pubkey}
+  />
 {/each}