ahoy_captain 0.81 → 0.82

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be1cf9a1c2b19db594abc06b05d15085bc180fe720986671f9016f1d660feec5
-  data.tar.gz: e447a70fc694ae39ad8500661a5726eb73ecd4777a0c6d9b4f4bc7d1fdee0541
+  metadata.gz: c46c8a68d18711be0ceee5db679399c9945cd8735666cb44a5577e46e2371294
+  data.tar.gz: 28e7a6863f0b7b7d3c32298b08198f9fcbcf06ea6e2350d6aa998250f836fd80
 SHA512:
-  metadata.gz: cef676f367fd05a6b080db63106ab748347b32316f93245a1b1f1bed2bca99a1cb6df185b168721629eae537d14167ef494fc42f6ad1cb24d9eabbd1160ae0f1
-  data.tar.gz: af29e7be6843d2ceb9922b5e234219c6466e72dda75d992078cf6a95c20e52fe62f6e870f6eaef68d546d00beaf4179222b4bd504eee2666274e571bc158f2d3
+  metadata.gz: 8a238b7d58c0fe3c39ced96f0e3d33233d06fe78d4c83ede1a14d45ae07045cb9aeb8d22bd004ddf86a8e63eb657b938c9e90cf0b10f092c7677a34dffb2b207
+  data.tar.gz: 5bf02dd5c2de5db42618bc133a9b54e6cacb6602a9305dfdb1423a906a8f92a704ccc996ea63adfb6e30dbd1de70d96a518a88d9a7fbe9a7a27350f104f87ad8

data/app/assets/javascript/ahoy_captain/controllers/active_links_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["link"]
+  connect() {
+    this.handleLinkClick = (event) => {
+      this.linkTargets.forEach(link => link.classList.remove('text-primary', 'font-semibold'))
+      event.target.classList.add('text-primary', 'font-semibold')
+    }
+    this.linkTargets.forEach(link => {
+      link.addEventListener('click', this.handleLinkClick)
+    })
+  }
+
+}

data/app/assets/javascript/ahoy_captain/controllers/filter_form_controller.js

@@ -0,0 +1,13 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  handleReset(event) {
+    event.preventDefault();
+    const openModal = document.querySelector('dialog.modal[open]');
+    openModal.querySelectorAll('input, select').forEach(element => {
+      element.value = ""
+    });
+    openModal.close()
+    this.element.requestSubmit()
+  }
+}

data/app/assets/javascript/ahoy_captain/controllers/line_chart_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static values = {
+    data: Object,
+    label: String
+  }
+  connect() {
+    const getCSS = (varname) => {
+      return `hsl(${getComputedStyle(document.documentElement).getPropertyValue(varname)})`
+    }
+    Chart.register(Chart.Colors)
+
+    new Chart(this.element,
+      {
+        type: 'line',
+        data: {
+          labels: Object.keys(this.dataValue),
+          datasets: [
+            {
+              label: this.labelValue,
+              data: Object.values(this.dataValue),
+              borderColor: getCSS('--p'),
+              backgroundColor: getCSS('--af'),
+              color: getCSS('--pc')
+            }
+          ]
+        },
+        plugins: {
+          colors: {
+            forceOverride: true
+          }
+        }
+      },
+    )
+  }
+}

data/app/assets/javascript/ahoy_captain/controllers/predicate_select_controller.js

@@ -0,0 +1,10 @@
+import {Controller} from "@hotwired/stimulus"
+import SlimSelect from 'slim-select'
+
+export default class extends Controller {
+  static targets = ["select"]
+
+  handleChange(event) {
+    this.selectTarget.name = event.target.value
+  }
+}

data/app/assets/javascript/ahoy_captain/controllers/realtime_controller.js

