ahoy_captain 0.9 → 0.10.0

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/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-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" data-turbo-frame="chart">
-  <dt class="font-normal"><%= @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-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,10 +1,25 @@
 module AhoyCaptain
   module Stats
     class ContainerComponent < ViewComponent::Base
-      def initialize(url, label, value)
+      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

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

@@ -1,7 +1,7 @@
 <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'>
+      <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 %>
@@ -9,14 +9,17 @@
       <%= 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| %>
+  <div class="flex flex-row-reverse col-span-2 items-center gap-3">
+    <%= render AhoyCaptain::ComparisonLinkComponent.new %>
+
+    <%= render AhoyCaptain::DropdownLinkComponent.new(title: params[:start_date] ? "Custom Range" : (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").merge("period" => param).to_query %>"><%= range.label %></a>
+          <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 %>
 

data/app/components/ahoy_captain/sticky_nav_component.rb

@@ -2,6 +2,9 @@
 
 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)

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

data/app/components/ahoy_captain/tables/devices_table_component.rb

@@ -0,0 +1,11 @@
+module AhoyCaptain
+  module Tables
+    class DevicesTableComponent < DynamicTable
+      register do
+        progress_bar :display_name, value: :count, max: :total_count, title: "Device"
+        number :count, title: "Visitors"
+      end
+
+    end
+  end
+end

data/app/components/ahoy_captain/tables/dynamic_table.rb

@@ -0,0 +1,13 @@
+module AhoyCaptain
+  module Tables
+    class DynamicTable
+      def self.register(options = {}, &block)
+        @table ||= DynamicTableComponent.build(self, options, &block)
+      end
+
+      def self.table
+        @table
+      end
+    end
+  end
+end

data/app/components/ahoy_captain/tables/dynamic_table_component.rb

@@ -0,0 +1,204 @@
+module AhoyCaptain
+  module Tables
+    class DynamicTableComponent < ViewComponent::Base
+      class TableDefinition
+        attr_reader :rows
+        class Row
+          attr_reader :attribute, :view_context
+          attr_reader :item
+          def initialize(attribute, options = {}, &block)
+            @attribute = attribute
+            @options = options
+            @block = block
+            @view_context = nil
+          end
+
+          def render(item, view_context)
+            @view_context = view_context
+            @item = item
+            if @options[:type] == :progress_bar
+              progress_bar(item)
+            else
+              if @block
+                column(@block.call(item))
+              else
+                column(item.public_send(attribute).presence)
+              end
+            end
+
+          end
+
+          def header
+            @options[:title] || @attribute.to_s.titleize
+          end
+
+          def link_to(*args)
+            @view_context.link_to(*args)
+          end
+
+          def request
+            @view_context.request
+          end
+
+          def h
+            @view_context.helpers
+          end
+
+          def search_params
+            @view_context.search_params
+          end
+
+          # needed for tricky instance_eval with blocks and view_context
+          def method_missing(method, *args, &block)
+            if klass.respond_to?(method)
+              klass.send(method, *args, &block)
+            else
+              @item.send method, *args, &block
+            end
+          end
+
+          def klass
+            @options[:klass]
+          end
+
+          def progress_bar(item)
+            @item = item
+            value = if @options[:value]
+                      build_option(item, @options[:value]).to_s
+                    else
+                      item.public_send(@attribute)
+                    end
+
+            max = build_option(item, @options[:max]).to_s
+            label = if @block
+                      instance_eval(&@block)
+                    else
+                      item.public_send(@attribute)
+                    end.to_s
+
+            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-primary-content") do
+              label
+            end
+
+            items.join.html_safe
+          end
+
+          def build_option(item, value)
+            if value.is_a?(Symbol)
+              item.public_send(value)
+            else
+              value
+            end
+          end
+
+          def column(value = nil, &block)
+            view_context.content_tag(:span, class: "w-8 ml-8 text-right") do
+              if value
+                if @options[:formatter]
+                  if respond_to?(@options[:formatter])
+                    public_send(@options[:formatter], value)
+                  else
+                    view_context.public_send(@options[:formatter], value)
+                  end
+                else
+                  value.to_s
+                end
+              else
+                view_context.capture(&block).to_s
+              end
+            end
+          end
+
+          def number_to_human(amount)
+            tooltip(amount) do
+              view_context.number_to_human(amount, format: '%n%u', precision: 2, units: { thousand: 'k', million: 'm', billion: 'b' })
+            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(view_context)
+          end
+        end
+
+        def initialize(klass)
+          @klass = klass
+          @rows = []
+        end
+
+        def column(key = nil, options = {}, &block)
+          options[:klass] = @klass
+          @rows << Row.new(key, options, &block)
+
+          self
+        end
+
+        def progress_bar(*args, &block)
+          options = args.extract_options!
+          options.assert_valid_keys(:value, :max, :title)
+          options[:klass] = @klass
+
+          @rows << Row.new(args[0], options.merge(type: :progress_bar), &block)
+
+          self
+        end
+
+        def number(key = nil, options = {}, &block)
+          options[:klass] = @klass
+
+          @rows << Row.new(key, options.merge(formatter: :number_to_human), &block)
+
+          self
+        end
+
+        def percent(key = nil, options = {}, &block)
+          options[:klass] = @klass
+
+          @rows << Row.new(key, options.merge(formatter: :number_to_percentage), &block)
+
+          self
+        end
+
+        def row(item, view_context)
+          items = []
+          @rows.each do |row|
+            items << row.render(item, view_context)
+          end
+          items.join.html_safe
+        end
+      end
+
+      def self.build(klass, options = {}, &block)
+        if options.key?(:fixed_height)
+          options[:header_options] = { fixed_height: options.delete(:fixed_height) }
+        end
+        table = TableDefinition.new(klass).instance_exec(&block)
+        new(klass, table, options)
+      end
+
+      def initialize(klass, table, options = {})
+        @klass = klass
+        @table = table
+        @options = options
+      end
+
+      def for(item)
+        @item = item
+        self
+      end
+
+      def row(item, view_context)
+        @table.row(item, view_context)
+      end
+
+      def headers
+        HeaderComponent.new(@table.rows.map.with_index { |row, index| { label: row.header, grow: index.zero? } }, @options[:header_options] || {})
+      end
+    end
+  end
+end

data/app/components/ahoy_captain/tables/goals_table_component.rb

@@ -0,0 +1,17 @@
+module AhoyCaptain
+  module Tables
+    class GoalsTableComponent < DynamicTable
+      register fixed_height: false do
+        progress_bar value: :cr, max: 100, title: "Name" do |row|
+          search_params = view_context.search_params
+          query = search_params.dup.merge(q: { goal_in: row.goal_id}).to_query
+          url = AhoyCaptain::Engine.app.url_helpers.root_path + "?#{query}"
+          link_to row.item.name, url, target: :_top
+        end
+        number :unique_visits, title: "Uniques"
+        number :total_events, title: "Total"
+        percent :cr, title: "CR"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<div class="flex text-sm font-bold  mb-4">
+  <% @headers.each do |header| %>
+  <span class="<%= header[:grow] ? 'grow' : 'w-8 ml-8 text-right' %>"><%= header[:label] %></span>
+  <% end %>
+</div>

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

@@ -0,0 +1,18 @@
+module AhoyCaptain
+  module Tables
+    class HeaderComponent < ViewComponent::Base
+      def initialize(headers, options = {})
+        @headers = headers.flatten
+        @options = options
+      end
+
+      def fixed_height?
+        if @options.key?(:fixed_height)
+          @options[:fixed_height]
+        else
+          true
+        end
+      end
+    end
+  end
+end

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

@@ -6,6 +6,10 @@ module AhoyCaptain
           @category_name = category_name
           @unit_name = unit_name
         end
+
+        def fixed_height?
+          true
+        end
       end
     end
   end

data/app/components/ahoy_captain/tables/properties_table_component.rb

@@ -0,0 +1,27 @@
+module AhoyCaptain
+  module Tables
+    class PropertiesTableComponent < DynamicTable
+      register do
+        progress_bar :label, value: :percentage, max: 100, title: "Name" do |item|
+          link_to item.label, url(item), target: :_top
+        end
+        number :unique_visitors_count, title: "Visitors"
+        number :events_count, title: "Events"
+        percent :percentage, title: "%"
+      end
+
+      def self.url(item)
+        name = Base64.decode64(item.request.params[:id])
+        params = item.search_params.dup
+        if params["q"] && params["q"].key?("properties_json_cont")
+          json = JSON.parse(params["q"]["properties_json_cont"])
+          json[name] = item.item.label
+          params["q"]["properties_json_cont"] = json.to_json
+        else
+          params[:q] = { "properties_json_cont" => { name => item.item.label }.to_json }
+        end
+        params
+      end
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+<% @rows.each do |row| %>
+  <%= row.render(@item, view_context) %>
+
+<% end %>

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

@@ -27,7 +27,6 @@ module AhoyCaptain
           end
         end
 
-
         def percent_total(item)
           '%.1f' % ((item.unit_amount.to_i * 1.0 / total)*100.0)
         end