ahoy_captain 0.9 → 0.10.0

data/app/queries/concerns/ahoy_captain/comparable_query.rb

@@ -0,0 +1,138 @@
+module AhoyCaptain
+  module ComparableQuery
+    class Comparison
+      class ComparisonResult
+        attr_reader :current, :compared_to
+        def initialize(current, compared_to)
+          @current = current
+          @compared_to = compared_to
+        end
+      end
+
+      def initialize(query)
+        @query = query
+        @params = @query.params.deep_dup
+        @compare = @query.class.call(comparison_params)
+        @model = @query.all.klass
+        @query_class = @query.class
+      end
+
+      def count(column_name = :id)
+        @operation = :count
+        @column = column_name
+        perform_calculations(:count, column_name)
+
+        self
+      end
+
+      def average(column_name)
+        @operation = :average
+        @column = column_name
+
+        perform_calculations(:average, column_name)
+
+        self
+      end
+
+      def perform_calculations(operation, column_name)
+        @query = perform_calculation(@query, operation, column_name)
+        @compare = perform_calculation(@compare, operation, column_name)
+      end
+
+      def perform_calculation(q, operation, column_name)
+        operation = operation.to_s.downcase
+        # If #count is used with #distinct (i.e. `relation.distinct.count`) it is
+        # considered distinct.
+        distinct = q.send(:distinct_value)
+
+        if operation == "count"
+          column_name ||= q.send(:select_for_count)
+          if column_name == :all
+            if !distinct
+              distinct = q.send(:distinct_select?, :select_for_count) if q.group_values.empty?
+            elsif q.send(:group_values).any? || q.send(:select_values).empty? && q.order_values.empty?
+              column_name = q.primary_key
+            end
+          elsif q.all.send(:distinct_select?, column_name)
+            distinct = nil
+          end
+        end
+
+        if q.group_values.any?
+          raise "use a subquery"
+        else
+          execute_simple_calculation(q, operation, column_name, distinct)
+        end
+      end
+
+      def result
+        result = @model.with(
+          current: @query.to_sql,
+          compare: @compare.to_sql
+        ).select("current, compare").from("current, compare")[0]
+        type = @query_class.cast_type(@column)
+
+        if result
+          current = @query_class.cast_value(type, result.current[1...-1])
+          compare = @query_class.cast_value(type, result.compare[1...-1])
+        else
+          current = @query_class.cast_value(type, '0')
+          compare = @query_class.cast_value(type, '0')
+        end
+
+        @result = ComparisonResult.new((current), (compare))
+      end
+
+      def compare_range
+        @compare_range ||= begin
+                             og_range = range
+                             [og_range[0] - (og_range[1] - og_range[0]), og_range[0]]
+                           end
+
+      end
+
+      def range
+        @range ||= @query.send(:range)
+      end
+
+      private
+
+      def execute_simple_calculation(q, operation, column_name, distinct) # :nodoc:
+        if operation == "count" && (column_name == :all && distinct || q.has_limit_or_offset?)
+          # Shortcut when limit is zero.
+          return 0 if q.limit_value == 0
+
+          q.send(:build_count_subquery, q.spawn, column_name, distinct)
+        else
+          # PostgreSQL doesn't like ORDER BY when there are no GROUP BY
+          relation = q.all.unscope(:order).distinct!(false)
+
+          column = q.all.send(:aggregate_column, column_name)
+          select_value = q.all.send(:operation_over_aggregate_column, column, operation, distinct)
+          select_value.distinct = true if operation == "sum" && distinct
+
+          relation.select_values = [select_value]
+
+          relation.arel
+        end
+      end
+
+      def comparison_params
+        params = @params.deep_dup
+        params.delete("period")
+
+        params[:start_date] = compare_range[0]
+        params[:end_date] = compare_range[1]
+        params
+      end
+    end
+
+    def with_comparison(enabled = false)
+      if enabled
+        Comparison.new(self)
+      else
+        self
+      end
+    end
+  end
+end

data/app/queries/concerns/ahoy_captain/lazy_comparable_query.rb

