ahoy_captain 0.82 → 0.91

data/app/components/ahoy_captain/tile_component.html.erb

@@ -1,12 +1,13 @@
-<div class='<%= 'lg:col-span-2' if wide %> col-span-1 p-4 bg-base-200 rounded-md p-8 mx-4 lg:mx-0'>
+<div class="card card-compact <%= 'lg:col-span-2' if wide %> col-span-1 p-4 shadow-xl rounded-md p-8 mx-4 lg:mx-0 bg-base-100 ">
   <div class="flex justify-between">
-    <h5 class='text-lg text-accent-content'><%= title %></h5>
+    <h2 class="card-title"><%= title %></h2>
     <div class="flex self-center gap-3">
       <%= display_links %>
     </div>
   </div>
+
   <%= statistic_display %>
   <div class="flex justify-center">
     <%= details_cta %>
   </div>
-</div>
+</div>

data/app/components/ahoy_captain/tile_component.rb

@@ -13,4 +13,4 @@ class AhoyCaptain::TileComponent < ViewComponent::Base
   private
 
   attr_reader :title, :wide
-end
+end

data/app/components/ahoy_captain/tooltip_component.html.erb

@@ -1,3 +1,3 @@
-<div class="tooltip" data-tip=<%= amount %>>
+<div class="tooltip " data-tip=<%= amount %>>
     <p><%= abbreviate %></p>
-</div>
+</div>

data/app/controllers/ahoy_captain/filters/sources_controller.rb

@@ -4,7 +4,7 @@ module AhoyCaptain
       def index
         query = visit_query.all
 
-        render json: query.result.select("distinct referring_domain").where.not(referring_domain: nil).group(:referring_domain).order(Arel.sql "count(*) desc").pluck(:referring_domain).map { |city| serialize(city) }
+        render json: query.select("distinct referring_domain").where.not(referring_domain: nil).group(:referring_domain).order(Arel.sql "count(*) desc").pluck(:referring_domain).map { |city| serialize(city) }
       end
     end
   end

data/app/controllers/ahoy_captain/stats/base_controller.rb

@@ -32,10 +32,10 @@ module AhoyCaptain
           # assume we're in a realtime
           return INTERVAL_PERIOD["realtime"][0]
         end
-        diff = (range[1] - range[0]).seconds
-        if diff.in_months > 1
+        diff = (range[1] - range[0]).seconds.in_days.to_i
+        if diff > 30
           "month"
-        elsif diff.in_days > 0
+        elsif diff > 0
           "day"
         else
           "hour"

data/app/helpers/ahoy_captain/application_helper.rb

@@ -2,7 +2,9 @@ module AhoyCaptain
   module ApplicationHelper
     include Pagy::Frontend
 
+    # params that are coerced from the ApplicationController#act_like_an_spa
     SPECIAL_PARAMS = [:campaigns_type, :devices_type]
