ahoy_captain 0.11.0 → 0.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8ee0971d696dceab133146c4f8a53a0e7f687c474497bc49ee8bf914bda2430
-  data.tar.gz: 3fc99cc0c51f8abbb07acbbf6a39e9f77a5b2adcabc6bd8e5e0583c0bd77b1af
+  metadata.gz: 550735e026fe60170552c09149ee5dceb1d874020c131f49c9a79a6d1c04982f
+  data.tar.gz: 9a782cddeb96ba6726980ae8f0c5b332f51756b8114b88dc63af91a2739776ea
 SHA512:
-  metadata.gz: 99352a390c1f4641d5664882e5807909f4948f77f8b3ab3de89c4e5bad2773b78f6ff4ced0433d490ffa8db1050e6f5b284ad43086b4521328ab5e9af2f01a2c
-  data.tar.gz: 7b13a9571dcc60c6d4a8ab4677cdd6f0fd77123a192a5833e1e837a2f3117e5beed71ab4cb3ab00b66de3b8dafa134f30eeb72f9da98cddf5d3040b7c2dfb963
+  metadata.gz: 021c101c8ff731e860b85baab37836fdb9f1dc5a038c90cd5411b9f0e628b8918823fdc7446164620414bce1a20560a7284dd6d63753ad4ab6c1f1541aed17d8
+  data.tar.gz: b0a5fc48678367faa56299f2462b92edf3331adc4df3f0cc685b68584cfea4604d76437528007ce27e5c3173312945d514e2399a65efad1d4b473e2a134b6690

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

@@ -2,8 +2,32 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
   static targets = ["title"]
+  connect() {
+    this.frame = this.element.querySelector('turbo-frame');
+    const targetNode = this.frame;
+    const config = { attributes: true };
+
+    const callback = (mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "attributes") {
+          this.handleFrameLoad(mutation.attributeName)
+        }
+      }
+    };
+
+    const observer = new MutationObserver(callback);
+    observer.observe(targetNode, config);
+  }
+
+  handleFrameLoad(status) {
+    if(!this.frame.hasAttribute('skeleton')) {
+      if(status === 'busy') {
+        this.frame.innerHTML = document.querySelector('#tile-loader-template').innerHTML;
+      }
+    }
+  }
+
   setTitle(event) {
     this.titleTarget.innerHTML = event.target.title || event.target.text
   }
-
 }

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

@@ -0,0 +1,17 @@
+<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>
+
+  </label>
+  <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52" data-dropdown-label-target="close">
+    <% links.each do |link| %>
+      <li data-action="click->dropdown-label#setLabel">
+        <%= link %>
+      <li>
+    <% end %>
+  </ul>
+</div>

data/app/components/ahoy_captain/comparison_link_component.rb

@@ -1,17 +1,21 @@
 # frozen_string_literal: true
 
-class AhoyCaptain::ComparisonLinkComponent < AhoyCaptain::DropdownLinkComponent
+class AhoyCaptain::ComparisonLinkComponent < ViewComponent::Base
   include ::AhoyCaptain::CompareMode
   include ::AhoyCaptain::RangeOptions
   include ::AhoyCaptain::Rangeable
 
+  renders_many :links
+  renders_one :header
+
+  attr_reader :title, :classes
   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)
+    self.with_link_content(options_for_option)
 
     comparison_mode.label
   end
@@ -22,12 +26,12 @@ class AhoyCaptain::ComparisonLinkComponent < AhoyCaptain::DropdownLinkComponent
 
   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)),
+      (link_to "Year-over-year", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :year)), class: selected(:year)),
+      (link_to "Previous period", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :previous)), class: selected(:previous, :true)),
+      (link_to "Disable Comparison", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: false))),
 
-    ].join.html_safe
+    ].reverse.join.html_safe
   end
 
   private

data/app/models/ahoy_captain/range_from_params.rb

@@ -1,7 +1,6 @@
 module AhoyCaptain
   class RangeFromParams
     def self.from_params(params)
-
       compare = ComparisonMode.new(params)
       new(period: params[:period], start_date: params[:start_date], end_date: params[:end_date], date: params[:date], comparison: compare.enabled?(false), raw: params).tap { |instance| instance.build }
     end

data/app/views/ahoy_captain/layouts/shared/_tile_loader.html.erb

