ahoy_captain 0.8 → 0.10.0

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/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

@@ -0,0 +1,15 @@
+<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>
+  </div>
+</a>

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

@@ -0,0 +1,26 @@
+module AhoyCaptain
+  module Stats
+    class ContainerComponent < ViewComponent::Base
+      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,37 +1,28 @@
-<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'>
+      <img src="<%= image_path "ahoy_captain/logo.png" %>" alt="AhoyCaptainLogo" class='max-h-20 md: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| %>
+  <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>
-      <% 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>
+        <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 %>
+
+    <%= render AhoyCaptain::Filter::DropdownComponent.new(filters: filters) %>
   </div>
 </div>

data/app/components/ahoy_captain/sticky_nav_component.rb

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

data/app/components/ahoy_captain/table_component.rb

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

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

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

@@ -0,0 +1,16 @@
+module AhoyCaptain
+  module Tables
+    module Headers
+      class HeaderComponent < ViewComponent::Base
+        def initialize(category_name:, unit_name:)
+          @category_name = category_name
+          @unit_name = unit_name
+        end
+
+        def fixed_height?
+          true
+        end
+      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.html.erb

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