ahoy_captain 0.1.0 → 0.77

data/app/queries/ahoy_captain/stats/total_pageviews_query.rb

@@ -0,0 +1,9 @@
+module AhoyCaptain
+  module Stats
+    class TotalPageviewsQuery < ApplicationQuery
+      def build
+        event_query.where(name: AhoyCaptain.config.event[:view_name])
+      end
+    end
+  end
+end

data/app/queries/ahoy_captain/stats/total_visitors_query.rb

@@ -0,0 +1,9 @@
+module AhoyCaptain
+  module Stats
+    class TotalVisitorsQuery < ApplicationQuery
+      def build
+        visit_query.distinct(:visit_id)
+      end
+    end
+  end
+end

data/app/queries/ahoy_captain/stats/unique_visitors_query.rb

@@ -0,0 +1,9 @@
+module AhoyCaptain
+  module Stats
+    class UniqueVisitorsQuery < ApplicationQuery
+      def build
+        visit_query.distinct(:ip)
+      end
+    end
+  end
+end

data/app/queries/ahoy_captain/stats/views_per_visit_query.rb

@@ -0,0 +1,17 @@
+module AhoyCaptain
+  module Stats
+    class ViewsPerVisitQuery < ApplicationQuery
+      def build
+        events = event_query
+                   .joins(:visit)
+                   .select("#{::AhoyCaptain.visit.table_name}.started_at as started_at, count(name) / count(distinct visit_id) as views_per_visit")
+                   .where(name: AhoyCaptain.config.event[:view_name])
+                   .group("started_at, visit_id")
+
+        ::Ahoy::Visit
+                     .select("views_per_visit as views_per_visit")
+                     .from(events, :views_per_visit_table)
+      end
+    end
+  end
+end

data/app/queries/ahoy_captain/stats/visit_duration_query.rb

@@ -0,0 +1,16 @@
+module AhoyCaptain
+  module Stats
+    class VisitDurationQuery < ApplicationQuery
+      def build
+        events = event_query
+                   .select("max(time) - min(time) as duration, visit_id")
+                   .group("visit_id")
+
+        ::Ahoy::Visit
+          .joins("inner join ahoy_visits on ahoy_visits.id = views_per_visit_table.visit_id")
+          .select("duration as duration, ahoy_visits.started_at")
+          .from(events, :views_per_visit_table)
+      end
+    end
+  end
+end

data/app/queries/ahoy_captain/visit_query.rb

@@ -0,0 +1,32 @@
+module AhoyCaptain
+  class VisitQuery < ApplicationQuery
+    include Rangeable
+
+    def build
+      ::Ahoy::Visit.ransack(ransack_params_for(:visit)).result
+    end
+
+    def within_range
+      if range
+        abort
+        @query = @query.where('started_at >= ? and started_at < ?', range[0], range[1])
+      end
+
+      self
+    end
+
+    def with_events
+      @query = @query.joins(:events)
+
+      self
+    end
+
+    def is_a?(other)
+      if other == ActiveRecord::Relation
+        return true
+      end
+
+      super(other)
+    end
+  end
+end

data/app/views/ahoy_captain/campaigns/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @campaigns, category_name: @campaign_type, unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/ahoy_captain/campaigns/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :sources do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @campaigns, category_name: @campaign_type, unit_name: 'Visitors') %>
+<% end %>

data/app/views/ahoy_captain/cities/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @cities, category_name: 'City', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/ahoy_captain/cities/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :geography do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @cities, category_name: 'City', unit_name: 'Visitors') %>
+<% end %>

data/app/views/ahoy_captain/countries/index.html+details.erb

@@ -0,0 +1,5 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @countries, category_name: 'Country', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+
+<% end %>

data/app/views/ahoy_captain/countries/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :geography do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @countries, category_name: 'Country', unit_name: 'Visitors') %>
+<% end %>

data/app/views/ahoy_captain/devices/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @devices, category_name: 'Devices', unit_name: 'Visitors', additional_cols: [:percent_total]) %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/ahoy_captain/devices/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :devices do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @devices, category_name: 'Devices', unit_name: 'Visitors', additional_cols: [:percent_total]) %>
+<% end %>

