From adfea01cdbe5d1d31b797d1d481e6c9dcfa4bce7 Mon Sep 17 00:00:00 2001
From: Emiliano Frascaro <ing.eminux@gmail.com>
Date: Tue, 8 Sep 2026 22:14:35 +0200
Subject: [PATCH] Permette di filtrare il grafico analytics su una singola
 pagina.

Aggiunge il filtro Pagina (grafico) e il link Grafico in tabella, mantenendo Da/A/Device.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../controllers/admin/analytics_controller.rb | 22 +++++-----
 .../app/views/admin/analytics/index.html.erb  | 42 ++++++++++++++++---
 backend/app/views/layouts/admin.html.erb      |  2 +-
 backend/config/locales/admin.de.yml           |  9 +++-
 backend/config/locales/admin.en.yml           |  9 +++-
 backend/config/locales/admin.es.yml           |  9 +++-
 backend/config/locales/admin.fr.yml           |  9 +++-
 backend/config/locales/admin.it.yml           |  9 +++-
 backend/public/admin.css                      |  8 ++++
 backend/spec/requests/admin/analytics_spec.rb | 20 +++++++++
 10 files changed, 112 insertions(+), 27 deletions(-)

diff --git a/backend/app/controllers/admin/analytics_controller.rb b/backend/app/controllers/admin/analytics_controller.rb
index df9e22c..2e52672 100644
--- a/backend/app/controllers/admin/analytics_controller.rb
+++ b/backend/app/controllers/admin/analytics_controller.rb
@@ -6,7 +6,8 @@ module Admin
       @filters = {
         from: parse_date(params[:from]) || 7.days.ago.to_date,
         to: parse_date(params[:to]) || Time.zone.today,
-        device: params[:device].presence
+        device: params[:device].presence,
+        chart_path: params[:chart_path].presence
       }
       @analytics_preview_active = analytics_preview_active?
 
@@ -37,21 +38,22 @@ module Admin
         }
       end.sort_by { |r| [-r[:pageviews], -r[:moves], -r[:clicks], r[:page_path]] }
 
-      pageviews_by_day = scope.group(:day).sum(:pageview_count)
-      clicks_by_day = cell_scope.group(:day).sum(:click_count)
-      moves_by_day = cell_scope.group(:day).sum(:move_count)
+      @chart_path_options = @pages.map { |row| row[:page_path] }
+      if @filters[:chart_path].present? && @chart_path_options.exclude?(@filters[:chart_path])
+        @filters[:chart_path] = nil
+      end
+
+      trend_scope = scope
+      trend_scope = trend_scope.where(page_path: @filters[:chart_path]) if @filters[:chart_path].present?
+      pageviews_by_day = trend_scope.group(:day).sum(:pageview_count)
       @trend = (@filters[:from]..@filters[:to]).map do |day|
         {
           day: day.iso8601,
-          pageviews: pageviews_by_day[day].to_i,
-          clicks: clicks_by_day[day].to_i,
-          moves: moves_by_day[day].to_i
+          pageviews: pageviews_by_day[day].to_i
         }
       end
       @trend_totals = {
-        pageviews: @trend.sum { |r| r[:pageviews] },
-        clicks: @trend.sum { |r| r[:clicks] },
-        moves: @trend.sum { |r| r[:moves] }
+        pageviews: @trend.sum { |r| r[:pageviews] }
       }
     end
 
diff --git a/backend/app/views/admin/analytics/index.html.erb b/backend/app/views/admin/analytics/index.html.erb
index 5aa485c..d2a5062 100644
--- a/backend/app/views/admin/analytics/index.html.erb
+++ b/backend/app/views/admin/analytics/index.html.erb
@@ -50,6 +50,14 @@
                 @filters[:device]
               ) %>
       </label>
+      <label class="admin-filter-field">
+        <span><%= t("admin.analytics.filters.chart_path") %></span>
+        <%= select_tag :chart_path,
+              options_for_select(
+                [[t("admin.analytics.filters.chart_path_all"), ""]] + @chart_path_options.map { |p| [p, p] },
+                @filters[:chart_path]
+              ) %>
+      </label>
     </div>
     <div class="admin-filter-actions">
       <%= submit_tag t("admin.analytics.filters.apply"), class: "admin-btn admin-btn--primary admin-btn--sm" %>
