feat: add line graph & make it pretty

Author: oxalorg

resources/public/js/stats.js

@@ -0,0 +1,25 @@
+var ctx = document.getElementById('message-chart');
+
+var messageJson = document.getElementById('message-data').innerHTML;
+var messageData = JSON.parse(messageJson.replace(/"/g,'"'));
+var labels = messageData.map(function(elem) {
+  return elem["day"];
+})
+var data = messageData.map(function(elem) {
+  return elem["msg-count"];
+})
+
+var messageChart = new Chart(ctx, {
+  type: 'line',
+  data: {
+      labels: labels,
+      datasets: [{
+          label: 'No. of slack messages',
+          fill: false,
+          data: data,
+          backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          borderColor: 'rgba(54, 162, 235, 1)',
+          borderWidth: 2
+      }]
+  },
+});

src/clojurians_log/views.clj

@@ -2,6 +2,7 @@
   (:require [hiccup2.core :as hiccup]
             [cemerick.url :refer [url]]
             [clojurians-log.time-util :as cl.tu]
+            [clojure.data.json :as json]
             [clojure.string :as str]
             [clojurians-log.slack-messages :as slack-messages]
             [reitit.core]
@@ -16,6 +17,11 @@
   [messages ts]
   (some #(when (= (:message/ts %) ts) %) messages))
 
+(defn jsfile [path]
+  (when-let [f (io/file (io/resource (str "public" path)))]
+    (let [ts (.lastModified f)]
+      [:script
+       {:src (str path "?version=" ts)}])))
 
 (defn stylesheet [path]
   (when-let [f (io/file (io/resource (str "public" path)))]
@@ -286,20 +292,42 @@
                               :date day}))]
         [:lastmod day]]))])
 
+
+(defn- page-head-stats [{:data/keys [title]}]
+  [:head
+   [:meta {:charset "utf-8"}]
+   [:meta {:http-equiv "X-UA-Compatible" :content "IE=edge"}]
+   [:meta {:content="width=device-width, initial-scale=1" :name "viewport"}]
+   [:title title]
+   [:link {:href "https://unpkg.com/sakura.css/css/sakura.css"
+           :rel "stylesheet"
+           :type "text/css"}]
+   (stylesheet "/css/gh-fork-ribbon.min.css")
+   [:script {:src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"}]
+   ])
+
 (defn- message-stats-page-html [{:data/keys [message-stats] :as context}]
-  [:div
-   [:h3 (str "Showing message stats between " 
-             (:day (first message-stats)) 
-             " to "
-             (:day (last message-stats)))]
-   [:table
-    [:thead
-     [:tr
-      [:th "Day"]
-      [:th "Message count"]]]
-    [:tbody
-     (for [day-stat message-stats] [:tr [:td (:day day-stat)] [:td (:msg-count day-stat)]])]]
-   [:h4 "Total message count: " (reduce #(+ %1 (:msg-count %2)) 0 message-stats)]])
+  [:html
+   (page-head-stats context)
+   [:body
+    [:div
+     [:h4 "Slack message stats"]
+     [:p 
+      [:strong {:style {:border-bottom "1px solid black"}} (:day (first message-stats))]
+      " to "
+      [:strong {:style {:border-bottom "1px solid black"}} (:day (last message-stats))]]
+     [:div {:width "100%"}
+      [:canvas#message-chart]]
+     [:h4 "Total message count: " (reduce #(+ %1 (:msg-count %2)) 0 message-stats)]
+     [:table
+      [:thead
+       [:tr
+        [:th "Day"]
+        [:th "Message count"]]]
+      [:tbody
+       (for [day-stat message-stats] [:tr [:td (:day day-stat)] [:td (:msg-count day-stat)]])]]]
+    [:script#message-data {:type "application/json"} (json/write-str message-stats)]
+    (jsfile "/js/stats.js")]])
 
 (defn log-page [context]
   (assoc context :response/html (log-page-html context)))