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

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

<div class="admin-page-head">
  <h2 class="admin-page-title"><%= t("admin.analytics.index.title") %></h2>
  <p class="muted admin-page-sub"><%= t("admin.analytics.index.lead") %></p>
</div>

<section class="panel admin-analytics-preview">
  <h3><%= t("admin.analytics.preview.title") %></h3>
  <p class="muted admin-table-sub"><%= t("admin.analytics.preview.lead") %></p>
  <% if @analytics_preview_active %>
    <p class="admin-analytics-preview__status"><%= t("admin.analytics.preview.active") %></p>
    <div class="admin-filter-actions">
      <%= button_to t("admin.analytics.preview.disable"),
            admin_analytics_preview_path,
            method: :delete,
            class: "admin-btn admin-btn--outline admin-btn--sm" %>
      <%= link_to t("admin.analytics.preview.open_site"),
            root_path,
            class: "admin-btn admin-btn--primary admin-btn--sm",
            target: "_blank",
            rel: "noopener" %>
    </div>
  <% else %>
    <div class="admin-filter-actions">
      <%= button_to t("admin.analytics.preview.enable"),
            admin_analytics_preview_path(return_to: root_path),
            method: :post,
            class: "admin-btn admin-btn--primary admin-btn--sm" %>
    </div>
  <% end %>
</section>

<div class="panel admin-sessions-filters">
  <%= form_with url: admin_analytics_path, method: :get, local: true, class: "admin-filter-form" do %>
    <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.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" %>
      <%= link_to t("admin.analytics.filters.reset"), admin_analytics_path, class: "admin-btn admin-btn--outline admin-btn--sm" %>
    </div>
  <% end %>
</div>

<% if @trend.any? && @trend_totals[:pageviews].positive? %>
  <section class="panel admin-analytics-trend" id="admin-analytics-trend">
    <div class="admin-analytics-trend__head">
      <div>
        <h3><%= t("admin.analytics.index.trend_title") %></h3>
        <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"
              class="admin-btn admin-btn--outline admin-btn--sm"
              aria-controls="admin-analytics-trend-body"
              aria-expanded="true"><%= t("admin.analytics.index.hide_chart") %></button>
    </div>
    <div id="admin-analytics-trend-body">
      <div class="kpi-grid admin-analytics-trend__kpi">
        <div class="kpi">
          <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">
            <% 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">
        <canvas id="chart-analytics-trend" aria-label="<%= t("admin.analytics.index.trend_title") %>"></canvas>
      </div>
    </div>
  </section>
  <script>
    window.adminAnalyticsTrend = <%= raw @trend.to_json %>;
    window.adminAnalyticsI18n = {
      pageviews: <%= raw t("admin.analytics.index.table.pageviews").to_json %>,
      hideChart: <%= raw t("admin.analytics.index.hide_chart").to_json %>,
      showChart: <%= raw t("admin.analytics.index.show_chart").to_json %>
    };
  </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=3" defer></script>
<% end %>

<div class="panel">
  <% if @pages.any? %>
    <h3 class="admin-analytics-pages-title"><%= t("admin.analytics.index.pages_title") %></h3>
    <p class="muted admin-table-sub"><%= t("admin.analytics.index.pages_lead") %></p>
    <div class="admin-table-wrap">
      <table class="admin-table">
        <thead>
          <tr>
            <th><%= t("admin.analytics.index.table.path") %></th>
            <th><%= t("admin.analytics.index.table.pageviews") %></th>
            <th><%= t("admin.analytics.index.table.moves") %></th>
            <th><%= t("admin.analytics.index.table.clicks") %></th>
            <th><%= t("admin.analytics.index.table.avg_scroll") %></th>
            <th><%= t("admin.analytics.index.table.max_scroll") %></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <% @pages.each do |row| %>
            <% avg = row[:scroll_samples].positive? ? (row[:scroll_sum].to_f / row[:scroll_samples]).round : 0 %>
            <% 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 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) %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  <% else %>
    <p class="empty"><%= t("admin.analytics.index.none") %></p>
  <% end %>
</div>