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

Only show top 10 items in graph.

This commit is contained in:
Ferdinand Mütsch 2019-07-07 11:17:45 +02:00
parent 8a3ce596f5
commit 5e1493ba36

View File

@ -86,12 +86,14 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script>
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 SHOW_TOP_N = 10
let charts = []
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 = []
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10);
@ -148,12 +150,13 @@
}
}
charts.forEach(c => c.destroy())
charts.forEach(c => c.destroy())
let projectChart = new Chart(projectsCanvas.getContext('2d'), {
type: 'horizontalBar',
data: {
datasets: data.projects
.slice(0, Math.min(SHOW_TOP_N, data.projects.length))
.map(p => {
return {
label: p.key,
@ -163,7 +166,7 @@
})
},
options: {
title: Object.assign(titleOptions, { text: 'Projects' }),
title: Object.assign(titleOptions, { text: `Projects (top ${SHOW_TOP_N})` }),
tooltips: getTooltipOptions('projects', 'bar'),
legend: {
display: false
@ -175,13 +178,17 @@
type: 'pie',
data: {
datasets: [{
data: data.operating_systems.map(p => parseInt(p.total)),
data: data.operating_systems
.slice(0, Math.min(SHOW_TOP_N, data.operating_systems.length))
.map(p => parseInt(p.total)),
backgroundColor: data.operating_systems.map(p => getRandomColor(p.key))
}],
labels: data.operating_systems.map(p => p.key)
labels: data.operating_systems
.slice(0, Math.min(SHOW_TOP_N, data.operating_systems.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, { text: 'Operating Systems' }),
title: Object.assign(titleOptions, { text: `Operating Systems (top ${SHOW_TOP_N})` }),
tooltips: getTooltipOptions('operating_systems', 'pie')
}
});
@ -190,13 +197,17 @@
type: 'pie',
data: {
datasets: [{
data: data.editors.map(p => parseInt(p.total)),
data: data.editors
.slice(0, Math.min(SHOW_TOP_N, data.editors.length))
.map(p => parseInt(p.total)),
backgroundColor: data.editors.map(p => getRandomColor(p.key))
}],
labels: data.editors.map(p => p.key)
labels: data.editors
.slice(0, Math.min(SHOW_TOP_N, data.editors.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, { text: 'Editors' }),
title: Object.assign(titleOptions, { text: `Editors (top ${SHOW_TOP_N})` }),
tooltips: getTooltipOptions('editors', 'pie')
}
});
@ -206,14 +217,16 @@
data: {
datasets: [{
data: data.languages
.slice(0, Math.min(SHOW_TOP_N, data.languages.length))
.map(p => parseInt(p.total)),
backgroundColor: data.languages.map(p => getRandomColor(p.key))
}],
labels: data.languages
.slice(0, Math.min(SHOW_TOP_N, data.languages.length))
.map(p => p.key)
},
options: {
title: Object.assign(titleOptions, { text: 'Languages' }),
title: Object.assign(titleOptions, { text: `Languages (top ${SHOW_TOP_N})` }),
tooltips: getTooltipOptions('languages', 'pie')
}
});