ahoy_captain 0.91 → 1.0.1

data/app/assets/javascript/ahoy_captain/helpers/number_formatters.js

@@ -0,0 +1,55 @@
+const THOUSAND = 1000
+const HUNDRED_THOUSAND = 100000
+const MILLION = 1000000
+const HUNDRED_MILLION = 100000000
+const BILLION = 1000000000
+const HUNDRED_BILLION = 100000000000
+const TRILLION = 1000000000000
+
+export function numberFormatter(num) {
+  if (num >= THOUSAND && num < MILLION) {
+    const thousands = num / THOUSAND
+    if (thousands === Math.floor(thousands) || num >= HUNDRED_THOUSAND) {
+      return Math.floor(thousands) + 'k'
+    } else {
+      return (Math.floor(thousands * 10) / 10) + 'k'
+    }
+  } else if (num >= MILLION && num < BILLION) {
+    const millions = num / MILLION
+    if (millions === Math.floor(millions) || num >= HUNDRED_MILLION) {
+      return Math.floor(millions) + 'M'
+    } else {
+      return (Math.floor(millions * 10) / 10) + 'M'
+    }
+  } else if (num >= BILLION && num < TRILLION) {
+    const billions = num / BILLION
+    if (billions === Math.floor(billions) || num >= HUNDRED_BILLION) {
+      return Math.floor(billions) + 'B'
+    } else {
+      return (Math.floor(billions * 10) / 10) + 'B'
+    }
+  } else {
+    return num
+  }
+}
+
+function pad(num, size) {
+  return ('000' + num).slice(size * -1);
+}
+
+export function durationFormatter(duration) {
+  const hours = Math.floor(duration / 60 / 60)
+  const minutes = Math.floor(duration / 60) % 60
+  const seconds = Math.floor(duration - (minutes * 60) - (hours * 60 * 60))
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`
+  } else if (minutes > 0) {
+    return `${minutes}m ${pad(seconds, 2)}s`
+  } else {
+    return `${seconds}s`
+  }
+}
+
+export function percentageFormatter(float) {
+  return Number(float/100).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});
+}

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

@@ -0,0 +1,33 @@
+<div data-controller="combobox"
+     data-combobox-single-option-value="<%= !@multiple %>"
+     data-combobox-placeholder-value="Select an option..."
+     data-combobox-is-disabled-value="false"
+     data-combobox-url-value="<%= @url %>"
+     data-combobox-disabled-value="<%= @disabled %>"
+     data-combobox-query-value="q[<%= @column %>_i_cont]"
+     data-combobox-selected-value="<%= @value.map { |value| { text: value, value: value } }.to_json %>"
+     class=" w-full "
+>
+  <div data-action="click->combobox#toggleOpen" data-combobox-target="box"
+       class="
+        bg-gray-900 ring-0  focus-within:ring-0 focus-within:ring-0 focus:ring-0 focus:outline-none w-full rounded-md py-2 text-sm
+        w-full"
+       data-combobox-box-open-class="border-secondary-500 ring-1 ring-secondary-500">
+    <select data-combobox-target="select" style="display:none;"
+            data-predicate-select-target="select"
+            name="<%= @name %>"
+            id="<%= @select_html[:id] || "filter_#{@name}" %>"
+            <% @select_html.each do |k,v| %><%=k %>="<%=v %>"<% end %>
+    ><% @value.each do |value| %><option value="<%= value %>" selected><%= value %></option><% end %></select>
+    <div data-combobox-target="selected" class="px-2" style="display:none;"></div>
+    <input data-combobox-target="input"
+           data-action="input->combobox#onInput"
+           class="input input-sm input-ghost w-full inline-block rounded-md focus:outline-none focus:ring-0 focus:bg-gray-900"
+           type="text"
+           placeholder="Select an option...">
+  </div>
+  <ul data-combobox-target="list"
+      class="z-50 absolute mt-1 max-h-60 w-full overflow-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm bg-gray-800 text-gray-350"
+      style="display: none;">
+  </ul>
+</div>

data/app/components/ahoy_captain/combobox_component.rb

@@ -0,0 +1,13 @@
+module AhoyCaptain
+  class ComboboxComponent < ViewComponent::Base
+    def initialize(name:, multiple: false, disabled: false, column:, url:, value: [], select_html: {})
+      @name = name
+      @multiple = multiple
+      @column = column
+      @url = url
+      @value = Array(value)
+      @select_html = select_html
+      @disabled = disabled
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<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>
+
+  </label>
+  <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52" data-dropdown-label-target="close">
+    <% links.each do |link| %>
+      <li data-action="click->dropdown-label#setLabel">
+        <%= link %>
+      <li>
+    <% end %>
+  </ul>
+</div>

data/app/components/ahoy_captain/comparison_link_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::ComparisonLinkComponent < ViewComponent::Base
+  include ::AhoyCaptain::CompareMode
+  include ::AhoyCaptain::RangeOptions
+  include ::AhoyCaptain::Rangeable
+
+  renders_many :links
+  renders_one :header
+
+  attr_reader :title, :classes
+  def initialize(title: "", classes: "btn btn-sm btn-base-100 no-underline hover:bg-base-100")
+    @classes = classes
+  end
+
+  # cheating
+  def title
+    self.with_link_content(options_for_option)
+
+    comparison_mode.label
+  end
+
+  def render?
+    comparison_mode.enabled?
+  end
+
+  def options_for_option
+    [
+      (link_to "Custom period", "javascript:customComparisonModal.showModal()", class: selected(:custom)),
+      (link_to "Year-over-year", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :year)), class: selected(:year)),
+      (link_to "Previous period", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :previous)), class: selected(:previous, :true)),
+      (link_to "Disable Comparison", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: false))),
+
+    ].reverse.join.html_safe
+  end
+
+  private
+
+  def selected(*types)
+    return "font-bold" if comparison_mode.type.in?(types)
+
+    nil
+  end
+end

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

@@ -1,13 +1,11 @@
-<div class="dropdown dropdown-end " data-controller='dropdown-label'>
+<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>
-    <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path fill="currentColor" d="M16.53 8.97a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 1 1 1.06-1.06L12 12.44l3.47-3.47a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
-    </svg>
+
   </label>
   <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52" data-dropdown-label-target="close">
     <% options.each do |option| %>

data/app/components/ahoy_captain/dropdown_link_component.rb

@@ -9,6 +9,10 @@ class AhoyCaptain::DropdownLinkComponent < ViewComponent::Base
     @classes = classes
   end
 
+  def link_to(name, url, **options)
+    self.with_option_content view_context.link_to name, url, options
+  end
+
   private
 
   attr_reader :title, :classes

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

@@ -1,7 +1,7 @@
 <div class="dropdown dropdown-end">
   <label
     tabindex="0"
-    class="btn btn-ghost dark:hover:bg-neutral flex"
+    class="btn btn-sm btn-ghost dark:hover:bg-neutral flex"
   >
     <%= header_icon %>
     <span><%= title %></span>
@@ -18,7 +18,8 @@
                     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 %>
+                <%= filter.column.titleize %> <%= filter.predicate.titleize %>
+                <%= filter.values.to_sentence %>
               </span>
               <% if filter.modal %>
               <span class="group-hover:text-primary hover:text-primary ">
@@ -30,8 +31,8 @@
                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>
+          </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>
@@ -39,10 +40,11 @@
       </div>
     <% end %>
 
-    <div id="core-filters" class="menu <%= 'hidden' if advanced_filter_menu? %> pt-0" data-toggle-target='toggleable'>
+    <ul 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>
+      <li><button onClick="customPropertyFilterModal.showModal()" class='link no-underline' data-action="click->toggle#trigger">Property</button></li>
+    </ul>
   </ul>
 </div>

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

@@ -1,11 +1,13 @@
-<dialog id="<%= id %>" class="modal">
-  <div class="modal-box w-11/12 max-w-5xl">
+<dialog id="<%= id %>" class="modal" data-controller="filter-modal">
+  <div class="modal-box h-5/6	 max-w-5xl">
+      <h1 class="text-xl mb-4"><%= title %></h1>
     <fieldset>
-      <h5><%= title %></h5>
       <%= modal_display %>
-      <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 class="mt-10">
+      <button class="btn btn-active btn-primary" type="submit">Apply</button>
+      <button class="btn btn-active btn-primary" type="reset">Reset</button>
+    </div>
   </div>
   <label  class="modal-backdrop">
     <button onclick="event.preventDefault(); <%=id %>.close();">Close</button>

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

@@ -1,23 +1,25 @@
-<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-action='change->predicate-select#handleChange'>
-      <% @predicates.each do |predicate| %>
-        <option value="<%= option_value(predicate) %>" <%= 'selected' if selected_predicate?(predicate) %>>
-          <%= predicate_label(predicate) %>
-        </option>
-      <% end %>
-    </select>
+<div class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><%= label %></div>
+<fieldset class="grid grid-cols-11 mb-3" data-controller="predicate-select">
+  <div class="col-span-3 mr-2">
+    <div class="w-full">
+      <div class="relative inline-block text-left w-full">
+        <div class="w-full">
+          <% if @predicates.any? %>
+            <select id="<%= column %>_predicate" class='select border-0 select-primary bg-gray-900 ring-0  focus-within:ring-0 focus-within:ring-0 focus:ring-0 focus:outline-none inline-flex justify-between items-center w-full rounded-md ' data-action='change->predicate-select#handleChange'>
+              <% @predicates.each do |predicate| %>
+                <option value="<%= option_value(predicate) %>" <%= 'selected' if selected_predicate?(predicate) %>>
+                  <%= predicate_label(predicate) %>
+                </option>
+              <% end %>
+            </select>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-span-8">
+    <div class="relative w-full">
+      <%= render ::AhoyCaptain::ComboboxComponent.new(name: column_name_with_predicate, multiple: multiple, column: column, url: url, value: values) %>
+    </div>
   </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_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,13 +1,14 @@
 # frozen_string_literal: true
 
 class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
-  def initialize(label:, column:, url:, predicates:, form:, multiple: true)
+  def initialize(label:, column:, url:, predicates:, form:, multiple: true, input_html: {})
     @label = label
     @column = column
     @url = url
     @predicates = predicates
     @form = form
     @multiple = multiple
+    @input_html_options = input_html
   end
 
   private

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

@@ -1,6 +1,6 @@
 <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 %>
+    <%= tag_item.column.titleize %> <%= tag_item.predicate.titleize %>
     <span class="font-bold">
       <%= tag_item.label %>
     </span>

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

@@ -0,0 +1,8 @@
+<div class="rounded shadow bg-white cursor-pointer dark:bg-gray-800 flex h-8">
+  <button class="flex items-center px-1 sm:px-2 border-r border-gray-300 rounded-l dark:border-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-900" type="button">
+    <svg class="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+  </button>
+  <button class="flex items-center px-1 sm:px-2 rounded-r dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-900" type="button">
+    <svg class="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+  </button>
+</div>

data/app/components/ahoy_captain/previous_next_component.rb

@@ -0,0 +1,11 @@
+module AhoyCaptain
+  class PreviousNextComponent < ViewComponent::Base
+    def initialize(range)
+      @range = range
+    end
+
+    def render?
+      false
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+<a href="<%= @url %>" class="relative px-4 md:px-6 w-1/2 my-4 w-auto group cursor-pointer" data-controller="frame-link" data-turbo-frame="chart">
+  <div>
+    <h5 class="text-sm font-bold uppercase whitespace-nowrap flex w-content border-transparent tooltip tooltip-bottom	"
+        data-active-links-target="link" data-tip="<%= tooltip %>">
+      <%= @label %>
+      <div class="<%= klass %> ms-2"><%= arrow %></div>
+    </h5>
+    <div class="md:block flex gap-4">
+      <div>
+        <span class="flex items-center justify-between whitespace-nowrap">
+          <p class="font-bold text-xl"><%= formatted(value.current) %></p>
+        </span>
+        <% if compare_mode? %>
+        <p class="text-xs"><%= range_string %></p>
+        <% end %>
+      </div>
+      <% if compare_mode? %>
+      <div>
+        <p class="font-bold text-xl text-gray-500"><%= formatted(value.compared_to) %></p>
+        <p class="text-xs text-gray-500"><%= compare_range_string %></p>
+      </div>
+      <% end %>
+    </div>
+  </div>
+</a>

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

@@ -0,0 +1,86 @@
+module AhoyCaptain
+  module Stats
+    class ComparableContainerComponent < ViewComponent::Base
+      include CompareMode
+      include Rangeable
+
+      def initialize(url, label, comparable, formatter = nil, selected = false, compare = false)
+        @url = url
+        @label = label
+        @comparable = comparable
+        @formatter = formatter
+        @selected = selected
+        @compare = compare
+      end
+
+      def compare?
+        @compare
+      end
+
+      def klass
+        if percentage.negative?
+          "text-red-400"
+        else
+          "text-green-400"
+        end
+      end
+
+      # 〰 ↓ ↑
+      def arrow
+        if percentage.negative?
+          "↓"
+        elsif percentage.positive?
+          "↑"
+        else
+          "〰"
+        end
+      end
+
+      def percentage
+        begin
+          diff = value.current - value.compared_to
+          if diff.zero?
+            return 0
+          end
+          (value.current / diff).round(2) * 100
+        rescue ZeroDivisionError
+          0
+        end
+      end
+
+      def number_to_duration(duration)
+        if duration
+          "#{duration.in_minutes.to_i}M #{duration.parts[:seconds].to_i}S"
+        else
+          "0M 0S"
+        end
+      end
+
+      def compare_range_string
+        range_to_string(@comparable.compare_range)
+      end
+
+      def range_string
+        range_to_string(@comparable.range)
+      end
+
+      def value
+        @comparable.result
+      end
+
+      def tooltip
+        "#{formatted(value.current)} vs #{formatted(value.compared_to)} — #{number_to_percentage percentage} (#{arrow}) "
+      end
+
+      def formatted(value)
+        public_send(@formatter, value)
+      end
+
+      private
+
+      def range_to_string(range)
+        [range[0], range[1]].map { |item| item.strftime('%m %B') }.join(' - ')
+      end
+    end
+  end
+end

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

@@ -1,8 +1,15 @@
-<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 %>
+<a href="<%= @url %>" class="relative px-4 md:px-6 w-1/2 my-4 lg:w-auto group cursor-pointer" data-controller="frame-link" data-turbo-frame="chart">
+  <div>
+    <h5 class="text-sm font-bold uppercase whitespace-nowrap flex w-content border-transparent tooltip tooltip-bottom	"
+        data-active-links-target="link">
+      <%= @label %>
+    </h5>
+    <div class="my-1 space-y-2">
+      <div>
+        <span class="flex items-center justify-between whitespace-nowrap">
+          <p class="font-bold text-xl"><%= formatted(@value) %></p>
+        </span>
+      </div>
     </div>
-  </dd>
+  </div>
 </a>

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

@@ -1,12 +1,26 @@
 module AhoyCaptain
   module Stats
     class ContainerComponent < ViewComponent::Base
-      def initialize(url, label, value, selected = false)
+      def initialize(url, label, value, formatter, selected = false)
         @url = url
         @label = label
         @value = value
+        @formatter = formatter
         @selected = selected
       end
+
+      def formatted(value)
+        public_send(@formatter, value)
+      end
+
+
+      def number_to_duration(duration)
+        if duration
+          "#{duration.in_minutes.to_i}M #{duration.parts[:seconds].to_i}S"
+        else
+          "0M 0S"
+        end
+      end
     end
   end
 end

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

@@ -1,25 +1,32 @@
-<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 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 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 %>
+<div class=" sticky top-0 min-h-sm z-[99999] py-4 bg-base-100 pb-4">
+  <div class="max-w-6xl mx-auto max-w-6xl flex justify-between ">
+    <div class="flex items-center">
+      <a href="/">
+        <img src="<%= image_path "ahoy_captain/logo.png" %>" alt="AhoyCaptainLogo" class='max-h-20 md:h-16 rounded-full'>
+      </a>
+      <% 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 gap-3">
+      <%= render AhoyCaptain::ComparisonLinkComponent.new %>
+      <%= render AhoyCaptain::PreviousNextComponent.new(range) %>
 
-        <a class='link no-underline ' href='#' onclick="event.preventDefault(); customRangeModal.showModal()">Custom range</a>
+      <%= render AhoyCaptain::DropdownLinkComponent.new(title: params[:start_date] ? custom_range_label : (AhoyCaptain.config.ranges.find(params[:period] || AhoyCaptain.config.ranges.default).try(:label) || "Period"), classes: 'btn btn-sm 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", "date", "compare_to_start_date", "compare_to_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>
+          <a class='link no-underline ' href='<%= AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: !compare_mode?)) %>'><%= compare_mode? ? "Disable Comparison" : "Compare" %></a>
+        <% end %>
       <% end %>
-    <% end %>
 
-    <%= render AhoyCaptain::Filter::DropdownComponent.new(filters: filters) %>
+      <%= render AhoyCaptain::Filter::DropdownComponent.new(filters: filters) %>
+    </div>
   </div>
+
 </div>

data/app/components/ahoy_captain/sticky_nav_component.rb

@@ -2,11 +2,22 @@
 
 class AhoyCaptain::StickyNavComponent < ViewComponent::Base
   renders_one :realtime_update
+  include ::AhoyCaptain::CompareMode
+  include ::AhoyCaptain::RangeOptions
+  include ::AhoyCaptain::Rangeable
 
   def filters
     @filters ||= ::AhoyCaptain::FilterParser.parse(request)
   end
 
+  def custom_range_label
+    if range.custom?
+      [range.starts_at, range.ends_at].map { |date| date.strftime('%b %d, %Y') }.join("-")
+    else
+      "Custom Range"
+    end
+  end
+
   def tag_list_hidden?
     filters.values.map(&:values).flatten.size < ::AhoyCaptain::FilterParser::FILTER_MENU_MAX_SIZE
   end

data/app/components/ahoy_captain/table_component.rb

@@ -4,21 +4,30 @@ class AhoyCaptain::TableComponent < ViewComponent::Base
   DEFAULT_HEADER = AhoyCaptain::Tables::Headers::HeaderComponent
   DEFAULT_ROW = AhoyCaptain::Tables::Rows::RowComponent
 
-  def initialize(items:, category_name: nil, unit_name: nil, header: nil, row: DEFAULT_ROW)
+  def initialize(items:, category_name: nil, unit_name: nil, header: nil, row: DEFAULT_ROW, table: nil)
     @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
+
+    if table
+      @table = table.table
+      @header = @table.headers
+    end
   end
 
   def render_row(item)
-    @row.new(table: self, item: item).render_in(view_context)
+    if @table
+      @table.row(item, view_context)
+    else
+      @row.new(table: self, item: item).render_in(view_context)
+    end
   end
 
   private
@@ -34,6 +43,6 @@ class AhoyCaptain::TableComponent < ViewComponent::Base
   end
 
   def fixed_height?
-    !@header.is_a?(::AhoyCaptain::Tables::Headers::GoalsHeaderComponent)
+    @header.fixed_height?
   end
 end