ahoy_captain 0.8 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 42069eea6d1d5b65765678fa1d352cf462048c09ad5bbe69715f0f147f0a3856
-  data.tar.gz: cd0fab7a2a262b89f5688374cb566b482f0a9909b5358db5b02c9d3480f4ed21
+  metadata.gz: e860b8082ca3fad364eb34df632f017d81e63ff411c2fcae0501657aef5a578b
+  data.tar.gz: 4d0227c2eb7443e4d6a15f817d971f6176c43daad634d057de88f98f7ec8ae7b
 SHA512:
-  metadata.gz: 464affe93d6d8ebfec8baf55f989a8402a6e265247259894c4f01a22b32047bc3cda4238c3e22ea06a7e6dae088353f23ed1a94cc65899ea24c7096b49a0d031
-  data.tar.gz: 22b2352c2a7c9a21b8999292ee1bff64b87bc3306dd6ecb9f7e6f0c787306a3ec2132850c8954f15bac01e830f624a961bee868d7e3c8c5d3718d3b0b6946954
+  metadata.gz: 84a9922fec7838c6733263224f0b2a86e836b147fd8074e11428c47899ffd69317617b57f7dae503e59139d1c1ef134c46c2692ce298493830cd5b742a8fa780
+  data.tar.gz: 66e113dc9b86039b504d20153384d3fa55afe1f842a69da47d36aa03829fa0830b56a81411fd4c742626848973d1b89d43c4b523cd909ae8eb7bd6324f8261a5

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/app/assets/javascript/ahoy_captain/application.js

@@ -1,4 +1,4 @@
-import "@hotwired/turbo-rails"
-import "controllers"
-import "chartkick"
-import "Chart.bundle"
+import '@hotwired/turbo-rails';
+import 'controllers';
+import 'chartkick';
+import 'Chart.bundle';

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

@@ -0,0 +1,30 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["link", "alt"]
+  static values = {
+    classes: { type: Array, default: ["text-primary", "font-semibold"] }
+  }
+
+  // sometimes the target is not the link itself but a child element, and we want to highlight something other than the
+  // link itself.
+  // this can be bettered
+  connect() {
+    this.handleLinkClick = (event) => {
+      let link = null;
+      if(event.target.tagName === "A") {
+        link = event.target;
+      } else {
+        link = (event.target.closest('a').querySelector('[data-active-links-target="link"]'))
+      }
+      this.linkTargets.forEach(link => this.classesValue.forEach(klass => link.classList.remove(klass)))
+      this.classesValue.forEach(klass => link.classList.add(klass))
+    }
+    this.linkTargets.forEach(link => {
+      link.addEventListener('click', this.handleLinkClick)
+    })
+    this.altTargets.forEach(target => {
+      target.addEventListener('click', this.handleLinkClick)
+    })
+  }
+}

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

@@ -1,9 +1,9 @@
-import { Application } from "@hotwired/stimulus"
+import { Application } from '@hotwired/stimulus';
 
-const application = Application.start()
+const application = Application.start();
 
 // Configure Stimulus development experience
-application.debug = false
-window.Stimulus = application
+application.debug = false;
+window.Stimulus = application;
 
-export { application }
+export { application };

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

@@ -1,14 +1,21 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-    connect() {
-        if(new URLSearchParams(window.location.search).get("period") === 'realtime') {
-            this.element.querySelectorAll('turbo-frame').forEach(frame => {
-                setInterval(() => {
-                    frame.reload()
-                }, 1000 * 30);
-            })
-        }
+  connect() {
+    window.comboboxConnected = 0;
+    if (new URLSearchParams(window.location.search).get('period') === 'realtime') {
+      this.element.querySelectorAll('turbo-frame').forEach((frame) => {
+        setInterval(() => {
+          frame.reload();
+        }, 1000 * 30);
+      });
     }
+  }
+
+  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,341 @@
+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: Boolean,
+    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,
+    });
+
+    window.dispatchEvent(new CustomEvent('combobox:init', { detail: { combobox: this } }))
+    this.search = new URLSearchParams(window.location.search);
+    this.search.delete(this.selectTarget.name)
+  }
+
+  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 }
+    this.isLoadingValue = true;
+    this.isOpenValue = true;
+
+    const searchParams = new URLSearchParams(this.search.toString());
+    const formData = new FormData(this.element.form);
+
+    let deleted = [];
+    for (const [key, value] of formData) {
+      if(!deleted.includes(key)) {
+        searchParams.delete(key)
+        deleted.push(key)
+      }
+    }
+
+    searchParams.delete(this.element.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.text }));
+    });
+  }
+
+  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 = ""
+    }
+  }
+
+  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/details_modal_controller.js

@@ -1,15 +1,15 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
   static values = {
-    target: String
-  }
-  
+    target: String,
+  };
+
   connect() {
     this.modal = document.querySelector('#detailsModal');
     this.turboFrame = document.querySelector('#detailsModal turbo-frame');
   }
-  
+
   openModal(e) {
     e.preventDefault();
     this.modal.showModal();

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

@@ -1,7 +1,7 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ["label", "close"]
+  static targets = ['label', 'close'];
 
   setLabel(event) {
     this.labelTarget.innerText = event.target.innerText;

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_form_controller.js

@@ -0,0 +1,13 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  handleReset(event) {
+    event.preventDefault();
+    const openModal = document.querySelector('dialog.modal[open]');
+    openModal.querySelectorAll('input, select').forEach(element => {
+      element.value = ""
+    });
+    openModal.close()
+    this.element.requestSubmit()
+  }
+}

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