lookout-ahoy 0.1.0

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

@@ -0,0 +1,23 @@
+<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 style="height: 30px; width: 100px;">
+        <canvas 
+          data-controller="sparkline"
+          data-sparkline-label-value="<%= @label %>"
+          width="100" 
+          height="30">
+        </canvas>
+      </div>
+    </div>
+  </div>
+</a>

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

@@ -0,0 +1,28 @@
+module Lookout
+  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 > 0
+          minutes = (duration / 60).to_i
+          seconds = (duration % 60).to_i
+          "#{minutes}m #{seconds}s"
+        else
+          "0m 0s"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+<div class=" sticky top-0 min-h-sm z-[99999] py-6 bg-base-100">
+  <div class="max-w-6xl mx-auto max-w-6xl flex justify-between ">
+    <div class="flex items-center">
+      <a href="<%= Lookout.config.return_path %>" class="text-lg font-medium hover:text-primary transition-colors py-2">
+        <%= Lookout.config.return_copy %>
+      </a>
+      <% if tag_list_hidden? %>
+        <%= render Lookout::Filter::TagContainerComponent.new %>
+      <% else %>
+        <%= realtime_update %>
+      <% end %>
+    </div>
+    <div class="flex flex-row-reverse col-span-2 items-center gap-3">
+      <%= render Lookout::ComparisonLinkComponent.new %>
+      <%= render Lookout::PreviousNextComponent.new(range) %>
+
+      <%= render Lookout::DropdownLinkComponent.new(title: params[:start_date] ? custom_range_label : (Lookout.config.ranges.find(params[:period] || Lookout.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 %>
+          <% Lookout.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='<%= Lookout::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: !compare_mode?)) %>'><%= compare_mode? ? "Disable Comparison" : "Compare" %></a>
+        <% end %>
+      <% end %>
+
+      <%= render Lookout::Filter::DropdownComponent.new(filters: filters) %>
+    </div>
+  </div>
+
+</div>

data/app/components/lookout/sticky_nav_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Lookout::StickyNavComponent < ViewComponent::Base
+  renders_one :realtime_update
+  include ::Lookout::CompareMode
+  include ::Lookout::RangeOptions
+  include ::Lookout::Rangeable
+
+  def filters
+    @filters ||= ::Lookout::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 < ::Lookout::FilterParser::FILTER_MENU_MAX_SIZE
+  end
+end

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

@@ -0,0 +1,16 @@
+<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='flex items-center relative rounded-sm overflow-hidden h-8 my-2 bg-gray-400'>
+            <%= render_row(item) %>
+          </div>
+        <% end %>
+      <% else %>
+        <p>No data found</p>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/lookout/table_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+class Lookout::TableComponent < ViewComponent::Base
+  DEFAULT_HEADER = Lookout::Tables::Headers::HeaderComponent
+  DEFAULT_ROW = Lookout::Tables::Rows::RowComponent
+
+  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
+    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
+
+  attr_reader :items, :category_name, :unit_name, :additional_cols
+
+  def max_amount
+    @max_amount ||= items.first.unit_amount
+  end
+
+  def total
+    @total ||= items.first.total_count
+  end
+
+  def fixed_height?
+    @header.fixed_height?
+  end
+end

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

@@ -0,0 +1,11 @@
+module Lookout
+  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/lookout/tables/dynamic_table.rb

@@ -0,0 +1,13 @@
+module Lookout
+  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/lookout/tables/dynamic_table_component.rb

@@ -0,0 +1,207 @@
+module Lookout
+  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, is_last = false)
+            @view_context = view_context
+            @item = item
+            @is_last = is_last
+            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-gray-800 h-8 grow max-w-[calc(100%-2rem)] opacity-60", value: value, max: max)
+            items << view_context.content_tag(:span, class: "grow text-elipsis overflow-hidden absolute left-4 flex items-center 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)
+            padding_class = @is_last ? 'pl-4' : 'pl-6'
+            view_context.content_tag(:span, class: "w-16 text-right border-l-gray border-base-300 #{padding_class} pr-2") 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)
+            Lookout::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_with_index do |row, index|
+            is_last = index == @rows.length - 1
+            items << row.render(item, view_context, is_last)
+          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/lookout/tables/goals_table_component.rb

@@ -0,0 +1,17 @@
+module Lookout
+  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 = Lookout::Engine.app.url_helpers.root_path + "?#{query}"
+          link_to row.item.name, url, target: :_top
+        end
+        number :unique_visits, title: "Uniq"
+        number :total_events, title: "All"
+        percent :cr, title: "CR"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<div class="flex text-sm font-bold  mb-4">
+  <% @headers.each_with_index do |header, index| %>
+  <% is_last = index == @headers.length - 1 %>
+  <span class="<%= header[:grow] ? 'grow pl-4' : "w-16 text-right #{is_last ? 'pl-4' : 'pl-6'} pr-2 border-l-gray border-base-300" %>"><%= header[:label] %></span>
+  <% end %>
+</div>

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

@@ -0,0 +1,18 @@
+module Lookout
+  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/lookout/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/lookout/tables/headers/header_component.rb

@@ -0,0 +1,16 @@
+module Lookout
+  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/lookout/tables/properties_table_component.rb

@@ -0,0 +1,27 @@
+module Lookout
+  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/lookout/tables/row_component.html.erb

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

data/app/components/lookout/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
+%>

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

@@ -0,0 +1,40 @@
+module Lookout
+  module Tables
+    module Rows
+      class RowComponent < ViewComponent::Base
+        def initialize(table:, item:)
+          @table = table
+          @item = item
+        end
+
+        def progress_bar(value, max, label)
+          items = []
+          items << view_context.content_tag(:progress, "", class: "progress-primary bg-gray-800 h-8 grow rounded-md opacity-60", value: value, max: max)
+          items << view_context.content_tag(:span, class: "grow text-elipsis overflow-hidden absolute left-4 flex items-center h-8 text-primary-content") do
+            label
+          end
+
+          items.join.html_safe
+        end
+
+        def item(value = nil, &block)
+          view_context.content_tag(:span, class: "w-8 text-right border-l-gray border-base-300") do
+            if value
+              value
+            else
+              capture(&block)
+            end
+          end
+        end
+
+        def percent_total(item)
+          '%.1f' % ((item.unit_amount.to_i * 1.0 / total)*100.0)
+        end
+
+        def tooltip(value)
+          Lookout::TooltipComponent.new(amount: value).render_in(self)
+        end
+      end
+    end
+  end
+end

data/app/components/lookout/tile_component.html.erb

@@ -0,0 +1,24 @@
+<div
+  data-controller="tile"
+  class="card card-compact <%= 'lg:col-span-2' if wide %> col-span-1 shadow-xl rounded-md lg:mx-0 bg-base-200 <%= @classes %>">
+  <% if title.present? || display_links.present? %>
+    <div class="flex justify-between items-start">
+      <div class="flex items-baseline gap-2">
+        <% if title.present? %>
+          <h2 class="card-title" data-tile-target="title"><%= title %></h2>
+        <% end %>
+        <% if details_cta.present? %>
+          <span class="text-sm text-gray-400 font-normal">|</span>
+          <span class="text-xs text-gray-400 font-normal"><%= details_cta %></span>
+        <% end %>
+      </div>
+      <% if display_links.present? %>
+        <div class="flex self-center lg:gap-3">
+          <%= display_links %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= statistic_display %>
+</div>

data/app/components/lookout/tile_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Lookout::TileComponent < ViewComponent::Base
+  renders_one :statistic_display
+  renders_one :display_links
+  renders_one :details_cta
+
+  def initialize(title: nil, wide: false, classes: "p-8 mx-4")
+    @classes = classes
+    @title = title
+    @wide = wide
+  end
+
+  def link_to(name, url, **options)
+    options[:class] = "inline-block h-5 font-semibold"
+    options[:data] ||= {}
+    options[:data].merge!(controller: "frame-link")
+    view_context.link_to name, url, **options
+  end
+
+  private
+
+  attr_reader :title, :wide
+end

data/app/components/lookout/tooltip_component.html.erb

@@ -0,0 +1,3 @@
+<div class="tooltip mr-2" data-tip=<%= amount %>>
+    <p><%= abbreviate %></p>
+</div>

data/app/components/lookout/tooltip_component.rb

@@ -0,0 +1,18 @@
+class Lookout::TooltipComponent < ViewComponent::Base
+  def initialize(amount:)
+    @amount = amount
+  end
+
+  def abbreviate
+
+    if amount.to_i >= 1000
+      number_to_human(amount, format: '%n%u', precision: 2, units: { thousand: 'k', million: 'm', billion: 'b' })
+    else
+      amount.to_s
+    end
+  end
+
+  private
+
+  attr_reader :amount
+end