@@ -0,0 +1,12 @@
+<div class="mt-5" >
+  <div role="status" class="animate-pulse">
+    <div class="flex justify-between w-full mb-2">
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
+      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
+    </div>
+    <% 10.times do |i| %>
+      <div class="h-6 bg-gray-200 dark:bg-gray-700 max-w-[<%= 100 - (i * 10) %>%] mb-2.5"></div>
+    <% end %>
+    <span class="sr-only">Loading...</span>
+  </div>
+</div>

data/app/views/ahoy_captain/roots/show.html.erb

@@ -1,4 +1,7 @@
 <main class='w-screen	overflow-hidden' data-action="combobox:init@window->application#comboboxInit">
+  <script id="tile-loader-template" type="template/html">
+    <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+  </script>
   <%= render AhoyCaptain::StickyNavComponent.new do |nav| %>
     <% nav.with_realtime_update do %>
       <%= turbo_frame_tag :realtime, src: realtime_path, data: { controller:  "realtime", "realtime-interval-value" => AhoyCaptain.config.realtime_interval.to_i }, loading: :lazy %>
@@ -8,8 +11,32 @@
   <div class="grid grid-cols-1 lg:grid-cols-2 grid-flow-row gap-4 min-h-screen pb-4 max-w-6xl mx-auto">
     <%= render AhoyCaptain::TileComponent.new(wide: true, classes: "p-4 m-2") do |component| %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :stats, src: stats_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :stats, src: stats_path(search_params), loading: :lazy, skeleton: false do %>
+          <div class="grid grid-cols-1 divide-y divide-base-200 overflow-hidden rounded-lg grid-cols-2 md:grid-cols-6 md:divide-y-0">
+            <% 6.times do %>
+              <div class="relative px-4 md:px-6 w-1/2 my-4 w-auto group cursor-pointer" >
+                <div role="status" class="max-w-sm animate-pulse">
+                  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[120px] mb-2.5"></div>
+                  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5 max-w-[60px]"></div>
+                  <span class="sr-only">Loading...</span>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
         <%= turbo_frame_tag :chart, src: stats_unique_visitors_path(search_params) do %>
+          <div role="status" class="p-4 animate-pulse md:p-6">
+            <div class="flex items-baseline mt-4 space-x-6">
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full h-56 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full h-64 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-80 dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-72 dark:bg-gray-700"></div>
+              <div class="w-full bg-gray-200 rounded-t-lg h-80 dark:bg-gray-700"></div>
+            </div>
+            <span class="sr-only">Loading...</span>
+          </div>
         <% end %>
       <% end %>
 
@@ -17,21 +44,23 @@
 
     <%= render AhoyCaptain::TileComponent.new(title: 'Top Sources') do |component| %>
       <% component.with_display_links do  %>
-          <div class="flex text-xs font-medium text-gray-400 space-x-2">
-            <div class="relative inline-block text-left">
-              <%= component.link_to "All", sources_path(search_params), data: { turbo_frame: "sources" } %>
-              <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Campaign") do |dropdown| %>
-                <% %w{utm_source utm_medium utm_term utm_content utm_campaign}.each do |source| %>
-                  <%= dropdown.link_to source.titleize.gsub("Utm", "UTM"), public_send("campaign_#{source}_path".to_sym, **search_params), data: { turbo_frame: "sources" } %>
-                <% end %>
+        <div class="flex text-xs font-medium text-gray-400 space-x-2">
+          <div class="relative inline-block text-left">
+            <%= component.link_to "All", sources_path(search_params), data: { turbo_frame: "sources" } %>
+            <%= render AhoyCaptain::DropdownLinkComponent.new(title: "Campaign") do |dropdown| %>
+              <% %w{utm_source utm_medium utm_term utm_content utm_campaign}.each do |source| %>
+                <%= dropdown.link_to source.titleize.gsub("Utm", "UTM"), public_send("campaign_#{source}_path".to_sym, **search_params), data: { turbo_frame: "sources" } %>
               <% end %>
-            </div>
+            <% end %>
           </div>
+        </div>
 
 
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :sources, src: sources_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :sources, src: sources_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+        <% end %>
       <% end %>
       <% component.with_details_cta do %>
         <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#sources" class="link no-underline ">Details</button>
