ahoy_captain 0.91 → 1.0.1

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

@@ -1,34 +1,66 @@
-<main class='min-h-screen pb-4 max-w-6xl mx-auto' data-controller="application">
+<main class='w-screen	overflow-hidden' data-action="combobox:init@window->application#comboboxInit">
+  <script id="tile-loader-template" type="template/html">
+    <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+  </script>
   <%= 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| %>
+  <div class="grid grid-cols-1 lg:grid-cols-2 grid-flow-row gap-4 min-h-screen pb-4 max-w-6xl mx-auto">
+    <%= 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 :stats, src: stats_path(search_params), loading: :lazy, skeleton: false do %>
+          <div 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">
+            <% 6.times do %>
+              <div class="relative px-4 md:px-6 w-1/2 my-4 w-auto group cursor-pointer" >
+                <div role="status" class="max-w-sm animate-pulse">
+                  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[120px] mb-2.5"></div>
+                  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5 max-w-[60px]"></div>
+                  <span class="sr-only">Loading...</span>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+        <%= turbo_frame_tag :chart, src: stats_unique_visitors_path(search_params) do %>
+          <div role="status" class="p-4 animate-pulse md:p-6">
+            <div class="flex items-baseline mt-4 space-x-6">
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full h-56 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full h-64 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-80 dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-80 dark:bg-gray-700"></div>
+            </div>
+            <span class="sr-only">Loading...</span>
+          </div>
+        <% end %>
       <% end %>
+
     <% end %>
 
     <%= 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" 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) %>" class="" data-turbo-frame="sources"   data-active-links-target="link">
-                  <%= source.titleize.gsub("Utm", "UTM") %>
-                </a>
+      <% component.with_display_links do  %>
+        <div class="flex text-xs font-medium text-gray-400 space-x-2">
+          <div class="relative inline-block text-left">
+            <%= component.link_to "All", sources_path(search_params), data: { turbo_frame: "sources" } %>
+            <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Campaign") do |dropdown| %>
+              <% %w{utm_source utm_medium utm_term utm_content utm_campaign}.each do |source| %>
+                <%= dropdown.link_to source.titleize.gsub("Utm", "UTM"), public_send("campaign_#{source}_path".to_sym, **search_params), data: { turbo_frame: "sources" } %>
               <% end %>
             <% end %>
-          <% end %>
+          </div>
         </div>
+
+
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :sources, src: sources_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :sources, src: sources_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+        <% end %>
       <% 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>
@@ -37,75 +69,104 @@
 
     <%= 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"><div>
+            <%= component.link_to "Top Pages", top_pages_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "pages" } %>
+            <%= component.link_to "Entry Pages", entry_pages_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "pages" } %>
+            <%= component.link_to "Exit Pages", exit_pages_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "pages" } %>
+          </div>
+          </div>
         </div>
+
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :pages, src: top_pages_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :pages, src: top_pages_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+        <% end %>
       <% 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| %>
+    <%= render AhoyCaptain::TileComponent.new(title: 'Map') 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">
+            <%= component.link_to "Map", locations_map_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "geography" } %>
+            <%= component.link_to "Countries", locations_countries_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "geography" } %>
+            <%= component.link_to "Regions", locations_regions_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "geography" } %>
+            <%= component.link_to "Cities", locations_cities_path(search_params), data: { action: "click->tile#setTitle", turbo_frame: "geography" } %>
+          </div>
         </div>
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :geography, src: countries_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :geography, src: locations_map_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+
+        <% end %>
       <% 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" 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">
+            <%= component.link_to "Browser", devices_browsers_path(search_params), data: { turbo_frame: "devices" } %>
+            <%= component.link_to "OS", devices_operating_systems_path(search_params), data: { turbo_frame: "devices" } %>
+            <%= component.link_to "Size", devices_device_types_path(search_params), data: { turbo_frame: "devices" } %>
+          </div>
         </div>
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :devices, src: devices_browsers_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :devices, src: devices_browsers_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+
+        <% end %>
       <% 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| %>