+
     def ahoy_captain_importmap_tags(entry_point = "application", shim: true)
       safe_join [
         (javascript_importmap_shim_tag if shim),
@@ -21,6 +23,37 @@ module AhoyCaptain
       params.to_unsafe_h.slice(*SPECIAL_PARAMS)
     end
 
+    # gets put into the form as a hidden field
+    #
+    def non_filter_ransack_params
+      other_params = {}
+      map = [
+        :start_date,
+        :end_date,
+        :period,
+        :interval
+      ]
+
+      ransack = [:goal]
+
+      map.each do |key|
+        if params[key]
+          other_params[key] = params[key]
+        end
+      end
+
+      ransack.each do |key|
+        Ransack.predicates.keys.each do |predicate|
+          if value = params.dig(:q, "#{key}_#{predicate}")
+            other_params[:q] ||= {}
+            other_params[:q]["#{key}_#{predicate}"] = value
+          end
+        end
+      end
+
+      other_params
+    end
+
     def render_pagination
       if @pagination
         pagy_nav(@pagination).html_safe

data/app/models/ahoy_captain/filter_parser.rb

@@ -0,0 +1,67 @@
+module AhoyCaptain
+  class FilterParser
+    FILTER_MENU_MAX_SIZE = 2
+    class Item
+      attr_accessor :name, :column, :description, :values, :predicate, :url, :modal, :label
+
+      def title
+        column.titleize
+      end
+    end
+
+    def self.parse(request)
+      new(request).tap do |instance|
+        instance.parse
+      end
+    end
+
+    delegate_missing_to :@items
+
+    def initialize(request)
+      @request = request
+      @params = @request.params
+      @filter_params = @request.params[:q] || {}
+      @items = {}
+    end
+
+    def parse
+      @filter_params.each do |key, values|
+        item = Item.new
+
+        item.values = Array(values)
+        item.predicate = Ransack::Predicate.detect_and_strip_from_string!(key.dup)
+        item.column = key.delete_suffix("_#{item.predicate}")
+        modal_name = AhoyCaptain.config.filters.detect { |_, filters| filters.include?(item.column) }[1].modal_name
+        if modal_name
+          item.modal = modal_name
+        end
+
+        label = if item.column == "goal"
+          AhoyCaptain.config.goals[values].title
+        else
+          item.values.to_sentence(last_word_connector: " or ")
+        end
+        item.label = label
+        item.description = "#{item.column.titleize} #{::AhoyCaptain::PredicateLabel[item.predicate]} #{label}"
+        item.url = build_url(key, values)
+        @items[key] = item
+      end
+
+      @items
+    end
+
+    private
+
+    def build_url(name, values)
+      search_params = @request.query_parameters.deep_dup
+      if search_params["q"][name].is_a?(Array)
+        search_params["q"][name] = search_params["q"][name] - Array(values)
+      else
+        search_params["q"].delete(name)
+      end
+
+      @request.path + "?" + search_params.to_query
+    end
+
+  end
+end

data/app/presenters/ahoy_captain/goals_presenter.rb

@@ -16,7 +16,7 @@ module AhoyCaptain
       queries = {
         totals: @event_query.select("count(distinct(#{AhoyCaptain.event.table_name}.visit_id)) as unique_visits, '_internal_total_visits_' as name, count(distinct #{AhoyCaptain.event.table_name}.id) as total_events, 0 as sort_order")
       }
-      selects = ["SELECT unique_visits, name, total_events, sort_order, 0 as cr from totals"]
+      selects = ["SELECT unique_visits, name, total_events, sort_order, 0 as cr, '' as goal_id from totals"]
       last_goal = nil
       map = {}.with_indifferent_access
 
@@ -27,9 +27,10 @@ module AhoyCaptain
             "'#{goal.id}' as name",
             "count(distinct #{AhoyCaptain.event.table_name}.id) as total_events",
             "#{index + 1} as sort_order",
+            "'#{goal.id}' as goal_id"
           ]
         ).merge(goal.event_query.call).group("#{AhoyCaptain.event.table_name}.name")
-        selects << ["SELECT unique_visits, name, total_events, sort_order, 0::decimal as cr from #{goal.id}"]
+        selects << ["SELECT unique_visits, name, total_events, sort_order, 0::decimal as cr, '#{goal.id}' as goal_id from #{goal.id}"]
         map[goal.id] = goal
         last_goal = goal
       end

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

@@ -5,7 +5,7 @@ module AhoyCaptain
       def build
         event_query.joins(:visit)
                               .where(name: "$view")
-                              .group("ahoy_visits.id")
+                              .group("#{AhoyCaptain.visit.table_name}.id")
 
       end
     end

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

@@ -9,7 +9,7 @@ module AhoyCaptain
         ::Ahoy::Visit
           .select("duration as duration, started_at")
           .from(events, :views_per_visit_table)
-          .joins("inner join #{AhoyCaptain.visit.table_name} on ahoy_visits.id = views_per_visit_table.visit_id")
+          .joins("inner join #{AhoyCaptain.visit.table_name} on #{AhoyCaptain.visit.table_name}.id = views_per_visit_table.visit_id")
       end
     end
   end

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

@@ -1,6 +1,9 @@
 <%= turbo_frame_tag :goals do %>
   <div >
-    <canvas data-controller="funnel-chart" data-data="<%= @funnel.to_json %>" ></canvas>
-
+    <% if params.dig(:q, :goal_id) %>
+      <p>Funnels are unavailable if filtering by a goal.</p>
+    <% else %>
+      <canvas data-controller="funnel-chart" data-data="<%= @funnel.to_json %>" ></canvas>
+    <% end %>
   </div>
 <% end %>

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme='<%= AhoyCaptain.config.theme %>'>
 <head>
   <title>Ahoy Captain</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -116,9 +116,9 @@
   </style>
 </head>
 
-<body data-theme='<%= AhoyCaptain.config.theme %>' class='bg-base-300' data-controller='application'>
+<body data-controller='application'>
   <%= yield %>
-  <div class="flex justify-center bg-base-300 border-t-4 border-base-100 py-4">
+  <div class="flex justify-center 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>

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

