MatchLiveTv/backend/app/views/admin/analytics/show.html.erb

<% content_for :body_class, "admin-body" %>

<div class="admin-page-head admin-session-head">
  <div>
    <p class="muted admin-page-sub">
      <%= link_to t("admin.analytics.show.back"), admin_analytics_path(from: @filters[:from], to: @filters[:to], device: @filters[:device]) %>
    </p>
    <h2 class="admin-page-title"><%= t("admin.analytics.show.title") %></h2>
    <p><code class="admin-mono"><%= @page_path %></code></p>
  </div>
</div>

<div class="panel admin-sessions-filters">
  <%= form_with url: admin_analytics_page_path, method: :get, local: true, class: "admin-filter-form" do %>
    <%= hidden_field_tag :page_path, @page_path %>
    <div class="admin-filter-grid">
      <label class="admin-filter-field">
        <span><%= t("admin.analytics.filters.from") %></span>
        <%= date_field_tag :from, @filters[:from] %>
      </label>
      <label class="admin-filter-field">
        <span><%= t("admin.analytics.filters.to") %></span>
        <%= date_field_tag :to, @filters[:to] %>
      </label>
      <label class="admin-filter-field">
        <span><%= t("admin.analytics.filters.device") %></span>
        <%= select_tag :device,
              options_for_select(
                [[t("admin.analytics.filters.any"), ""]] + AnalyticsEvent::DEVICES.map { |d| [d, d] },
                @filters[:device]
              ) %>
      </label>
      <label class="admin-filter-field">
        <span><%= t("admin.analytics.filters.layer") %></span>
        <%= select_tag :layer,
              options_for_select(
                [
                  [t("admin.analytics.filters.layer_move"), "move"],
                  [t("admin.analytics.filters.layer_click"), "click"]
                ],
                @filters[:layer]
              ) %>
      </label>
    </div>
    <div class="admin-filter-actions">
      <%= submit_tag t("admin.analytics.filters.apply"), class: "admin-btn admin-btn--primary admin-btn--sm" %>
    </div>
  <% end %>
</div>

<div class="admin-session-grid">
  <section class="panel">
    <h3><%= t("admin.analytics.show.summary") %></h3>
    <dl class="admin-kv">
      <div>
        <dt><%= t("admin.analytics.index.table.pageviews") %></dt>
        <dd><%= @pageviews %></dd>
      </div>
      <div>
        <dt><%= t("admin.analytics.index.table.moves") %></dt>
        <dd><%= @move_total %></dd>
      </div>
      <div>
        <dt><%= t("admin.analytics.index.table.clicks") %></dt>
        <dd><%= @click_total %></dd>
      </div>
      <div>
        <dt><%= t("admin.analytics.index.table.avg_scroll") %></dt>
        <dd><%= @avg_scroll %>%</dd>
      </div>
      <div>
        <dt><%= t("admin.analytics.index.table.max_scroll") %></dt>
        <dd><%= @max_scroll %>%</dd>
      </div>
    </dl>
  </section>

  <section class="panel" style="grid-column: span 2;">
    <h3><%= t("admin.analytics.show.scroll_depth") %></h3>
    <div class="admin-scroll-bar" aria-hidden="true">
      <div class="admin-scroll-bar__avg" style="width: <%= @avg_scroll %>%"></div>
      <div class="admin-scroll-bar__max" style="left: <%= @max_scroll %>%"></div>
    </div>
    <p class="muted admin-table-sub">
      <%= t("admin.analytics.show.scroll_hint", avg: @avg_scroll, max: @max_scroll) %>
    </p>
  </section>
</div>

<section class="panel">
  <h3>
    <%= @filters[:layer] == "click" ? t("admin.analytics.show.heatmap_clicks") : t("admin.analytics.show.heatmap_moves") %>
  </h3>
  <p class="muted admin-table-sub"><%= t("admin.analytics.show.heatmap_hint") %></p>

  <% if @cells.any? %>
    <div class="admin-heatmap-stage" id="admin-heatmap-stage">
      <% if @preview_url.present? %>
        <iframe
          class="admin-heatmap-frame"
          src="<%= @preview_url %>"
          title="<%= t("admin.analytics.show.preview_title") %>"
          loading="lazy"
          referrerpolicy="no-referrer"
        ></iframe>
      <% else %>
        <div class="admin-heatmap-fallback" aria-hidden="true"></div>
        <p class="muted admin-heatmap-fallback-note"><%= t("admin.analytics.show.preview_unavailable") %></p>
      <% end %>
      <canvas
        id="admin-heatmap"
        class="admin-heatmap-overlay"
        data-grid="<%= @grid %>"
        data-max="<%= [@max_weight, 1].max %>"
        data-cells="<%= @cells.map { |(x, y), c| { x: x, y: y, c: c } }.to_json %>"
      ></canvas>
    </div>
    <script src="/admin-analytics-heatmap.js?v=1" defer></script>
  <% else %>
    <p class="empty"><%= t("admin.analytics.show.no_points") %></p>
  <% end %>
</section>