@@ -0,0 +1,42 @@
+module AhoyCaptain
+  module LazyComparableQuery
+    class LazyComparison
+      class LazyComparisonResult
+        attr_accessor :current, :compared_to
+      end
+
+      include ::AhoyCaptain::ComparableQueries
+
+      def initialize(query)
+        @query = query
+        @params = @query.params.deep_dup
+        @compare = @query.class.call(comparison_params)
+      end
+
+      def method_missing(name, *args)
+        perform_operations(name, *args)
+      end
+
+      def perform_operations(name, *args)
+        @query = @query.public_send(name, *args)
+        @compare = @compare.public_send(name, *args)
+
+        self
+      end
+
+      def result
+        return @result if @result
+
+        @result = LazyComparisonResult.new.tap { |comparison| comparison.current =  @query; comparison.compared_to = @compare }
+      end
+    end
+
+    def with_lazy_comparison(enabled = false)
+      if enabled
+        LazyComparison.new(self)
+      else
+        self
+      end
+    end
+  end
+end

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

@@ -1,5 +1,2 @@
 <%= render AhoyCaptain::TableComponent.new(items: @devices,
-                                           category_name: 'Devices',
-                                           unit_name: 'Visitors',
-                                           header: ::AhoyCaptain::Tables::Headers::DevicesHeaderComponent,
-                                           row: ::AhoyCaptain::Tables::Rows::DevicesRowComponent) %>
+                                           table: ::AhoyCaptain::Tables::DevicesTableComponent) %>

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

@@ -1,7 +1,4 @@
 <%= turbo_frame_tag :goals do %>
   <%= render AhoyCaptain::TableComponent.new(items: @presenter.goals,
-                                             header: ::AhoyCaptain::Tables::Headers::GoalsHeaderComponent,
-                                             row: ::AhoyCaptain::Tables::Rows::GoalsRowComponent) %>
-
-
+                                             table: ::AhoyCaptain::Tables::GoalsTableComponent) %>
 <% end %>

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

@@ -21,7 +21,6 @@
   <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 */

data/app/views/ahoy_captain/properties/_form.html.erb

@@ -0,0 +1,6 @@
+<select class="select text-accent-content bg-accent" data-controller="properties" data-action="change->properties#handleChange">
+  <option></option>
+  <% @options.each do |key, value| %>
+    <option value="<%= property_path(id: key) %>" <%= 'selected' if local_assigns[:selected] == value %>><%= value %></option>
+  <% end %>
+</select>

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

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :goals do %>
+  <%= render 'ahoy_captain/properties/form' %>
+<% end %>

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

@@ -0,0 +1,6 @@
+<%= turbo_frame_tag :goals do %>
+  <%= render 'ahoy_captain/properties/form', selected: Base64.strict_decode64(params[:id]) %>
+
+  <%= render AhoyCaptain::TableComponent.new(items: @properties,
+                                             table: ::AhoyCaptain::Tables::PropertiesTableComponent) %>
+<% end %>

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

@@ -6,12 +6,39 @@
     <%= 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) %>
+          <%= 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: "Filter by Custom Property", id: "customPropertyFilterModal") do |modal| %>
+    <% modal.with_modal_display do %>
+      <div data-controller="property-filter">
+        <fieldset class="flex space-x-4 items-end">
+          <% if current_property_filter %>
+            <%= render ::AhoyCaptain::ComboboxComponent.new(name: "", multiple: false, column: "", url: filters_properties_names_path, value: [current_property_filter[:key].delete_prefix("properties.")], select_html: { "data-property-filter-target" => 'name', id: "property-name" }) %>
+          <% else %>
+            <%= render ::AhoyCaptain::ComboboxComponent.new(name: "", multiple: false, column: "", url: filters_properties_names_path, select_html: { "data-property-filter-target" => 'name', id: "property-name" } ) %>
+          <% end %>
+
+          <div class="flex flex-col w-[20%]">
+            <select class='select select-primary bg-gray-900 ring-0  focus-within:ring-0 focus-within:ring-0 focus:ring-0 focus:outline-none inline-flex justify-between items-center w-full rounded-md border px-4 py-2 text-sm'>
+              <option value="in">in</option>
+            </select>
+          </div>
+
+          <% if current_property_filter %>
+            <%= render ::AhoyCaptain::ComboboxComponent.new(name: "q[#{current_property_filter[:key]}_in]", multiple: false, column: "", url: filters_properties_values_path, value: [current_property_filter[:value]], select_html: { "data-property-filter-target" => 'value', id: "property-value" } ) %>
+          <% else %>
+            <%= render ::AhoyCaptain::ComboboxComponent.new(name: "", multiple: false, column: "", url: filters_properties_values_path, select_html: { "data-property-filter-target" => 'value', id: "property-value" }, disabled: true) %>
+          <% end %>
+
+        </fieldset>
+
+      </div>
+    <% end %>
+  <% end %>
 
   <%= render AhoyCaptain::Filter::ModalComponent.new(title: "Custom Range", id: "customRangeModal") do |modal| %>
     <% modal.with_modal_display do %>
