mirror of https://github.com/muety/wakapi.git
feat: ability to choose number of top entities to display (resolve #81)
This commit is contained in:
Ferdinand Mütsch
parent
39c4777fc8
commit
9766d8e903
|
|
@ -1,4 +1,3 @@
|
|||
const SHOW_TOP_N = 10
|
||||
const CHART_TARGET_SIZE = 200
|
||||
|
||||
const projectsCanvas = document.getElementById('chart-projects')
|
||||
|
|
@ -17,7 +16,16 @@ const containers = [projectContainer, osContainer, editorContainer, languageCont
|
|||
const canvases = [projectsCanvas, osCanvas, editorsCanvas, languagesCanvas, machinesCanvas]
|
||||
const data = [wakapiData.projects, wakapiData.operatingSystems, wakapiData.editors, wakapiData.languages, wakapiData.machines]
|
||||
|
||||
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 = Math.min(data[idx].length, 10)
|
||||
e.value = e.max
|
||||
})
|
||||
|
||||
let charts = []
|
||||
let showTopN = []
|
||||
let resizeCount = 0
|
||||
|
||||
String.prototype.toHHMMSS = function () {
|
||||
|
|
@ -38,7 +46,7 @@ String.prototype.toHHMMSS = function () {
|
|||
return hours + ':' + minutes + ':' + seconds
|
||||
}
|
||||
|
||||
function draw() {
|
||||
function draw(subselection) {
|
||||
function getTooltipOptions(key, type) {
|
||||
return {
|
||||
mode: 'single',
|
||||
|
|
@ -53,14 +61,20 @@ function draw() {
|
|||
}
|
||||
}
|
||||
|
||||
charts.forEach(c => c.destroy())
|
||||
function shouldUpdate(index) {
|
||||
return !subselection || (subselection.includes(index) && data[index].length >= showTopN[index])
|
||||
}
|
||||
|
||||
let projectChart = !projectsCanvas.classList.contains('hidden')
|
||||
charts
|
||||
.filter((c, i) => shouldUpdate(i))
|
||||
.forEach(c => c.destroy())
|
||||
|
||||
let projectChart = !projectsCanvas.classList.contains('hidden') && shouldUpdate(0)
|
||||
? new Chart(projectsCanvas.getContext('2d'), {
|
||||
type: 'horizontalBar',
|
||||
data: {
|
||||
datasets: wakapiData.projects
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.projects.length))
|
||||
.slice(0, Math.min(showTopN[0], wakapiData.projects.length))
|
||||
.map(p => {
|
||||
return {
|
||||
label: p.key,
|
||||
|
|
@ -88,18 +102,18 @@ function draw() {
|
|||
})
|
||||
: null
|
||||
|
||||
let osChart = !osCanvas.classList.contains('hidden')
|
||||
let osChart = !osCanvas.classList.contains('hidden') && shouldUpdate(1)
|
||||
? new Chart(osCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.operatingSystems
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.operatingSystems.length))
|
||||
.slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
|
||||
.map(p => parseInt(p.total)),
|
||||
backgroundColor: wakapiData.operatingSystems.map(p => getRandomColor(p.key))
|
||||
}],
|
||||
labels: wakapiData.operatingSystems
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.operatingSystems.length))
|
||||
.slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
|
|
@ -110,18 +124,18 @@ function draw() {
|
|||
})
|
||||
: null
|
||||
|
||||
let editorChart = !editorsCanvas.classList.contains('hidden')
|
||||
let editorChart = !editorsCanvas.classList.contains('hidden') && shouldUpdate(2)
|
||||
? new Chart(editorsCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.editors
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.editors.length))
|
||||
.slice(0, Math.min(showTopN[2], wakapiData.editors.length))
|
||||
.map(p => parseInt(p.total)),
|
||||
backgroundColor: wakapiData.editors.map(p => getRandomColor(p.key))
|
||||
}],
|
||||
labels: wakapiData.editors
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.editors.length))
|
||||
.slice(0, Math.min(showTopN[2], wakapiData.editors.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
|
|
@ -132,18 +146,18 @@ function draw() {
|
|||
})
|
||||
: null
|
||||
|
||||
let languageChart = !languagesCanvas.classList.contains('hidden')
|
||||
let languageChart = !languagesCanvas.classList.contains('hidden') && shouldUpdate(3)
|
||||
? new Chart(languagesCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.languages
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.languages.length))
|
||||
.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))
|
||||
}],
|
||||
labels: wakapiData.languages
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.languages.length))
|
||||
.slice(0, Math.min(showTopN[3], wakapiData.languages.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
|
|
@ -154,18 +168,18 @@ function draw() {
|
|||
})
|
||||
: null
|
||||
|
||||
let machineChart = !machinesCanvas.classList.contains('hidden')
|
||||
let machineChart = !machinesCanvas.classList.contains('hidden') && shouldUpdate(4)
|
||||
? new Chart(machinesCanvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: wakapiData.machines
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.machines.length))
|
||||
.slice(0, Math.min(showTopN[4], wakapiData.machines.length))
|
||||
.map(p => parseInt(p.total)),
|
||||
backgroundColor: wakapiData.machines.map(p => getRandomColor(p.key))
|
||||
}],
|
||||
labels: wakapiData.machines
|
||||
.slice(0, Math.min(SHOW_TOP_N, wakapiData.machines.length))
|
||||
.slice(0, Math.min(showTopN[4], wakapiData.machines.length))
|
||||
.map(p => p.key)
|
||||
},
|
||||
options: {
|
||||
|
|
@ -180,13 +194,14 @@ function draw() {
|
|||
|
||||
charts = [projectChart, osChart, editorChart, languageChart, machineChart].filter(c => !!c)
|
||||
|
||||
charts.forEach(c => c.options.onResize(c.chart))
|
||||
equalizeHeights()
|
||||
if (!subselection) {
|
||||
charts.forEach(c => c.options.onResize(c.chart))
|
||||
equalizeHeights()
|
||||
}
|
||||
}
|
||||
|
||||
function setTopLabels() {
|
||||
[...document.getElementsByClassName('top-label')]
|
||||
.forEach(e => e.innerText = `(top ${SHOW_TOP_N})`)
|
||||
function parseTopN() {
|
||||
showTopN = topNPickers.map(e => parseInt(e.value))
|
||||
}
|
||||
|
||||
function togglePlaceholders(mask) {
|
||||
|
|
@ -301,7 +316,12 @@ window.addEventListener('click', function (event) {
|
|||
})
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
setTopLabels()
|
||||
topNPickers.forEach(e => e.addEventListener('change', () => {
|
||||
parseTopN()
|
||||
draw([parseInt(e.attributes['data-entity'].value)])
|
||||
}))
|
||||
|
||||
parseTopN()
|
||||
togglePlaceholders(getPresentDataMask())
|
||||
draw()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
1.17.4
|
||||
1.18.0
|
||||
|
|
|
|||
|
|
@ -66,9 +66,13 @@
|
|||
<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="self-center flex">
|
||||
<span class="font-semibold mr-1">Projects</span>
|
||||
<span id="project-top-label" class="top-label"></span>
|
||||
<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: </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">
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chart-projects"></canvas>
|
||||
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
|
||||
|
|
@ -79,9 +83,13 @@
|
|||
</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="self-center flex">
|
||||
<span class="font-semibold mr-1">Operating Systems</span>
|
||||
<span id="os-top-label" class="top-label"></span>
|
||||
<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: </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">
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chart-os"></canvas>
|
||||
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
|
||||
|
|
@ -92,9 +100,13 @@
|
|||
</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="self-center flex">
|
||||
<span class="font-semibold mr-1">Languages</span>
|
||||
<span id="language-top-label" class="top-label"></span>
|
||||
<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: </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">
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chart-language"></canvas>
|
||||
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
|
||||
|
|
@ -105,9 +117,13 @@
|
|||
</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="self-center flex">
|
||||
<span class="font-semibold mr-1">Editors</span>
|
||||
<span id="editor-top-label" class="top-label"></span>
|
||||
<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: </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">
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chart-editor"></canvas>
|
||||
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
|
||||
|
|
@ -118,9 +134,13 @@
|
|||
</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="self-center flex">
|
||||
<span class="font-semibold mr-1">Machines</span>
|
||||
<span id="machine-top-label" class="top-label"></span>
|
||||
<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: </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">
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chart-machine"></canvas>
|
||||
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
|
||||
|
|
|
|||
Loading…
Reference in New Issue