Added hourly visitors and active visitors to tracking page.

template/tracking.html

@@ -14,13 +14,21 @@
         <a href="/tracking?start=365" class="button {{if eq .Start 365}}filled{{end}}">Year</a>
     </p>
 </section>
-
-<!-- TODO real time -->
-
+<section>
+    <h2>Active Visitors</h2>
+    <p>
+        Active within the last five minutes: {{.ActiveVisitors}}
+    </p>
+    <canvas id="hourlyVisitorsToday" class="tracking"></canvas>
+</section>
 <section>
     <h2>Total Visitors</h2>
     <canvas id="totalVisitors" class="tracking"></canvas>
 </section>
+<section>
+    <h2>Visitors Per Hour</h2>
+    <canvas id="hourlyVisitors" class="tracking"></canvas>
+</section>
 <section>
     <h2>Pages Visits</h2>
 </section>
@@ -57,13 +65,21 @@
     </table>
 </section>
 
-<!-- TODO -->
-<!--<section>
-    <h2>Visitors Per Hour</h2>
-</section>-->
-
 <script type="text/javascript" src="/static/js/Chart-v2.9.3.bundle.min.js"></script>
 <script type="text/javascript">
+    new Chart(document.getElementById('hourlyVisitorsToday').getContext('2d'), {
+        type: "line",
+        data: {
+            labels: [{{.HourlyVisitorsTodayLabels}}],
+            datasets: [{
+                backgroundColor: "rgba(127, 127, 127, 0.05)",
+                borderColor: "#7f7f7f",
+                label: "Hourly Visitors for Today",
+                data: [{{.HourlyVisitorsTodayDps}}]
+            }]
+        }
+    });
+
     new Chart(document.getElementById('totalVisitors').getContext('2d'), {
         type: "line",
         data: {
@@ -77,6 +93,19 @@
         }
     });
 
+    new Chart(document.getElementById('hourlyVisitors').getContext('2d'), {
+        type: "line",
+        data: {
+            labels: [{{.HourlyVisitorsLabels}}],
+            datasets: [{
+                backgroundColor: "rgba(127, 127, 127, 0.05)",
+                borderColor: "#7f7f7f",
+                label: "Hourly Visitors",
+                data: [{{.HourlyVisitorsDps}}]
+            }]
+        }
+    });
+
     {{range $i, $data := .PageVisits}}
         new Chart(document.getElementById('pageVisits{{$i}}').getContext('2d'), {
             type: "line",