@@ -51,7 +80,9 @@
 
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :pages, src: top_pages_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :pages, src: top_pages_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+        <% end %>
       <% end %>
       <% component.with_details_cta do %>
         <button data-action="click->details-modal#openModal" data-controller="details-modal"  data-details-modal-target-value="#pages" class="link no-underline ">Details</button>
@@ -70,7 +101,10 @@
         </div>
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :geography, src: locations_map_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :geography, src: locations_map_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+
+        <% end %>
       <% end %>
       <% component.with_details_cta do %>
         <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#geography" class="link no-underline ">Details</button>
@@ -88,7 +122,10 @@
         </div>
       <% end %>
       <% component.with_statistic_display do %>
-        <%= turbo_frame_tag :devices, src: devices_browsers_path(search_params), loading: :lazy %>
+        <%= turbo_frame_tag :devices, src: devices_browsers_path(search_params), loading: :lazy do %>
+          <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+
+        <% end %>
       <% end %>
       <% component.with_details_cta do %>
         <button data-action="click->details-modal#openModal" data-controller="details-modal" data-details-modal-target-value="#devices" class="link no-underline ">Details</button>
@@ -119,7 +156,10 @@
       <% end %>
       <% component.with_statistic_display do %>
         <div class="p-4">
-          <%= turbo_frame_tag :goals, src: goals_path(search_params), loading: :lazy %>
+          <%= turbo_frame_tag :goals, src: goals_path(search_params), loading: :lazy do %>
+            <%= render '/ahoy_captain/layouts/shared/tile_loader' %>
+          <% end %>
+
         </div>
       <% end %>
     <% end %>

data/app/views/ahoy_captain/stats/show.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag :stats, data: { controller: "active-frame-link" } do %>
-  <dl class="grid grid-cols-1 divide-y divide-base-200 overflow-hidden rounded-lg grid-cols-2 md:grid-cols-6 md:divide-y-0" data-controller="active-links" data-active-links-classes-value='["text-primary"]'>
+  <div class="grid grid-cols-1 divide-y divide-base-200 overflow-hidden rounded-lg grid-cols-2 md:grid-cols-6 md:divide-y-0" data-controller="active-links" data-active-links-classes-value='["text-primary"]'>
     <% if @presenter.send(:range).realtime? %>
       <%= render stats_container(@presenter.unique_visitors, stats_unique_visitors_url(search_params), "Unique Visits (30 min)", :number_with_delimiter, true) %>
       <%= render stats_container(@presenter.total_pageviews, stats_total_pageviews_path(search_params), "Total Pageviews (30 min)", :number_with_delimiter) %>
@@ -11,5 +11,5 @@
       <%= render stats_container(@presenter.bounce_rate, stats_bounce_rates_path(search_params), "Bounce Rate", :number_with_delimiter) %>
       <%= render stats_container(@presenter.visit_duration, stats_visit_durations_url(search_params), "Visit Duration", :number_to_duration) %>
     <% end %>
-  </dl>
+  </div>
 <% end %>

data/lib/ahoy_captain/version.rb

@@ -1,3 +1,3 @@
 module AhoyCaptain
-  VERSION = "0.11.0"
+  VERSION = "0.11.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ahoy_captain
 version: !ruby/object:Gem::Version
-  version: 0.11.0
+  version: 0.11.1
 platform: ruby
 authors:
 - joshmn
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-08-19 00:00:00.000000000 Z
+date: 2023-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -388,6 +388,7 @@ files:
 - app/assets/manifest/ahoy_captain/manifest.js
 - app/components/ahoy_captain/combobox_component.html.erb
 - app/components/ahoy_captain/combobox_component.rb
+- app/components/ahoy_captain/comparison_link_component.html.erb
 - app/components/ahoy_captain/comparison_link_component.rb
 - app/components/ahoy_captain/dropdown_button_component.html.erb
 - app/components/ahoy_captain/dropdown_button_component.rb
@@ -528,6 +529,7 @@ files:
 - app/views/ahoy_captain/funnels/show.html.erb
 - app/views/ahoy_captain/goals/index.html.erb
 - app/views/ahoy_captain/layouts/application.html.erb
+- app/views/ahoy_captain/layouts/shared/_tile_loader.html.erb
 - app/views/ahoy_captain/locations/cities/index.html+details.erb
 - app/views/ahoy_captain/locations/cities/index.html.erb
 - app/views/ahoy_captain/locations/countries/index.html+details.erb