ahoy_captain 0.91 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bdc2d607961f89d3b62c551c8aa157c962ab05e0fe7a61179c6c1c9de1c830d6
-  data.tar.gz: feef80dd54cb92203aab1468fa80c134e46e8e04f5bf2c6684a83d856ab05ec4
+  metadata.gz: 5f41cbc112d82c58bb73215a380b4f0c0ea902f40b68264a52eae971310ec9f1
+  data.tar.gz: 335fe3f8ba99b5eb9c6fabaf12a1d03a3690a07d699f9202b0dcac1b5ceef97e
 SHA512:
-  metadata.gz: 43b863dd93ad7a3139c2c73564b1edde7f1d4bbba9540466852cb5cce0f930c0eef8f9505eb513e98c1800a6a0c3f2f8563d20568b17a5b0c65c4e61ad52e433
-  data.tar.gz: 6078f2d0937c955073c150c10979ea9099be46ae2d2382f317369f429b5237d4d381303d28e1aa0e6a3b917e1010b170d5dfcf1bf331383889e6f7d5e699f260
+  metadata.gz: 290a874e2afdf97396591d28da4e94ae4bd463bc6966123549271bacd37a76c67024257085b0c6ac06381a6dadec0041c102cf6897c950ea2a9e96d0d08e57e8
+  data.tar.gz: f7de6c4e8a0872a2434c51af6c9e55ea5b1dcd61a892c9ca002ee1f6b6ec34753b1d573c102d8e0c7a7e928dafceebb0955d6cf27e04a7588d043e9085ee4efd

data/README.md

@@ -3,7 +3,7 @@
 
 A full-featured, mountable analytics dashboard for your Rails app, shamelessly inspired by Plausible Analytics, powered by the Ahoy gem.
 
-<a href="https://github.com/joshmn/ahoy_captain/blob/main/ss.png"><img src="ss.png" style="max-width:300px" /></a>
+<a href="https://github.com/joshmn/ahoy_captain/blob/main/ss.jpg"><img src="ss.jpg" style="max-width:300px" /></a>
 ## Notice
 
 Currently requires using PG and a JSONB column for your data.
@@ -26,7 +26,9 @@ $ rails g ahoy_captain:install
 
 ### 3. Make sure your events are setup correctly
 
-By default, AhoyCaptain assumes you're tracking `controller` and `action` in your `Ahoy::Event` properties, and a page view event is named `$view`. 
+AhoyCaptain doesn't do any tracking for you; it merely provides a dashboard for your data from the Ahoy gem. 
+
+By default, AhoyCaptain assumes you're tracking `controller` and `action` in your `Ahoy::Event` properties, and a page view event is named `$view`. See this section for more information: https://github.com/ankane/ahoy#events
 
 For a quick sanity check:
 
@@ -35,7 +37,7 @@ AhoyCaptain.event.where(name: AhoyCaptain.config.event[:view_name]).count
 AhoyCaptain.event.with_routes.count
 ```
 
-See the initializer `config/initializers/ahoy_captain.rb` for further customization.
+This can be fully-customized. See the initializer `config/initializers/ahoy_captain.rb` for more.
 
 ### 4. Star this repo
 
@@ -61,11 +63,13 @@ If you have a large dataset (> 1GB) you probably want some indexes. `rails g aho
     * OS
     * UTM tags
     * Goal
+    * Event Property
 * CSV exports
+* Date comparison
 
 ## Coming soon ™️
 
-* Date comparison
+* Bug fixes and performance improvements
 
 ## Contributors
 

data/Rakefile

@@ -1,3 +1,24 @@
-require "bundler/setup"
+# frozen_string_literal: true
 
-require "bundler/gem_tasks"
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Caffeinate'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path('spec/dummy/Rakefile', __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'

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

@@ -2,6 +2,7 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
   connect() {
+    window.comboboxConnected = 0;
     if (new URLSearchParams(window.location.search).get('period') === 'realtime') {
       this.element.querySelectorAll('turbo-frame').forEach((frame) => {
         setInterval(() => {
@@ -9,5 +10,24 @@ export default class extends Controller {
         }, 1000 * 30);
       });
     }
+
+    document.querySelectorAll('a[data-turbo-frame]').forEach(link => {
+      const frameSelector = link.dataset.turboFrame;
+      const frame = document.querySelector(`turbo-frame#${frameSelector}`);
+      if(frame) {
+        const src = frame.src;
+        if(link.href.includes(src)) {
+          link.classList.add('text-primary', 'font-semibold')
+        }
+      }
+
+    })
+  }
+
+  comboboxInit(event) {
+    if(event.detail.combobox.selectTarget.id === "property-name" || event.detail.combobox.selectTarget.id === "property-value") {
+      window.comboboxConnected += 1;
+    }
   }
+
 }

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