data/app/views/ahoy_captain/entry_pages/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @pages, category_name: 'Entry Pages', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/ahoy_captain/entry_pages/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :pages do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @pages, category_name: 'Entry Pages', unit_name: 'Visitors') %>
+<% end %>

data/app/views/ahoy_captain/exit_pages/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @pages, category_name: 'Exit Pages', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/ahoy_captain/exit_pages/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :pages do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @pages, category_name: 'Exit Pages', unit_name: 'Visitors') %>
+<% end %>

data/app/views/ahoy_captain/funnels/index.html.erb

@@ -0,0 +1,7 @@
+<%= turbo_frame_tag :funnels do %>
+  <ul>
+    <% @funnels.each do |label, count| %>
+      <li><%= label %>: <%= count %></li>
+    <% end %>
+  </ul>
+<% end %>

data/app/views/ahoy_captain/funnels/show.html.erb

@@ -0,0 +1,6 @@
+<%= turbo_frame_tag :goals do %>
+  <div >
+    <canvas data-controller="funnel-chart" data-data="<%= @funnel.to_json %>" ></canvas>
+
+  </div>
+<% end %>

data/app/views/ahoy_captain/goals/index.html.erb

@@ -0,0 +1,39 @@
+<%= turbo_frame_tag :goals do %>
+  <div class="flex flex-col min-h-[380px] w-full pt-4">
+    <div class="flex text-sm font-bold text-base-content mb-4">
+      <span class="grow">Goal</span>
+      <span >Uniques</span>
+      <span class="w-8 ml-8 text-right">Total</span>
+      <span class="w-8 ml-8 text-right">CR</span>
+    </div>
+    <div class='min-h-[420px]'>
+      <div class="grow">
+        <% if @presenter.goals.respond_to?(:each) && @presenter.goals.any? %>
+          <% @presenter.goals.each do |item| %>
+            <div class='leading-10 flex relative'>
+              <progress class='progress-primary bg-base-100 h-8 grow' value="<%= item.uniques %>" max="<%= item.total %>">
+              </progress>
+              <span class="grow text-elipsis overflow-hidden absolute left-4 bottom-3 h-8 text-base-content">
+              <%= item.name %>
+            </span>
+              <span class="w-8 ml-8 text-right">
+              <%= render AhoyCaptain::TooltipComponent.new(amount: item.uniques) %>
+            </span>
+              <span class="w-8 ml-8 text-right">
+              <%= render AhoyCaptain::TooltipComponent.new(amount: item.total) %>
+            </span>
+
+              <span class="w-8 ml-8 text-right">
+                <%= item.conversion_rate %>%
+              </span>
+            </div>
+          <% end %>
+        <% else %>
+          <p>No data found</p>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+
+<% end %>