@@ -63,7 +71,13 @@
     <div class="admin-analytics-trend__head">
       <div>
         <h3><%= t("admin.analytics.index.trend_title") %></h3>
-        <p class="muted admin-table-sub"><%= t("admin.analytics.index.trend_lead") %></p>
+        <p class="muted admin-table-sub">
+          <% if @filters[:chart_path].present? %>
+            <%= t("admin.analytics.index.trend_lead_path", path: @filters[:chart_path]) %>
+          <% else %>
+            <%= t("admin.analytics.index.trend_lead") %>
+          <% end %>
+        </p>
       </div>
       <button type="button"
               id="admin-analytics-trend-toggle"
@@ -74,9 +88,21 @@
     <div id="admin-analytics-trend-body">
       <div class="kpi-grid admin-analytics-trend__kpi">
         <div class="kpi">
-          <div class="kpi-label"><%= t("admin.analytics.index.trend_total_label") %></div>
+          <div class="kpi-label">
+            <% if @filters[:chart_path].present? %>
+              <%= t("admin.analytics.index.trend_total_label_path") %>
+            <% else %>
+              <%= t("admin.analytics.index.trend_total_label") %>
+            <% end %>
+          </div>
           <div class="kpi-value"><%= @trend_totals[:pageviews] %></div>
-          <div class="kpi-sub muted"><%= t("admin.analytics.index.trend_total_hint", from: l(@filters[:from]), to: l(@filters[:to])) %></div>
+          <div class="kpi-sub muted">
+            <% if @filters[:chart_path].present? %>
+              <code class="admin-mono"><%= @filters[:chart_path] %></code>
+              ·
+            <% end %>
+            <%= t("admin.analytics.index.trend_total_hint", from: l(@filters[:from]), to: l(@filters[:to])) %>
+          </div>
         </div>
       </div>
       <div class="chart-wrap chart-wrap--analytics">
@@ -93,7 +119,7 @@
     };
   </script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" crossorigin="anonymous"></script>
-  <script src="/admin-analytics.js?v=2" defer></script>
+  <script src="/admin-analytics.js?v=3" defer></script>
 <% end %>
 
 <div class="panel">
@@ -116,14 +142,18 @@
         <tbody>
           <% @pages.each do |row| %>
             <% avg = row[:scroll_samples].positive? ? (row[:scroll_sum].to_f / row[:scroll_samples]).round : 0 %>
-            <tr>
+            <% chart_params = { from: @filters[:from], to: @filters[:to], chart_path: row[:page_path] } %>
+            <% chart_params[:device] = @filters[:device] if @filters[:device].present? %>
+            <tr class="<%= "is-chart-focus" if @filters[:chart_path] == row[:page_path] %>">
               <td><code class="admin-mono"><%= row[:page_path] %></code></td>
               <td><%= row[:pageviews] %></td>
               <td><%= row[:moves] %></td>
               <td><%= row[:clicks] %></td>
               <td class="muted"><%= avg %>%</td>
               <td class="muted"><%= row[:max_scroll] %>%</td>
-              <td>
+              <td class="admin-analytics-row-actions">
+                <%= link_to t("admin.analytics.index.chart_for_path"), admin_analytics_path(chart_params) %>
+                ·
                 <% heatmap_params = { page_path: row[:page_path], from: @filters[:from], to: @filters[:to] } %>
                 <% heatmap_params[:device] = @filters[:device] if @filters[:device].present? %>
                 <%= link_to t("admin.analytics.index.heatmap"), admin_analytics_page_path(heatmap_params) %>
diff --git a/backend/app/views/layouts/admin.html.erb b/backend/app/views/layouts/admin.html.erb
index 0d15280..81f05c4 100644
--- a/backend/app/views/layouts/admin.html.erb
+++ b/backend/app/views/layouts/admin.html.erb
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex, nofollow">
   <%= csrf_meta_tags %>
