ahoy_captain 0.83 → 0.91

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc0360816004f1a5f8cf41e01f4a55f30b0ff40db97084122678c1b179adf930
-  data.tar.gz: a05b89988c2220ca1077bc7eecc80ad1454f777f3eff8621d91b323c52ce6ad7
+  metadata.gz: bdc2d607961f89d3b62c551c8aa157c962ab05e0fe7a61179c6c1c9de1c830d6
+  data.tar.gz: feef80dd54cb92203aab1468fa80c134e46e8e04f5bf2c6684a83d856ab05ec4
 SHA512:
-  metadata.gz: 1e9806cda9cb8366c5639db6d87fe3983cdd327cff484af95782e8c68134fb9c0f3ed55f8b4b7d269ce41b125bbb5da2faf2f4cf2fc1f190faa5c77bf486e2cc
-  data.tar.gz: 3ac41065fd0f767d951785c9a46373318ace8d2c4099390d33ae17f2d39701843a4d8c478dbb8232880d8c9b2cc89bf83a0a7ec7ec6065a52281db41d33e9b70
+  metadata.gz: 43b863dd93ad7a3139c2c73564b1edde7f1d4bbba9540466852cb5cce0f930c0eef8f9505eb513e98c1800a6a0c3f2f8563d20568b17a5b0c65c4e61ad52e433
+  data.tar.gz: 6078f2d0937c955073c150c10979ea9099be46ae2d2382f317369f429b5237d4d381303d28e1aa0e6a3b917e1010b170d5dfcf1bf331383889e6f7d5e699f260

data/README.md

@@ -1,17 +1,12 @@
-# AhoyCaptain
+# <img src="logo.png" style="max-height:100px" /> AhoyCaptain
 
-<img src="logo.png" style="max-width:100px" />
 
 A full-featured, mountable analytics dashboard for your Rails app, shamelessly inspired by Plausible Analytics, powered by the Ahoy gem.
 
-<a href="https://github.com/joshmn/ahoy_captain/blob/main/ss.jpg"><img src="ss.jpg" style="max-width:300px" /></a>
+<a href="https://github.com/joshmn/ahoy_captain/blob/main/ss.png"><img src="ss.png" style="max-width:300px" /></a>
 ## Notice
 
-While this is fine to use in production, it was only built against a PostgreSQL instance. Some of the queries are certainly broken.
-
-## Some assumptions
-
-Some hardcoded stuff as of writing; this will be more fully-featured in due time.
+Currently requires using PG and a JSONB column for your data.
 
 ## Installation
 
@@ -29,11 +24,24 @@ $ bundle add ahoy_captain
 $ rails g ahoy_captain:install
 ```
 
-### 3. Star this repo
+### 3. Make sure your events are setup correctly
+
+By default, AhoyCaptain assumes you're tracking `controller` and `action` in your `Ahoy::Event` properties, and a page view event is named `$view`. 
+
+For a quick sanity check:
+
+```ruby
+AhoyCaptain.event.where(name: AhoyCaptain.config.event[:view_name]).count
+AhoyCaptain.event.with_routes.count
+```
+
+See the initializer `config/initializers/ahoy_captain.rb` for further customization.
+
+### 4. Star this repo
 
 No, seriously, I need all the internet clout I can get.
 
-### 4. Analyze your nightmares
+### 5. Analyze your nightmares
 
 If you have a large dataset (> 1GB) you probably want some indexes. `rails g ahoy_captain:migration`
 
@@ -52,12 +60,12 @@ If you have a large dataset (> 1GB) you probably want some indexes. `rails g aho
     * Device type
     * OS
     * UTM tags
+    * Goal
+* CSV exports
 
 ## Coming soon ™️
 
 * Date comparison
-* More filters
-* CSV exports
 
 ## Contributors
 
@@ -65,7 +73,7 @@ This was built during the Rails Hackathon in July 2023 with [afogel](https://git
 
 ## Contributions
 
-Please and thank you in advance!
+Do your worst; please and thank you in advance! :) 
 
 ## License
 

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

@@ -2,14 +2,17 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
   static targets = ["link"]
+  static values = {
+    classes: { type: Array, default: ["text-primary", "font-semibold"] }
+  }
+
   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 => this.classesValue.forEach(klass => link.classList.remove(klass)))
+      this.classesValue.forEach(klass => event.target.classList.add(klass))
     }
     this.linkTargets.forEach(link => {
       link.addEventListener('click', this.handleLinkClick)
     })
   }
-
 }

