From 0664861f744d7ece6a3e221e4d7886b12ed7507d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferdinand=20M=C3=BCtsch?= Date: Tue, 31 Mar 2020 10:47:22 +0200 Subject: [PATCH] Fix #13. --- static/assets/app.js | 99 +++++++++++++++++++++++++++++++++----------- views/index.tpl.html | 16 +++---- 2 files changed, 82 insertions(+), 33 deletions(-) diff --git a/static/assets/app.js b/static/assets/app.js index 058ad99..aa6402c 100644 --- a/static/assets/app.js +++ b/static/assets/app.js @@ -1,11 +1,13 @@ const SHOW_TOP_N = 10 +const CHART_TARGET_SIZE = 170 -const projectsCanvas = document.getElementById("chart-projects") -const osCanvas = document.getElementById("chart-os") -const editorsCanvas = document.getElementById("chart-editor") -const languagesCanvas = document.getElementById("chart-language") +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 = [] +let resizeCount = 0 String.prototype.toHHMMSS = function () { var sec_num = parseInt(this, 10) @@ -64,7 +66,9 @@ function draw() { tooltips: getTooltipOptions('projects', 'bar'), legend: { display: false - } + }, + maintainAspectRatio: false, + onResize: onChartResize } }) @@ -83,7 +87,9 @@ function draw() { }, options: { title: Object.assign(titleOptions, {text: `Operating Systems (top ${SHOW_TOP_N})`}), - tooltips: getTooltipOptions('operatingSystems', 'pie') + tooltips: getTooltipOptions('operatingSystems', 'pie'), + maintainAspectRatio: false, + onResize: onChartResize } }) @@ -102,7 +108,9 @@ function draw() { }, options: { title: Object.assign(titleOptions, {text: `Editors (top ${SHOW_TOP_N})`}), - tooltips: getTooltipOptions('editors', 'pie') + tooltips: getTooltipOptions('editors', 'pie'), + maintainAspectRatio: false, + onResize: onChartResize } }) @@ -121,7 +129,9 @@ function draw() { }, options: { title: Object.assign(titleOptions, {text: `Languages (top ${SHOW_TOP_N})`}), - tooltips: getTooltipOptions('languages', 'pie') + tooltips: getTooltipOptions('languages', 'pie'), + maintainAspectRatio: false, + onResize: onChartResize } }) @@ -129,39 +139,78 @@ function draw() { document.getElementById('grid-container').style.visibility = 'visible' charts = [projectChart, osChart, editorChart, languageChart] + + charts.forEach(c => c.options.onResize(c.chart)) + equalizeHeights() +} + +function getContainer(chart) { + return chart.canvas.parentNode +} + +function onChartResize(chart) { + let container = getContainer(chart) + let targetHeight = Math.min(chart.width, CHART_TARGET_SIZE) + let actualHeight = chart.height - chart.chartArea.top + let containerTargetHeight = container.clientHeight += (targetHeight - actualHeight) + container.style.height = parseInt(containerTargetHeight) + 'px' + + resizeCount++ + watchEqualize() +} + +function watchEqualize() { + if (resizeCount === charts.length) { + equalizeHeights() + resizeCount = 0 + } +} + +function equalizeHeights() { + let maxHeight = 0 + charts.forEach(c => { + let container = getContainer(c) + if (maxHeight < container.clientHeight) { + maxHeight = container.clientHeight + } + }) + charts.forEach(c => { + let container = getContainer(c) + container.style.height = parseInt(maxHeight) + 'px' + }) } function getTotal(data) { let total = data.reduce((acc, d) => acc + d.total, 0) - document.getElementById("total-span").innerText = total.toString().toHHMMSS() + document.getElementById('total-span').innerText = total.toString().toHHMMSS() } function getRandomColor(seed) { - seed = seed ? seed : '1234567'; - Math.seedrandom(seed); - var letters = '0123456789ABCDEF'.split(''); - var color = '#'; + 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)]; + color += letters[Math.floor(Math.random() * 16)] } - return color; + return color } // https://koddsson.com/posts/emoji-favicon/ -const favicon = document.querySelector("link[rel=icon]"); +const favicon = document.querySelector('link[rel=icon]') if (favicon) { - const emoji = favicon.getAttribute("data-emoji"); + 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(); + 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() { +window.addEventListener('load', function () { draw() }) \ No newline at end of file diff --git a/views/index.tpl.html b/views/index.tpl.html index 4316dfa..d6b510f 100644 --- a/views/index.tpl.html +++ b/views/index.tpl.html @@ -10,7 +10,7 @@ - +

Your Coding Statistics 🤓

@@ -22,7 +22,7 @@ This Year All Time -
+
@@ -34,23 +34,23 @@
-
+
-
+
-
- +
+
-
- +
+