1
0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00
wakapi/static/assets/js/summary.js

523 lines
21 KiB
JavaScript
Raw Normal View History

// dirty hack to vertically align legends across multiple charts
// however, without monospace font, it's still not perfectly aligned
// waiting for https://github.com/chartjs/Chart.js/discussions/9890
const LEGEND_CHARACTERS = 20
// https://hihayk.github.io/scale/#4/6/50/80/-51/67/20/14/276749/39/103/73/white
const baseColors = ['#112836', '#163B43', '#1C4F4D', '#215B4C', '#276749', '#437C57', '#5F9167', '#7DA67C', '#9FBA98', '#BFCEB5', '#DCE2D3']
2020-02-20 16:28:55 +03:00
2020-03-31 11:47:22 +03:00
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 machinesCanvas = document.getElementById('chart-machine')
const labelsCanvas = document.getElementById('chart-label')
const branchesCanvas = document.getElementById('chart-branches')
const entitiesCanvas = document.getElementById('chart-entities')
2020-02-20 16:28:55 +03:00
const projectContainer = document.getElementById('project-container')
const osContainer = document.getElementById('os-container')
const editorContainer = document.getElementById('editor-container')
const languageContainer = document.getElementById('language-container')
const machineContainer = document.getElementById('machine-container')
const labelContainer = document.getElementById('label-container')
const branchContainer = document.getElementById('branch-container')
const entityContainer = document.getElementById('entity-container')
const containers = [projectContainer, osContainer, editorContainer, languageContainer, machineContainer, labelContainer, branchContainer, entityContainer]
const canvases = [projectsCanvas, osCanvas, editorsCanvas, languagesCanvas, machinesCanvas, labelsCanvas, branchesCanvas, entitiesCanvas]
const data = [wakapiData.projects, wakapiData.operatingSystems, wakapiData.editors, wakapiData.languages, wakapiData.machines, wakapiData.labels, wakapiData.branches, wakapiData.entities]
let topNPickers = [...document.getElementsByClassName('top-picker')]
topNPickers.sort(((a, b) => parseInt(a.attributes['data-entity'].value) - parseInt(b.attributes['data-entity'].value)))
topNPickers.forEach(e => {
const idx = parseInt(e.attributes['data-entity'].value)
e.max = data[idx].length
e.value = Math.min(e.max, 9)
})
2020-02-20 16:28:55 +03:00
let charts = []
let showTopN = []
2020-02-20 16:28:55 +03:00
Chart.defaults.color = "#E2E8F0"
Chart.defaults.borderColor = "#242b3a"
Chart.defaults.font.family = 'Source Sans 3, Roboto, Helvetica Neue, Arial, sens-serif'
2021-02-06 01:42:20 +03:00
2020-02-20 16:28:55 +03:00
String.prototype.toHHMMSS = function () {
const sec_num = parseInt(this, 10)
let hours = Math.floor(sec_num / 3600)
let minutes = Math.floor((sec_num - (hours * 3600)) / 60)
let seconds = sec_num - (hours * 3600) - (minutes * 60)
2020-02-20 16:28:55 +03:00
if (hours < 10) {
hours = '0' + hours
}
if (minutes < 10) {
minutes = '0' + minutes
}
if (seconds < 10) {
seconds = '0' + seconds
}
return `${hours}:${minutes}:${seconds}`
2020-02-20 16:28:55 +03:00
}
function draw(subselection) {
2021-02-06 01:42:20 +03:00
function getTooltipOptions(key) {
2020-02-20 16:28:55 +03:00
return {
callbacks: {
label: (item) => {
2021-09-05 07:28:00 +03:00
const d = wakapiData[key][item.dataIndex]
return ` ${d.key}: ${d.total.toString().toHHMMSS()}`
},
title: () => 'Total Time',
footer: () => key === 'projects' ? 'Click for details' : null
2020-02-20 16:28:55 +03:00
}
}
}
function filterLegendItem(item) {
item.text = item.text.length > LEGEND_CHARACTERS ? item.text.slice(0, LEGEND_CHARACTERS - 3).padEnd(LEGEND_CHARACTERS, '.') : item.text
item.text = item.text.padEnd(LEGEND_CHARACTERS + 3)
return true
}
function shouldUpdate(index) {
return !subselection || (subselection.includes(index) && data[index].length >= showTopN[index])
}
charts
.filter((c, i) => shouldUpdate(i))
.forEach(c => c.destroy())
2020-02-20 16:28:55 +03:00
const vibrantColors = JSON.parse(window.localStorage.getItem('wakapi_vibrant_colors') || false);
let projectChart = projectsCanvas && !projectsCanvas.classList.contains('hidden') && shouldUpdate(0)
? new Chart(projectsCanvas.getContext('2d'), {
2021-08-29 12:55:58 +03:00
//type: 'horizontalBar',
type: "bar",
data: {
2021-02-06 01:42:20 +03:00
datasets: [{
data: wakapiData.projects
.slice(0, Math.min(showTopN[0], wakapiData.projects.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.projects.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
2021-02-06 01:42:20 +03:00
}),
hoverBackgroundColor: wakapiData.projects.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
2021-02-06 01:42:20 +03:00
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
}],
labels: wakapiData.projects
.slice(0, Math.min(showTopN[0], wakapiData.projects.length))
2021-02-06 01:42:20 +03:00
.map(p => p.key)
},
options: {
2021-08-29 12:55:58 +03:00
indexAxis: 'y',
scales: {
2021-09-05 21:25:24 +03:00
xAxes: {
title: {
display: true,
text: 'Duration (hh:mm:ss)',
},
ticks: {
2021-09-05 21:25:24 +03:00
callback: (label) => label.toString().toHHMMSS(),
}
2021-09-05 21:25:24 +03:00
}
},
2021-09-05 07:28:00 +03:00
plugins: {
legend: {
display: false,
2021-09-05 07:28:00 +03:00
},
tooltip: getTooltipOptions('projects'),
},
maintainAspectRatio: false,
onClick: (event, data) => {
const url = new URL(window.location.href)
const name = wakapiData.projects[data[0].index].key
url.searchParams.set('project', name === 'unknown' ? '-' : name)
2022-03-02 10:51:27 +03:00
window.location.href = url.href
},
onHover: (event, elem) => {
event.native.target.style.cursor = elem[0] ? 'pointer' : 'default'
}
}
})
: null
2020-02-20 16:28:55 +03:00
let osChart = osCanvas && !osCanvas.classList.contains('hidden') && shouldUpdate(1)
? new Chart(osCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: wakapiData.operatingSystems
.slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.operatingSystems.map((p, i) => {
const c = hexToRgb(vibrantColors ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
2021-02-06 01:42:20 +03:00
}),
hoverBackgroundColor: wakapiData.operatingSystems.map((p, i) => {
const c = hexToRgb(vibrantColors ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
2021-02-06 01:42:20 +03:00
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
borderWidth: 0
}],
labels: wakapiData.operatingSystems
.slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
.map(p => p.key)
},
options: {
2021-09-05 07:28:00 +03:00
plugins: {
tooltip: getTooltipOptions('operatingSystems'),
legend: {
position: 'right',
labels: {
filter: filterLegendItem
},
},
2021-09-05 07:28:00 +03:00
},
maintainAspectRatio: false,
}
})
: null
2020-02-20 16:28:55 +03:00
let editorChart = editorsCanvas && !editorsCanvas.classList.contains('hidden') && shouldUpdate(2)
? new Chart(editorsCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: wakapiData.editors
.slice(0, Math.min(showTopN[2], wakapiData.editors.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.editors.map((p, i) => {
const c = hexToRgb(vibrantColors ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
2021-02-06 01:42:20 +03:00
}),
hoverBackgroundColor: wakapiData.editors.map((p, i) => {
const c = hexToRgb(vibrantColors ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
2021-02-06 01:42:20 +03:00
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
borderWidth: 0
}],
labels: wakapiData.editors
.slice(0, Math.min(showTopN[2], wakapiData.editors.length))
.map(p => p.key)
},
options: {
2021-09-05 07:28:00 +03:00
plugins: {
tooltip: getTooltipOptions('editors'),
legend: {
position: 'right',
labels: {
filter: filterLegendItem
},
},
2021-09-05 07:28:00 +03:00
},
maintainAspectRatio: false,
}
})
: null
2020-02-20 16:28:55 +03:00
let languageChart = languagesCanvas && !languagesCanvas.classList.contains('hidden') && shouldUpdate(3)
? new Chart(languagesCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: wakapiData.languages
.slice(0, Math.min(showTopN[3], wakapiData.languages.length))
.map(p => parseInt(p.total)),
2021-02-06 01:42:20 +03:00
backgroundColor: wakapiData.languages.map(p => {
const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
2021-02-06 01:42:20 +03:00
}),
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)`
}),
borderWidth: 0
}],
labels: wakapiData.languages
.slice(0, Math.min(showTopN[3], wakapiData.languages.length))
.map(p => p.key)
},
options: {
2021-09-05 07:28:00 +03:00
plugins: {
tooltip: getTooltipOptions('languages'),
legend: {
position: 'right',
labels: {
filter: filterLegendItem
},
title: {
display: true,
}
},
2021-09-05 07:28:00 +03:00
},
maintainAspectRatio: false,
}
})
: null
2020-02-20 16:28:55 +03:00
let machineChart = machinesCanvas && !machinesCanvas.classList.contains('hidden') && shouldUpdate(4)
? new Chart(machinesCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: wakapiData.machines
.slice(0, Math.min(showTopN[4], wakapiData.machines.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.machines.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
2021-02-06 01:42:20 +03:00
}),
hoverBackgroundColor: wakapiData.machines.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i))
2021-02-06 01:42:20 +03:00
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
borderWidth: 0
}],
labels: wakapiData.machines
.slice(0, Math.min(showTopN[4], wakapiData.machines.length))
.map(p => p.key)
},
options: {
2021-09-05 07:28:00 +03:00
plugins: {
tooltip: getTooltipOptions('machines'),
legend: {
position: 'right',
labels: {
filter: filterLegendItem
},
},
2021-09-05 07:28:00 +03:00
},
maintainAspectRatio: false,
}
})
: null
let labelChart = labelsCanvas && !labelsCanvas.classList.contains('hidden') && shouldUpdate(5)
? new Chart(labelsCanvas.getContext('2d'), {
type: 'pie',
data: {
datasets: [{
data: wakapiData.labels
.slice(0, Math.min(showTopN[5], wakapiData.labels.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.labels.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.labels.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
borderWidth: 0
}],
labels: wakapiData.labels
.slice(0, Math.min(showTopN[5], wakapiData.labels.length))
.map(p => p.key)
},
options: {
2021-09-05 07:28:00 +03:00
plugins: {
tooltip: getTooltipOptions('labels'),
legend: {
position: 'right',
labels: {
filter: filterLegendItem
},
},
2021-09-05 07:28:00 +03:00
},
maintainAspectRatio: false,
}
})
: null
2022-02-22 10:19:51 +03:00
let branchChart = branchesCanvas && !branchesCanvas.classList.contains('hidden') && shouldUpdate(6)
? new Chart(branchesCanvas.getContext('2d'), {
type: "bar",
data: {
datasets: [{
data: wakapiData.branches
2022-02-22 10:19:51 +03:00
.slice(0, Math.min(showTopN[6], wakapiData.branches.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.branches.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.branches.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
}],
labels: wakapiData.branches
2022-02-22 10:19:51 +03:00
.slice(0, Math.min(showTopN[6], wakapiData.branches.length))
.map(p => p.key)
},
options: {
indexAxis: 'y',
scales: {
xAxes: {
title: {
display: true,
text: 'Duration (hh:mm:ss)',
},
ticks: {
callback: (label) => label.toString().toHHMMSS(),
}
}
},
plugins: {
legend: {
display: false,
},
tooltip: getTooltipOptions('branches'),
},
maintainAspectRatio: false,
}
})
: null
let entityChart = entitiesCanvas && !entitiesCanvas.classList.contains('hidden') && shouldUpdate(7)
? new Chart(entitiesCanvas.getContext('2d'), {
//type: 'horizontalBar',
type: "bar",
data: {
datasets: [{
data: wakapiData.entities
.slice(0, Math.min(showTopN[7], wakapiData.entities.length))
.map(p => parseInt(p.total)),
backgroundColor: wakapiData.entities.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
}),
hoverBackgroundColor: wakapiData.entities.map((p, i) => {
const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
}),
}],
labels: wakapiData.entities
.slice(0, Math.min(showTopN[7], wakapiData.entities.length))
.map(p => extractFile(p.key))
},
options: {
indexAxis: 'y',
scales: {
xAxes: {
title: {
display: true,
text: 'Duration (hh:mm:ss)',
},
ticks: {
callback: (label) => label.toString().toHHMMSS(),
}
}
},
plugins: {
legend: {
display: false,
},
tooltip: getTooltipOptions('entities'),
},
maintainAspectRatio: false,
onClick: (event, data) => {
const idx = data[0].index
const name = wakapiData.entities[idx].key
const url = new URL(window.location.href)
url.searchParams.set('project', name)
window.location.href = url.href
},
onHover: (event, elem) => {
event.native.target.style.cursor = elem[0] ? 'pointer' : 'default'
}
}
})
: null
2021-09-05 21:25:24 +03:00
charts[0] = projectChart ? projectChart : charts[0]
charts[1] = osChart ? osChart : charts[1]
charts[2] = editorChart ? editorChart : charts[2]
charts[3] = languageChart ? languageChart : charts[3]
charts[4] = machineChart ? machineChart : charts[4]
charts[5] = labelChart ? labelChart : charts[5]
charts[6] = branchChart ? branchChart : charts[6]
charts[7] = entityChart ? entityChart : charts[7]
2020-03-31 11:47:22 +03:00
}
function parseTopN() {
showTopN = topNPickers.map(e => parseInt(e.value))
}
function togglePlaceholders(mask) {
const placeholderElements = containers.map(c => c ? c.querySelector('.placeholder-container') : null)
for (let i = 0; i < mask.length; i++) {
if (placeholderElements[i] === null) {
continue;
}
if (!mask[i]) {
canvases[i].classList.add('hidden')
placeholderElements[i].classList.remove('hidden')
} else {
canvases[i].classList.remove('hidden')
placeholderElements[i].classList.add('hidden')
}
}
}
function getPresentDataMask() {
2020-11-28 22:50:35 +03:00
return data.map(list => (list ? list.reduce((acc, e) => acc + e.total, 0) : 0) > 0)
}
function getColor(seed, index) {
if (index < baseColors.length) return baseColors[(index + 5) % baseColors.length]
return getRandomColor(seed)
2020-02-20 16:28:55 +03:00
}
function getRandomColor(seed) {
2020-03-31 11:47:22 +03:00
seed = seed ? seed : '1234567'
Math.seedrandom(seed)
var letters = '0123456789ABCDEF'.split('')
var color = '#'
2020-02-20 16:28:55 +03:00
for (var i = 0; i < 6; i++) {
2020-03-31 11:47:22 +03:00
color += letters[Math.floor(Math.random() * 16)]
2020-02-20 16:28:55 +03:00
}
2020-03-31 11:47:22 +03:00
return color
2020-02-20 16:28:55 +03:00
}
2021-02-06 01:42:20 +03:00
// 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) {
2021-02-06 01:42:20 +03:00
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 swapCharts(showEntity, hideEntity) {
document.getElementById(`${showEntity}-container`).parentElement.classList.remove('hidden')
document.getElementById(`${hideEntity}-container`).parentElement.classList.add('hidden')
}
function extractFile(filePath) {
const delimiter = filePath.includes('\\') ? '\\' : '/' // windows style path?
return filePath.split(delimiter).at(-1)
}
2020-03-31 11:47:22 +03:00
window.addEventListener('load', function () {
topNPickers.forEach(e => e.addEventListener('change', () => {
parseTopN()
draw([parseInt(e.attributes['data-entity'].value)])
}))
parseTopN()
togglePlaceholders(getPresentDataMask())
2020-02-20 16:28:55 +03:00
draw()
2020-10-25 09:22:10 +03:00
})