data/app/assets/javascript/ahoy_captain/controllers/filter/item_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="filter--item"
+export default class extends Controller {
+  static values = {
+    modal: String
+  };
+
+  openModal() {
+    document.getElementById(this.modalValue).showModal()
+  }
+}

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

@@ -9,7 +9,6 @@ export default class extends Controller {
     const getCSS = (varname) => {
       return `hsl(${getComputedStyle(document.documentElement).getPropertyValue(varname)})`
     }
-    Chart.register(Chart.Colors)
 
     new Chart(this.element,
       {
@@ -20,9 +19,9 @@ export default class extends Controller {
             {
               label: this.labelValue,
               data: Object.values(this.dataValue),
-              borderColor: getCSS('--p'),
-              backgroundColor: getCSS('--af'),
-              color: getCSS('--pc')
+              borderColor: getCSS('--s'),
+              backgroundColor: getCSS('--sc'),
+              color: getCSS('--sf')
             }
           ]
         },
@@ -33,5 +32,6 @@ export default class extends Controller {
         }
       },
     )
+
   }
 }

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

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Connects to data-controller="toggle"
+export default class extends Controller {
+  static targets = ['toggleable'];
+  static values = {
+    enable: Boolean
+  }
+
+  trigger() {
+    if (this.enableValue) {
+      this.toggleableTargets.forEach(element => {
+        element.classList.toggle('hidden');
+      });
+    }
+  }
+}

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

@@ -1,16 +1,16 @@
 <div class="dropdown dropdown-end">
-  <label 
-    tabindex="0" 
-    class="btn btn-ghost dark:hover:bg-neutral flex" 
+  <label
+    tabindex="0"
+    class="btn btn-ghost dark:hover:bg-neutral flex"
     >
     <%= header_icon %>
     <span><%= title %></span>
   </label>
-  <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+  <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box">
     <% options.each do |option| %>
       <li>
         <%= option %>
       <li>
     <% end %>
   </ul>
-</div>
+</div>

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

@@ -1,7 +1,7 @@
-<div class="dropdown dropdown-end" data-controller='dropdown-label'>
-  <label 
-    tabindex="0" 
-    class="cursor-pointer flex <%= classes %>" 
+<div class="dropdown dropdown-end " data-controller='dropdown-label'>
+  <label
+    tabindex="0"
+    class="cursor-pointer flex <%= classes %>"
     data-action='click->dropdown-label#removeHidden'
     >
     <span data-dropdown-label-target="label"><%= title %></span>
@@ -16,4 +16,4 @@
       <li>
     <% end %>
   </ul>
-</div>
+</div>

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

@@ -0,0 +1,48 @@
+<div class="dropdown dropdown-end">
+  <label
+    tabindex="0"
+    class="btn btn-ghost dark:hover:bg-neutral flex"
+  >
+    <%= header_icon %>
+    <span><%= title %></span>
+  </label>
+
+  <ul class="w-72 dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box" data-controller='toggle' data-toggle-enable-value="<%= advanced_filter_menu? %>">
+    <% if advanced_filter_menu? %>
+      <div id="advanced-filters" class="w-full text-sm leading-tight" >
+        <button class='w-full cursor-pointer block pl-4 pt-1 text-left hover:text-primary' data-action="click->toggle#trigger">+ Add filter</button>
+        <div class="divider my-1"></div>
+        <% filters.each do |_, filter| %>
+          <li class='flex flex-inline px-4 items-center' data-toggle-target='toggleable'>
+            <button title="Edit filter: <%= filter.title %>"
+                    class="flex w-full justify-between link no-underline items-center group <% if filter.modal %>cursor-pointer<% else %>cursor-text<% end %> text-left"
+                    onclick="<% if filter.modal %><%= filter.modal %>.showModal() <% end %>">
+              <span class="truncate w-48  ">
+                <%= filter.description %>
+              </span>
+              <% if filter.modal %>
+              <span class="group-hover:text-primary hover:text-primary ">
+                <%= edit_icon %>
+              </span>
+              <% end %>
+            </button>
+            <a title="Remove filter: <%= filter.title %>"
+               class="hover:text-primary link no-underline pl-2" href="<%= filter.url %>">
+              <%= remove_icon %>
+            </a>
+          <li>
+            <div class="divider my-1" data-toggle-target='toggleable'></div>
+        <% end %>
+        <li data-toggle-target='toggleable'>
+          <a class="block mx-auto pl-4 pb-1 " href="<%= AhoyCaptain::Engine.app.url_helpers.root_path %>">Clear all filters</a>
+        </li>
+      </div>
+    <% end %>
+
+    <div id="core-filters" class="menu <%= 'hidden' if advanced_filter_menu? %> pt-0" data-toggle-target='toggleable'>
+      <% AhoyCaptain.config.filters.each do |label, filter_group| %>
+        <li><button onClick="<%= filter_group.modal_name %>.showModal()" class='link no-underline' data-action="click->toggle#trigger"><%= label %></button></li>
+      <% end %>
+    </div>
+  </ul>
+</div>

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::Filter::DropdownComponent < ViewComponent::Base
+  def initialize(filters:)
+    @filters = filters
+  end
+
+  private
+
+  attr_reader :filters
+
+  def header_icon
+    advanced_filter_menu? ? filters_icon : magnifier_icon
+  end
+
+  def title
+    advanced_filter_menu? ?  "#{filters.size} Filters" : 'Filter'
+  end
+
+  def advanced_filter_menu?
+    filter_categories.count >= ::AhoyCaptain::FilterParser::FILTER_MENU_MAX_SIZE
+  end
+
+  def filter_categories
+    filters.values.map(&:values).flatten
+  end
+
+  def magnifier_icon
+    %Q(
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-ml-1 mr-1 h-4 w-4 md:h-4 md:w-4"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path></svg>
+    ).html_safe
+  end
+
+  def filters_icon
+    %Q(
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-ml-1 mr-1 h-4 w-4"><path d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"></path></svg>
+    ).html_safe
+  end
+
+  def edit_icon
+    %Q(
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-4 h-4 ml-1 cursor-pointer"><path d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"></path><path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"></path></svg>
+    ).html_safe
+  end
+
+  def remove_icon
+    %Q(
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-4 h-4"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path></svg>
+    ).html_safe
+  end
+end

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

