ahoy_captain 0.83 → 1.0.0

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

@@ -1,181 +1,172 @@
-<main class='bg-base-300 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"  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">
-                  <%= 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>
+        <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>
+        <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>
+        <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"  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>
+        <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"  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>
+        <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>
+        <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 link-primary">
-          Goals
-        </a>
-        <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Funnels") do |dropdown| %>
-          <% AhoyCaptain.config.funnels.each do |id, funnel| %>
-            <% dropdown.with_option do %>
-              <a href="<%= funnel_path(id, search_params) %>" data-turbo-frame="goals" class="link link-primary">
-                <%= funnel.title %>
-              </a>
-            <% end %>
-          <% end %>
-        <% end %>
-
+        <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>
 
-<%= 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 '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) %>" 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" %>
-    <% end %>
-  </div>
-  <div>
-    <%= line_chart @stats %>
+  <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,57 +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">
-    <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>
-  <%= 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
@@ -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,29 +38,31 @@ module AhoyCaptain
           distinct(Arel.sql("#{AhoyCaptain.config.event.url_column}"))
         }
 
-        scope :property_name_eq, ->(value) {
-          where("properties ? :key", key: value)
+        scope :with_property_values, ->(value) {
+          where("JSONB_EXISTS(properties, '#{value}')")
         }
 
-        scope :properties_eq, ->(value) {
-          where("properties @> ?", value)
-        }
+        ransacker :properties, args: [:parent, :ransacker_args] do |parent, args|
+          Arel::Nodes::InfixOperation.new('->>', parent.table[:properties], Arel::Nodes.build_quoted(args))
+        end
 
-        scope :properties_not_eq, ->(value) do
-          where.not("properties::jsonb @> ?", value)
+        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",  "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/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
 

data/lib/ahoy_captain/configuration.rb

@@ -1,9 +1,10 @@
 require 'ahoy_captain/period_collection'
+require 'ahoy_captain/filters_configuration'
 
 module AhoyCaptain
   class Configuration
-    attr_accessor :view_name, :theme
-    attr_reader :goals, :funnels, :cache, :ranges, :disabled_widgets, :event, :models
+    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
       @funnels = FunnelCollection.new
@@ -14,15 +15,25 @@ 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 = "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')"
-      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',
+        not_eq: 'not equals',
+        cont: 'contains',
+        in: 'in',
+        not_in: 'not in',
+      }
+
+      @realtime_interval = 30.seconds
       @disabled_widgets = []
     end
 

data/lib/ahoy_captain/engine.rb

@@ -8,6 +8,27 @@ require 'groupdate'
 require 'pagy'
 require 'zip'
 
+module Ransack
+  module Nodes
+    class Condition
+
+      # allows for sql from a formatter
+      # see https://github.com/activerecord-hackery/ransack/issues/702
+      def casted_array?(predicate)
+        return unless predicate.is_a?(Arel::Nodes::Casted)
+
+        predicate.value.is_a?(Array)
+      end
+
+    end
+  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
     isolate_namespace ::AhoyCaptain

data/lib/ahoy_captain/filter_configuration/filter.rb

@@ -0,0 +1,16 @@
+module AhoyCaptain
+  class FilterConfiguration
+    class Filter
+      attr_reader :column, :label, :url, :predicates, :multiple, :position
+
+      def initialize(label:, column:, url:, predicates: [:in, :not_in], multiple: true, position: nil)
+        @column = column
+        @label = label
+        @url = url
+        @predicates = predicates
+        @multiple = multiple
+        @position = position
+      end
+    end
+  end
+end