lookout-ahoy 0.1.0

data/app/assets/javascript/lookout/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/lookout/controllers/details_modal_controller.js

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

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

@@ -0,0 +1,39 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['label', 'close'];
+
+  connect() {
+    // Listen for clicks on funnel links inside this dropdown
+    const funnelLinks = this.element.querySelectorAll('[data-funnel-link]');
+    funnelLinks.forEach(link => {
+      link.addEventListener('click', () => {
+        this.highlightDropdown();
+      });
+    });
+  }
+
+  setLabel(event) {
+    this.labelTarget.innerText = event.target.innerText;
+    this.closeTarget.classList.add('hidden');
+  }
+
+  removeHidden(event) {
+    this.closeTarget.classList.remove('hidden');
+  }
+
+  highlightDropdown() {
+    // Find the dropdown label and highlight it
+    const dropdownLabel = this.element.querySelector('[data-funnel-dropdown-label]');
+    
+    // Remove active state from all turbo-frame links
+    const frame = dropdownLabel.dataset.turboFrame;
+    const otherLinks = document.querySelectorAll(`[data-turbo-frame="${frame}"]`);
+    otherLinks.forEach(link => {
+      link.classList.remove('text-primary', 'font-semibold');
+    });
+    
+    // Add active state to dropdown label
+    dropdownLabel.classList.add('text-primary', 'font-semibold');
+  }
+}

data/app/assets/javascript/lookout/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/lookout/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/lookout/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/lookout/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/lookout/controllers/funnel_chart_controller.js

@@ -0,0 +1,159 @@
+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() {
+    this.funnel = JSON.parse(this.element.dataset.data);
+    console.log('Funnel data:', this.funnel);
+
+    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 = this.funnel.steps.map((step) => step.name);
+    const stepData = this.funnel.steps.map((step) => step.total_events);
+    
+    // Calculate conversion rates as percentages for each step
+    const conversionRates = this.funnel.steps.map((step, index) => {
+      if (index === 0 || !step.drop_off) return 100;
+      return (step.drop_off * 100).toFixed(1);
+    });
+
+    const data = {
+      labels,
+      datasets: [
+        {
+          label: 'Events',
+          data: stepData,
+          borderRadius: 4,
+          backgroundColor: getCSS('--p'),
+          borderColor: getCSS('--p'),
+          borderWidth: 2,
+          barPercentage: 0.8,
+          categoryPercentage: 0.9,
+          maxBarThickness: 120,
+        },
+      ],
+    };
+
+    const config = {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: [ChartDataLabels],
+      type: 'bar',
+      data,
+      options: {
+        layout: {
+          padding: { top: 50, bottom: 20, left: 20, right: 80 },
+        },
+        plugins: {
+          legend: false,
+          tooltip: {
+            enabled: false,
+            position: 'nearest',
+            external: externalTooltipHandler(this)
+          },
+          datalabels: {
+            anchor: 'center',
+            align: 'center',
+            borderRadius: 4,
+            padding: { top: 6, bottom: 6, right: 8, left: 8 },
+            color: getCSS('--bc'),
+            font: {
+              weight: 'bold',
+              size: 14
+            },
+            clip: false,
+            clamp: false,
+            formatter: (value, context) => {
+              const index = context.dataIndex;
+              const rate = conversionRates[index];
+              if (index === 0) {
+                return value.toLocaleString();
+              }
+              return `${value.toLocaleString()}\n(${rate}%)`;
+            },
+            textAlign: 'center',
+          },
+        },
+        scales: {
+          y: { 
+            display: true,
+            border: { display: false },
+            grid: { 
+              drawBorder: false, 
+              display: true,
+              color: 'rgba(255, 255, 255, 0.1)'
+            },
+            ticks: {
+              color: getCSS('--bc'),
+              callback: (value) => value.toLocaleString()
+            }
+          },
+          x: {
+            position: 'bottom',
+            display: true,
+            border: { display: false },
+            grid: { drawBorder: false, display: false },
+            ticks: {
+              padding: 8,
+              color: getCSS('--bc'),
+              font: {
+                size: 13,
+                weight: '500'
+              }
+            },
+          },
+        },
+      },
+    };
+
+    const visitorsData = [];
+
+    this.chart = new Chart(
+      this.element,
+      config,
+    );
+  }
+
+  formatLabel(label) {
+    return label
+  }
+
+  formatMetric(metric) {
+    return metric
+  }
+
+
+  extractTooltipData(tooltip) {
+    const stepIndex = this.funnel.steps.findIndex(step => step.name === tooltip.title[0]);
+    const data = this.funnel.steps[stepIndex];
+
+    const value = data.total_events;
+    const uniqueVisits = data.unique_visits;
+    const conversionRate = stepIndex > 0 && data.drop_off ? 
+      `${(data.drop_off * 100).toFixed(1)}% of previous` : 
+      '100%';
+
+    return {
+      comparison: true,
+      comparisonDifference: false,
+      metric: tooltip.title[0],
+      label: "Total Events",
+      labelBackgroundColor: getCSS('--p'),
+      formattedValue: value.toLocaleString(),
+      comparisonLabel: "Unique Visits",
+      comparisonLabelBackgroundColor: getCSS('--s'),
+      formattedComparisonValue: `${uniqueVisits.toLocaleString()} (${conversionRate})`,
+    }
+  }
+}

data/app/assets/javascript/lookout/controllers/index.js

@@ -0,0 +1,4 @@
+import { application } from 'controllers/application';
+import { eagerLoadControllersFrom } from '@hotwired/stimulus-loading';
+
+eagerLoadControllersFrom('controllers', application);