@@ -3,8 +3,8 @@
     <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>
+      <button class="btn btn-active btn-primary mt-4" type="submit">Apply</button>
+      <button class="btn btn-active btn-primary mt-4" type="reset">Reset</button>
     </fieldset>
   </div>
   <label  class="modal-backdrop">

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

@@ -2,9 +2,9 @@
   <div class="flex flex-col w-[20%]">
     <label class="label"><%= label %></label>
     <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 %>
+      <% @predicates.each do |predicate| %>
+        <option value="<%= option_value(predicate) %>" <%= 'selected' if selected_predicate?(predicate) %>>
+          <%= predicate_label(predicate) %>
         </option>
       <% end %>
     </select>

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

@@ -12,27 +12,41 @@ class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
 
   private
 
-  def selected_predicate
-    predicate_options.detect { |option| params.dig(:q, option) }
+  def selected_predicate?(predicate)
+    params.dig(:q, predicate_name(predicate)).present?
   end
 
   def option_value(predicate)
-    name = "q[#{predicate}]"
+    name = "q[#{predicate_name(predicate)}]"
     name += "[]" if multiple
     name
   end
 
+  def predicate_name(predicate)
+    "#{@column}_#{predicate}"
+  end
+
+  def selected_predicate
+    @predicates.each do |predicate|
+      if params.dig(:q, predicate_name(predicate))
+        return predicate
+      end
+    end
+
+    nil
+  end
+
   def column_name_with_predicate
     if selected_predicate
       option_value(selected_predicate)
     else
-      option_value(predicate_options.first)
+      option_value(@predicates.first)
     end
   end
 
   def values
-    predicate_options.each do |predicate|
-      option = params.dig(:q, predicate)
+    @predicates.each do |predicate|
+      option = params.dig(:q, predicate_name(predicate))
       if option
         return option
       end
@@ -41,8 +55,8 @@ class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
     []
   end
 
-  def predicate_options
-    @predicate_options ||= @predicates.map { |predicate| "#{@column}_#{predicate}" }
+  def predicate_label(predicate)
+    AhoyCaptain::PredicateLabel[predicate]
   end
 
   attr_reader :label, :column, :url, :predicates, :form, :multiple

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

@@ -1,7 +1,11 @@
-<div class="bg-base-100 py-2 px-4 mx-2 flex items-center" data-controller='filter-tag' data-filter-tag-category-value="<%= category %>" data-filter-tag-column-predicate-value="<%= column_predicate %>">
-  <%= column_with_predicate %>
-  <span class="font-bold mx-2"> <%= category %></span>
-  <a class="hover:text-primary" href="<%= url %>">
+<div class="bg-base-200 py-2 px-4 mx-2 flex items-center text-base-content" data-controller="filter--item" data-filter--item-modal-value="<%= tag_item.modal %>">
+  <span data-action='click->filter--item#openModal'>
+    <%= tag_item.column.titleize %> <%= tag_item.predicate %>
+    <span class="font-bold">
+      <%= tag_item.label %>
+    </span>
+  </span>
+  <a class="hover:text-primary" href="<%= tag_item.url %>">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-4 h-4">
       <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
     </svg>

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

