mirror/wakapi
1
0
Fork 0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00
Code Issues Projects Releases Wiki Activity

Only show top 10 items in graph.

Browse Source
This commit is contained in:
Ferdinand Mütsch 2019-07-07 11:17:45 +02:00
parent 8a3ce596f5
commit 5e1493ba36
1 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
static/index.html
View File

@ -86,13 +86,15 @@
<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
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 charts = []
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10);
var hours = Math.floor(sec_num / 3600);
@ -109,7 +111,7 @@
let user = document.getElementById('user-input').value
let password = document.getElementById('password-input').value
let hashed = btoa(`${user}:${password}`)
fetch(`${window.location.href}/api/summary?interval=${interval}&live=${live}`, {
method: 'GET',
headers: {
@ -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')
}
});
@ -221,7 +234,7 @@
getTotal(data.operating_systems)
document.getElementById('grid-container').style.visibility = 'visible';
charts = [projectChart, osChart, editorChart, languageChart]
charts = [projectChart, osChart, editorChart, languageChart]
}
function getRandomColor(seed) {