data/app/views/ahoy_captain/layouts/application.html.erb

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Ahoy Captain</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <meta name="creator" content="joshmn">
+  <meta name="author" content="joshmn">
+  <meta name="contact" content="https://github.com/joshmn">
+  <meta name="twitter:creator" content="joshmn">
+  <meta name="twitter:site" content="josh.mn">
+  <meta name="og:site" content="josh.mn">
+  <meta name="description" content="Ahoy Captain">
+  <meta name="og:description" content="Ahoy Captain">
+  <link rel="icon" type="image/png" sizes="32x32" href="<%= image_path "ahoy_captain/favicon-32x32.png" %>">
+  <link rel="apple-touch-icon" sizes="180x180" href="<%= image_path "ahoy_captain/apple-touch-icon.png" %>">
+  <link rel="icon" type="image/png" sizes="16x16" href="<%= image_path "ahoy_captain/favicon-16x16.png" %>">
+  <link rel="mask-icon" href="<%= image_path "ahoy_captain/safari-pinned-tab.svg" %>" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.0/dist/full.css" rel="stylesheet" type="text/css"/>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://unpkg.com/slim-select@latest/dist/slimselect.css" rel="stylesheet" />
+  <%= ahoy_captain_importmap_tags %>
+  <style>
+      /* Application styles */
+      :root {
+          --ss-bg-color: hsl(var(--b1) / 1);
+          --ss-font-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
+      }
+
+      .ss-content{
+          position:absolute;
+          display:none;
+          height:auto;
+          flex-direction:column;
+          width:auto;
+          max-height:var(--ss-content-height);
+          box-sizing:border-box;
+          border:solid 1px var(--ss-border-color);
+          background-color:var(--ss-bg-color);
+          transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);
+          opacity:0;
+          transform:scaleY(0);
+          transform-origin:center top;
+          overflow:hidden;
+          z-index:10000;
+      }
+
+      .ss-content.ss-open-below{
+          opacity:1;
+          transform:scaleY(1);
+          transform-origin:center top;
+          border-bottom-left-radius:var(--ss-border-radius);
+          border-bottom-right-radius:var(--ss-border-radius);
+          bottom: -100%;
+          right: 41%;
+          display: flex;
+      }
+
+      .ss-open-below.ss-content.ss-relevant {
+          bottom: -100%;
+          right: 41%;
+      }
+
+      .pagy-nav.pagination {
+          isolation: isolate;
+          display: inline-flex;
+          margin-right: -1px;
+          /* border-radius: 0.375rem; */
+          box-shadow: 0 1px 2px 0 hsl(var(--n) / var(--tw-text-opacity, 1));
+      }
+
+      .page.next a, .page.prev a, .page.next.disabled, .page.prev.disabled, .page a, .page.gap {
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          border: 1px solid hsl(var(--n) / var(--tw-text-opacity, 1));
+          padding: 0.5rem 1rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: hsl(var(--bc) / var(--tw-text-opacity, 1));
+      }
+
+      .page.next a:hover, .page.prev a:hover, .page a:hover {
+          background-color: hsl(var(--b3) / var(--tw-text-opacity, 1));
+          color: hsl(var(--ac) / var(--tw-text-opacity, 1));
+      }
+
+      .page.next a:focus, .page.prev a:focus, .page.next.disabled:focus, .page.prev.disabled:focus, .page a:focus, .page.gap:focus {
+          z-index: 20;
+      }
+
+      .page.prev a, .page.next a {
+          border-radius: 0.375rem 0 0 0.375rem;
+          background-color: hsl(var(--b2) /1);
+      }
+
+
+      .page.next.disabled, .page.prev.disabled {
+          border-radius: 0.375rem 0 0 0.375rem;
+          background-color: hsl(var(--b2) / 0.5);
+      }
+
+      .page.active {
+          z-index: 10;
+          border-color: hsl(var(--a) / var(--tw-text-opacity, 1));
+          background-color: hsl(var(--b3) / var(--tw-text-opacity, 1));
+          color: hsl(var(--ac) / var(--tw-text-opacity, 1));
+          border-radius: 0.375rem;
+          padding: 0.5rem 1rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+      }
+  </style>
+</head>
+
+<body data-theme='<%= AhoyCaptain.config.theme %>' class='bg-base-300' data-controller='navigation' data-action="filter-tag:remove->navigation#removeQueryParam">
+  <%= yield %>
+  <div class="flex justify-center bg-base-300 border-t-4 border-base-100 py-4">
+    <div class="flex justify-around space-x-4 my-4">
+      <h5>Powered by <a href='https://github.com/joshmn/ahoy_captain' target=”_blank”>Ahoy Captain v<%= AhoyCaptain::VERSION %></a></h5>
+    </div>
+  </div>
+</body>
+</html>

data/app/views/ahoy_captain/realtimes/show.html.erb

@@ -0,0 +1,9 @@
+<%= turbo_frame_tag :realtime do %>
+  <div>
+    <a class="block ml-1 md:ml-2 mr-auto text-xs md:text-sm font-bold text-base-content dark:text-base-content" title="" data-realtime-target="label">
+      <svg class="inline w-2 mr-1 md:mr-2 text-green-500 fill-current animate-pulse" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="8" cy="8" r="8"></circle>
+      </svg><%= @total %> <span class="hidden sm:inline-block">current visitors</span>
+    </a>
+  </div>
+<% end %>

data/app/views/ahoy_captain/regions/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @regions, category_name: 'Region', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/ahoy_captain/regions/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :geography do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @regions, category_name: 'Region', unit_name: 'Visitors') %>
+<% end %>

data/app/views/ahoy_captain/roots/show.html.erb