@@ -1,6 +1,6 @@
 <%= 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">
+    <a class="block ml-1 md:ml-2 mr-auto text-xs md:text-sm font-bold " 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>

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

@@ -0,0 +1,34 @@
+<%= form_with url: url_for(params.permit!.except(:q)), method: :get, data: { turbo_frame: "_top", controller: "filter-form", action: "reset->filter-form#handleReset" } do |form| %>
+  <% non_filter_ransack_params.each do |k,v| %>
+    <%= form.hidden_field k, value: v %>
+  <% end %>
+  <% AhoyCaptain.config.filters.each do |name, filters| %>
+    <%= render AhoyCaptain::Filter::ModalComponent.new(title: "Filter by #{name}", id: "#{filters.modal_name}") do |modal| %>
+      <% modal.with_modal_display do %>
+        <% filters.each do |filter| %>
+        <%= render AhoyCaptain::Filter::SelectComponent.new(label: filter.label, column: filter.column, url: public_send(filter.url), predicates: filter.predicates, multiple: filter.multiple, form: form) %>
+        <% end %>
+      <% end %>
+    <% 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" for="start_date">
+            <span class="label-text">Start Date</span>
+          </label>
+          <input type="datetime-local" id="start_date" 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" for="end_date">
+            <span class="label-text">End Date</span>
+          </label>
+          <input type="datetime-local" id="end_date" name="end_date" class="input input-bordered w-full" value="<%= params[:end_date] %>" />
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -1,4 +1,4 @@
-<main class='bg-base-300 min-h-screen pb-4 max-w-6xl mx-auto' data-controller="application">
+<main class='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 %>
@@ -15,11 +15,11 @@
     <%= render AhoyCaptain::TileComponent.new(title: 'Top Sources') do |component| %>
       <% component.with_display_links do %>
         <div data-controller="active-links">
-          <a href="<%= sources_path(search_params) %>" data-turbo-frame="sources"  data-active-links-target="link">All</a>
+          <a href="<%= sources_path(search_params) %>" data-turbo-frame="sources" class="" data-active-links-target="link">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-active-links-target="link">
+                <a href="<%= public_send("campaign_#{source}_path".to_sym, **search_params) %>" class="" data-turbo-frame="sources"   data-active-links-target="link">
                   <%= source.titleize.gsub("Utm", "UTM") %>
                 </a>
               <% end %>
@@ -31,66 +31,66 @@
         <%= 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>
+        <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='active-links'>
-          <a href="<%= top_pages_path(search_params) %>" data-turbo-frame="pages"   data-active-links-target="link">Top Pages</a>
-          <a href="<%= entry_pages_path(search_params) %>" data-turbo-frame="pages"   data-active-links-target="link">Entry Pages</a>
-          <a href="<%= exit_pages_path(search_params) %>" data-turbo-frame="pages"   data-active-links-target="link">Exit Pages</a>
+          <a href="<%= top_pages_path(search_params) %>" data-turbo-frame="pages" class=" text-sm" data-active-links-target="link">Top Pages</a>
+          <a href="<%= entry_pages_path(search_params) %>" data-turbo-frame="pages" class=" text-sm"  data-active-links-target="link">Entry Pages</a>
+          <a href="<%= exit_pages_path(search_params) %>" data-turbo-frame="pages" class=" text-sm"  data-active-links-target="link">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>
+        <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="active-links">
-          <a href="<%= countries_path(search_params) %>" data-turbo-frame="geography"  data-active-links-target="link">Countries</a>
-          <a href="<%= regions_path(search_params) %>" data-turbo-frame="geography"   data-active-links-target="link">Regions</a>
-          <a href="<%= cities_path(search_params) %>" data-turbo-frame="geography"   data-active-links-target="link">Cities</a>
+          <a href="<%= countries_path(search_params) %>" data-turbo-frame="geography" class=" text-sm"  data-active-links-target="link">Countries</a>
+          <a href="<%= regions_path(search_params) %>" data-turbo-frame="geography" class=" text-sm"   data-active-links-target="link">Regions</a>
+          <a href="<%= cities_path(search_params) %>" data-turbo-frame="geography" class=" text-sm"   data-active-links-target="link">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>
+        <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="active-links">
-          <a href="<%= devices_browsers_path(search_params) %>" data-turbo-frame="devices"  data-active-links-target="link">Browser</a>
-          <a href="<%= devices_operating_systems_path(search_params) %>" data-turbo-frame="devices"   data-active-links-target="link">OS</a>
-          <a href="<%= devices_device_types_path(search_params) %>" data-turbo-frame="devices"   data-active-links-target="link">Size</a>
+          <a href="<%= devices_browsers_path(search_params) %>" data-turbo-frame="devices" class=" text-sm"   data-active-links-target="link">Browser</a>
+          <a href="<%= devices_operating_systems_path(search_params) %>" data-turbo-frame="devices" class=" text-sm"   data-active-links-target="link">OS</a>
+          <a href="<%= devices_device_types_path(search_params) %>" data-turbo-frame="devices"  class=" text-sm"  data-active-links-target="link">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>
+        <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">
+        <a href="<%= goals_path(search_params) %>" data-turbo-frame="goals" class="link ">
           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">
