6 changed files with 80 additions and 43 deletions
@ -1,34 +1,70 @@ |
|||
document.addEventListener("DOMContentLoaded", () => { |
|||
let background = [ |
|||
'#5cb85c', |
|||
'#8db457', |
|||
'#beb052', |
|||
'#f0ad4e', |
|||
'#e4804e', |
|||
'#d9534f', |
|||
'#bb3d39', |
|||
'#000' |
|||
] |
|||
let background = [ |
|||
'#5cb85c', |
|||
'#8db457', |
|||
'#beb052', |
|||
'#f0ad4e', |
|||
'#e4804e', |
|||
'#d9534f', |
|||
'#bb3d39', |
|||
'#000' |
|||
] |
|||
|
|||
for (const service of ["https", "smtp", "tls", "xmpp"]) { |
|||
const name = service.replace(/^\w/, c => c.toUpperCase()) |
|||
console.info(`grades${name}Chart`) |
|||
const canvas = document.getElementById(`grades${name}Chart`).getContext('2d') |
|||
// const chart = new Chart(canvas, {
|
|||
// type: 'pie',
|
|||
// options: {
|
|||
// interaction: {
|
|||
// intersect: false,
|
|||
// mode: 'dataset',
|
|||
// }
|
|||
// }
|
|||
// })
|
|||
const chart = new Chart(canvas, { |
|||
type: 'bar', |
|||
options: { |
|||
interaction: { |
|||
intersect: false, |
|||
mode: 'dataset', |
|||
}, |
|||
plugins: { |
|||
datalabels: { |
|||
anchor: 'end', |
|||
align: 'top', |
|||
formatter: ((value, context) => { |
|||
const index = context.dataIndex |
|||
const keys = Object.keys(context.dataset.data) |
|||
value = context.dataset.data[keys[index]] |
|||
return value |
|||
}), |
|||
color: "black", |
|||
font: { |
|||
weight: "bold", |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
for (const service of ["https", "smtp", "tls", "xmpp"]) { |
|||
const name = service.replace(/^\w/, c => c.toUpperCase()) |
|||
console.info(`grades${name}Chart`) |
|||
const canvas = document.getElementById(`grades${name}Chart`).getContext('2d') |
|||
const chart = new Chart(canvas, {type: 'pie'}) |
|||
|
|||
fetch(`/statistics/${service}.json`).then((response) => { |
|||
if (response.status === 200) { |
|||
response.json().then((data) => { |
|||
chart.data.labels = Object.keys(data) |
|||
chart.data.datasets = [{ |
|||
label: 'Number of request', |
|||
data: Object.values(data), |
|||
backgroundColor: background |
|||
}] |
|||
chart.update() |
|||
}) |
|||
} |
|||
}); |
|||
fetch(`/statistics/${service}.json`).then((response) => { |
|||
if (response.status === 200) { |
|||
response.json().then((data) => { |
|||
const labels = ["A+", "A", "B", "C", "D", "E", "F", "G"] |
|||
const dataset = JSON.parse(JSON.stringify(data, labels, 2)) |
|||
chart.data.labels = labels |
|||
chart.data.datasets = [{ |
|||
label: 'Number of request', |
|||
data: dataset, |
|||
backgroundColor: background |
|||
}] |
|||
chart.update() |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
) |
|||
; |
|||
|
@ -1,7 +1,8 @@ |
|||
import 'css/application' |
|||
|
|||
import Chart from 'chart.js/auto' |
|||
import ChartDataLabels from 'chartjs-plugin-datalabels' |
|||
global.Chart = Chart |
|||
Chart.register(ChartDataLabels) |
|||
|
|||
import 'js/stats/index' |
|||
import 'js/stats/grades' |
|||
import 'js/stats/index' |
Loading…
Reference in new issue