style: change color palette

README.md

@@ -31,7 +31,7 @@
 </div>
 
 <p align="center">
-  <img src="https://anchr.io/i/bxQ69.png" width="500px">
+  <img src="static/assets/images/screenshot.png" width="500px">
 </p>
 
 ## Table of Contents

static/assets/app.css

@@ -1,3 +1,7 @@
 body {
     font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+}
+
+.bg-gray-850 {
+    background-color: #242b3a;
 }

static/assets/app.js

@@ -28,6 +28,9 @@ let charts = []
 let showTopN = []
 let resizeCount = 0
 
+Chart.defaults.global.defaultFontColor = "#E2E8F0"
+Chart.defaults.global.defaultColor = "#E2E8F0"
+
 String.prototype.toHHMMSS = function () {
     var sec_num = parseInt(this, 10)
     var hours = Math.floor(sec_num / 3600)
@@ -47,13 +50,12 @@ String.prototype.toHHMMSS = function () {
 }
 
 function draw(subselection) {
-    function getTooltipOptions(key, type) {
+    function getTooltipOptions(key) {
         return {
             mode: 'single',
             callbacks: {
                 label: (item) => {
-                    let idx = type === 'pie' ? item.index : item.datasetIndex
-                    let d = wakapiData[key][idx]
+                    let d = wakapiData[key][item.index]
                     return `${d.key}: ${d.total.toString().toHHMMSS()}`
                 },
                 title: () => 'Total Time'
@@ -73,18 +75,29 @@ function draw(subselection) {
         ? new Chart(projectsCanvas.getContext('2d'), {
             type: 'horizontalBar',
             data: {
-                datasets: wakapiData.projects
+                datasets: [{
+                    data: wakapiData.projects
+                        .slice(0, Math.min(showTopN[0], wakapiData.projects.length))
+                        .map(p => parseInt(p.total)),
+                    backgroundColor: wakapiData.projects.map(p => {
+                        const c = hexToRgb(getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)`
+                    }),
+                    hoverBackgroundColor: wakapiData.projects.map(p => {
+                        const c = hexToRgb(getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
+                    }),
+                    borderColor: wakapiData.projects.map(p => {
+                        const c = hexToRgb(getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
+                    }),
+                    borderWidth: 2
+                }],
+                labels: wakapiData.projects
                     .slice(0, Math.min(showTopN[0], wakapiData.projects.length))
-                    .map(p => {
-                        return {
-                            label: p.key,
-                            data: [parseInt(p.total) / 60],
-                            backgroundColor: getRandomColor(p.key)
-                        }
-                    })
+                    .map(p => p.key)
             },
             options: {
-                tooltips: getTooltipOptions('projects', 'bar'),
                 legend: {
                     display: false
                 },
@@ -96,6 +109,7 @@ function draw(subselection) {
                         }
                     }]
                 },
+                tooltips: getTooltipOptions('projects'),
                 maintainAspectRatio: false,
                 onResize: onChartResize
             }
@@ -110,14 +124,25 @@ function draw(subselection) {
                     data: wakapiData.operatingSystems
                         .slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
                         .map(p => parseInt(p.total)),
-                    backgroundColor: wakapiData.operatingSystems.map(p => osColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                    backgroundColor: wakapiData.operatingSystems.map(p => {
+                        const c = hexToRgb(osColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)`
+                    }),
+                    hoverBackgroundColor: wakapiData.operatingSystems.map(p => {
+                        const c = hexToRgb(osColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
+                    }),
+                    borderColor: wakapiData.operatingSystems.map(p => {
+                        const c = hexToRgb(osColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
+                    }),
                 }],
                 labels: wakapiData.operatingSystems
                     .slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
                     .map(p => p.key)
             },
             options: {
-                tooltips: getTooltipOptions('operatingSystems', 'pie'),
+                tooltips: getTooltipOptions('operatingSystems'),
                 maintainAspectRatio: false,
                 onResize: onChartResize
             }
@@ -132,14 +157,25 @@ function draw(subselection) {
                     data: wakapiData.editors
                         .slice(0, Math.min(showTopN[2], wakapiData.editors.length))
                         .map(p => parseInt(p.total)),
-                    backgroundColor: wakapiData.editors.map(p => editorColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                    backgroundColor: wakapiData.editors.map(p => {
+                        const c = hexToRgb(editorColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)`
+                    }),
+                    hoverBackgroundColor: wakapiData.editors.map(p => {
+                        const c = hexToRgb(editorColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
+                    }),
+                    borderColor: wakapiData.editors.map(p => {
+                        const c = hexToRgb(editorColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
+                    }),
                 }],
                 labels: wakapiData.editors
                     .slice(0, Math.min(showTopN[2], wakapiData.editors.length))
                     .map(p => p.key)
             },
             options: {
-                tooltips: getTooltipOptions('editors', 'pie'),
+                tooltips: getTooltipOptions('editors'),
                 maintainAspectRatio: false,
                 onResize: onChartResize
             }
@@ -154,14 +190,25 @@ function draw(subselection) {
                     data: wakapiData.languages
                         .slice(0, Math.min(showTopN[3], wakapiData.languages.length))
                         .map(p => parseInt(p.total)),
-                    backgroundColor: wakapiData.languages.map(p => languageColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                    backgroundColor: wakapiData.languages.map(p => {
+                        const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)`
+                    }),
+                    hoverBackgroundColor: wakapiData.languages.map(p => {
+                        const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
+                    }),
+                    borderColor: wakapiData.languages.map(p => {
+                        const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
+                    }),
                 }],
                 labels: wakapiData.languages
                     .slice(0, Math.min(showTopN[3], wakapiData.languages.length))
                     .map(p => p.key)
             },
             options: {
-                tooltips: getTooltipOptions('languages', 'pie'),
+                tooltips: getTooltipOptions('languages'),
                 maintainAspectRatio: false,
                 onResize: onChartResize
             }
@@ -176,14 +223,25 @@ function draw(subselection) {
                     data: wakapiData.machines
                         .slice(0, Math.min(showTopN[4], wakapiData.machines.length))
                         .map(p => parseInt(p.total)),
-                    backgroundColor: wakapiData.machines.map(p => getRandomColor(p.key))
+                    backgroundColor: wakapiData.machines.map(p => {
+                        const c = hexToRgb(getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)`
+                    }),
+                    hoverBackgroundColor: wakapiData.machines.map(p => {
+                        const c = hexToRgb(getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
+                    }),
+                    borderColor: wakapiData.machines.map(p => {
+                        const c = hexToRgb(getRandomColor(p.key))
+                        return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
+                    }),
                 }],
                 labels: wakapiData.machines
                     .slice(0, Math.min(showTopN[4], wakapiData.machines.length))
                     .map(p => p.key)
             },
             options: {
-                tooltips: getTooltipOptions('machines', 'pie'),
+                tooltips: getTooltipOptions('machines'),
                 maintainAspectRatio: false,
                 onResize: onChartResize
             }
@@ -274,6 +332,20 @@ function getRandomColor(seed) {
     return color
 }
 
+// https://stackoverflow.com/a/5624139/3112139
+function hexToRgb(hex) {
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
+
 function showApiKeyPopup(event) {
     const el = document.getElementById('api-key-popup')
     el.classList.remove('hidden')

version.txt

@@ -1 +1 @@
-1.22.2
+1.22.3

views/imprint.tpl.html

@@ -3,7 +3,7 @@
 
 {{ template "head.tpl.html" . }}
 
-<body class="bg-gray-800 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
+<body class="bg-gray-850 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
 
 {{ template "header.tpl.html" . }}
 

views/index.tpl.html

@@ -3,7 +3,7 @@
 
 {{ template "head.tpl.html" . }}
 
-<body class="relative bg-gray-800 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-lg mx-auto justify-center">
+<body class="relative bg-gray-850 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-lg mx-auto justify-center">
 
 {{ template "header.tpl.html" . }}
 

views/login.tpl.html

@@ -3,7 +3,7 @@
 
 {{ template "head.tpl.html" . }}
 
-<body class="bg-gray-800 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-lg mx-auto justify-center">
+<body class="bg-gray-850 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-lg mx-auto justify-center">
 
 {{ template "header.tpl.html" . }}
 

views/settings.tpl.html

@@ -3,7 +3,7 @@
 
 {{ template "head.tpl.html" . }}
 
-<body class="bg-gray-800 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
+<body class="bg-gray-850 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
 
 <style>
     .inline-bullet-list li a {

views/summary.tpl.html

@@ -3,7 +3,7 @@
 
 {{ template "head.tpl.html" . }}
 
-<body class="relative bg-gray-800 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
+<body class="relative bg-gray-850 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
 
 {{ template "header.tpl.html" . }}
 
@@ -56,25 +56,25 @@
 <main class="mt-10 flex-grow">
     <div class="flex justify-center">
         <div class="p-1">
-            <div class="flex justify-center p-4 bg-white rounded shadow">
+            <div class="flex justify-center p-4 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow">
                 <p class="mx-2"><strong>▶️</strong> <span title="Start Time">{{ .FromTime.T | date }}</span></p>
-                <p class="mx-2"><strong>⏹</strong> <span title="End Time">{{ .ToTime.T | date }}</span></p>
-                <p class="mx-2"><strong>⏱</strong> <span id="total-span" title="Total Hours"></span></p>
+                <p class="mx-2"><strong>⏹️</strong> <span title="End Time">{{ .ToTime.T | date }}</span></p>
+                <p class="mx-2"><strong>⏱️</strong> <span id="total-span" title="Total Hours"></span></p>
             </div>
         </div>
     </div>
     <div class="flex flex-wrap justify-center">
         <div class="w-full lg:w-1/2 p-1">
-            <div class="p-4 pb-10 bg-white rounded shadow m-2 flex flex-col" id="project-container" style="height: 300px">
+            <div class="p-4 pb-10 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow m-2 flex flex-col" id="project-container" style="height: 300px">
                 <div class="flex justify-between">
                     <div class="w-1/4 flex-1"></div>
                     <span class="font-semibold w-1/2 text-center flex-1">Projects</span>
                     <div class="flex justify-end flex-1 text-xs items-center">
                         <label for="project-top-picker" class="mr-1">Show:&nbsp;</label>
-                        <input type="number" min="1" id="project-top-picker" data-entity="0" class="w-1/4 top-picker bg-gray-200 rounded-md text-center" value="10">
+                        <input type="number" min="1" id="project-top-picker" data-entity="0" class="w-1/4 top-picker bg-gray-800 rounded-md text-center" value="10">
                     </div>
                 </div>
-                <canvas id="chart-projects"></canvas>
+                <canvas id="chart-projects" class="mt-2"></canvas>
                 <div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
                     <img src="assets/images/no_data.svg" class="w-20" alt="No data"/>
                     <span class="text-sm mt-4">No data available ...</span>
@@ -82,13 +82,13 @@
             </div>
         </div>
         <div class="w-full lg:w-1/2 p-1">
-            <div class="p-4 pb-10 bg-white rounded shadow m-2 flex flex-col" id="os-container" style="height: 300px">
+            <div class="p-4 pb-10 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow m-2 flex flex-col" id="os-container" style="height: 300px">
                 <div class="flex justify-between">
                     <div class="w-1/4 flex-1"></div>
                     <span class="font-semibold w-1/2 text-center flex-1">Operating Systems</span>
                     <div class="flex justify-end flex-1 text-xs items-center">
                         <label for="os-top-picker" class="mr-1">Show:&nbsp;</label>
-                        <input type="number" min="1" id="os-top-picker" data-entity="1" class="w-1/4 top-picker bg-gray-200 rounded-md text-center" value="10">
+                        <input type="number" min="1" id="os-top-picker" data-entity="1" class="w-1/4 top-picker bg-gray-800 rounded-md text-center" value="10">
                     </div>
                 </div>
                 <canvas id="chart-os"></canvas>
@@ -99,13 +99,13 @@
             </div>
         </div>
         <div class="w-full lg:w-1/2 p-1">
-            <div class="p-4 pb-10 bg-white rounded shadow m-2 flex flex-col relative" id="language-container" style="height: 300px">
+            <div class="p-4 pb-10 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow m-2 flex flex-col relative" id="language-container" style="height: 300px">
                 <div class="flex justify-between">
                     <div class="w-1/4 flex-1"></div>
                     <span class="font-semibold w-1/2 text-center flex-1">Languages</span>
                     <div class="flex justify-end flex-1 text-xs items-center">
                         <label for="language-top-picker" class="mr-1">Show:&nbsp;</label>
-                        <input type="number" min="1" id="language-top-picker" data-entity="3" class="w-1/4 top-picker bg-gray-200 rounded-md text-center" value="10">
+                        <input type="number" min="1" id="language-top-picker" data-entity="3" class="w-1/4 top-picker bg-gray-800 rounded-md text-center" value="10">
                     </div>
                 </div>
                 <canvas id="chart-language"></canvas>
@@ -116,13 +116,13 @@
             </div>
         </div>
         <div class="w-full lg:w-1/2 p-1">
-            <div class="p-4 pb-10 bg-white rounded shadow m-2 flex flex-col" id="editor-container" style="height: 300px">
+            <div class="p-4 pb-10 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow m-2 flex flex-col" id="editor-container" style="height: 300px">
                 <div class="flex justify-between">
                     <div class="w-1/4 flex-1"></div>
                     <span class="font-semibold w-1/2 text-center flex-1">Editors</span>
                     <div class="flex justify-end flex-1 text-xs items-center">
                         <label for="editor-top-picker" class="mr-1">Show:&nbsp;</label>
-                        <input type="number" min="1" id="editor-top-picker" data-entity="2" class="w-1/4 top-picker bg-gray-200 rounded-md text-center" value="10">
+                        <input type="number" min="1" id="editor-top-picker" data-entity="2" class="w-1/4 top-picker bg-gray-800 rounded-md text-center" value="10">
                     </div>
                 </div>
                 <canvas id="chart-editor"></canvas>
@@ -133,13 +133,13 @@
             </div>
         </div>
         <div class="w-full lg:w-1/2 p-1">
-            <div class="p-4 pb-10 bg-white rounded shadow m-2 flex flex-col" id="machine-container" style="height: 300px">
+            <div class="p-4 pb-10 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow m-2 flex flex-col" id="machine-container" style="height: 300px">
                 <div class="flex justify-between">
                     <div class="w-1/4 flex-1"></div>
                     <span class="font-semibold w-1/2 text-center flex-1">Machines</span>
                     <div class="flex justify-end flex-1 text-xs items-center">
                         <label for="machine-top-picker" class="mr-1">Show:&nbsp;</label>
-                        <input type="number" min="1" id="machine-top-picker" data-entity="4" class="w-1/4 top-picker bg-gray-200 rounded-md text-center" value="10">
+                        <input type="number" min="1" id="machine-top-picker" data-entity="4" class="w-1/4 top-picker bg-gray-800 rounded-md text-center" value="10">
                     </div>
                 </div>
                 <canvas id="chart-machine"></canvas>