+              <a href="<%= funnel_path(id, search_params) %>" data-turbo-frame="goals" class="link ">
                 <%= funnel.title %>
               </a>
             <% end %>
@@ -105,77 +105,7 @@
   </div>
 </main>
 
-<%= form_with url: url_for(params.permit!.except(:q)), method: :get, data: { turbo_frame: "_top", controller: "filter-form", action: "reset->filter-form#handleReset" } do |form| %>
-  <%= form.hidden_field :period, value: params[:period] %>
-  <%= form.hidden_field :start_date, value: params[:start_date] %>
-  <%= form.hidden_field :end_date, value: params[:end_date] %>
-  <%= 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], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Entry page", column: :entry_page, url: filters_entry_pages_path, predicates: [:in, :not_in], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Exit page", column: :exit_page, url: filters_exit_pages_path, predicates: [:in, :not_in], form: form) %>
-    <% 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], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Region", column: :region, url: filters_locations_regions_path, predicates: [:in, :not_in], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "City", column: :city, url: filters_locations_cities_path, predicates: [:in, :not_in], form: form) %>
-    <% 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], form: form) %>
-    <% 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], form: form) %>
-    <% 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], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "Operating System Version", column: :os_version, url: filters_versions_path, predicates: [:in, :not_in], form: form) %>
-    <% 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], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Source", column: :utm_source, url: filters_utm_sources_path, predicates: [:in, :not_in], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Campaign", column: :utm_campaign, url: filters_utm_campaigns_path, predicates: [:in, :not_in], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Term", column: :utm_term, url: filters_utm_terms_path, predicates: [:in, :not_in], form: form) %>
-      <%= render AhoyCaptain::Filter::SelectComponent.new(label: "UTM Content", column: :utm_content, url: filters_utm_contents_path, predicates: [:in, :not_in], form: form) %>
-    <% 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" for="start_date">
-            <span class="label-text">Start Date</span>
-          </label>
-          <input type="datetime-local" id="start_date" 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" for="end_date">
-            <span class="label-text">End Date</span>
-          </label>
-          <input type="datetime-local" id="end_date" name="end_date" class="input input-bordered w-full" value="<%= params[:end_date] %>" />
-        </div>
-      </div>
-    <% end %>
-  <% end %>
-
-
-<% end %>
+<%= render 'filters' %>
 
 <dialog id="detailsModal" class="modal">
   <div class="modal-box w-11/12 max-w-5xl">

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

@@ -1,10 +1,11 @@
 <%= turbo_frame_tag :chart do %>
-  <div class="flex justify-end ...">
+  <div class="flex justify-end gap-3 items-center">
+    <a href="<%= export_path(request.query_parameters) %>" class="link text-sm" target="_blank" data-turbo-frame="false">Download</a>
     <%= form_with url: url_for(params.permit!), method: :get, data: { controller: "interval" } do %>
-      <%= select_tag :interval, options_for_select(available_intervals.collect { |interval| [interval.titleize, interval] }, selected: selected_interval), class: "select select-bordered select-sm w-full max-w-sm", 'data-action': "change->interval#handleChange" %>
+      <%= select_tag :interval, options_for_select(available_intervals.collect { |interval| [interval.titleize, interval] }, selected: selected_interval), class: "select text-primary select-sm w-full max-w-sm", 'data-action': "change->interval#handleChange" %>
     <% end %>
   </div>
   <div>
-    <canvas data-controller="line-chart" data-line-chart-data-value="<%= @stats.to_json %>" data-line-chart-label-value="<%= @label %>"></canvas>
+    <canvas  style="height:300px;width:100%;" data-controller="line-chart" data-line-chart-label-value="<%= @label %>" data-line-chart-data-value="<%= @stats.to_json %>"></canvas>
   </div>
 <% end %>

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

@@ -1,56 +1,11 @@
 <%= 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 %>%
