v0.3

src/dashboard/App.svelte

@@ -5,6 +5,8 @@
   import Dashboard from './pages/Dashboard.svelte'
   import Limits from './pages/Limits.svelte'
 
+  import { isDev } from '../shared/utils'
+
   const routes = {
     '/': Dashboard,
 
@@ -21,7 +23,9 @@
   }
 </style>
 
-<Dev />
+{#if isDev}
+  <Dev />
+{/if}
 <main>
   <div class="mb-8">
     <a href="../options/index.html"><button class="btn">Options</button></a>

src/dashboard/components/Chart.svelte

@@ -1,38 +1,24 @@
 <script>
   import * as d3 from 'd3'
-  import { map, min, max } from 'lodash'
+  import { map, max } from 'lodash'
   import { onMount } from 'svelte'
 
   let wrapper
 
-  export let data = [
-    // { lang: 'ts', popularity: 10 },
-    // { lang: 'js', popularity: 7 },
-    // { lang: 'py', popularity: 9 },
-    // { lang: 'rs', popularity: 8 },
+  export let data = []
 
-    // { year: 2018, value: 8 },
-    // { year: 2019, value: 9 },
-    // { year: 2020, value: 3 },
+  function render() {
+    if (!wrapper) return
 
-    { cat: 'Phillip', value: 10 },
-    { cat: 'Rita', value: 12 },
-    { cat: 'Tom', value: 20 },
-    { cat: 'Oscar', value: 19 },
-    { cat: 'Lulu', value: 8 },
-    { cat: 'Keko', value: 14 },
-    { cat: 'Lena', value: 9 },
-  ]
-
-  onMount(async () => {
     // Dynamic left padding depending on the labels
     const longestKey = max(map(data, (d) => d.name.length))
-    const mt = Math.min(longestKey * 6, 120)
-    const margin = { left: mt, top: 50, bottom: 50, right: 50 }
+    const baseMargin = 35
+    const ml = Math.min(longestKey * 6.3, 120) + baseMargin
+    const margin = { left: ml, top: baseMargin, bottom: baseMargin, right: baseMargin }
     const styles = window.getComputedStyle(wrapper)
     const barHeight = 20
     const width = parseInt(styles.width)
-    const height = Math.ceil(data.length * 1.5 * barHeight)
+    const height = Math.ceil(data.length * 1.25 * barHeight + (margin.top + margin.bottom))
 
     const svg = d3.select(wrapper).attr('viewBox', [0, 0, width, height])
 
@@ -64,7 +50,7 @@
     // Bars
     svg
       .append('g')
-      .attr('fill', 'steelblue')
+      .attr('fill', '#17bbac')
       .selectAll('rect')
       .data(data)
       .join('rect')
@@ -89,7 +75,7 @@
       .text((d) => d.human)
       .call((text) =>
         text
-          .filter((d) => x(d.value) - x(0) < d.human.length * 7) // short bars
+          .filter((d) => x(d.value) - x(0) < d.human.length * 8) // short bars
           .attr('dx', +4)
           .attr('fill', 'black')
           .attr('text-anchor', 'start')
@@ -98,13 +84,18 @@
     svg.append('g').call(xAxis)
 
     svg.append('g').call(yAxis)
-  })
+  }
+
+  onMount(render)
 </script>
 
 <style>
   svg {
     width: 100%;
-    /* height: 25em; */
+  }
+
+  svg :global(*) {
+    font-family: monospace;
   }
 </style>
 

src/dashboard/components/Dev.svelte

@@ -3,14 +3,14 @@
   import day from 'dayjs'
   import { range, random } from 'lodash'
 
-  import { insertLog, normalizeTimestamp, DB } from '../../shared/db'
+  import { insertLog, normalizeTimestamp, DB, clear as clearDB } from '../../shared/db'
 
   let loading = false
 
   async function fill() {
     try {
       loading = true
-      const start = day().subtract('7', 'days').valueOf()
+      const start = day().subtract(2, 'weeks').valueOf()
       const end = Date.now()
       for (const n of range(20)) {
         const host = faker.internet.domainName()
@@ -29,8 +29,7 @@
   async function clear() {
     try {
       loading = true
-      await DB.limits.clear()
-      await DB.logs.clear()
+      await clearDB()
     } finally {
       loading = false
     }

src/dashboard/components/RangeChooser.svelte

@@ -29,7 +29,6 @@
   }
 </style>
 
-<!-- <div class="flex flex-col"> -->
 <div class="flex items-center">
   <div class="btn-group">
     <button class="btn btn-sm" on:click={all}>All</button>

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>