@@ -31,4 +58,23 @@
       </div>
     <% end %>
   <% end %>
+
+  <%= render AhoyCaptain::Filter::ModalComponent.new(title: "Custom Comparison", id: "customComparisonModal") 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="compare_to_start_date" class="input input-bordered w-full" value="<%= params[:compare_to_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="compare_to_end_date" class="input input-bordered w-full" value="<%= params[:compare_to_end_date] %>" />
+        </div>
+      </div>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -1,15 +1,19 @@
-<main class='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"  data-action="combobox:init@window->application#comboboxInit">
   <%= render AhoyCaptain::StickyNavComponent.new do |nav| %>
     <% nav.with_realtime_update do %>
-      <%= turbo_frame_tag :realtime, src: realtime_path, data: { controller:  "realtime" }, loading: :lazy %>
+      <%= turbo_frame_tag :realtime, src: realtime_path, data: { controller:  "realtime", "realtime-interval-value" => AhoyCaptain.config.realtime_interval.to_i }, 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| %>
+    <%= render AhoyCaptain::TileComponent.new(wide: true, classes: "p-4 m-2") do |component| %>
       <% component.with_statistic_display do %>
         <%= turbo_frame_tag :stats, src: stats_path(search_params), loading: :lazy %>
+
+        <%= turbo_frame_tag :chart, src: stats_unique_visitors_path(search_params) do %>
+        <% end %>
       <% end %>
+
     <% end %>
 
     <%= render AhoyCaptain::TileComponent.new(title: 'Top Sources') do |component| %>
@@ -19,7 +23,9 @@
           <%= 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) %>" class="" 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 %>
@@ -37,11 +43,19 @@
 
     <%= 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" 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 class="flex text-xs font-medium text-gray-400 space-x-2">
+          <div class="relative inline-block text-left" data-controller="active-links"><div>
+            <a href="<%= top_pages_path(search_params) %>"
+               data-turbo-frame="pages"
+               class="inline-block h-5 font-semibold"
+               data-active-links-target="link"
+               data-action="click->tile#setTitle">Top Pages</a>
+            <a href="<%= entry_pages_path(search_params) %>" data-turbo-frame="pages" class="inline-block h-5 font-semibold" data-active-links-target="link" data-action="click->tile#setTitle">Entry Pages</a>
+            <a href="<%= exit_pages_path(search_params) %>" data-turbo-frame="pages" class="inline-block h-5 font-semibold" data-active-links-target="link" data-action="click->tile#setTitle">Exit Pages</a>
+          </div>
+          </div>
         </div>
+
       <% end %>
       <% component.with_statistic_display do %>
         <%= turbo_frame_tag :pages, src: top_pages_path(search_params), loading: :lazy %>
@@ -53,10 +67,13 @@
 
     <%= 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" 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 class="flex text-xs font-medium text-gray-400 space-x-2">
+          <div class="relative inline-block text-left" data-controller="active-links">
+
+            <a href="<%= countries_path(search_params) %>" data-turbo-frame="geography" class="inline-block h-5 font-semibold" data-active-links-target="link" data-action="click->tile#setTitle">Countries</a>
+            <a href="<%= regions_path(search_params) %>" data-turbo-frame="geography" class="inline-block h-5 font-semibold"   data-active-links-target="link" data-action="click->tile#setTitle">Regions</a>
+            <a href="<%= cities_path(search_params) %>" data-turbo-frame="geography" class="inline-block h-5 font-semibold"   data-active-links-target="link" data-action="click->tile#setTitle">Cities</a>
+          </div>
         </div>
       <% end %>
       <% component.with_statistic_display do %>