-        </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 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" data-controller="active-links" data-active-links-classes-value='["text-primary"]'>
+    <%= render ::AhoyCaptain::Stats::ContainerComponent.new(stats_unique_visitors_url(search_params), "Unique Visits", number_with_delimiter(@presenter.unique_visitors), true) %>
+    <%= render ::AhoyCaptain::Stats::ContainerComponent.new(stats_total_visits_path(search_params), "Total Visits", number_with_delimiter(@presenter.total_visits)) %>
+    <%= render ::AhoyCaptain::Stats::ContainerComponent.new(stats_total_pageviews_path(search_params), "Total Pageviews", number_with_delimiter(@presenter.total_pageviews)) %>
+    <%= render ::AhoyCaptain::Stats::ContainerComponent.new(stats_views_per_visits_path(search_params), "Views per Visit", number_with_delimiter(@presenter.views_per_visit)) %>
+    <%= render ::AhoyCaptain::Stats::ContainerComponent.new(stats_bounce_rates_path(search_params), "Bounce Rate", "#{number_with_delimiter(@presenter.bounce_rate)}%") %>
+    <%= render ::AhoyCaptain::Stats::ContainerComponent.new(stats_visit_durations_url(search_params), "Visit Duration", @presenter.visit_duration) %>
   </dl>
   <%= turbo_frame_tag :chart, src: stats_unique_visitors_path(search_params) do %>
   <% end %>

data/lib/ahoy_captain/ahoy/event_methods.rb

@@ -17,10 +17,10 @@ module AhoyCaptain
         end
 
         scope :with_entry_pages, -> {
-          with(entry_pages: self.select("MIN(ahoy_events.id) as min_id, #{Arel.sql("#{AhoyCaptain.config.event.url_column} AS url")}").where(name: AhoyCaptain.config.event[:view_name]).group("ahoy_events.properties")).joins("INNER JOIN entry_pages ON entry_pages.min_id = ahoy_events.id")
+          with(entry_pages: self.select("MIN(#{table_name}.id) as min_id, #{Arel.sql("#{AhoyCaptain.config.event.url_column} AS url")}").where(name: AhoyCaptain.config.event[:view_name]).group("#{table_name}.properties")).joins("INNER JOIN entry_pages ON entry_pages.min_id = #{table_name}.id")
         }
         scope :with_exit_pages, -> {
-          with(exit_pages: self.select("MAX(ahoy_events.id) as max_id, #{Arel.sql("#{AhoyCaptain.config.event.url_column} AS url")}").where(name: AhoyCaptain.config.event[:view_name]).group("ahoy_events.properties")).joins("INNER JOIN exit_pages ON exit_pages.max_id = ahoy_events.id")
+          with(exit_pages: self.select("MAX(#{table_name}.id) as max_id, #{Arel.sql("#{AhoyCaptain.config.event.url_column} AS url")}").where(name: AhoyCaptain.config.event[:view_name]).group("#{table_name}.properties")).joins("INNER JOIN exit_pages ON exit_pages.max_id = #{table_name}.id")
         }
 
         scope :with_routes, -> { where(AhoyCaptain.config.event[:url_exists]) }
@@ -44,11 +44,20 @@ module AhoyCaptain
         scope :properties_not_eq, ->(value) do
           where.not("properties::jsonb @> ?", value)
         end
+
+        ransacker :goal,
+                  formatter: ->(value) {
+                    ::Arel::Nodes::SqlLiteral.new(
+                      ::AhoyCaptain.config.goals[value].event_query.call.select(:id).to_sql
+                    )
+                  } do |parent|
+          parent.table[:id]
+        end
       end
 
       class_methods do
         def ransackable_attributes(auth_object = nil)
-          super + ["action", "controller", "id", "id_property", "name", "page", "properties", "time", "url", "user_id", "visit_id", "property_name"] + self._ransackers.keys
+          super + ["action", "controller", "id", "id_property", "name", "page", "properties", "time", "url", "user_id", "visit_id", "property_name", "goal"] + self._ransackers.keys
         end
 
         def ransackable_scopes(auth_object = nil)

data/lib/ahoy_captain/ahoy/visit_methods.rb

@@ -5,7 +5,7 @@ module AhoyCaptain
 
       included do
         ransacker :ref_domain do
-          Arel.sql("(substring(referring_domain from '(?:.*://)?(?:www\.)?([^/?]*)'))")
+          Arel.sql("(substring(#{self.table_name}.referring_domain from '(?:.*://)?(?:www\.)?([^/?]*)'))")
         end
       end