From 5760e3b4dd6eb25016eb43c6685869b37a8ea373 Mon Sep 17 00:00:00 2001 From: Norore Date: Sat, 2 Apr 2022 13:43:43 +0200 Subject: [PATCH] =?UTF-8?q?Improve=20request=20=E2=80=94=20Improve=20chart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/controllers/statistics_controller.rb | 2 +- app/javascript/js/stats/index.js | 96 ++++++++++++++++-------- app/javascript/packs/application.js | 5 +- app/views/statistics/index.html.erb | 10 +-- bin/stats | 9 +-- package.json | 1 + 6 files changed, 80 insertions(+), 43 deletions(-) diff --git a/app/controllers/statistics_controller.rb b/app/controllers/statistics_controller.rb index edc012c..925dfaa 100644 --- a/app/controllers/statistics_controller.rb +++ b/app/controllers/statistics_controller.rb @@ -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 diff --git a/app/javascript/js/stats/index.js b/app/javascript/js/stats/index.js index 38b01c5..cf14ee8 100644 --- a/app/javascript/js/stats/index.js +++ b/app/javascript/js/stats/index.js @@ -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() + }) + } + }); + } } -}); +) +; diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index a7b55bf..4c5ec4b 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -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' \ No newline at end of file +import 'js/stats/index' \ No newline at end of file diff --git a/app/views/statistics/index.html.erb b/app/views/statistics/index.html.erb index 424f6e3..6791ee8 100644 --- a/app/views/statistics/index.html.erb +++ b/app/views/statistics/index.html.erb @@ -1,12 +1,12 @@
-
-

Requests per service

+ + - -
+ + <% %i[https smtp tls xmpp].each do |s| %> -
+

Grades for service <%= s.to_s.upcase %>

" aria-label="Bar chart for number of grades for service <%= s.to_s.upcase %>" role="img"> diff --git a/bin/stats b/bin/stats index 751a4bb..dd3e432 100755 --- a/bin/stats +++ b/bin/stats @@ -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 diff --git a/package.json b/package.json index f6d30a0..e7f7dd1 100644 --- a/package.json +++ b/package.json @@ -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"