@@ -69,10 +86,13 @@
 
     <%= 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" 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 class="flex text-xs font-medium text-gray-400 space-x-2">
+          <div class="relative inline-block text-left" data-controller="active-links">
+
+            <a href="<%= devices_browsers_path(search_params) %>" data-turbo-frame="devices" class=" inline-block h-5 font-semibold"   data-active-links-target="link">Browser</a>
+            <a href="<%= devices_operating_systems_path(search_params) %>" data-turbo-frame="devices" class="inline-block h-5 font-semibold"   data-active-links-target="link">OS</a>
+            <a href="<%= devices_device_types_path(search_params) %>" data-turbo-frame="devices"  class="inline-block h-5 font-semibold"  data-active-links-target="link">Size</a>
+          </div>
         </div>
       <% end %>
       <% component.with_statistic_display do %>
@@ -82,30 +102,39 @@
         <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| %>
+    <%= render AhoyCaptain::TileComponent.new(title: "Goals and Funnels", wide: true, classes: "p-4 m-2") do |component| %>
       <% component.with_display_links do %>
-        <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 ">
-                <%= funnel.title %>
-              </a>
-            <% end %>
-          <% end %>
-        <% end %>
+        <div>
+          <div  data-controller="active-links">
 
+            <a href="<%= goals_path(search_params) %>" data-turbo-frame="goals" class="link ">
+              Goals
+            </a>
+            <a href="<%= properties_path(search_params) %>" data-turbo-frame="goals" class="link ">
+              Properties
+            </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 ">
+                    <%= funnel.title %>
+                  </a>
+                <% end %>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :goals, src: goals_path(search_params), loading: :lazy %>
+        <div class="p-4">
+          <%= turbo_frame_tag :goals, src: goals_path(search_params), loading: :lazy %>
+        </div>
       <% end %>
     <% end %>
   </div>
 </main>
 
-<%= render 'filters' %>
+<%= render 'ahoy_captain/roots/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,11 +1,39 @@
 <%= turbo_frame_tag :chart do %>
-  <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 text-primary select-sm w-full max-w-sm", 'data-action': "change->interval#handleChange" %>
-    <% end %>
-  </div>
-  <div>
-    <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 class="p-4">
+    <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 text-accent select-sm w-full max-w-sm", 'data-action': "change->interval#handleChange" %>
+      <% end %>
+    </div>
+    <div>
+
+      <% if compare_mode? %>
+        <canvas class="h-[300px] w-full"
+                data-controller="line-chart"
+                data-line-chart-label-value="<%= @label %>"
+                data-line-chart-interval-value="<%= selected_interval %>"
+                data-line-chart-current-value="<%= @stats.current.to_json %>"
+                data-line-chart-comparison-value="<%= params[:comparison] %>"
+                data-line-chart-compared-to-value="<%= @stats.compared_to.to_json %>"
+                data-line-chart-metric-value="<%= metric_type(@stats) %>"
+                data-action="resize@window->line-chart#resize"
+                data-action="mouseenter->line-chart#hover"
+                data-action="mouseleave->line-chart#hover"
+        ></canvas>
+      <% else %>
+        <canvas class="h-[300px] w-full"
+                data-controller="line-chart"
+                data-line-chart-label-value="<%= @label %>"
+                data-line-chart-interval-value="<%= selected_interval %>"
+                data-line-chart-current-value="<%= @stats.to_json %>"
+                data-line-chart-metric-value="<%= metric_type(@stats) %>"
+                data-action="resize@window->line-chart#resize"
+                data-action="mouseenter->line-chart#hover"
+                data-action="mouseleave->line-chart#hover"
+        ></canvas>
+      <% end %>
+    </div>
   </div>
+
 <% end %>

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

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

data/config/routes.rb

@@ -12,6 +12,7 @@ AhoyCaptain::Engine.routes.draw do
     get "/devices/#{k}" => 'devices#index', defaults: { devices_type: v }, as: "devices_#{k}"
   end
 
+  resources :properties, only: [:index, :show]
   resource :export, only: [:show]
   resource :realtime, only: [:show]
   resources :funnels, only: [:show]