@@ -0,0 +1,371 @@
+import { Controller } from "@hotwired/stimulus";
+import "classnames"
+
+const debounce = (func, delay) => {
+  let debounceTimer
+  return function() {
+    const context = this
+    const args = arguments
+    clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => func.apply(context, args), delay)
+  }
+}
+
+export default class extends Controller {
+  static targets = ["input", "list", "option", "container", "select", "highlighted", "box", "selected"];
+  static classes = ["boxOpen"]
+  static values = {
+    options: Array,
+    isLoading: Boolean,
+    isOpen: Boolean,
+    disabled: Boolean,
+    input: String,
+    highlightedIndex: Number,
+    singleOption: Boolean,
+    freeChoice: { type: Boolean, default: false },
+    selected: Array,
+    url: String,
+    query: String
+  };
+
+  connect() {
+    this.isLoadingValue = false;
+    this.isOpenValue = false;
+    this.inputValue = '';
+    this.highlightedIndexValue = 0;
+    this.clickHandler = this.clickHandler.bind(this)
+
+    this.inputTarget.addEventListener('keydown', this.onKeyDown.bind(this))
+    this.debouncedFetchOptions = debounce(this.fetchOptions.bind(this), 250);
+    this.checkDisabledState();
+    if(this.singleOptionValue) {
+      this.selectTarget.removeAttribute('multiple')
+    } else {
+      this.selectTarget.multiple = true
+    }
+
+    Object.defineProperty(this.selectTarget, "combobox", {
+      enumerable: false,
+      configurable: false,
+      writable: false,
+      value: this,
+    });
+
+    const targetNode = this.selectTarget;
+    const config = { attributes: true };
+
+    const callback = (mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === "attributes") {
+          this.handleNameChange()
+        }
+      }
+    };
+
+    const observer = new MutationObserver(callback);
+    observer.observe(targetNode, config);
+
+
+    window.dispatchEvent(new CustomEvent('combobox:init', { detail: { combobox: this } }))
+    this.search = new URLSearchParams(window.location.search);
+    this.search.delete(this.selectTarget.name)
+  }
+
+  handleNameChange() {
+    if(this.selectTarget.name.includes("_cont]")) {
+      this.freeChoiceValue = true
+    } else {
+      this.freeChoiceValue = false
+    }
+  }
+  checkDisabledState() {
+    if (this.disabledValue) {
+      this.element.classList.add('opacity-80', 'cursor-default', 'pointer-events-none');
+    } else {
+      this.element.classList.remove('opacity-80', 'cursor-default', 'pointer-events-none')
+    }
+  }
+
+  onInput(event) {
+    this.inputValue = event.target.value;
+    this.debouncedFetchOptions(this.inputValue);
+  }
+
+  fetchOptions(query) {
+    if(this.disabledValue) { return }
+
+    if(this.freeChoiceValue) {
+      this.isLoadingValue = false;
+      this.highlightedIndexValue = 0;
+      this.optionsValue = [{ text: query, value: query }];
+      this.isOpenValue = true;
+
+    } else {
+      this.isLoadingValue = true;
+      this.isOpenValue = true;
+
+      const formData = new FormData(this.selectTarget.form);
+      const searchParams = new URLSearchParams([...formData.entries()]);
+
+      searchParams.delete(this.selectTarget.name);
+      searchParams.delete(this.queryValue);
+      searchParams.set(this.queryValue, query);
+
+      fetch(`${this.urlValue}?${searchParams.toString()}`).then(resp => resp.json()).then(loadedOptions => {
+        this.isLoadingValue = false;
+        this.highlightedIndexValue = 0;
+        this.optionsValue = loadedOptions.map(option => ({ text: option.text, value: option.value }));
+      });
+    }
+  }
+
+  highlight(element) {
+    const index =  parseInt(element.target.dataset.index);
+    this.highlightIndex(index)
+  }
+
+  scrollToOption(index) {
+    const optionElement = this.listTarget.querySelector(`[data-index="${index}"]`);
+    if (optionElement) {
+      optionElement.scrollIntoView({ block: 'center' });
+    }
+  }
+
+  highlightIndex(index) {
+    this.highlightedIndexValue = index;
+    this.scrollToOption(index);
+  }
+
+  setSelected(values) {
+    this.selectedValue = values;
+  }
+
+  setDisabled(value) {
+    this.disabledValue = value
+  }
+
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'Enter':
+        if (!this.isOpenValue || this.isLoadingValue || this.optionTargets.length === 0) return;
+        const option = this.listTarget.querySelector(`[data-index="${this.highlightedIndexValue}"]`);
+        if(option) {
+          this.selectOption(option);
+        }
+
+        event.preventDefault();
+        break;
+      case 'Escape':
+        if (!this.isOpenValue || this.isLoadingValue) return;
+        this.isOpenValue = false;
+        this.inputTarget.focus();
+        event.preventDefault();
+        break;
+      case 'ArrowDown':
+        if(this.isOpenValue) {
+          this.highlightIndex(this.highlightedIndexValue + 1)
+        } else {
+          this.isOpenValue = true
+        }
+        break;
+      case 'ArrowUp':
+        if(this.isOpenValue) {
+          this.highlightIndex(this.highlightedIndexValue - 1)
+        } else {
+          this.isOpenValue = true
+        }
+        break;
+    }
+  }
+
+  selectOption(selected) {
+    let value = null;
+    if(selected.tagName) {
+      value = selected.dataset.value;
+      if(value === undefined) {
+        value = selected.parentElement.dataset.value
+      }
+    } else {
+      value = selected.target.dataset.value;
+      if(value === undefined) {
+        value = selected.target.parentElement.dataset.value
+      }
+    }
+
+    const option = this.optionsValue.filter(option => option.value === value)[0];
+    if(this.singleOptionValue) {
+      this.selectedValue = [option]
+    } else {
+      this.selectedValue = [...this.selectedValue, option]
+    }
+    this.isOpenValue = false;
+    this.inputTarget.value = '';
+    this.highlightedIndexValue = 0
+  }
+
+  toggleOpen() {
+    if (!this.isOpenValue) {
+      this.debouncedFetchOptions(this.inputValue);
+      this.inputTarget.focus();
+      document.addEventListener('click', this.clickHandler)
+    } else {
+      this.inputValue = '';
+      this.isOpenValue = false;
+      document.removeEventListener('click', this.clickHandler)
+    }
+  }
+
+  clickHandler(event) {
+    if(event.target.classList.contains('combobox-option')) {
+      return
+    } else {
+      this.toggleOpen()
+      return
+    }
+  }
+
+  isOpenValueChanged(current) {
+    if(current) {
+      this.boxTarget.classList.add(...this.boxOpenClasses)
+    } else {
+      this.boxTarget.classList.remove(...this.boxOpenClasses)
+
+    }
+    this.listTarget.style.display = current ? 'block' : 'none';
+  }
+
+  highlightedIndexValueChanged(current, previous) {
+    const prev = this.listTarget.querySelector(`[data-index="${previous}"]`)
+    if(prev) {
+      prev.classList.remove('bg-primary-600', 'text-white')
+    }
+    const now = this.listTarget.querySelector(`[data-index="${current}"]`);
+    if(now) {
+      now.classList.add('bg-primary-600', 'text-white')
+    }
+  }
+
+  renderDropDownContent() {
+    this.listTarget.innerHTML = "";
+
+    const visibleOptions = this.visibleOptions()
+    const matchesFound = visibleOptions.length > 0 && visibleOptions.some(option => !this.isOptionDisabled(option))
+
+    if (matchesFound) {
+      return this.renderOptions(visibleOptions.filter(option => !this.isOptionDisabled(option)))
+    }
+
+    if(this.isLoadingValue) {
+      this.listTarget.innerHTML = `<div>Is Loading..</div>`
+      return
+    }
+
+    if(this.freeChoiceValue) {
+      this.listTarget.innerHTML = `<div class="relative cursor-default select-none py-2 px-4 text-gray-700 dark:text-gray-300">Start typing to apply filter</div>`
+      return
+    }
+
+    this.listTarget.innerHTML = `<div class="relative cursor-default select-none py-2 px-4 text-gray-700 dark:text-gray-300">
+        No matches found in the current dashboard. Try selecting a different time range or searching for something different.
+      </div>`
+
+  }
+  renderOptions(options) {
+    options.forEach((option, index) => {
+      const optionElement = document.createElement("li");
+      const isHighlighted = this.highlightedIndexValue === index;
+      optionElement.innerHTML = `<span class="block truncate" data-index="${index}">${option.text}</span>`;
+      optionElement.className = classNames('combobox-option relative cursor-pointer select-none py-2 px-3 hover:bg-primary-600 hover:text-white', {
+        'text-accent-900': !isHighlighted,
+        'bg-primary-600 text-white': isHighlighted,
+      });
+
+      if(isHighlighted) {
+        optionElement.dataset.comboboxTarget = "option"
+      }
+      optionElement.dataset.action = "click->combobox#selectOption"
+      optionElement.dataset.index = index;
+      optionElement.dataset.value = option.value
+      optionElement.id = `combobox-option-${index}`;
+
+      this.listTarget.appendChild(optionElement);
+    });
+  }
+  optionsValueChanged(current, before) {
+    this.renderDropDownContent()
+  }
+
+  isOptionDisabled(option) {
+    const disabled = this.selectedValue.some((val) => val.value === option.value)
+
+    return disabled
+  }
+
+  visibleOptions() {
+    const visibleOptions = [...this.optionsValue]
+    if (this.freeChoiceValue && this.inputTarget.length > 0 && this.optionsValue.every(option => option.value !== this.inputTarget.value)) {
+      visibleOptions.push({value: this.inputTarget.value, label: this.inputTarget.value, freeChoice: true})
+    }
+
+    return visibleOptions
+  }
+
+  selectedValueChanged(current, prev) {
+    this.renderSelectedValues()
+    this.renderDropDownContent()
+  }
+
+  removeOption(e) {
+    e.stopPropagation()
+    const option = this.selectTarget.querySelector(`option[value="${e.target.dataset.value}"]`);
+    option.remove()
+    const newValues = [];
+    this.selectTarget.querySelectorAll('option[selected]').forEach(option => {
+      newValues.push({text: option.text, value: option.value })
+    })
+    this.selectedValue = newValues;
+    this.isOpenValue = false
+  }
+
+  renderSelectedValues() {
+    this.selectTarget.innerHTML = ""
+    this.selectedTarget.innerHTML = ""
+    this.selectedValue.forEach(value => {
+      const option = document.createElement('option');
+      option.text = value.text;
+      option.value = value.value;
+      option.setAttribute('selected', 'selected')
+      this.selectTarget.appendChild(option)
+
+      const el = document.createElement("div");
+      el.classList.add('text-primary-content', 'bg-primary', 'flex', 'justify-between', 'w-full', 'rounded-sm', 'px-2', 'py-0.5', 'm-0.5', 'text-sm');
+      el.innerHTML = `<span class="break-all">${option.text}</span><span class="cursor-pointer font-bold ml-1" data-action="click->combobox#removeOption" data-value="${option.value}" >×</span>`;
+      this.selectedTarget.appendChild(el)
+    })
+    var event = new Event('change');
+    this.selectTarget.dispatchEvent(event);
+    if(this.selectedValue.length === 0) {
+      this.selectedTarget.style.display = "none"
+    } else {
+      this.selectedTarget.style.display = ""
+    }
+  }
+
+  freeChoiceValueChanged(current, prev) {
+    if(this.selectedValue.filter(value => value.freeChoice).length) {
+      console.log("free choice changed")
+      this.setSelected([])
+    }
+
+  }
+  disabledValueChanged(current) {
+    if(current) {
+      this.isOpenValue = false
+      this.inputTarget.disabled = true
+      this.checkDisabledState()
+    } else {
+      this.inputTarget.removeAttribute('disabled')
+      this.checkDisabledState()
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+
+  // reverts the modal back to its original state if it was simply closed
+  connect() {
+    const targetNode = this.element;
+    const config = { attributes: true, childList: false, subtree: false };
+    const callback = (mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if(mutation.attributeName === "open") {
+          if(this.element.open) {
+            if(!this.originalValues) {
+              this.originalValues = {};
+              const formElements = this.element.querySelectorAll('select');
+              formElements.forEach(el => {
+                if(el.combobox) {
+                  this.originalValues[el.id] = el.combobox.selectedValue;
+                } else {
+                  this.originalValues[el.id] = el.value;
+                }
+              })
+            }
+          } else {
+            const formElements = this.element.querySelectorAll('select');
+            formElements.forEach(el => {
+              if(this.originalValues[el.id]) {
+                if(el.combobox) {
+                  el.combobox.setSelected(this.originalValues[el.id])
+                } else {
+                  el.value = this.originalValues[el.id]
+                }
+              }
+            })
+          }
+        }
+      }
+    };
+
+    const observer = new MutationObserver(callback);
+    observer.observe(targetNode, config);
+  }
+
+
+}

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

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["link", "alt"]
+  static values = {
+    classes: { type: Array, default: ["text-primary", "font-semibold"] }
+  }
+
+  connect() {
+    this.element.addEventListener('click', () => {
+      const frame = this.element.dataset.turboFrame;
+      const otherLinks = document.querySelectorAll(`[data-turbo-frame="${frame}"]`);
+      otherLinks.forEach(link => {
+        link.classList.remove('text-primary', 'font-semibold');
+      })
+
+      this.element.classList.add("text-primary", "font-semibold")
+    })
+  }
+}

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

