v0.3

src/dashboard/pages/Dashboard.svelte

@@ -7,10 +7,11 @@
   import { data, countInGroup } from '../../shared/lib'
 
   let top = 15
-  let full = 50
+  let full = 100
 
   let loading = true
   let counted = []
+  let table = []
   let timeout
 
   let start
@@ -37,13 +38,37 @@
     timeout = setTimeout(calculate, 5)
   }
 
+  $: {
+    let lastHuman = null
+    table = counted.map((entry) => {
+      const same = lastHuman === entry.human
+      if (!same) lastHuman = entry.human
+      return {
+        ...entry,
+        same,
+      }
+    })
+  }
+
   onMount(calculate)
 </script>
 
 <style>
+  table td,
+  table th {
+    padding: 0.25rem 0.06rem;
+  }
+
+  table td.same {
+    opacity: 0.25;
+  }
+
+  table td :global(a:visited) {
+    color: inherit;
+  }
 </style>
 
-<div class="flex justify-between items-center mb-4">
+<div class="flex justify-between items-center mb-8">
   <h2 class="text-2xl">Dashboard</h2>
   <RangeChooser bind:start bind:end />
 </div>
@@ -52,16 +77,16 @@
 {:else if counted}
   <h2 class="text-lg">Top {top}</h2>
   <Chart data={topData} />
-  <h2 class="text-lg mt-4">Top {full}</h2>
+  <h2 class="text-lg mt-4 mb-2">Top {full}</h2>
   <table class="table">
     <tr>
       <th>Time Spent</th>
       <th>Host</th>
     </tr>
-    {#each counted.slice(0, 100) as { host, total, human }}
+    {#each table.slice(0, full) as { host, total, human, same }}
       <tr>
-        <td>{human}</td>
-        <td class="link"><a href={'https://' + host}>{host}</a></td>
+        <td class:same>{human}</td>
+        <td class="link"><a target="_blank" rel="noreferrer" href={'https://' + host}>{host}</a></td>
       </tr>
     {/each}
   </table>