@@ -1,38 +1,14 @@
 # frozen_string_literal: true
 
 class AhoyCaptain::Filter::TagComponent < ViewComponent::Base
-  PREDICATES = {
-    eq: 'equals',
-    not_eq: 'not equals',
-    cont: 'contains',
-    in: 'in',
-    not_in: 'not in',
-  }
-  def initialize(column_predicate:, category:)
-    @column_predicate = column_predicate
-    @category = category
+  def initialize(tag_item:)
+    @tag_item = tag_item
   end
 
-  def url
-    search_params = helpers.search_params.deep_dup
-    if search_params["q"][@column_predicate].is_a?(Array)
-      search_params["q"][@column_predicate] = search_params["q"][@column_predicate] - [@category]
-    else
-      search_params["q"].delete(@column_predicate)
-    end
+  private 
+  attr_reader :tag_item
 
-    request.path + "?" + search_params.to_query
-  end
-
-  private
-  attr_reader :column_predicate, :category
-
-  def column_with_predicate
-    PREDICATES.keys.map(&:to_s).each do |predicate|
-      if column_predicate.include?(predicate)
-        before, match, after = column_predicate.partition(predicate)
-        return [before.gsub('_',' '), PREDICATES[match.to_sym]].join(' ').humanize
-      end
-    end
+  def modal
+    tag_item.modal
   end
 end

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

@@ -1,5 +1,4 @@
-<% filters.each do |param| %>
-  <% column_predicate, category = param %>
-  <%= render AhoyCaptain::Filter::TagComponent.new(column_predicate: column_predicate, category: category) %>
+<% ::AhoyCaptain::FilterParser.parse(request).each do |_, filter| %>
+  <%= render AhoyCaptain::Filter::TagComponent.new(tag_item: filter) %>
 <% end %>
 

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

@@ -1,13 +1,6 @@
 # frozen_string_literal: true
 
 class AhoyCaptain::Filter::TagContainerComponent < ViewComponent::Base
-  def initialize(filters:)
-    @filters = filters.to_unsafe_h.to_a.map do |key, values|
-      Array(values).map { |value| [key, value] }
-    end.flatten(1).reject { |k,v| v.blank? }
-
+  def initialize
   end
-
-  private
-  attr_reader :filters
 end

data/app/components/ahoy_captain/stats/container_component.html.erb

@@ -0,0 +1,8 @@
+<a href="<%= @url %>" class="hover:text-primary text-base-content link no-underline" data-turbo-frame="chart">
+  <dt class="font-normal <%= 'text-primary' if @selected %>" data-active-links-target="link"><%= @label %></dt>
+  <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+    <div class="flex items-baseline text-2xl font-semibold">
+      <%= @value %>
+    </div>
+  </dd>
+</a>

data/app/components/ahoy_captain/stats/container_component.rb

@@ -0,0 +1,12 @@
+module AhoyCaptain
+  module Stats
+    class ContainerComponent < ViewComponent::Base
+      def initialize(url, label, value, selected = false)
+        @url = url
+        @label = label
+        @value = value
+        @selected = selected
+      end
+    end
+  end
+end

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

@@ -1,37 +1,25 @@
-<div class="max-w-6xl flex justify-between sticky top-0 min-h-sm z-[99999] bg-base-300 py-4">
+<div class="max-w-6xl flex justify-between sticky top-0 min-h-sm z-[99999] py-4 bg-base-100">
   <div class="flex items-center">
     <a href="/">
       <img src="<%= image_path "ahoy_captain/logo.png" %>" alt="AhoyCaptainLogo" class='w-16 h-16 rounded-full'>
     </a>
-    <% if params[:q] %>
-      <%= render AhoyCaptain::Filter::TagContainerComponent.new(filters: params.require(:q)) %>
+    <% if tag_list_hidden? %>
+      <%= render AhoyCaptain::Filter::TagContainerComponent.new %>
     <% else %>
       <%= realtime_update %>
     <% end %>
   </div>
   <div class="flex flex-row-reverse col-span-2 items-center">
