ahoy_captain 0.1.0 → 0.8

data/app/assets/javascript/ahoy_captain/controllers/funnel_chart_controller.js

@@ -0,0 +1,117 @@
+import {Controller} from "@hotwired/stimulus"
+import 'chartjs-plugin-datalabels';
+const THOUSAND = 1000
+const HUNDRED_THOUSAND = 100000
+const MILLION = 1000000
+const HUNDRED_MILLION = 100000000
+const BILLION = 1000000000
+const HUNDRED_BILLION = 100000000000
+const TRILLION = 1000000000000
+
+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
+    }
+}
+
+export default class extends Controller {
+    connect() {
+        const funnel = JSON.parse(this.element.dataset.data);
+
+        const fontFamily = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
+        const labels = funnel.steps.map((step) => step.name)
+        const stepData = funnel.steps.map((step) => step.total_events)
+        const dropOffData = funnel.steps.map((step) => step.drop_off * 100)
+
+        const data = {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Visitors',
+                    data: stepData,
+                    borderRadius: 4,
+                    stack: 'Stack 0',
+                },
+                {
+                    label: 'Dropoff',
+                    data: dropOffData,
+                    borderRadius: 4,
+                    stack: 'Stack 0',
+                },
+            ],
+        }
+
+        const config = {
+            responsive:true,
+            maintainAspectRatio: false,
+            plugins: [ChartDataLabels],
+            type: 'bar',
+            data: data,
+            options: {
+                layout: {
+                    padding: 100,
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: true,
+                        position: 'average',
+                    },
+                    datalabels: {
+                        anchor: 'end',
+                        align: 'end',
+                        borderRadius: 4,
+                        padding: { top: 8, bottom: 8, right: 8, left: 8 },
+                        font: { size: 12, weight: 'normal', lineHeight: 1.6, family: fontFamily },
+                        textAlign: 'center',
+                    },
+                },
+                scales: {
+                    y: { display: false },
+                    x: {
+                        position: 'bottom',
+                        display: true,
+                        border: { display: false },
+                        grid: { drawBorder: false, display: false },
+                        ticks: {
+                            padding: 8,
+                            font: { weight: 'bold', family: fontFamily, size: 14 },
+                            color: 'rgb(228, 228, 231)'
+                        },
+                    },
+                },
+            },
+        }
+
+        const visitorsData = []
+
+        new Chart(
+            this.element,
+            config
+        );
+    }
+}

data/app/assets/javascript/ahoy_captain/controllers/index.js

@@ -0,0 +1,3 @@
+import {application} from "controllers/application"
+import {eagerLoadControllersFrom} from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/app/assets/javascript/ahoy_captain/controllers/interval_controller.js

@@ -0,0 +1,10 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  handleChange(event) {
+    const url = new URL(event.target.form.action);
+    const interval = event.target.value;
+    url.searchParams.set("interval", interval)
+    event.target.closest('turbo-frame').src = url.href
+  }
+}

data/app/assets/javascript/ahoy_captain/controllers/link_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["countriesLink", "top_pagesLink", "devicesLink", "top_sourcesLink"]
+  static classes = ["countries", "top_pages", "devices", "top_sources"]
+
+  changeCountries(event) {
+    console.log(...this.countriesClasses)
+    event.currentTarget.classList.add(...this.countriesClasses)
+    this.countriesLinkTargets.forEach((target) => {
+      if (target != event.currentTarget) {
+        target.classList.remove(...this.countriesClasses)
+      }
+    })
+  }
+
+  changeTopSources(event) {
+    event.currentTarget.classList.add(...this.top_sourcesClasses)
+    this.top_sourcesLinkTargets.forEach((target) => {
+      if (target != event.currentTarget) {
+        target.classList.remove(...this.top_sourcesClasses)
+      }
+    })
+  }
+  
+  changeTopPages(event) {
+    event.currentTarget.classList.add(...this.top_pagesClasses)
+    this.top_pagesLinkTargets.forEach((target) => {
+      if (target != event.currentTarget) {
+        target.classList.remove(...this.top_pagesClasses)
+      }
+    })
+  }
+
+  changeDevices(event) {
+    event.currentTarget.classList.add(...this.devicesClasses)
+    this.devicesLinkTargets.forEach((target) => {
+      if (target != event.currentTarget) {
+        target.classList.remove(...this.devicesClasses)
+      }
+    })
+  }
+}

data/app/assets/javascript/ahoy_captain/controllers/navigation_controller.js

@@ -0,0 +1,25 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.queryString = new URLSearchParams(window.location.search);
+    this.baseURL = window.location.pathname.replace(/\/$/, "");
+  }
+  
+  navigate() {
+    const url = `${this.baseURL}?${this.queryString.toString()}`;
+    Turbo.visit(url, { action: "replace"})
+  }
+
+  addQueryParam({ detail: { paramKey, paramValue } }) {
+    this.queryString.append(paramKey, paramValue)
+  }
+  
+  removeQueryParam({ detail: { paramKey, paramValue } }) {
+    if (!this.queryString.has(paramKey)) {
+      paramKey += "[]"
+    }
+    this.queryString.delete(paramKey,paramValue)
+    this.navigate()
+  }
+}

data/app/assets/javascript/ahoy_captain/controllers/realtime_controller.js

