ahoy_captain 0.83 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc0360816004f1a5f8cf41e01f4a55f30b0ff40db97084122678c1b179adf930
-  data.tar.gz: a05b89988c2220ca1077bc7eecc80ad1454f777f3eff8621d91b323c52ce6ad7
+  metadata.gz: 5f41cbc112d82c58bb73215a380b4f0c0ea902f40b68264a52eae971310ec9f1
+  data.tar.gz: 335fe3f8ba99b5eb9c6fabaf12a1d03a3690a07d699f9202b0dcac1b5ceef97e
 SHA512:
-  metadata.gz: 1e9806cda9cb8366c5639db6d87fe3983cdd327cff484af95782e8c68134fb9c0f3ed55f8b4b7d269ce41b125bbb5da2faf2f4cf2fc1f190faa5c77bf486e2cc
-  data.tar.gz: 3ac41065fd0f767d951785c9a46373318ace8d2c4099390d33ae17f2d39701843a4d8c478dbb8232880d8c9b2cc89bf83a0a7ec7ec6065a52281db41d33e9b70
+  metadata.gz: 290a874e2afdf97396591d28da4e94ae4bd463bc6966123549271bacd37a76c67024257085b0c6ac06381a6dadec0041c102cf6897c950ea2a9e96d0d08e57e8
+  data.tar.gz: f7de6c4e8a0872a2434c51af6c9e55ea5b1dcd61a892c9ca002ee1f6b6ec34753b1d573c102d8e0c7a7e928dafceebb0955d6cf27e04a7588d043e9085ee4efd

data/README.md

@@ -1,17 +1,12 @@
-# AhoyCaptain
+# <img src="logo.png" style="max-height:100px" /> AhoyCaptain
 
-<img src="logo.png" style="max-width:100px" />
 
 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.jpg"><img src="ss.jpg" style="max-width:300px" /></a>
 ## Notice
 
-While this is fine to use in production, it was only built against a PostgreSQL instance. Some of the queries are certainly broken.
-
-## Some assumptions
-
-Some hardcoded stuff as of writing; this will be more fully-featured in due time.
+Currently requires using PG and a JSONB column for your data.
 
 ## Installation
 
@@ -29,11 +24,26 @@ $ bundle add ahoy_captain
 $ rails g ahoy_captain:install
 ```
 
-### 3. Star this repo
+### 3. Make sure your events are setup correctly
+
+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:
+
+```ruby
+AhoyCaptain.event.where(name: AhoyCaptain.config.event[:view_name]).count
+AhoyCaptain.event.with_routes.count
+```
+
+This can be fully-customized. See the initializer `config/initializers/ahoy_captain.rb` for more.
+
+### 4. Star this repo
 
 No, seriously, I need all the internet clout I can get.
 
-### 4. Analyze your nightmares
+### 5. Analyze your nightmares
 
 If you have a large dataset (> 1GB) you probably want some indexes. `rails g ahoy_captain:migration`
 
@@ -52,12 +62,14 @@ If you have a large dataset (> 1GB) you probably want some indexes. `rails g aho
     * Device type
     * OS
     * UTM tags
+    * Goal
+    * Event Property
+* CSV exports
+* Date comparison
 
 ## Coming soon ™️
 
-* Date comparison
-* More filters
-* CSV exports
+* Bug fixes and performance improvements
 
 ## Contributors
 
@@ -65,7 +77,7 @@ This was built during the Rails Hackathon in July 2023 with [afogel](https://git
 
 ## Contributions
 
-Please and thank you in advance!
+Do your worst; please and thank you in advance! :) 
 
 ## License
 

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/item_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="filter--item"
+export default class extends Controller {
+  static values = {
+    modal: String
+  };
+
+  openModal() {
+    document.getElementById(this.modalValue).showModal()
+  }
+}

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")
+    })
+  }
+}