ahoy_captain 0.9 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7334ddf143eb3d28e42766a6cc39f1acc5ee733679e5824399d668f349e1f68
-  data.tar.gz: 98735c61175fe289a4ffc73c6ac395c540c603d1a05ca95e1369eb5619081a99
+  metadata.gz: 5b2500018e9b54eebbe3265041ed28c4a545698362738c9e2dfe34db83edc221
+  data.tar.gz: dc8b920328f271d5ff63047360b6e5ef1b06ba12b1598346005063bc3548d102
 SHA512:
-  metadata.gz: 737b08e21d4ea18f634ff5c19e10d0f9bc21f73eba746c93cc1f74f6459ebb9f8d95d7ca7ee82236bcb163cfbf6642acb30a547cc710c3d5e63abcaa4d49c1f6
-  data.tar.gz: 00dd0823f703ce906e201dd227b33a4cc0606f6d67680c63c1a1c6231110557e18ccfbb81a6964b601ba30a81fd8bd72a618b3da407f40c7f91181ed3cc6472a
+  metadata.gz: 823d78198fc0b83ed2535fa9482a5b468fee0aa7a8668db13a625b4b10b68b1910c345790b1ade4e3a9eea7a96f86f5042721dae6a162877f3ac78260437973c
+  data.tar.gz: c0969c25e1bb0170eb49b310e48b7a4a5b5cde951d927d535af261f76a8c6c49f7bde837978e23e1e50042f0e706e39d90605d159860aefe179ac27842c3a179

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

@@ -1,14 +1,30 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ["link"]
+  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) => {
-      this.linkTargets.forEach(link => link.classList.remove('text-primary', 'font-semibold'))
-      event.target.classList.add('text-primary', 'font-semibold')
+      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_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(() => {
@@ -10,4 +11,11 @@ export default class extends Controller {
       });
     }
   }
+
+  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.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 = ""
+    }
+  }
+
+  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/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
+    })
   }
 }