@@ -0,0 +1,27 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["label"]
+
+  connect() {
+    this.reload = this.reload.bind(this)
+    this.setLabel = this.setLabel.bind(this)
+    this.labelCount = 0;
+
+  }
+
+  reload() {
+    this.element.reload();
+    this.labelCount = 0;
+  }
+
+  setLabel() {
+    this.labelTarget.title = `Last updated ${this.labelCount} seconds ago`;
+    this.labelCount += 1
+  }
+
+  disconnect() {
+    clearInterval(this.labelInterval)
+    clearInterval(this.reloadInterval)
+  }
+}

data/app/assets/manifest/ahoy_captain/manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../../javascript/ahoy_captain .js
+//= link_tree ../../images/ahoy_captain

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

@@ -0,0 +1,16 @@
+<div class="dropdown dropdown-end">
+  <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">
+    <% options.each do |option| %>
+      <li>
+        <%= option %>
+      <li>
+    <% end %>
+  </ul>
+</div>

data/app/components/ahoy_captain/dropdown_button_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::DropdownButtonComponent < ViewComponent::Base
+  renders_many :options
+  renders_one :header_icon
+
+  def initialize(title:)
+    @title = title
+  end
+
+  private
+
+  attr_reader :title
+end

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

@@ -0,0 +1,19 @@
+<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| %>
+      <li data-action="click->dropdown-label#setLabel">
+        <%= option %>
+      <li>
+    <% end %>
+  </ul>
+</div>

data/app/components/ahoy_captain/dropdown_link_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::DropdownLinkComponent < ViewComponent::Base
+  renders_many :options
+  renders_one :header
+
+  def initialize(title:, classes: nil)
+    @title = title
+    @classes = classes
+  end
+
+  private
+
+  attr_reader :title, :classes
+end

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

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

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::Filter::ModalComponent < ViewComponent::Base
+  renders_one :modal_display
+
+  def initialize(title: nil, id:)
+    @title = title
+    @id = id
+  end
+
+  private
+  attr_reader :title, :id
+end

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

@@ -0,0 +1,21 @@
+<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>
+  <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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
+  def initialize(label:, column:, url:, predicates:)
+    @label = label
+    @column = column
+    @url = url
+    @predicates = predicates
+  end
+
+  def selected_predicate
+    predicate_options.detect { |option| params.dig(:q, option) }
+  end
+
+  def values
+    predicate_options.each do |predicate|
+      option = params.dig(:q, predicate)
+      if option
+        return option
+      end
+    end
+
+    []
+  end
+
+  private
+
+  def predicate_options
+    @predicate_options ||= @predicates.map { |predicate| "#{@column}_#{predicate}" }
+  end
+  attr_reader :label, :column, :url, :predicates
+end

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

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

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

@@ -0,0 +1,38 @@
+# 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
+  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
+
+    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
+  end
+end

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

@@ -0,0 +1,5 @@
+<% filters.each do |param| %>
+  <% column_predicate, category = param %>
+  <%= render AhoyCaptain::Filter::TagComponent.new(column_predicate: column_predicate, category: category) %>
+<% end %>
+

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

@@ -0,0 +1,13 @@
+# 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? }
+
+  end
+
+  private
+  attr_reader :filters
+end

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

@@ -0,0 +1,37 @@
+<div class="max-w-6xl flex justify-between sticky top-0 min-h-sm z-[99999] bg-base-300 py-4">
+  <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 params[:q] %>
+      <%= render AhoyCaptain::Filter::TagContainerComponent.new(filters: params.require(:q)) %>
+    <% 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| %>
+      <% 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 %>
+
+        <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>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/components/ahoy_captain/sticky_nav_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::StickyNavComponent < ViewComponent::Base
+  renders_one :realtime_update
+end

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

@@ -0,0 +1,49 @@
+<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="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 %>
+          </div>
+        <% end %>
+      <% else %>
+        <p>No data found</p>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/ahoy_captain/table_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::TableComponent < ViewComponent::Base
+  SUPPORTED_COLS = [:percent_total, :total, :conversion_rate]
+
+  def initialize(items:, category_name:, unit_name:, additional_cols: [])
+    @items = items
+    @category_name = category_name
+    @unit_name = unit_name
+    @additional_cols = additional_cols
+  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 percent_total(item)
+    '%.1f' % ((item.unit_amount.to_i * 1.0 / total)*100.0)
+  end
+end

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

@@ -0,0 +1,12 @@
+<div class='<%= 'lg:col-span-2' if wide %> col-span-1 p-4 bg-base-200 rounded-md p-8 mx-4 lg:mx-0'>
+  <div class="flex justify-between">
+    <h5 class='text-lg text-accent-content'><%= title %></h5>
+    <div class="flex self-center gap-3">
+      <%= display_links %>
+    </div>
+  </div>
+  <%= statistic_display %>
+  <div class="flex justify-center">
+    <%= details_cta %>
+  </div>
+</div>

data/app/components/ahoy_captain/tile_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class AhoyCaptain::TileComponent < ViewComponent::Base
+  renders_one :statistic_display
+  renders_one :display_links
+  renders_one :details_cta
+
+  def initialize(title: nil, wide: false)
+    @title = title
+    @wide = wide
+  end
+
+  private
+
+  attr_reader :title, :wide
+end

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

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

data/app/components/ahoy_captain/tooltip_component.rb

@@ -0,0 +1,18 @@
+class AhoyCaptain::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