Refactor to server-rendered app.

static/assets/app.js

@@ -0,0 +1,167 @@
+const SHOW_TOP_N = 10
+
+const projectsCanvas = document.getElementById("chart-projects")
+const osCanvas = document.getElementById("chart-os")
+const editorsCanvas = document.getElementById("chart-editor")
+const languagesCanvas = document.getElementById("chart-language")
+
+let charts = []
+
+String.prototype.toHHMMSS = function () {
+    var sec_num = parseInt(this, 10)
+    var hours = Math.floor(sec_num / 3600)
+    var minutes = Math.floor((sec_num - (hours * 3600)) / 60)
+    var seconds = sec_num - (hours * 3600) - (minutes * 60)
+
+    if (hours < 10) {
+        hours = '0' + hours
+    }
+    if (minutes < 10) {
+        minutes = '0' + minutes
+    }
+    if (seconds < 10) {
+        seconds = '0' + seconds
+    }
+    return hours + ':' + minutes + ':' + seconds
+}
+
+function draw() {
+    let titleOptions = {
+        display: true,
+        fontSize: 16
+    }
+
+    function getTooltipOptions(key, type) {
+        return {
+            mode: 'single',
+            callbacks: {
+                label: (item) => {
+                    let idx = type === 'pie' ? item.index : item.datasetIndex
+                    let d = wakapiData[key][idx]
+                    return `${d.key}: ${d.total.toString().toHHMMSS()}`
+                }
+            }
+        }
+    }
+
+    charts.forEach(c => c.destroy())
+
+    let projectChart = new Chart(projectsCanvas.getContext('2d'), {
+        type: 'horizontalBar',
+        data: {
+            datasets: wakapiData.projects
+                .slice(0, Math.min(SHOW_TOP_N, wakapiData.projects.length))
+                .map(p => {
+                    return {
+                        label: p.key,
+                        data: [parseInt(p.total)],
+                        backgroundColor: getRandomColor(p.key)
+                    }
+                })
+        },
+        options: {
+            title: Object.assign(titleOptions, {text: `Projects (top ${SHOW_TOP_N})`}),
+            tooltips: getTooltipOptions('projects', 'bar'),
+            legend: {
+                display: false
+            }
+        }
+    })
+
+    let osChart = new Chart(osCanvas.getContext('2d'), {
+        type: 'pie',
+        data: {
+            datasets: [{
+                data: wakapiData.operatingSystems
+                    .slice(0, Math.min(SHOW_TOP_N, wakapiData.operatingSystems.length))
+                    .map(p => parseInt(p.total)),
+                backgroundColor: wakapiData.operatingSystems.map(p => getRandomColor(p.key))
+            }],
+            labels: wakapiData.operatingSystems
+                .slice(0, Math.min(SHOW_TOP_N, wakapiData.operatingSystems.length))
+                .map(p => p.key)
+        },
+        options: {
+            title: Object.assign(titleOptions, {text: `Operating Systems (top ${SHOW_TOP_N})`}),
+            tooltips: getTooltipOptions('operatingSystems', 'pie')
+        }
+    })
+
+    let editorChart = new Chart(editorsCanvas.getContext('2d'), {
+        type: 'pie',
+        data: {
+            datasets: [{
+                data: wakapiData.editors
+                    .slice(0, Math.min(SHOW_TOP_N, wakapiData.editors.length))
+                    .map(p => parseInt(p.total)),
+                backgroundColor: wakapiData.editors.map(p => getRandomColor(p.key))
+            }],
+            labels: wakapiData.editors
+                .slice(0, Math.min(SHOW_TOP_N, wakapiData.editors.length))
+                .map(p => p.key)
+        },
+        options: {
+            title: Object.assign(titleOptions, {text: `Editors (top ${SHOW_TOP_N})`}),
+            tooltips: getTooltipOptions('editors', 'pie')
+        }
+    })
+
+    let languageChart = new Chart(languagesCanvas.getContext('2d'), {
+        type: 'pie',
+        data: {
+            datasets: [{
+                data: wakapiData.languages
+                    .slice(0, Math.min(SHOW_TOP_N, wakapiData.languages.length))
+                    .map(p => parseInt(p.total)),
+                backgroundColor: wakapiData.languages.map(p => getRandomColor(p.key))
+            }],
+            labels: wakapiData.languages
+                .slice(0, Math.min(SHOW_TOP_N, wakapiData.languages.length))
+                .map(p => p.key)
+        },
+        options: {
+            title: Object.assign(titleOptions, {text: `Languages (top ${SHOW_TOP_N})`}),
+            tooltips: getTooltipOptions('languages', 'pie')
+        }
+    })
+
+    getTotal(wakapiData.operatingSystems)
+    document.getElementById('grid-container').style.visibility = 'visible'
+
+    charts = [projectChart, osChart, editorChart, languageChart]
+}
+
+function getTotal(data) {
+    let total = data.reduce((acc, d) => acc + d.total, 0)
+    document.getElementById("total-span").innerText = total.toString().toHHMMSS()
+}
+
+function getRandomColor(seed) {
+    seed = seed ? seed : '1234567';
+    Math.seedrandom(seed);
+    var letters = '0123456789ABCDEF'.split('');
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+
+// https://koddsson.com/posts/emoji-favicon/
+const favicon = document.querySelector("link[rel=icon]");
+if (favicon) {
+    const emoji = favicon.getAttribute("data-emoji");
+    if (emoji) {
+        const canvas = document.createElement("canvas");
+        canvas.height = 64;
+        canvas.width = 64;
+        const ctx = canvas.getContext("2d");
+        ctx.font = "64px serif";
+        ctx.fillText(emoji, 0, 64);
+        favicon.href = canvas.toDataURL();
+    }
+}
+
+window.addEventListener('load', function() {
+    draw()
+})