Fix #13.

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 projectsCanvas = document.getElementById('chart-projects')
-const osCanvas = document.getElementById("chart-os")
+const osCanvas = document.getElementById('chart-os')
-const editorsCanvas = document.getElementById("chart-editor")
+const editorsCanvas = document.getElementById('chart-editor')
-const languagesCanvas = document.getElementById("chart-language")
+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,36 +139,75 @@ 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';
+    seed = seed ? seed : '1234567'
-    Math.seedrandom(seed);
+    Math.seedrandom(seed)
-    var letters = '0123456789ABCDEF'.split('');
+    var letters = '0123456789ABCDEF'.split('')
-    var color = '#';
+    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");
+        const canvas = document.createElement('canvas')
-        canvas.height = 64;
+        canvas.height = 64
-        canvas.width = 64;
+        canvas.width = 64
-        const ctx = canvas.getContext("2d");
+        const ctx = canvas.getContext('2d')
-        ctx.font = "64px serif";
+        ctx.font = '64px serif'
-        ctx.fillText(emoji, 0, 64);
+        ctx.fillText(emoji, 0, 64)
-        favicon.href = canvas.toDataURL();
+        favicon.href = canvas.toDataURL()
     }
 }
 

views/index.tpl.html

@@ -10,7 +10,7 @@
     <link href="assets/app.css" rel="stylesheet">
 </head>
 
-<body class="bg-gray-800 text-gray-700 p-4 pt-12 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center">
+<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">
     <div class="flex items-center justify-center">
         <h1 class="font-semibold text-2xl text-white m-0 border-b-4 border-green-700">Your Coding Statistics 🤓</h1>
     </div>
@@ -22,7 +22,7 @@
         <a href="?interval=year" class="m-1 border-b border-green-700">This Year</a>
         <a href="?interval=any" class="m-1 border-b border-green-700">All Time</a>
     </div>
-    <main class="mt-12 flex-grow" id="grid-container">
+    <main class="mt-10 flex-grow" id="grid-container">
         <div class="flex justify-center">
             <div class="p-1">
                 <div class="flex justify-center p-4 bg-white rounded shadow">
@@ -34,23 +34,23 @@
         </div>
         <div class="flex flex-wrap justify-center">
             <div class="w-full lg:w-1/2 p-1">
-                <div class="p-4 bg-white rounded shadow m-2" id="projects-container">
+                <div class="p-4 bg-white rounded shadow m-2" id="projects-container" style="height: 300px">
                     <canvas id="chart-projects"></canvas>
                 </div>
             </div>
             <div class="w-full lg:w-1/2 p-1">
-                <div class="p-4 bg-white rounded shadow m-2" id="os-container">
+                <div class="p-4 bg-white rounded shadow m-2" id="os-container" style="height: 300px">
                     <canvas id="chart-os"></canvas>
                 </div>
             </div>
             <div class="w-full lg:w-1/2 p-1">
-                <div class="p-4 bg-white rounded shadow m-2" id="editor-container">
+                <div class="p-4 bg-white rounded shadow m-2 relative" id="language-container" style="height: 300px">
-                    <canvas id="chart-editor"></canvas>
+                    <canvas id="chart-language"></canvas>
                 </div>
             </div>
             <div class="w-full lg:w-1/2 p-1">
-                <div class="p-4 bg-white rounded shadow m-2" id="language-container">
+                <div class="p-4 bg-white rounded shadow m-2" id="editor-container" style="height: 300px">
-                    <canvas id="chart-language"></canvas>
+                    <canvas id="chart-editor"></canvas>
                 </div>
             </div>
         </div>