@@ -48,6 +49,7 @@ AhoyCaptain::Engine.routes.draw do
       resources :values, only: [:index]
     end
 
+    resources :goals, only: [:index]
     resources :sources, only: [:index]
     resources :screens, only: [:index]
     scope :operating_systems, module: :operating_systems do

data/lib/ahoy_captain/ahoy/event_methods.rb

@@ -4,6 +4,8 @@ module AhoyCaptain
       extend ActiveSupport::Concern
 
       included do
+        scope :page_view, -> { where("name = '#{AhoyCaptain.config.event[:view_name]}'") }
+
         ransacker :route do |_parent|
           Arel.sql(AhoyCaptain.config.event[:url_column])
         end
@@ -17,10 +19,13 @@ 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]) }
@@ -33,16 +38,12 @@ module AhoyCaptain
           distinct(Arel.sql("#{AhoyCaptain.config.event.url_column}"))
         }
 
-        scope :property_name_eq, ->(value) {
-          where("properties ? :key", key: value)
-        }
-
-        scope :properties_eq, ->(value) {
-          where("properties @> ?", value)
+        scope :with_property_values, ->(value) {
+          where("JSONB_EXISTS(properties, '#{value}')")
         }
 
-        scope :properties_not_eq, ->(value) do
-          where.not("properties::jsonb @> ?", value)
+        ransacker :properties, args: [:parent, :ransacker_args] do |parent, args|
+          Arel::Nodes::InfixOperation.new('->>', parent.table[:properties], Arel::Nodes.build_quoted(args))
         end
 
         ransacker :goal,
@@ -57,14 +58,11 @@ module AhoyCaptain
 
       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", "goal"] + self._ransackers.keys
+          super + [ "action", "controller", "id",  "name", "page", "properties", "time", "url", "user_id", "visit_id", "goal"] + self._ransackers.keys
         end
 
         def ransackable_scopes(auth_object = nil)
-          super + [
-            :properties_eq,
-            :properties_not_eq
-          ]
+          super + [:with_property_values, :property_value_i_cont]
         end
 
         def ransackable_associations(auth_object = nil)

data/lib/ahoy_captain/configuration.rb

@@ -3,7 +3,7 @@ require 'ahoy_captain/filters_configuration'
 
 module AhoyCaptain
   class Configuration
-    attr_accessor :view_name, :theme
+    attr_accessor :view_name, :theme, :realtime_interval
     attr_reader :goals, :funnels, :cache, :ranges, :disabled_widgets, :event, :models, :filters, :predicate_labels
     def initialize
       @goals = GoalCollection.new
@@ -15,15 +15,15 @@ module AhoyCaptain
         option.store = Rails.cache
         option.ttl = 1.minute
       end
-      @event = ActiveSupport::OrderedOptions.new.tap do |option|
-        option.view_name = "$view"
-        option.url_column = "COALESCE(ahoy_events.properties->>'url', CONCAT(ahoy_events.properties->>'controller', '#', ahoy_events.properties->>'action'))"
-        option.url_exists = "(JSONB_EXISTS(ahoy_events.properties, 'controller') AND JSONB_EXISTS(ahoy_events.properties, 'action')) OR (JSONB_EXISTS(ahoy_events.properties, 'url'))"
-      end
       @models = ActiveSupport::OrderedOptions.new.tap do |option|
         option.event = "::Ahoy::Event"
         option.visit = "::Ahoy::Visit"
       end
+      @event = ActiveSupport::OrderedOptions.new.tap do |option|
+        option.view_name = "$view"
+        option.url_column = "CONCAT(#{@models.event.parameterize.tableize}.properties->>'controller', '#', #{@models.event.parameterize.tableize}.properties->>'action')"
+        option.url_exists = "JSONB_EXISTS(#{@models.event.parameterize.tableize}.properties, 'controller') AND JSONB_EXISTS(#{@models.event.parameterize.tableize}.properties, 'action')"
+      end
       @filters = FiltersConfiguration.load_default
       @predicate_labels = {
         eq: 'equals',
@@ -33,6 +33,7 @@ module AhoyCaptain
         not_in: 'not in',
       }
 
+      @realtime_interval = 30.seconds
       @disabled_widgets = []
     end