@@ -0,0 +1,179 @@
+<main class='bg-base-300 min-h-screen pb-4 max-w-6xl mx-auto' data-controller="application">
+  <%= render AhoyCaptain::StickyNavComponent.new do |nav| %>
+    <% nav.with_realtime_update do %>
+      <%= turbo_frame_tag :realtime, src: realtime_path, data: { controller:  "realtime" }, loading: :lazy %>
+    <% end %>
+  <% end %>
+
+  <div class="grid grid-cols-1 lg:grid-cols-2 grid-flow-row gap-4">
+    <%= render AhoyCaptain::TileComponent.new(wide: true) do |component| %>
+      <% component.with_statistic_display do %>
+        <%= turbo_frame_tag :stats, src: stats_path(search_params), loading: :lazy %>
+      <% end %>
+    <% end %>
+
+    <%= render AhoyCaptain::TileComponent.new(title: 'Top Sources') do |component| %>
+      <% component.with_display_links do %>
+        <div data-controller='link' data-link-top_sources-class="text-primary underline">
+        <a href="<%= sources_path(search_params) %>"data-turbo-frame="sources" data-action='click->link#changeTopSources' data-link-target='top_sourcesLink'>All</a>
+        <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Campaign") do |dropdown| %>
+          <% %w{utm_source utm_medium utm_term utm_content utm_campaign}.each do |source| %>
+            <% dropdown.with_option do %>
+              <a href="<%= public_send("campaign_#{source}_path".to_sym, **search_params) %>" data-turbo-frame="sources" data-action='click->link#changeTopSources' data-link-target='top_sourcesLink'>
+                <%= source.titleize.gsub("Utm", "UTM") %>
+              </a>
+            <% end %>
+          <% end %>
+        <% end %>
+        </div>
+      <% end %>
+      <% component.with_statistic_display do %>
+        <%= turbo_frame_tag :sources, src: sources_path(search_params), loading: :lazy %>
+      <% end %>
+      <% component.with_details_cta do %>
+        <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#sources" class="link no-underline">Details</button>
+      <% end %>
+    <% end %>
+
+    <%= render AhoyCaptain::TileComponent.new(title: 'Top Pages') do |component| %>
+      <% component.with_display_links do %>
+      <div data-controller='link' data-link-top_pages-class="text-primary underline" >
+        <a href="<%= top_pages_path(search_params) %>" data-turbo-frame="pages" data-action='click->link#changeTopPages' data-link-target='top_pagesLink'>Top Pages</a>
+        <a href="<%= entry_pages_path(search_params) %>" data-turbo-frame="pages" data-action='click->link#changeTopPages' data-link-target='top_pagesLink'>Entry Pages</a>
+        <a href="<%= exit_pages_path(search_params) %>" data-turbo-frame="pages" data-action='click->link#changeTopPages' data-link-target='top_pagesLink'>Exit Pages</a>
+      </div>
+      <% end %>
+      <% component.with_statistic_display do %>
+        <%= turbo_frame_tag :pages, src: top_pages_path(search_params), loading: :lazy %>
+      <% end %>
+      <% component.with_details_cta do %>
+        <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#pages" class="link no-underline">Details</button>
+      <% end %>
+    <% end %>
+
+    <%= render AhoyCaptain::TileComponent.new(title: 'Countries') do |component| %>
+      <% component.with_display_links do %>
+      <div data-controller='link' data-link-countries-class="text-primary underline">
+        <a href="<%= countries_path(search_params) %>" data-turbo-frame="geography" data-action='click->link#changeCountries' data-link-target='countriesLink'>Countries</a>
+        <a href="<%= regions_path(search_params) %>" data-turbo-frame="geography" data-action='click->link#changeCountries' data-link-target='countriesLink'>Regions</a>
+        <a href="<%= cities_path(search_params) %>" data-turbo-frame="geography" data-action='click->link#changeCountries' data-link-target='countriesLink'>Cities</a>
+      </div>
+      <% end %>
+      <% component.with_statistic_display do %>
+        <%= turbo_frame_tag :geography, src: countries_path(search_params), loading: :lazy %>
+      <% end %>
+      <% component.with_details_cta do %>
+        <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#geography" class="link no-underline">Details</button>
+      <% end %>
+    <% end %>
+
+    <%= render AhoyCaptain::TileComponent.new(title: 'Devices') do |component| %>
+      <% component.with_display_links do %>
+      <div data-controller='link' data-link-devices-class="text-primary underline">
+        <a href="<%= devices_browsers_path(search_params) %>" data-turbo-frame="devices" data-action='click->link#changeDevices' data-link-target='devicesLink'>Browser</a>
+        <a href="<%= devices_operating_systems_path(search_params) %>" data-turbo-frame="devices" data-action='click->link#changeDevices' data-link-target='devicesLink'>OS</a>
+        <a href="<%= devices_device_types_path(search_params) %>" data-turbo-frame="devices" data-action='click->link#changeDevices' data-link-target='devicesLink'>Size</a>
+      </div>
+      <% end %>
+      <% component.with_statistic_display do %>
+        <%= turbo_frame_tag :devices, src: devices_browsers_path(search_params), loading: :lazy %>
+      <% end %>
+      <% component.with_details_cta do %>
+        <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#devices" class="link no-underline">Details</button>
+      <% end %>
+    <% end %>
+    <%= render AhoyCaptain::TileComponent.new(wide: true) do |component| %>
+      <% component.with_display_links do %>
+        <a href="<%= goals_path(search_params) %>" data-turbo-frame="goals" class="link link-primary">
+          Goals
+        </a>
+        <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Funnels") do |dropdown| %>
+          <% AhoyCaptain.config.funnels.each do |id, funnel| %>
+            <% dropdown.with_option do %>
+              <a href="<%= funnel_path(id, search_params) %>" data-turbo-frame="goals" class="link link-primary">
+                <%= funnel.title %>
+              </a>
+            <% end %>
+          <% end %>
+        <% end %>
+
+      <% end %>
+        <% component.with_statistic_display do %>
+        <%= turbo_frame_tag :goals, src: goals_path(search_params), loading: :lazy %>
+      <% end %>
+    <% end %>
+  </div>
+</main>
+
+<%= render AhoyCaptain::Filter::ModalComponent.new(title: "Filter by Page", id: "pageModal") do |modal| %>
+  <% modal.with_modal_display do %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Action", column: :route, url: filters_actions_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Entry page", column: :entry_page, url: filters_entry_pages_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Exit page", column: :exit_page, url: filters_exit_pages_path, predicates: [:in, :not_in]) %>
+  <% end %>
+<% end %>
+
+<%= render AhoyCaptain::Filter::ModalComponent.new(title: "Filter by Country", id: "countryModal") do |modal| %>
+  <% modal.with_modal_display do %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Country", column: :country, url: filters_locations_countries_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Region", column: :region, url: filters_locations_regions_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "City", column: :city, url: filters_locations_cities_path, predicates: [:in, :not_in]) %>
+  <% end %>
+<% end %>
+
+<%= render AhoyCaptain::Filter::ModalComponent.new(title: "Filter by Source", id: "sourceModal") do |modal| %>
+  <% modal.with_modal_display do %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Source", column: :referring_domain, url: filters_sources_path, predicates: [:in, :not_in]) %>
+  <% end %>
+<% end %>
+
+<%= render AhoyCaptain::Filter::ModalComponent.new(title: "Filter by Screen size", id: "screenModal") do |modal| %>
+  <% modal.with_modal_display do %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Screen size", column: :device_type, url: filters_screens_path, predicates: [:in, :not_in]) %>
+  <% end %>
+<% end %>
+
+<%= render AhoyCaptain::Filter::ModalComponent.new(title: "Filter by Browser", id: "osModal") do |modal| %>
+  <% modal.with_modal_display do %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Operating System", column: :os, url: filters_names_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Operating System Version", column: :os_version, url: filters_versions_path, predicates: [:in, :not_in]) %>
+  <% end %>
+<% end %>
+
+<%= render AhoyCaptain::Filter::ModalComponent.new(title: "Filter by Campaign", id: "utmModal") do |modal| %>
+  <% modal.with_modal_display do %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Medium", column: :utm_medium, url: filters_utm_mediums_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Source", column: :utm_source, url: filters_utm_sources_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Campaign", column: :utm_campaign, url: filters_utm_campaigns_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Term", column: :utm_term, url: filters_utm_terms_path, predicates: [:in, :not_in]) %>
+    <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Content", column: :utm_content, url: filters_utm_contents_path, predicates: [:in, :not_in]) %>
+  <% end %>
+<% end %>
+
+<%= render AhoyCaptain::Filter::ModalComponent.new(title: "Custom Range", id: "customRangeModal") do |modal| %>
+  <% modal.with_modal_display do %>
+    <div class="flex gap-2 w-full">
+      <div class="form-control w-full max-w-xs">
+        <label class="label">
+          <span class="label-text">Start Date</span>
+        </label>
+        <input type="datetime-local" name="start_date" class="input input-bordered w-full" value="<%= params[:start_date] %>" />
+      </div>
+      <div class="form-control w-full max-w-xs">
+        <label class="label">
+          <span class="label-text">End Date</span>
+        </label>
+        <input type="datetime-local" name="end_date" class="input input-bordered w-full" value="<%= params[:end_date] %>" />
+      </div>
+    </div>
+  <% end %>
+<% end %>
+
+<dialog id="detailsModal" class="modal">
+  <div class="modal-box w-11/12 max-w-5xl">
+    <%= turbo_frame_tag :details %>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>