@@ -7,6 +7,8 @@ export default class extends Controller {
     this.reload = this.reload.bind(this);
     this.setLabel = this.setLabel.bind(this);
     this.labelCount = 0;
+    this.reloadInterval = setInterval(this.reload, 1000 * 30);
+    this.labelInterval = setInterval(this.setLabel, 1000);
   }
 
   reload() {

data/app/assets/javascript/ahoy_captain/controllers/search_select_controller.js

@@ -0,0 +1,65 @@
+import {Controller} from "@hotwired/stimulus"
+import SlimSelect from 'slim-select'
+
+export default class extends Controller {
+  static values = {
+    query: String,
+    url: String,
+    selected: Array
+  }
+
+  connect() {
+    this.loadedInitialData = false;
+    this.search = this.search.bind(this)
+    this.select = new SlimSelect({
+      select: this.element,
+      data: [],
+      settings: {
+        contentPosition: 'relative',
+        contentLocation: this.element.closest('fieldset'),
+        searchText: 'Sorry, no results found',
+        searchPlaceholder: 'Type to populate results',
+        placeholderText: `Search`,
+        searchHighlight: true
+      },
+      events: {
+        beforeOpen: async () => {
+          if (!this.loadedInitialData) {
+            const data = await this.search("");
+            this.select.setData(data);
+            this.loadedInitialData = true
+          }
+        },
+        search: this.search
+      }
+    });
+
+    if(this.selectedValue.length) {
+      this.select.setData(this.selectedValue.map(item => ({ "text": item, "value": item })))
+      this.select.setSelected(this.selectedValue)
+    }
+  }
+
+  async search(query) {
+    const searchParams = new URLSearchParams(window.location.search);
+    const formData = new FormData(this.element.form);
+
+    let deleted = [];
+    for (const [key, value] of formData) {
+      if(!deleted.includes(key)) {
+        searchParams.delete(key)
+        deleted.push(key)
+      }
+
+      searchParams.append(key, value)
+    }
+
+    searchParams.delete(this.element.name);
+    searchParams.set(this.queryValue, query);
+
+    const response = await fetch(`${this.urlValue}?${searchParams.toString()}`);
+    const data = await response.json();
+    return data;
+  }
+
+}

data/app/components/ahoy_captain/filter/modal_component.html.erb

@@ -1,13 +1,14 @@
 <dialog id="<%= id %>" class="modal">
-  <form method="dialog" class="modal-box w-11/12 max-w-5xl" data-controller='filter' data-action="submit->filter#applyFilters reset->filter#resetFilters">
+  <div class="modal-box w-11/12 max-w-5xl">
     <fieldset>
       <h5><%= title %></h5>
       <%= modal_display %>
       <button class="btn btn-primary mt-4" type="submit">Apply</button>
       <button class="btn btn-primary mt-4" type="reset">Reset</button>
     </fieldset>
-  </form>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
+  </div>
+  <label  class="modal-backdrop">
+    <button onclick="event.preventDefault(); <%=id %>.close();">Close</button>
+  </label>
 </dialog>
+

data/app/components/ahoy_captain/filter/select_component.html.erb

@@ -1,21 +1,23 @@
-<fieldset class="flex space-x-4 items-end">
+<fieldset class="flex space-x-4 items-end" data-controller="predicate-select">
   <div class="flex flex-col w-[20%]">
     <label class="label"><%= label %></label>
-    <select class='select select-bordered' data-filter-target='predicate' name="<%= column %>">
-      <% predicates.each do |predicate| %>
-        <option value="<%= column %>_<%= predicate %>" <%= 'selected' if selected_predicate == "#{column}_#{predicate}" %>>
+    <select class='select select-bordered' data-action='change->predicate-select#handleChange'>
+      <% predicate_options.each do |predicate| %>
+        <option value="<%= option_value(predicate) %>" <%= 'selected' if selected_predicate == predicate %>>
           <%= predicate.to_s.humanize %>
         </option>
       <% end %>
     </select>
   </div>
+
   <select
+    data-predicate-select-target="select"
+    data-controller="search-select"
     class='w-[50%] border-base-content border-opacity-20 rounded-lg min-h-[3rem]'
-    name="<%= column %>"
-    multiple
-    data-filter-target="select"
-    data-filter-column-value="<%= column %>"
-    data-filter-url-value="<%= url %>"
-    data-filter-selected="<%= values %>"
-    ></select>
+    name="<%= column_name_with_predicate %>"
+    <% if multiple %>multiple<% end %>
+    data-search-select-query-value="q[<%= column %>_i_cont]"
+    data-search-select-url-value="<%= url %>"
+    data-search-select-selected-value="<%= values %>"
+  ></select>
 </fieldset>

data/app/components/ahoy_captain/filter/select_component.rb

@@ -1,17 +1,35 @@
 # frozen_string_literal: true
 
 class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
-  def initialize(label:, column:, url:, predicates:)
+  def initialize(label:, column:, url:, predicates:, form:, multiple: true)
     @label = label
     @column = column
     @url = url
     @predicates = predicates
+    @form = form
+    @multiple = multiple
   end
 
+  private
+
   def selected_predicate
     predicate_options.detect { |option| params.dig(:q, option) }
   end
 
+  def option_value(predicate)
+    name = "q[#{predicate}]"
+    name += "[]" if multiple
+    name
+  end
+
+  def column_name_with_predicate
+    if selected_predicate
+      option_value(selected_predicate)
+    else
+      option_value(predicate_options.first)
+    end
+  end
+
   def values
     predicate_options.each do |predicate|
       option = params.dig(:q, predicate)
@@ -23,10 +41,9 @@ class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
     []
   end
 
-  private
-
   def predicate_options
     @predicate_options ||= @predicates.map { |predicate| "#{@column}_#{predicate}" }
   end
-  attr_reader :label, :column, :url, :predicates
+
+  attr_reader :label, :column, :url, :predicates, :form, :multiple
 end

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

@@ -1,44 +1,11 @@
 <div class="flex flex-col min-h-[380px] w-full pt-4">
-  <div class="flex text-sm font-bold text-base-content mb-4">
-    <span class="grow"><%= category_name %></span>
-    <span ><%= unit_name %></span>
-     <% if additional_cols.include?(:percent_total) %>
-      <span class="w-8 ml-8 text-right">%</span>
-    <% end %>
-     <% if additional_cols.include?(:total) %>
-      <span class="w-8 ml-8 text-right">Total</span>
-    <% end %>
-     <% if additional_cols.include?(:conversion_rate) %>
-      <span class="w-8 ml-8 text-right">CR</span>
-    <% end %>
-  </div>
+  <%= render @header %>
   <div class='min-h-[420px]'>
     <div class="grow">
       <% if items.respond_to?(:each) && items.any? %>
         <% items.each do |item| %>
           <div class='leading-10 flex relative'>
-            <progress class='progress-primary bg-base-100 h-8 grow' value="<%= item.unit_amount %>" max="<%= max_amount %>">
-            </progress>
-            <span class="grow text-elipsis overflow-hidden absolute left-4 bottom-3 h-8 text-base-content">
-              <%= item.display_name %>
-            </span>
-            <span class="w-8 ml-8 text-right">
-              <%= render AhoyCaptain::TooltipComponent.new(amount: item.unit_amount) %>
-            </span>
-
-            <% if additional_cols.include?(:percent_total) %>
-              <span class="w-8 ml-8 text-right"><%= percent_total(item) %></span>
-            <% end %>
-            <% if additional_cols.include?(:total) %>
-              <span class="w-8 ml-8 text-right">
-                <%= render AhoyCaptain::TooltipComponent.new(amount: item.total) %>
-              </span>
-            <% end %>
-            <% if additional_cols.include?(:conversion_rate) %>
-              <span class="w-8 ml-8 text-right">
-                <%= item.conversion_rate * 100.0 %>%
-              </span>
-            <% end %>
+            <%= render_row(item) %>
           </div>
         <% end %>
       <% else %>

data/app/components/ahoy_captain/table_component.rb

@@ -1,13 +1,24 @@
 # frozen_string_literal: true
 
 class AhoyCaptain::TableComponent < ViewComponent::Base
-  SUPPORTED_COLS = [:percent_total, :total, :conversion_rate]
+  DEFAULT_HEADER = AhoyCaptain::Tables::Headers::HeaderComponent
+  DEFAULT_ROW = AhoyCaptain::Tables::Rows::RowComponent
 
-  def initialize(items:, category_name:, unit_name:, additional_cols: [])
+  def initialize(items:, category_name: nil, unit_name: nil, header: nil, row: DEFAULT_ROW)
     @items = items
     @category_name = category_name
     @unit_name = unit_name
     @additional_cols = additional_cols
+    if header.nil?
+      @header = DEFAULT_HEADER.new(category_name: category_name, unit_name: unit_name)
+    else
+      @header = header.new
+    end
+    @row = row
+  end
+
+  def render_row(item)
+    @row.new(table: self, item: item).render_in(view_context)
   end
 
   private
@@ -22,7 +33,4 @@ class AhoyCaptain::TableComponent < ViewComponent::Base
     @total ||= items.first.total_count
   end
 
-  def percent_total(item)
-    '%.1f' % ((item.unit_amount.to_i * 1.0 / total)*100.0)
-  end
 end

data/app/components/ahoy_captain/tables/headers/devices_header_component.html.erb

@@ -0,0 +1,3 @@
+<%= render ::AhoyCaptain::Tables::Headers::HeaderComponent.new(category_name: "Device", unit_name: "Visitors") do %>
+  <span class="w-8 ml-8 text-right">%</span>
+<% end %>

data/app/components/ahoy_captain/tables/headers/devices_header_component.rb

@@ -0,0 +1,9 @@
+module AhoyCaptain
+  module Tables
+    module Headers
+      class DevicesHeaderComponent < ViewComponent::Base
+
+      end
+    end
+  end
+end

data/app/components/ahoy_captain/tables/headers/goals_header_component.html.erb

@@ -0,0 +1,6 @@
+<div class="flex text-sm font-bold text-base-content mb-4">
+  <span class="grow">Goal</span>
+  <span class="w-8 ml-8 text-right">Uniques</span>
+  <span class="w-8 ml-8 text-right">Total</span>
+  <span class="w-8 ml-8 text-right">CR</span>
+</div>

data/app/components/ahoy_captain/tables/headers/goals_header_component.rb

@@ -0,0 +1,9 @@
+module AhoyCaptain
+  module Tables
+    module Headers
+      class GoalsHeaderComponent < ViewComponent::Base
+
+      end
+    end
+  end
+end

data/app/components/ahoy_captain/tables/headers/header_component.html.erb

@@ -0,0 +1,5 @@
+<div class="flex text-sm font-bold text-base-content mb-4">
+  <span class="grow"><%= @category_name %></span>
+  <span ><%= @unit_name %></span>
+  <%= content %>
+</div>

data/app/components/ahoy_captain/tables/headers/header_component.rb

@@ -0,0 +1,12 @@
+module AhoyCaptain
+  module Tables
+    module Headers
+      class HeaderComponent < ViewComponent::Base
+        def initialize(category_name:, unit_name:)
+          @category_name = category_name
+          @unit_name = unit_name
+        end
+      end
+    end
+  end
+end

data/app/components/ahoy_captain/tables/rows/devices_row_component.html.erb

@@ -0,0 +1,5 @@
+<%= progress_bar(@item.count, @item.total_count, @item.display_name) %>
+<%= item do %>
+  <%= tooltip(@item.count) %>
+<% end %>
+<%= item(percent_total(@item)) %>

data/app/components/ahoy_captain/tables/rows/devices_row_component.rb

@@ -0,0 +1,12 @@
+module AhoyCaptain
+  module Tables
+    module Rows
+      class DevicesRowComponent < RowComponent
+
+        def total
+          @item.total_count
+        end
+      end
+    end
+  end
+end

data/app/components/ahoy_captain/tables/rows/goals_row_component.html.erb

@@ -0,0 +1,11 @@
+<%= progress_bar(@item.cr, 100, @item.name) %>
+<%= item do %>
+  <%= tooltip(@item.unique_visits) %>
+<% end %>
+<%= item do %>
+  <%= tooltip(@item.total_events) %>
+<% end %>
+<%= item do %>
+  <%= tooltip(@item.cr) %>
+<% end %>
+

data/app/components/ahoy_captain/tables/rows/goals_row_component.rb

@@ -0,0 +1,12 @@
+module AhoyCaptain
+  module Tables
+    module Rows
+      class GoalsRowComponent < RowComponent
+
+        def total
+          @item.total_count
+        end
+      end
+    end
+  end
+end

data/app/components/ahoy_captain/tables/rows/row_component.html.erb

@@ -0,0 +1,6 @@
+<%= progress_bar(@item.count, @item.total_count, @item.display_name) %>
+<%=
+  item do
+    tooltip(@item.count)
+  end
+%>

data/app/components/ahoy_captain/tables/rows/row_component.rb

@@ -0,0 +1,41 @@
+module AhoyCaptain
+  module Tables
+    module Rows
+      class RowComponent < ViewComponent::Base
+        def initialize(table:, item:)
+          @table = table
+          @item = item
+        end
+
+        def progress_bar(value, max, label)
+          items = []
+          items << view_context.content_tag(:progress, "", class: "progress-primary bg-base-100 h-8 grow", value: value, max: max)
+          items << view_context.content_tag(:span, class: "grow text-elipsis overflow-hidden absolute left-4 bottom-3 h-8 text-base-content") do
+            label
+          end
+
+          items.join.html_safe
+        end
+
+        def item(value = nil, &block)
+          view_context.content_tag(:span, class: "w-8 ml-8 text-right") do
+            if value
+              value
+            else
+              capture(&block)
+            end
+          end
+        end
+
+
+        def percent_total(item)
+          '%.1f' % ((item.unit_amount.to_i * 1.0 / total)*100.0)
+        end
+
+        def tooltip(value)
+          AhoyCaptain::TooltipComponent.new(amount: value).render_in(self)
+        end
+      end
+    end
+  end
+end

data/app/controllers/ahoy_captain/filters/pages/entry_pages_controller.rb

@@ -1,10 +1,10 @@
 module AhoyCaptain
   module Filters
     module Pages
-      # TODO: ACCOMODATE EXIT_PAGES
       class EntryPagesController < BaseController
         def index
-          query = event_query.all.with_url.distinct_url
+          query = event_query.all.distinct("entry_pages.url").select("entry_pages.url as url")
+
           render json: query.map { |row| { text: row.url } }
         end
 

data/app/controllers/ahoy_captain/filters/pages/exit_pages_controller.rb

@@ -1,10 +1,9 @@
 module AhoyCaptain
   module Filters
     module Pages
-      # TODO: ACCOMODATE ENTRY_PAGES
       class ExitPagesController < BaseController
         def index
-          query = event_query.with_url.distinct_url
+          query = event_query.distinct("exit_pages.url").select("exit_pages.url as url")
 
           render json: query.map { |row| { text: row.url } }
         end

data/app/controllers/ahoy_captain/filters/properties/names_controller.rb

@@ -0,0 +1,11 @@
+module AhoyCaptain
+  module Filters
+    module Properties
+      class NamesController < BaseController
+        def index
+          render json: ::Ahoy::Event.select("jsonb_object_keys(properties) as keys").distinct("jsonb_object_keys(properties)").map(&:keys).map { |key| serialize(key) }
+        end
+      end
+    end
+  end
+end

data/app/controllers/ahoy_captain/filters/properties/values_controller.rb

@@ -0,0 +1,15 @@
+module AhoyCaptain
+  module Filters
+    module Properties
+      class ValuesController < BaseController
+        def index
+          query = ::Ahoy::Event.with(elements: event_query.select("ahoy_events.properties->>'controller' as element"))
+                               .select("distinct elements.element").from("elements")
+
+
+          render json: query.map(&:element).map { |element| serialize(element) }
+        end
+      end
+    end
+  end
+end

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

@@ -5,6 +5,7 @@ module AhoyCaptain
       def index
         @stats = AhoyCaptain::Stats::BounceRatesQuery.call(params)
         @stats = @stats.group_by_period(selected_interval, "daily_bounce_rate.date").average("bounce_rate")
+        @label = "Bounce Rate"
       end
     end
   end

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

@@ -3,6 +3,7 @@ module AhoyCaptain
     class TotalPageviewsController < BaseController
       def index
         @stats = AhoyCaptain::Stats::TotalPageviewsQuery.call(params).group_by_period(selected_interval, :time).count
+        @label = "Visitors"
       end
     end
   end

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

@@ -3,6 +3,7 @@ module AhoyCaptain
     class TotalVisitsController < BaseController
       def index
         @stats = AhoyCaptain::Stats::TotalVisitorsQuery.call(params).group_by_period(selected_interval, :started_at).count
+        @label = "Visitors"
       end
     end
   end

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

@@ -3,6 +3,7 @@ module AhoyCaptain
     class UniqueVisitorsController < BaseController
       def index
         @stats = AhoyCaptain::Stats::UniqueVisitorsQuery.call(params).group_by_period(selected_interval, :started_at).count
+        @label = "Visitors"
       end
     end
   end

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

@@ -11,6 +11,9 @@ module AhoyCaptain
             end
           end
         end
+
+        @label = "Views"
+
       end
     end
   end

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

@@ -3,6 +3,7 @@ module AhoyCaptain
     class VisitDurationsController < BaseController
       def index
         @stats = AhoyCaptain::Stats::VisitDurationQuery.call(params).group_by_period(selected_interval, 'started_at').average(:duration)
+        @label = "Duration"
       end
     end
   end

data/app/queries/ahoy_captain/application_query.rb

@@ -53,6 +53,7 @@ module AhoyCaptain
       EventQuery.call(params)
     end
 
+    # this could be better
     def ransack_params_for(type)
       ransackable_params = {}
 
@@ -61,12 +62,13 @@ module AhoyCaptain
           visit: (AhoyCaptain.visit.ransackable_attributes + AhoyCaptain.visit.ransackable_scopes).map(&:to_s),
           event: (AhoyCaptain.event.ransackable_attributes + AhoyCaptain.event.ransackable_scopes).map(&:to_s),
         }
+
         pattern = /(?:_not_eq|_eq|_in|_not_in|_cont|_not_cont|_i_cont)$/
         params[:q].each do |key, value|
           attribute_name = key.gsub(pattern, '')
-          if type == :event && ransackable_attributes[:visit].include?(attribute_name) || ransackable_attributes[:visit].include?(key)
+          if type == :event && (ransackable_attributes[:visit].include?(attribute_name) || ransackable_attributes[:visit].include?(key))
             ransackable_params["visit_#{key}"] = value
-          elsif type == :visit && ransackable_attributes[:event].include?(attribute_name) || ransackable_attributes[:event].include?(key)
+          elsif type == :visit && (ransackable_attributes[:event].include?(attribute_name) || ransackable_attributes[:event].include?(key))
             ransackable_params["events_#{key}"] = value
           else
             ransackable_params[key] = value
@@ -102,7 +104,6 @@ module AhoyCaptain
         end
       end
 
-
       ransackable_params
     end