Skip to content

Commit

Permalink
feat: ability to choose number of top entities to display (resolve #81)
Browse files Browse the repository at this point in the history
  • Loading branch information
@muety
muety committed Jan 5, 2021
1 parent 39c4777 commit 9766d8e
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 39 deletions.
66 changes: 43 additions & 23 deletions static/assets/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const SHOW_TOP_N = 10
const CHART_TARGET_SIZE = 200

const projectsCanvas = document.getElementById('chart-projects')
Expand All @@ -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 () {
Expand All @@ -38,7 +46,7 @@ String.prototype.toHHMMSS = function () {
return hours + ':' + minutes + ':' + seconds
}

function draw() {
function draw(subselection) {
function getTooltipOptions(key, type) {
return {
mode: 'single',
Expand All @@ -53,14 +61,20 @@ function draw() {
}
}

charts.forEach(c => c.destroy())
function shouldUpdate(index) {
return !subselection || (subselection.includes(index) && data[index].length >= showTopN[index])
}

charts
.filter((c, i) => shouldUpdate(i))
.forEach(c => c.destroy())

let projectChart = !projectsCanvas.classList.contains('hidden')
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,
Expand Down Expand Up @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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) {
Expand Down Expand Up @@ -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()
})
Expand Down
2 changes: 1 addition & 1 deletion version.txt
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
1.17.4
1.18.0
50 changes: 35 additions & 15 deletions views/summary.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,13 @@ <h1 class="font-semibold text-2xl text-white m-0 border-b-4 border-green-700">Yo
<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:&nbsp;</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">
Expand All @@ -79,9 +83,13 @@ <h1 class="font-semibold text-2xl text-white m-0 border-b-4 border-green-700">Yo
</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:&nbsp;</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">
Expand All @@ -92,9 +100,13 @@ <h1 class="font-semibold text-2xl text-white m-0 border-b-4 border-green-700">Yo
</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:&nbsp;</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">
Expand All @@ -105,9 +117,13 @@ <h1 class="font-semibold text-2xl text-white m-0 border-b-4 border-green-700">Yo
</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:&nbsp;</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">
Expand All @@ -118,9 +134,13 @@ <h1 class="font-semibold text-2xl text-white m-0 border-b-4 border-green-700">Yo
</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:&nbsp;</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">
Expand Down

0 comments on commit 9766d8e

Please sign in to comment.