+    <%= 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 >
+            <div class="flex text-xs font-medium text-gray-400 space-x-2">
+              <div class="relative inline-block text-left">
+                <a href="<%= goals_path(search_params) %>" data-turbo-frame="goals" class="inline-block h-5 font-semibold" data-controller="frame-link" data-action="click->tile#setTitle">Goals</a>
+                <a href="<%= properties_path(search_params) %>" data-turbo-frame="goals" class="inline-block h-5 font-semibold" data-controller="frame-link" data-action="click->tile#setTitle">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 " data-action="click->tile#setTitle" title="<%= funnel.title %> Funnel">
+                        <%= funnel.title %>
+                      </a>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              </div>
+            </div>
 
+          </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 do %>
+            <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+          <% end %>
+
+        </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,40 @@
 <%= 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>
+      <canvas id="overlay" width="600" height="400" style="position:absolute;pointer-events:none;"></canvas>
+
+      <% 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,15 @@
-<%= 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" 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 %>
+<%= turbo_frame_tag :stats, data: { controller: "active-frame-link" } do %>
+  <div 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"]'>
+    <% if @presenter.send(:range).realtime? %>
+      <%= render stats_container(@presenter.unique_visitors, stats_unique_visitors_url(search_params), "Unique Visits (30 min)", :number_with_delimiter, true) %>
+      <%= render stats_container(@presenter.total_pageviews, stats_total_pageviews_path(search_params), "Total Pageviews (30 min)", :number_with_delimiter) %>
+    <% else %>
+      <%= 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) %>
+    <% end %>
+  </div>
 <% end %>

data/config/routes.rb

@@ -12,14 +12,19 @@ AhoyCaptain::Engine.routes.draw do
     get "/devices/#{k}" => 'devices#index', defaults: { devices_type: v }, as: "devices_#{k}"
   end
 
+  namespace :locations do
+    resource :map, only: [:show]
+    resources :countries, only: [:index]
+    resources :regions, only: [:index]
+    resources :cities, only: [:index]
+  end
+
+  resources :properties, only: [:index, :show]
   resource :export, only: [:show]
   resource :realtime, only: [:show]
   resources :funnels, only: [:show]
   resources :goals, only: [:index]
   resource :stats, only: [:show]
-  resources :countries, only: [:index]
-  resources :regions, only: [:index]
-  resources :cities, only: [:index]
   resources :campaigns, only: [:index]
   resources :sources, only: [:index]
   resources :exit_pages, only: [:index]
