style: change color palette

2023-08-10 21:12:56 +03:00 · 2021-02-05 23:42:20 +01:00 · 2021-02-05 23:42:20 +01:00 · 82e9244cdc
commit 82e9244cdc
parent aef0c929df
10 changed files with 117 additions and 41 deletions
--- a/README.md
+++ b/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
--- a/static/assets/app.css
+++ b/static/assets/app.css
@ -1,3 +1,7 @@
 body {
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 }
+
+.bg-gray-850 {
+    background-color: #242b3a;
+}
--- a/static/assets/app.js
+++ b/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 => {
-                        return {
-                            label: p.key,
-                            data: [parseInt(p.total) / 60],
-                            backgroundColor: getRandomColor(p.key)
-                        }
-                    })
+                        .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 => 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')
--- a/static/assets/images/screenshot.png
+++ b/static/assets/images/screenshot.png
--- a/version.txt
+++ b/version.txt
@ -1 +1 @@
-1.22.2
+1.22.3
--- a/views/imprint.tpl.html
+++ b/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" . }}

--- a/views/index.tpl.html
+++ b/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" . }}

--- a/views/login.tpl.html
+++ b/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" . }}

--- a/views/settings.tpl.html
+++ b/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 {
--- a/views/summary.tpl.html
+++ b/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>
 @ -1 +1 @@
 .22.2
 .22.3