-  <link rel="stylesheet" href="/admin.css?v=18">
+  <link rel="stylesheet" href="/admin.css?v=19">
   <%= yield :head %>
   <% if content_for?(:replay_archive_styles) %>
     <link rel="stylesheet" href="/marketing.css?v=42">
diff --git a/backend/config/locales/admin.de.yml b/backend/config/locales/admin.de.yml
index 568f35b..157a101 100644
--- a/backend/config/locales/admin.de.yml
+++ b/backend/config/locales/admin.de.yml
@@ -415,6 +415,8 @@ de:
         any: Alle
         apply: Filtern
         reset: Zurücksetzen
+        chart_path: Seite (Diagramm)
+        chart_path_all: Alle Seiten
         layer: Ebene
         layer_move: Mausbewegungen
         layer_click: Klicks
@@ -427,14 +429,17 @@ de:
         lead: Aggregierte First-Party-Heatmaps (Bewegung/Klick) und Scrolltiefe, nur mit Statistik-Einwilligung. Keine personenbezogenen Daten.
         none: Keine Daten im gewählten Zeitraum.
         heatmap: Heatmap
+        chart_for_path: Diagramm
         trend_title: Pageview-Verlauf
-        trend_lead: Gesamte Pageviews aller Seiten, Tag für Tag. Dieselben Filter Von / Bis / Gerät. Nicht mit einer Tabellenzeile vergleichbar (die nach Pfad trennt).
+        trend_lead: Gesamte Pageviews aller Seiten, Tag für Tag. Dieselben Filter Von / Bis / Gerät. Seite im Filter wählen oder «Diagramm» in der Tabelle.
+        trend_lead_path: "Tägliche Pageviews nur für %{path} (gleiche Filter Von / Bis / Gerät)."
         trend_total_label: Pageviews gesamt (alle Seiten)
+        trend_total_label_path: Pageviews der gewählten Seite
         trend_total_hint: "%{from} → %{to}"
         hide_chart: Diagramm ausblenden
         show_chart: Diagramm anzeigen
         pages_title: Aufschlüsselung nach Seite
-        pages_lead: Pageviews und Engagement im gefilterten Zeitraum, nach Pfad. Die Summe der Pageview-Zeilen entspricht dem Diagramm-Total.
+        pages_lead: Pageviews und Engagement im gefilterten Zeitraum, nach Pfad. «Diagramm» zeigt den Verlauf einer Seite.
         table:
           path: Seite
           pageviews: Pageviews
diff --git a/backend/config/locales/admin.en.yml b/backend/config/locales/admin.en.yml
index 937d01f..040891d 100644
--- a/backend/config/locales/admin.en.yml
+++ b/backend/config/locales/admin.en.yml
@@ -415,6 +415,8 @@ en:
         any: All
         apply: Filter
         reset: Reset
+        chart_path: Page (chart)
+        chart_path_all: All pages
         layer: Layer
         layer_move: Mouse moves
         layer_click: Clicks
@@ -427,14 +429,17 @@ en:
         lead: Aggregated first-party move/click heatmaps and scroll depth, only with analytics consent. No personal data.
         none: No data in the selected period.
         heatmap: Heatmap
+        chart_for_path: Chart
         trend_title: Pageview trend
-        trend_lead: Total pageviews across all pages, day by day. Uses the same From / To / Device filters. Not comparable to a single table row (which splits by path).
+        trend_lead: Total pageviews across all pages, day by day. Uses the same From / To / Device filters. Pick a page in the filter or click «Chart» in the table.
+        trend_lead_path: "Day-by-day pageviews for %{path} only (same From / To / Device filters)."
         trend_total_label: Total pageviews (all pages)
+        trend_total_label_path: Pageviews for selected page
         trend_total_hint: "%{from} → %{to}"
         hide_chart: Hide chart
         show_chart: Show chart
         pages_title: Breakdown by page