@@ -48,6 +53,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
@@ -19,8 +21,11 @@ module AhoyCaptain
         scope :with_entry_pages, -> {
           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(#{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")
+          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,8 +3,8 @@ require 'ahoy_captain/filters_configuration'
 
 module AhoyCaptain
   class Configuration
-    attr_accessor :view_name, :theme
-    attr_reader :goals, :funnels, :cache, :ranges, :disabled_widgets, :event, :models, :filters, :predicate_labels
+    attr_accessor :view_name, :theme, :realtime_interval, :disabled_widgets
+    attr_reader :goals, :funnels, :cache, :ranges, :event, :models, :filters, :predicate_labels
     def initialize
       @goals = GoalCollection.new
       @funnels = FunnelCollection.new
@@ -33,6 +33,7 @@ module AhoyCaptain
         not_in: 'not in',
       }
 
+      @realtime_interval = 30.seconds
       @disabled_widgets = []
     end
 

data/lib/ahoy_captain/engine.rb

@@ -24,6 +24,10 @@ module Ransack
   end
 end
 
+Ransack.configure do |config|
+  config.add_predicate 'json_cont', arel_predicate: 'contains', formatter: proc { |v| JSON.parse(v) }
+  config.add_predicate 'json_eq', arel_predicate: 'eq', formatter: proc { |v| JSON.parse(v) }
+end
 
 module AhoyCaptain
   class Engine < Rails::Engine

data/lib/ahoy_captain/filters_configuration.rb

@@ -30,12 +30,16 @@ module AhoyCaptain
           filter column: :os_version, label: "OS Version", url: :filters_versions_path, predicates: [:in, :not_in]
         end
 
-        config.register("UTM Tag") do
-          filter column: :utm_medium, label: "UTM Medium", url: :filters_utm_mediums_path, predicates: [:in, :not_in]
-          filter column: :utm_source, label: "UTM Source", url: :filters_utm_sources_path, predicates: [:in, :not_in]
-          filter column: :utm_campaign, label: "UTM Campaign", url: :filters_utm_campaigns_path, predicates: [:in, :not_in]
-          filter column: :utm_term, label: "UTM Term", url: :filters_utm_terms_path, predicates: [:in, :not_in]
-          filter column: :utm_content, label: "UTM Content", url: :filters_utm_contents_path, predicates: [:in, :not_in]
+        config.register("UTM Tags") do
+          filter column: :utm_medium, label: "UTM Medium", url: :filters_utm_mediums_path, predicates: [:in, :not_in, :cont]
+          filter column: :utm_source, label: "UTM Source", url: :filters_utm_sources_path, predicates: [:in, :not_in, :cont]
+          filter column: :utm_campaign, label: "UTM Campaign", url: :filters_utm_campaigns_path, predicates: [:in, :not_in, :cont]
+          filter column: :utm_term, label: "UTM Term", url: :filters_utm_terms_path, predicates: [:in, :not_in, :cont]
+          filter column: :utm_content, label: "UTM Content", url: :filters_utm_contents_path, predicates: [:in, :not_in, :cont]
+        end
+
+        config.register("Goal") do
+          filter column: :goal, label: "Goal", url: :filters_goals_path, predicates: [:in]
         end
       end
     end

data/lib/ahoy_captain/version.rb

@@ -1,3 +1,3 @@
 module AhoyCaptain
-  VERSION = "0.91"
+  VERSION = "1.0.1"
 end

data/lib/ahoy_captain.rb

@@ -28,11 +28,13 @@ module AhoyCaptain
         pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
         pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
         pin "application", to: "ahoy_captain/application.js", preload: true
-        pin "slim-select", to: "https://ga.jspm.io/npm:slim-select@2.6.0/dist/slimselect.es.js", preload: true
         pin "chartkick", to: "chartkick.js"
         pin "Chart.bundle", to: "Chart.bundle.js"
         pin "chartjs-plugin-datalabels", to: "https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2", preload: true
+        pin "classnames", to: "https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js", preload: true
+        pin "chartjs-chart-geo", to: "https://unpkg.com/chartjs-chart-geo@4", preload: true
         pin_all_from AhoyCaptain::Engine.root.join("app/assets/javascript/ahoy_captain/controllers"), under: "controllers", to: "ahoy_captain/controllers"
+        pin_all_from AhoyCaptain::Engine.root.join("app/assets/javascript/ahoy_captain/helpers"), under: "helpers", to: "ahoy_captain/helpers"
       end
     end
 
@@ -51,5 +53,9 @@ module AhoyCaptain
     def visit
       @visit ||= config.models[:visit].constantize
     end
+
+    def none
+      @none ||= OpenStruct.new(text: "(none)", value: "!none!")
+    end
   end
 end

data/lib/generators/ahoy_captain/templates/config.rb.tt

@@ -80,6 +80,8 @@ AhoyCaptain.configure do |config|
   #
   # Set to false to disable custom ranges
   # config.ranges.custom = true
+  #
+  # For an interval to be considered "realtime" it must not have a secondary item in the range
 
   # ==> Filters
   #
@@ -160,4 +162,9 @@ AhoyCaptain.configure do |config|
   #     goal :appointment_created
   #     goal :appointment_paid
   #   end
+  #
+  # => Realtime interval
+  # config.realtime_interval = 30.seconds
+  #
+  # How frequently the page should refresh if the interval is realtime
 end