ahoy_captain 0.8 → 0.10.0

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

@@ -0,0 +1,156 @@
+import { numberFormatter, durationFormatter, percentageFormatter } from "helpers/number_formatters";
+
+export const getCSS = (varname, alpha = 1) => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(varname);
+  if(value.includes("em") || value.includes("px")) {
+    return value
+  }
+  return `hsl(${getComputedStyle(document.documentElement).getPropertyValue(varname)} / ${alpha})`
+}
+
+const buildTooltipData = (controller, tooltip) => {
+  return controller.extractTooltipData(tooltip)
+}
+
+export const metricFormatter = {
+  "ActiveSupport::Duration": durationFormatter,
+  "BigDecimal": numberFormatter,
+  "Float": percentageFormatter,
+  "Integer": numberFormatter
+}
+
+export const dateFormatter = {
+  month: (value, type = 'short') => {
+    if(type === 'short') {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { month: 'short', day: 'numeric', hour: 'numeric' }
+      )
+    } else {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { year: "numeric", month: 'short', day: 'numeric', hour: 'numeric' }
+      )
+    }
+  },
+  week: (value, type = 'short') => {
+    return new Date(value).toLocaleString(
+      'en-US',
+      { month: 'short', day: 'numeric', hour: 'numeric' }
+    )
+  },
+  day: (value, type = 'short') => {
+    return new Date(value).toLocaleString(
+      'en-US',
+      { month: 'short', day: 'numeric', hour: 'numeric' }
+    )
+  },
+  hour: (value, type = 'short') => {
+    if(type == 'long') {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { year: 'numeric', hour: 'numeric' }
+      )
+    } else {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { hour: 'numeric' }
+      )
+    }
+  },
+  minute: (value, type = 'short') => {
+    if(type == 'short') {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { minute: 'numeric', hour: 'numeric' }
+      )
+    } else {
+      return new Date(value).toLocaleString(
+        'en-US',
+        { year: 'numeric', minute: 'numeric', hour: 'numeric' }
+      )
+    }
+  },
+}
+
+export const externalTooltipHandler = (controller) => {
+
+  return ({chart, tooltip}) => {
+    const offset = controller.chart.canvas.getBoundingClientRect()
+    let tooltipEl = document.getElementById('chartjs-tooltip')
+
+    if (!tooltipEl) {
+      tooltipEl = document.createElement('div')
+      tooltipEl.id = 'chartjs-tooltip'
+      tooltipEl.style.background = getCSS('--n', );
+      tooltipEl.style.borderRadius = getCSS('--rounded-btn');
+      tooltipEl.style.opacity = 1;
+      tooltipEl.style.pointerEvents = 'none';
+      tooltipEl.style.position = 'absolute';
+      tooltipEl.style.transform = 'translate(-50%, 50%)';
+      tooltipEl.style.transition = 'all .1s ease';
+      tooltipEl.style.minWidth = '250px'
+
+      chart.canvas.parentNode.appendChild(tooltipEl);
+    }
+
+    if (tooltipEl && offset && window.innerWidth < 768) {
+      tooltipEl.style.top = offset.y + offset.height + window.scrollY + 15 + 'px'
+      tooltipEl.style.left = offset.x + 'px'
+      tooltipEl.style.right = null
+      tooltipEl.style.opacity = 1
+    }
+
+    if (tooltip.opacity === 0) {
+      tooltipEl.style.display = 'none'
+      return
+    }
+
+    if (tooltip.body) {
+      const tooltipData = buildTooltipData(controller, tooltip)
+
+      tooltipEl.innerHTML = `
+        <aside class="flex flex-col text-neutral-content">
+          <div class="flex justify-between items-center">
+            <span class="text-sm font-bold uppercase whitespace-nowrap flex mr-4">${tooltipData.metric}</span>
+            ${tooltipData.comparison && tooltipData.comparisonDifference ?
+        `<div class="inline-flex items-center space-x-1">
+              ${tooltipData.comparisonDifference > 0 ? `<span class="font-semibold text-sm text-green-500">&uarr;</span><span>${tooltipData.comparisonDifference}%</span>` : ""}
+              ${tooltipData.comparisonDifference < 0 ? `<span class="font-semibold text-sm text-red-400">&darr;</span><span>${tooltipData.comparisonDifference * -1}%</span>` : ""}
+              ${tooltipData.comparisonDifference == 0 ? `<span class="font-semibold text-sm">〰 0%</span>` : ""}
+            </div>` : ''}
+          </div>
+
+          ${tooltipData.label ?
+        `<div class="flex flex-col">
+            <div class="flex flex-row justify-between items-center">
+              <span class="badge relative badge-xs" style="background-color: ${tooltipData.labelBackgroundColor}"></span>
+              <span class="flex items-center grow ml-4 mr-4">
+                <span>${tooltipData.label}</span>
+              </span>
+              <span class="font-bold">${tooltipData.formattedValue}</span>
+            </div>` : ''}
+
+            ${tooltipData.comparison ?
+        `<div class="flex flex-row justify-between items-center">
+              <span class="badge relative badge-xs" style="background-color: ${tooltipData.comparisonLabelBackgroundColor}"></span>
+              <span class="flex items-center grow ml-4 mr-4">
+                <span>${tooltipData.comparisonLabel}</span>
+              </span>
+              <span class="font-bold">${tooltipData.formattedComparisonValue}</span>
+            </div>` : ""}
+          </div>
+        </aside>
+      `
+    }
+    const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas;
+
+    // Display, position, and set styles for font
+    tooltipEl.style.opacity = 1;
+    tooltipEl.style.display = null;
+    tooltipEl.style.left = positionX + tooltip._eventPosition.x + 'px';
+    tooltipEl.style.top = positionY + tooltip._eventPosition.y + 'px';
+    tooltipEl.style.font = tooltip.options.bodyFont.string;
+    tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
+  }
+};

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 px-4 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="" 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 = value
+      @select_html = select_html
+      @disabled = disabled
+    end
+  end
+end