@@ -1,14 +1,26 @@
 import { Controller } from '@hotwired/stimulus';
 import 'chartjs-plugin-datalabels';
+import { getCSS, externalTooltipHandler } from "helpers/chart_utils";
+
+const calculatePercentageDifference = function(oldValue, newValue) {
+  if(!oldValue) { return false }
+  if (oldValue == 0 && newValue > 0) {
+    return 100
+  } else if (oldValue == 0 && newValue == 0) {
+    return 0
+  } else {
+    return Math.round((newValue - oldValue) / oldValue * 100)
+  }
+}
 
 export default class extends Controller {
   connect() {
-    const funnel = JSON.parse(this.element.dataset.data);
+    this.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 labels = this.funnel.steps.map((step) => step.name);
+    const stepData = this.funnel.steps.map((step) => step.total_events);
+    const dropOffData = this.funnel.steps.map((step) => step.drop_off * 100);
 
     const data = {
       labels,
@@ -17,13 +29,19 @@ export default class extends Controller {
           label: 'Visitors',
           data: stepData,
           borderRadius: 4,
+          color: getCSS('--ac'),
+          backgroundColor: getCSS('--p'),
           stack: 'Stack 0',
+          yAxisID: 'y',
         },
         {
           label: 'Dropoff',
           data: dropOffData,
           borderRadius: 4,
           stack: 'Stack 0',
+          color: getCSS('--ac'),
+          backgroundColor: getCSS('--a'),
+          yAxisID: 'yComparison',
         },
       ],
     };
@@ -39,13 +57,11 @@ export default class extends Controller {
           padding: 100,
         },
         plugins: {
-          legend: {
-            display: false,
-          },
+          legend: false,
           tooltip: {
-            mode: 'index',
-            intersect: true,
-            position: 'average',
+            enabled: false,
+            position: 'nearest',
+            external: externalTooltipHandler(this)
           },
           datalabels: {
             anchor: 'end',
@@ -54,9 +70,7 @@ export default class extends Controller {
             padding: {
               top: 8, bottom: 8, right: 8, left: 8,
             },
-            font: {
-              size: 12, weight: 'normal', lineHeight: 1.6, family: fontFamily,
-            },
+            color: getCSS('--pc'),
             textAlign: 'center',
           },
         },
@@ -69,8 +83,6 @@ export default class extends Controller {
             grid: { drawBorder: false, display: false },
             ticks: {
               padding: 8,
-              font: { weight: 'bold', family: fontFamily, size: 14 },
-              color: 'rgb(228, 228, 231)',
             },
           },
         },
@@ -79,9 +91,39 @@ export default class extends Controller {
 
     const visitorsData = [];
 
-    new Chart(
+    this.chart = new Chart(
       this.element,
       config,
     );
   }
+
+  formatLabel(label) {
+    return label
+  }
+
+  formatMetric(metric) {
+    return metric
+  }
+
+
+  extractTooltipData(tooltip) {
+    const data = this.funnel.steps.find(step => step.name === tooltip.title[0]);
+
+    const value = data.total_events;
+    const label = "Visitors"
+    let comparisonLabel = "Dropoff"
+    let comparisonValue =  data.unique_visits;
+
+    return {
+      comparison: true,
+      comparisonDifference: false,
+      metric: tooltip.title[0],
+      label: this.formatLabel(label),
+      labelBackgroundColor: getCSS('--bc'),
+      formattedValue: value,
+      comparisonLabel: comparisonLabel,
+      comparisonLabelBackgroundColor: "",
+      formattedComparisonValue: comparisonValue,
+    }
+  }
 }

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

@@ -6,5 +6,10 @@ export default class extends Controller {
     const interval = event.target.value;
     url.searchParams.set('interval', interval);
     event.target.closest('turbo-frame').src = url.href;
+    document.querySelectorAll('a[data-turbo-frame="chart"]').forEach(el => {
+      const url = new URL(el.href);
+      url.searchParams.set('interval', interval);
+      el.href = url.href
+    })
   }
 }