Start to add statistics pages

app/controllers/statistics_controller.rb

@@ -0,0 +1,23 @@
+class StatisticsController < ApplicationController
+  TODAY = Date.today
+
+  def show
+    service = params.fetch :id
+    respond_to do |format|
+      format.json do
+        json = Stat.where(name: "grades_for_#{service}").order(date: :desc).first.data
+        render json: json, status: :ok
+      end
+    end
+  end
+
+  def ciphers
+    service = params.fetch :id
+    render json: Stat.where(name: "ciphers_for_#{service}").order(date: :desc).first.data
+  end
+
+  def tls
+    service = params.fetch :id
+    render json: Stat.where(name: "tls_for_#{service}").order(date: :desc).first.data
+  end
+end

app/javascript/css/application.scss

@@ -195,3 +195,44 @@ table.scoring img {
 		max-width: 140px;
 	}
 }
+
+/** Navigation tabs */
+.tab-content {
+	border: 1px solid $nav-pills-link-active-bg;
+	border-bottom-left-radius: .3rem;
+	border-bottom-right-radius: .3rem;
+}
+
+.nav-pills .nav-link {
+	border-radius: .3rem;
+	font-weight: bold;
+}
+
+.nav-pills .nav-link.active {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	font-weight: bolder;
+}
+
+/** Chart CSS */
+.cumulative-datas {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+
+	&-content {
+		position: absolute;
+		height: 2rem;
+	}
+}
+
+.cumulative-data {
+	height: 2rem;
+	line-height: 2rem;
+	display: inline-block;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	margin-right: .1rem;
+	padding-left: .3rem;
+}

app/javascript/packs/application.js

@@ -1 +1,2 @@
 import 'css/application'
+import 'bootstrap/js/src/tab'

app/views/statistics/grade.html.erb

@@ -0,0 +1,7 @@
+<div>
+  Nombre de recherche <%= params[:service] %> : <%= @services.size %>
+</div>
+
+<div>
+  <canvas id="gradesChart"></canvas>
+</div>

app/views/statistics/index.html.erb

@@ -0,0 +1,124 @@
+<% colors = {
+  "A+" => '#5cb85c',
+  "good" => '#5cb85c',
+  "A" => '#5cb85c',
+  "B+" => '#8db457',
+  "B" => '#8db457',
+  "C+" => '#beb052',
+  "C" => '#beb052',
+  "D" => '#6c757d',
+  "E" => '#f0ad4e',
+  "F" => '#e4804e',
+  "G" => '#d9534f',
+  "bad" => '#d9534f',
+  "ssl" => '#d9534f',
+  "tls" => '#e4804e',
+  "tls1_2" => '#aaaaaa',
+  "tls1_2_only" => '#5cb85c'
+} %>
+
+<ul class="nav nav-pills nav-fill" id="pills-tab" role="Navigation stats list">
+  <% %i[https smtp tls xmpp].each do |service| %>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link<%= " active btn-dark" if service.to_s == "https" %>"
+              id="nav-<%= service %>-pill" data-bs-toggle="pill"
+              data-bs-target="#nav-<%= service %>" type="button" role="Button to show <%= service %> stats" aria-controls="nav-<%= service %>" aria-selected="true">
+        <%= service.to_s.upcase %>
+      </button>
+    </li>
+  <% end %>
+</ul>
+
+<div class="tab-content p-2" id="nav-pillsContent">
+  <% %i[https smtp tls xmpp].each do |service| %>
+    <div class="tab-pane fade show <%= "active" if service.to_s == "https" %>"
+         id="nav-<%= service %>" role="<%= service.to_s %>> stats"
+         aria-labelledby="nav-<%= service %>-pill">
+      <h2>Grades for service <%= service.to_s.upcase %></h2>
+
+
+      <% grades = Stat.where(name: "grades_for_#{service}").order(date: :desc).first
+         total = grades.data.collect { _2 }.sum %>
+
+      <p>Over <%= total %> URL tested with a grade.</p>
+
+      <div class="cumulative-datas">
+        <% left = 0
+           percent_total = 100
+           grades.data.sort_by(&:first).each do |grade, number|
+        %>
+          <% unless %w(T V).include?(grade)
+               percent = (number.to_f / total.to_f) * 100.0
+               color = colors[grade]
+               if percent > 1 %>
+              <div class="cumulative-data" style="left: <%= left %>; width: <%= percent.round %>%; background-color: <%= color %>;">
+                <%= "#{grade}: #{percent.round}% (#{number})" %>
+              </div>
+            <% left += percent.round
+               end
+               end
+               end
+               percent = percent_total - left %>
+        <div class="cumulative-data" style="left: <%= left %>; width: <%= percent.round %>%; background-color: lightgray;">
+          <%= "Other: #{percent.round}%" %>
+        </div>
+      </div>
+
+      <h2>Ciphers for service <%= service.to_s.upcase %></h2>
+
+      <% ciphers = Stat.where(name: "ciphers_for_#{service}").order(date: :desc).first
+         total = ciphers.data.collect { _2 }.sum
+      %>
+      <p>Over <%= total %> URL tested with a cipher.</p>
+
+      <div class="cumulative-datas">
+        <% left = 0
+           percent_total = 100
+           ciphers.data.sort_by(&:first).each do |grade, number|
+        %>
+          <%
+            percent = (number.to_f / total.to_f) * 100.0
+            color = colors[grade] %>
+          <div class="cumulative-data" style="left: <%= left %>; width: <%= percent.round %>%; background-color: <%= color %>;">
+            <%= "#{grade.capitalize}: #{percent.round}% (#{number})" %>
+          </div>
+        <% left += percent.round
+           end
+           percent = percent_total - left
+           if percent > 0 %>
+          <div class="cumulative-data" style="left: <%= left %>; width: <%= percent.round %>%; background-color: lightgray;">
+            <%= "Other: #{percent.round}%" %>
+          </div>
+        <% end %>
+      </div>
+
+      <h2>TLS for service <%= service.to_s.upcase %></h2>
+
+      <% tls = Stat.where(name: "tls_for_#{service}").order(date: :desc).first
+         total = tls.data.collect { _2 }.sum
+      %>
+      <p>Over <%= total %> URL tested with TLS.</p>
+
+      <div class="cumulative-datas">
+        <% left = 0
+           percent_total = 100
+           tls.data.sort_by(&:first).each do |grade, number|
+        %>
+          <%
+            percent = (number.to_f / total.to_f) * 100.0
+            color = colors[grade] %>
+          <div class="cumulative-data" style="left: <%= left %>; width: <%= percent.round %>%; background-color: <%= color %>;">
+            <%= "#{grade.capitalize}: #{percent.round}% (#{number})" %>
+          </div>
+        <% left += percent.round
+           end
+           percent = percent_total - left
+           if percent > 0 %>
+          <div class="cumulative-data" style="left: <%= left %>; width: <%= percent.round %>%; background-color: lightgray;">
+            <%= "Other: #{percent.round}%" %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

config/routes.rb

@@ -18,6 +18,13 @@ Rails.application.routes.draw do
 
   get 'sites' => 'site#sites'
 
+  resources :statistics, only: %i[index show] do
+    member do
+      get "ciphers", to: "statistics#ciphers"
+      get "tls", to: "statistics#tls"
+    end
+  end
+
   %i[banks insurances gouv.fr].each do |name|
     get name, controller: :sites, action: name
   end