-        pages_lead: Pageviews and engagement for the filtered period, split by path. The sum of pageview rows matches the chart total.
+        pages_lead: Pageviews and engagement for the filtered period, split by path. Use «Chart» to see one page over time.
         table:
           path: Page
           pageviews: Pageviews
diff --git a/backend/config/locales/admin.es.yml b/backend/config/locales/admin.es.yml
index 647d2b7..2c9fad1 100644
--- a/backend/config/locales/admin.es.yml
+++ b/backend/config/locales/admin.es.yml
@@ -415,6 +415,8 @@ es:
         any: Todos
         apply: Filtrar
         reset: Restablecer
+        chart_path: Página (gráfico)
+        chart_path_all: Todas las páginas
         layer: Capa
         layer_move: Movimientos del ratón
         layer_click: Clics
@@ -427,14 +429,17 @@ es:
         lead: Heatmaps de movimientos/clics y scroll agregados (first-party), solo con consentimiento estadístico. Sin datos personales.
         none: No hay datos en el periodo seleccionado.
         heatmap: Heatmap
+        chart_for_path: Gráfico
         trend_title: Evolución de pageviews
-        trend_lead: Total de pageviews de todas las páginas, día a día. Usa los mismos filtros Desde / Hasta / Device. No es comparable con una fila de la tabla (que parte por path).
+        trend_lead: Total de pageviews de todas las páginas, día a día. Usa los mismos filtros Desde / Hasta / Device. Elige una página en el filtro o pulsa «Gráfico» en la tabla.
+        trend_lead_path: "Pageviews día a día solo para %{path} (mismos filtros Desde / Hasta / Device)."
         trend_total_label: Pageviews totales (todas las páginas)
+        trend_total_label_path: Pageviews de la página seleccionada
         trend_total_hint: "%{from} → %{to}"
         hide_chart: Ocultar gráfico
         show_chart: Mostrar gráfico
         pages_title: Detalle por página
-        pages_lead: Pageviews y engagement en el periodo filtrado, por path. La suma de las filas coincide con el total del gráfico.
+        pages_lead: Pageviews y engagement en el periodo filtrado, por path. Usa «Gráfico» para ver una sola página en el tiempo.
         table:
           path: Página
           pageviews: Pageviews
diff --git a/backend/config/locales/admin.fr.yml b/backend/config/locales/admin.fr.yml
index 4e37912..5ca6df1 100644
--- a/backend/config/locales/admin.fr.yml
+++ b/backend/config/locales/admin.fr.yml
@@ -415,6 +415,8 @@ fr:
         any: Tous
         apply: Filtrer
         reset: Réinitialiser
+        chart_path: Page (graphique)
+        chart_path_all: Toutes les pages
         layer: Couche
         layer_move: Mouvements souris
         layer_click: Clics
@@ -427,14 +429,17 @@ fr:
         lead: Heatmaps mouvements/clics et scroll agrégés (first-party), uniquement avec consentement statistiques. Aucune donnée personnelle.
         none: Aucune donnée sur la période sélectionnée.
         heatmap: Heatmap
+        chart_for_path: Graphique
         trend_title: Évolution des pages vues
-        trend_lead: Total des pages vues sur toutes les pages, jour par jour. Mêmes filtres De / À / Appareil. Non comparable à une ligne du tableau (découpée par chemin).
+        trend_lead: Total des pages vues sur toutes les pages, jour par jour. Mêmes filtres De / À / Appareil. Choisissez une page dans le filtre ou cliquez « Graphique » dans le tableau.
+        trend_lead_path: "Pages vues jour par jour pour %{path} uniquement (mêmes filtres De / À / Appareil)."
         trend_total_label: Pages vues totales (toutes les pages)
+        trend_total_label_path: Pages vues de la page sélectionnée
         trend_total_hint: "%{from} → %{to}"
         hide_chart: Masquer le graphique
         show_chart: Afficher le graphique
         pages_title: Détail par page
-        pages_lead: Pages vues et engagement sur la période filtrée, par chemin. La somme des lignes égale le total du graphique.
+        pages_lead: Pages vues et engagement sur la période filtrée, par chemin. « Graphique » montre l’évolution d’une page.
         table:
           path: Page
           pageviews: Pages vues
