mirror
/
wakapi
mirror of https://github.com/muety/wakapi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix #13.

This commit is contained in:
Ferdinand Mütsch 2020-03-31 10:47:22 +02:00
parent bcb56a02ef
commit 0664861f74
2 changed files with 82 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
static/assets/app.js
View File

@ -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()
})

16
views/index.tpl.html
View File

@ -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">
<canvas id="chart-editor"></canvas>
<div class="p-4 bg-white rounded shadow m-2 relative" id="language-container" style="height: 300px">
<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">
<canvas id="chart-language"></canvas>
<div class="p-4 bg-white rounded shadow m-2" id="editor-container" style="height: 300px">
<canvas id="chart-editor"></canvas>
</div>
</div>
</div>