add: more statistics

templates/components/leaderboard-card.html

@@ -0,0 +1,101 @@
+<div class="w-full">
+  <div
+    class="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded"
+  >
+    <div>
+      <div class="flex justify-between">
+        <p
+          class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
+        >
+          {{ .Name }} Leaderboard
+        </p>
+        <div class="flex gap-2 text-xs text-gray-400 items-center">
+          <label
+            for="all-{{ .Name }}"
+            class="cursor-pointer hover:text-black dark:hover:text-white"
+            >all</label
+          >
+          <label
+            for="year-{{ .Name }}"
+            class="cursor-pointer hover:text-black dark:hover:text-white"
+            >year</label
+          >
+          <label
+            for="month-{{ .Name }}"
+            class="cursor-pointer hover:text-black dark:hover:text-white"
+            >month</label
+          >
+          <label
+            for="week-{{ .Name }}"
+            class="cursor-pointer hover:text-black dark:hover:text-white"
+            >week</label
+          >
+        </div>
+      </div>
+    </div>
+
+    <input
+      type="radio"
+      name="options-{{ .Name }}"
+      id="all-{{ .Name }}"
+      class="hidden peer/All"
+      checked
+    />
+    <input
+      type="radio"
+      name="options-{{ .Name }}"
+      id="year-{{ .Name }}"
+      class="hidden peer/Year"
+    />
+    <input
+      type="radio"
+      name="options-{{ .Name }}"
+      id="month-{{ .Name }}"
+      class="hidden peer/Month"
+    />
+    <input
+      type="radio"
+      name="options-{{ .Name }}"
+      id="week-{{ .Name }}"
+      class="hidden peer/Week"
+    />
+
+    {{ range $key, $data := .Data }}
+    <div class="flex items-end my-6 space-x-2 hidden peer-checked/{{ $key }}:block">
+
+      {{ $length := len $data }}
+      {{ if eq $length 0 }}
+      <p class="text-5xl font-bold text-black dark:text-white">N/A</p>
+      {{ else }}
+      <p class="text-5xl font-bold text-black dark:text-white">
+        {{ (index $data 0).UserID }}
+      </p>
+      {{ end }}
+
+    </div>
+    <div class="hidden dark:text-white peer-checked/{{ $key }}:block">
+
+      {{ range $index, $item := $data }} 
+      {{ if lt $index 3 }} 
+      {{ if eq $index 0 }}
+      <div class="flex items-center justify-between pt-2 pb-2 text-sm">
+      {{ else }}
+      <div
+	class="flex items-center justify-between pt-2 pb-2 text-sm border-t border-gray-200"
+      >
+      {{ end }}
+	<div>
+	  <p>{{ $item.UserID }}</p>
+	</div>
+	<div class="flex items-end font-bold">
+	  {{ $item.Value }}
+	</div>
+      </div>
+      {{ end }}
+      {{ end }}
+
+    </div>
+
+    {{ end}}
+  </div>
+</div>

templates/pages/document.html

@@ -214,13 +214,13 @@
 	    <div class="text-xs flex">
               <p class="text-gray-400 w-32">Est. Time Left</p>
               <p class="font-medium dark:text-white whitespace-nowrap">
-		{{ NiceSeconds .TotalTimeLeftSeconds }}
+		{{ niceSeconds .TotalTimeLeftSeconds }}
               </p>
 	    </div>
 	  </div>
 	</div>
 	<p class="font-medium text-lg">
-	  {{ NiceSeconds .Data.TotalTimeSeconds }}
+	  {{ niceSeconds .Data.TotalTimeSeconds }}
 	</p>
       </div>
       <div>

templates/pages/documents.html

@@ -75,7 +75,7 @@
           <div>
               <p class="text-gray-400">Time Read</p>
               <p class="font-medium">
-	      {{ NiceSeconds $doc.TotalTimeSeconds }}
+	      {{ niceSeconds $doc.TotalTimeSeconds }}
               </p>
           </div>
         </div>

templates/pages/home.html

@@ -12,7 +12,7 @@
         Daily Read Totals
       </p>
 
-      {{ $data := (GetSVGGraphData .Data.GraphData 800 70 )}}
+      {{ $data := (getSVGGraphData .Data.GraphData 800 70 )}}
       <svg
         viewBox="26 0 755 {{ $data.Height }}"
         preserveAspectRatio="none"
@@ -159,6 +159,31 @@
     </div>
   </div>
 
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+    {{ template "component/leaderboard-card" (
+      dict
+	"Name" "WPM"
+	"Data" .Data.UserStatistics.WPM
+      )
+    }}
+
+    {{ template "component/leaderboard-card" (
+      dict
+	"Name" "Duration"
+	"Data" .Data.UserStatistics.Duration
+      )
+    }}
+
+    {{ template "component/leaderboard-card" (
+      dict
+	"Name" "Words"
+	"Data" .Data.UserStatistics.Words
+      )
+    }}
+
+
+  </div>
+
   <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
     {{ range $item := .Data.Streaks }}
     <div class="w-full">
@@ -211,46 +236,5 @@
     </div>
     {{ end }}
 
-    <div class="w-full">
-      <div
-        class="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded"
-      >
-        <div>
-          <p
-            class="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"
-          >
-            WPM Leaderboard
-          </p>
-          <div class="flex items-end my-6 space-x-2">
-            {{ $length := len .Data.WPMLeaderboard }} {{ if eq $length 0 }}
-            <p class="text-5xl font-bold text-black dark:text-white">N/A</p>
-            {{ else }}
-            <p class="text-5xl font-bold text-black dark:text-white">
-              {{ (index .Data.WPMLeaderboard 0).UserID }}
-            </p>
-            {{ end }}
-          </div>
-        </div>
-        <div class="dark:text-white">
-          {{ range $index, $item := .Data.WPMLeaderboard }} {{ if lt $index 3 }}
-          {{ if eq $index 0 }}
-          <div class="flex items-center justify-between pt-2 pb-2 text-sm">
-            {{ else }}
-            <div
-              class="flex items-center justify-between pt-2 pb-2 text-sm border-t border-gray-200"
-            >
-              {{ end }}
-              <div>
-                <p>{{ $item.UserID }}</p>
-              </div>
-              <div class="flex items-end font-bold">{{ $item.Wpm }} WPM</div>
-            </div>
-            {{ end }} {{ end }}
-          </div>
-        </div>
-      </div>
-    </div>
-
     {{end}}
-  </div>
 </div>

templates/pages/settings.html

@@ -87,7 +87,7 @@
             id="time_offset"
             name="time_offset"
           >
-            {{ range $item := GetUTCOffsets }}
+            {{ range $item := getUTCOffsets }}
             <option
               {{ if (eq $item.Value $.Data.TimeOffset) }}selected{{ end }}
               value="{{ $item.Value }}"