diff --git a/backend/config/locales/admin.it.yml b/backend/config/locales/admin.it.yml
index 5bde8bd..cb7a3f4 100644
--- a/backend/config/locales/admin.it.yml
+++ b/backend/config/locales/admin.it.yml
@@ -436,6 +436,8 @@ it:
         any: Tutti
         apply: Filtra
         reset: Azzera
+        chart_path: Pagina (grafico)
+        chart_path_all: Tutte le pagine
         layer: Livello
         layer_move: Movimenti mouse
         layer_click: Click
@@ -448,14 +450,17 @@ it:
         lead: Heatmap movimenti/click e scroll aggregati (first-party), solo con consenso statistico. Nessun dato personale.
         none: Nessun dato nel periodo selezionato.
         heatmap: Heatmap
+        chart_for_path: Grafico
         trend_title: Andamento pageview
-        trend_lead: Totale pageview di tutte le pagine, giorno per giorno. Usa gli stessi filtri Da / A / Device. Non è confrontabile con una singola riga della tabella (che spezza per path).
+        trend_lead: Totale pageview di tutte le pagine, giorno per giorno. Usa gli stessi filtri Da / A / Device. Scegli una pagina nel filtro oppure clicca «Grafico» in tabella.
+        trend_lead_path: "Pageview giorno per giorno solo per %{path} (stessi filtri Da / A / Device)."
         trend_total_label: Pageview totali (tutte le pagine)
+        trend_total_label_path: Pageview della pagina selezionata
         trend_total_hint: "%{from} → %{to}"
         hide_chart: Nascondi grafico
         show_chart: Mostra grafico
         pages_title: Dettaglio per pagina
-        pages_lead: Pageview e engagement nel periodo filtrato, spezzati per path. La somma delle pageview delle righe coincide col totale del grafico.
+        pages_lead: Pageview e engagement nel periodo filtrato, spezzati per path. Usa «Grafico» per vedere l’andamento di una sola pagina.
         table:
           path: Pagina
           pageviews: Pageview
diff --git a/backend/public/admin.css b/backend/public/admin.css
index deeefe6..81242ff 100644
--- a/backend/public/admin.css
+++ b/backend/public/admin.css
@@ -203,6 +203,14 @@ body.admin-body {
   font-size: 1rem;
 }
 
+.admin-table tr.is-chart-focus td {
+  background: rgba(229, 57, 53, 0.12);
+}
+
+.admin-analytics-row-actions {
+  white-space: nowrap;
+}
+
 .admin-panels {
   display: grid;
   grid-template-columns: 1.4fr 1fr;
diff --git a/backend/spec/requests/admin/analytics_spec.rb b/backend/spec/requests/admin/analytics_spec.rb
index 55dc6fd..8cda8ff 100644
--- a/backend/spec/requests/admin/analytics_spec.rb
+++ b/backend/spec/requests/admin/analytics_spec.rb
@@ -70,6 +70,26 @@ RSpec.describe "Admin analytics", type: :request do
     expect(response.body).to include("\"pageviews\":19")
   end
 
+  it "filtra il grafico su una sola pagina" do
+    AnalyticsPageStat.create!(
+      day: Time.zone.today,
+      page_path: "/altro",
+      device: "desktop",
+      pageview_count: 7,
+      scroll_samples: 0,
+      scroll_sum_pct: 0,
+      max_scroll_pct: 0
+    )
+
+    get admin_analytics_path, params: { chart_path: "/prezzi" }
+    expect(response).to have_http_status(:ok)
+    expect(response.body).to include(I18n.t("admin.analytics.index.trend_total_label_path"))
+    expect(response.body).to include(">12<")
+    expect(response.body).to include(I18n.t("admin.analytics.index.chart_for_path"))
+    expect(response.body).to include("is-chart-focus")
+    expect(response.body).not_to include(">19<")
+  end
+
 
   it "mostra la heatmap di una pagina con tab dispositivo" do
     get admin_analytics_page_path, params: { page_path: "/prezzi" }