Improve request — Improve chart

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

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()
+                    })
+                }
+            });
+        }
     }
-});
+)
+;

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'
+import 'js/stats/index'

app/views/statistics/index.html.erb

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

bin/stats

@@ -86,11 +86,10 @@ Stat.create! :request_per_service, { labels: services.keys, dataset: services.va
 
   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
 

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"