Improve request — Improve chart

Norore 8 months ago committed by aeris
parent 4826c679e8
commit 5760e3b4dd
  1. 2
      app/controllers/statistics_controller.rb
  2. 96
      app/javascript/js/stats/index.js
  3. 5
      app/javascript/packs/application.js
  4. 10
      app/views/statistics/index.html.erb
  5. 9
      bin/stats
  6. 1
      package.json

@ -5,7 +5,7 @@ class StatisticsController < ApplicationController
service = params.fetch :id
respond_to do |format|
format.json do
json = Stat.find_by(name: "grades_for_#{service}", date: TODAY).dataset
json = Stat.where(name: "grades_for_#{service}").order(date: :desc).last.dataset
render json: json, status: :ok
end
end

@ -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'

@ -1,12 +1,12 @@
<div class="row">
<div class="col-4">
<h2>Requests per service</h2>
<!-- <div class="col-4">-->
<!-- <h2>Requests per service</h2>-->
<canvas id="servicesChart" aria-label="Pie chart for number of requests per service" role="img"></canvas>
</div>
<!-- <canvas id="servicesChart" aria-label="Pie chart for number of requests per service" role="img"></canvas>-->
<!-- </div>-->
<% %i[https smtp tls xmpp].each do |s| %>
<div class="col-4">
<div class="col-6">
<h2>Grades for service <%= s.to_s.upcase %></h2>
<canvas id="<%= "grades" + s.to_s.upcase_first + "Chart" %>" aria-label="Bar chart for number of grades for service <%= s.to_s.upcase %>" role="img"></canvas>

@ -21,11 +21,10 @@ Stat.create!(
grades = %w[A+ A B C D E F G].collect { |g| [g, 0] }.to_h
services.each do |service|
if (result = service.result)
result.each do |r|
next unless (grade = r['grade'])
grades[grade] += 1 if grades.has_key?(grade)
end
next unless (result = service.result)
result.each do |r|
next unless (grade = r['grade'])
grades[grade] += 1 if grades.has_key?(grade)
end
end

@ -8,6 +8,7 @@
"@rails/webpacker": "5.4.3",
"bootstrap": "^5.1.3",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"font-awesome": "^4.7.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"

Loading…
Cancel
Save