data/app/components/ahoy_captain/comparison_link_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::ComparisonLinkComponent < AhoyCaptain::DropdownLinkComponent
+  include ::AhoyCaptain::CompareMode
+  include ::AhoyCaptain::RangeOptions
+  include ::AhoyCaptain::Rangeable
+
+  def initialize(title: "", classes: "btn btn-sm btn-base-100 no-underline hover:bg-base-100")
+    @classes = classes
+  end
+
+  # cheating
+  def title
+    self.with_option_content(options_for_option)
+
+    comparison_mode.label
+  end
+
+  def render?
+    comparison_mode.enabled?
+  end
+
+  def options_for_option
+    [
+      (link_to "Disable Comparison", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: false))),
+      (link_to "Previous period", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :previous)), class: selected(:previous, :true)),
+      (link_to "Year-over-year", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :year)), class: selected(:year)),
+      (link_to "Custom period", "javascript:customComparisonModal.showModal()", class: selected(:custom)),
+
+    ].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_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,50 @@
+<div class="dropdown dropdown-end">
+  <label
+    tabindex="0"
+    class="btn btn-sm 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.column.titleize %> <%= filter.predicate.titleize %>
+                <%= filter.values.to_sentence %>
+              </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 %>
+
+    <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 %>
+      <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/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

@@ -1,13 +1,16 @@
-<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">
+<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-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 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>
+  </label>
 </dialog>
+

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

@@ -1,21 +1,25 @@
-<fieldset class="flex space-x-4 items-end">
-  <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}" %>>
-          <%= predicate.to_s.humanize %>
-        </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
-    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>
 </fieldset>

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

@@ -1,20 +1,53 @@
 # 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, input_html: {})
     @label = label
     @column = column
     @url = url
     @predicates = predicates
+    @form = form
+    @multiple = multiple
+    @input_html_options = input_html
+  end
+
+  private
+
+  def selected_predicate?(predicate)
+    params.dig(:q, predicate_name(predicate)).present?
+  end
+
+  def option_value(predicate)
+    name = "q[#{predicate_name(predicate)}]"
+    name += "[]" if multiple
+    name
+  end
+
+  def predicate_name(predicate)
+    "#{@column}_#{predicate}"
   end
 
   def selected_predicate
-    predicate_options.detect { |option| params.dig(:q, option) }
+    @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(@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
@@ -23,10 +56,9 @@ class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
     []
   end
 
-  private
-
-  def predicate_options
-    @predicate_options ||= @predicates.map { |predicate| "#{@column}_#{predicate}" }
+  def predicate_label(predicate)
+    AhoyCaptain::PredicateLabel[predicate]
   end
-  attr_reader :label, :column, :url, :predicates
+
+  attr_reader :label, :column, :url, :predicates, :form, :multiple
 end

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.titleize %>
+    <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 %>