-    <%= render AhoyCaptain::DropdownLinkComponent.new(title: params[:start_date] ? "Custom Range" : (AhoyCaptain.config.ranges.find(params[:period]).try(:label) || "Period"), classes: 'btn btn-base-100 no-underline text-base-content hover:text-base-content hover:bg-base-100') do |dropdown| %>
+    <%= render AhoyCaptain::DropdownLinkComponent.new(title: params[:start_date] ? "Custom Range" : (AhoyCaptain.config.ranges.find(params[:period]).try(:label) || "Period"), classes: 'btn btn-base-100 no-underline hover:bg-base-100') do |dropdown| %>
       <% dropdown.with_option do %>
         <% AhoyCaptain.config.ranges.each do |param, range| %>
           <a class='link no-underline' href="<%= request.path %>?<%= request.query_parameters.except("start_date", "end_date").merge("period" => param).to_query %>"><%= range.label %></a>
         <% end %>
 
-        <a class='link no-underline' href='#' onclick="event.preventDefault(); customRangeModal.showModal()">Custom range</a>
-      <% end %>
-    <% end %>
-    <%= render AhoyCaptain::DropdownButtonComponent.new(title: 'Filter') do |dropdown| %>
-      <% dropdown.with_header_icon do %>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-ml-1 mr-1 h-4 w-4 md:h-4 md:w-4">
-          <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path>
-        </svg>
-      <% end %>
-      <% dropdown.with_option do %>
-        <button onClick="pageModal.showModal()" class='link no-underline'>Page</button>
-        <button onClick="countryModal.showModal()" class='link no-underline'>Geography</button>
-        <button onClick="screenModal.showModal()" class='link no-underline'>Screen</button>
-        <button onClick="osModal.showModal()" class='link no-underline'>Operating System</button>
-        <button onClick="utmModal.showModal()" class='link no-underline'>UTM Tags</button>
+        <a class='link no-underline ' href='#' onclick="event.preventDefault(); customRangeModal.showModal()">Custom range</a>
       <% end %>
     <% end %>
+
+    <%= render AhoyCaptain::Filter::DropdownComponent.new(filters: filters) %>
   </div>
 </div>

data/app/components/ahoy_captain/sticky_nav_component.rb

@@ -2,4 +2,12 @@
 
 class AhoyCaptain::StickyNavComponent < ViewComponent::Base
   renders_one :realtime_update
+
+  def filters
+    @filters ||= ::AhoyCaptain::FilterParser.parse(request)
+  end
+
+  def tag_list_hidden?
+    filters.values.map(&:values).flatten.size < ::AhoyCaptain::FilterParser::FILTER_MENU_MAX_SIZE
+  end
 end

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

@@ -1,6 +1,6 @@
-<div class="flex flex-col min-h-[380px] w-full pt-4">
+<div class="flex flex-col <%= 'min-h-[380px]' if fixed_height? %> w-full pt-4">
   <%= render @header %>
-  <div class='min-h-[420px]'>
+  <div class='<%= 'min-h-[420px]' if fixed_height? %>'>
     <div class="grow">
       <% if items.respond_to?(:each) && items.any? %>
         <% items.each do |item| %>

data/app/components/ahoy_captain/table_component.rb

@@ -33,4 +33,7 @@ class AhoyCaptain::TableComponent < ViewComponent::Base
     @total ||= items.first.total_count
   end
 
+  def fixed_height?
+    !@header.is_a?(::AhoyCaptain::Tables::Headers::GoalsHeaderComponent)
+  end
 end

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

@@ -1,4 +1,4 @@
-<div class="flex text-sm font-bold text-base-content mb-4">
+<div class="flex text-sm font-bold  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>

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

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

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

@@ -1,4 +1,4 @@
-<%= progress_bar(@item.cr, 100, @item.name) %>
+<%= progress_bar(@item.cr, 100, link_to(@item.name, url, target: :_top)) %>
 <%= item do %>
   <%= tooltip(@item.unique_visits) %>
 <% end %>

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

@@ -2,6 +2,14 @@ module AhoyCaptain
   module Tables
     module Rows
       class GoalsRowComponent < RowComponent
+        def search_params
+          view_context.search_params
+        end
+
+        def url
+          query = search_params.dup.merge(q: { goal_in: @item.goal_id}).to_query
+          AhoyCaptain::Engine.app.url_helpers.root_path + "?#{query}"
+        end
 
         def total
           @item.total_count

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

@@ -10,7 +10,7 @@ module AhoyCaptain
         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
+          items << view_context.content_tag(:span, class: "grow text-elipsis overflow-hidden absolute left-4 bottom-3 h-8 text-primary-content") do
             label
           end
 
@@ -18,7 +18,7 @@ module AhoyCaptain
         end
 
         def item(value = nil, &block)
-          view_context.content_tag(:span, class: "w-8 ml-8 text-right") do
+          view_context.content_tag(:span, class: "w-8 ml-8 text-right ") do
             if value
               value
             else