data/app/views/ahoy_captain/sources/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @sources, category_name: 'Sources', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/ahoy_captain/sources/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :sources do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @sources, category_name: 'Sources', unit_name: 'Visitors') %>
+<% end %>

data/app/views/ahoy_captain/stats/base/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :chart do %>
+  <%= line_chart @stats %>
+<% end %>

data/app/views/ahoy_captain/stats/show.html.erb

@@ -0,0 +1,57 @@
+<%= turbo_frame_tag :stats do %>
+  <dl class="grid grid-cols-1 divide-y divide-base-200 overflow-hidden rounded-lg grid-cols-2 md:grid-cols-6 md:divide-y-0 -mt-4 mb-4">
+    <a  href="<%= stats_unique_visitors_url(search_params) %>" data-turbo-frame="chart">
+      <dt class="text-base font-normal text-base-content">Unique Visitors</dt>
+      <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+        <div class="flex items-baseline text-2xl font-semibold text-accent-content">
+          <%= number_with_delimiter @presenter.unique_visitors %>
+        </div>
+      </dd>
+    </a>
+    <a href="<%= stats_total_visits_path(search_params) %>" data-turbo-frame="chart">
+      <dt class="text-base font-normal text-base-content">Total Visits</dt>
+      <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+        <div class="flex items-baseline text-2xl font-semibold text-accent-content">
+          <%= number_with_delimiter @presenter.total_visits %>
+        </div>
+      </dd>
+    </a>
+    <a href="<%= stats_total_pageviews_path(search_params) %>" data-turbo-frame="chart">
+      <dt class="text-base font-normal text-base-content">Total Pageviews</dt>
+      <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+        <div class="flex items-baseline text-2xl font-semibold text-accent-content">
+          <%= number_with_delimiter @presenter.total_pageviews %>
+        </div>
+      </dd>
+    </a>
+    <a href="<%= stats_views_per_visits_path(search_params) %>" data-turbo-frame="chart">
+
+      <dt class="text-base font-normal text-base-content">Views per visit</dt>
+      <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+        <div class="flex items-baseline text-2xl font-semibold text-accent-content">
+          <%= number_with_delimiter @presenter.views_per_visit %>
+        </div>
+      </dd>
+    </a>
+    <a href="<%= stats_bounce_rates_path(search_params) %>" data-turbo-frame="chart">
+
+      <dt class="text-base font-normal text-base-content">Bounce rate</dt>
+      <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+        <div class="flex items-baseline text-2xl font-semibold text-accent-content">
+          <%= number_with_delimiter @presenter.bounce_rate * 100 %>%
+        </div>
+      </dd>
+    </a>
+    <a href="<%= stats_visit_durations_path(search_params) %>" data-turbo-frame="chart">
+
+      <dt class="text-base font-normal text-base-content">Visit duration</dt>
+      <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+        <div class="flex items-baseline text-2xl font-semibold text-accent-content">
+          <%= @presenter.visit_duration %>
+        </div>
+      </dd>
+    </a>
+  </dl>
+  <%= turbo_frame_tag :chart, src: stats_unique_visitors_path(search_params) do %>
+  <% end %>
+<% end %>

data/app/views/ahoy_captain/top_pages/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @pages, category_name: 'Page', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/ahoy_captain/top_pages/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :pages do %>
+  <%= render AhoyCaptain::TableComponent.new(items: @pages, category_name: 'Page', unit_name: 'Visitors') %>
+<% end %>