ahoy_captain 0.11.1 → 0.76

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 550735e026fe60170552c09149ee5dceb1d874020c131f49c9a79a6d1c04982f
-  data.tar.gz: 9a782cddeb96ba6726980ae8f0c5b332f51756b8114b88dc63af91a2739776ea
+  metadata.gz: bdbe217ea7df263239572663d05816b79847f65f7c4ec9dfa120749c0f5b45d3
+  data.tar.gz: 6176d55f8d2502a46891032ddfd51043fe4c4e7bd5efb9ac754d7e1576e4f866
 SHA512:
-  metadata.gz: 021c101c8ff731e860b85baab37836fdb9f1dc5a038c90cd5411b9f0e628b8918823fdc7446164620414bce1a20560a7284dd6d63753ad4ab6c1f1541aed17d8
-  data.tar.gz: b0a5fc48678367faa56299f2462b92edf3331adc4df3f0cc685b68584cfea4604d76437528007ce27e5c3173312945d514e2399a65efad1d4b473e2a134b6690
+  metadata.gz: 6ec21ec3864bfb7b6d87fa65df0b1cb67879cd8cdd9b25c246bec2ccf9dac72d9858bfef19e9d0fb590dac11d5cb4dad491d81f5a81ca87532254051c2cb335b
+  data.tar.gz: 9a0a6fba58462a0aaea1ee6d5536e21c7ca5c40c4332c89688ae99409e94495ee7215b31aa948ee9123b10f821b9405742f3f4946ee5c50b96f156476f6ae80a

data/README.md

@@ -1,12 +1,17 @@
-# <img src="logo.png" style="max-height:100px" /> AhoyCaptain
+# 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
 
-Currently requires using PG and a JSONB column for your data.
+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.
 
 ## Installation
 
@@ -24,26 +29,11 @@ $ bundle add ahoy_captain
 $ rails g ahoy_captain:install
 ```
 
-### 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
+### 3. Star this repo
 
 No, seriously, I need all the internet clout I can get.
 
-### 5. Analyze your nightmares
+### 4. Analyze your nightmares
 
 If you have a large dataset (> 1GB) you probably want some indexes. `rails g ahoy_captain:migration`
 
@@ -62,14 +52,12 @@ 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 ™️
 
-* Bug fixes and performance improvements
+* Date comparison
+* More filters
+* CSV exports
 
 ## Contributors
 
@@ -77,7 +65,7 @@ This was built during the Rails Hackathon in July 2023 with [afogel](https://git
 
 ## Contributions
 
-Do your worst; please and thank you in advance! :) 
+Please and thank you in advance!
 
 ## License
 

data/Rakefile

@@ -1,24 +1,3 @@
-# frozen_string_literal: true
+require "bundler/setup"
 
-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'
+require "bundler/gem_tasks"

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/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,33 +1,14 @@
-import { Controller } from '@hotwired/stimulus';
+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(() => {
-          frame.reload();
-        }, 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')
+    connect() {
+        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/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_controller.js

@@ -0,0 +1,145 @@
+import {Controller} from "@hotwired/stimulus"
+import SlimSelect from 'slim-select'
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    column: String,
+  };
+  static targets = ["select", 'predicate'];
+  connect() {
+    this.selectTargets.forEach(async (target) => {
+      const url = target.dataset.filterUrlValue;
+      const optionsSearch = this.fetchOptions(url, target);
+      const select = await new SlimSelect({
+        select: target,
+        data: [],
+        settings: {
+          contentPosition: 'relative',
+          contentLocation: target.closest('fieldset'),
+          searchText: 'Sorry, no results found',
+          searchPlaceholder: 'Type to populate results',
+          placeholderText: `Search for ${target.dataset.filterColumnValue}`,
+          searchHighlight: true
+        },
+        events: {
+          beforeOpen: async () => {
+            if (!this.#hasData(target) & !this.#hasSelections(target) ) {
+              const data = await optionsSearch();
+              target.slim.setData(data);
+            }
+          },
+          search: async (search, currentData) => {
+            const data = await optionsSearch(search);
+            const filteredData = data.filter(item => !currentData.some((selectedItem) => selectedItem.text == item.text ))
+            return filteredData;
+          },
+          beforeChange: this.#beforeChange(target, url),
+        }
+      });
+      const json = JSON.parse(target.dataset.filterSelected)
+      if(json.length) {
+        select.setData(json.map(item => ({ "text": item, "value": item })))
+        select.setSelected(json)
+      }
+    })
+  }
+
+  fetchOptions(url, target) {
+    return async (search) => {
+      const query = this.#buildQueryFilters(search, target);
+      const response = await fetch(`${url}?${query.toString()}`);
+      const data = await response.json();
+      return data;
+    }
+  }
+
+  #buildQueryFilters(search, target) {
+    const query = new URLSearchParams(window.location.search);
+    const otherFilters = this.selectTargets.filter(filter => filter != target);
+    otherFilters.forEach(function(filter) {
+      filter.slim.getSelected().forEach(val => {
+        const filterName = `${filter.name}[]`
+        if(query.has(filterName)) {
+          console.log("has the filter")
+          if(!query.get(`${filter.name}[]`).includes(val)) {
+            query.append(filterName, value)
+          }
+        } else {
+          query.append(filterName, value)
+        }
+      })
+    });
+    query.set(`q[${target.dataset.filterColumnValue}_i_cont]`, search || "");
+    return query;
+  }
+
+  #beforeChange(target, url) {
+    return () => {
+      const otherFilters = this.selectTargets.filter(filter => filter != target);
+      otherFilters.forEach(async target => {
+        if (this.#hasData(target)) {
+          const selected = target.slim.getSelected()
+          target.slim.setData(selected.map(text => ({ text })))
+          // setting data triggers a slim render, so need to also set selected again
+          target.slim.setSelected(selected)
+        }
+      })
+    return true;
+    }
+  }
+
+  #hasData(target) {
+    return target.slim.getData().length !== 0;
+  }
+
+  #hasSelections(target) {
+    return target.slim.getSelected().length !== 0;
+  }
+
+  #filtersForQuery() {
+    const predicates = this.predicateTargets.map(el => ({name: el.name, column_predicate: el.value}));
+    const filterValues = this.selectTargets.map(el => ({name: el.name, selections: el.slim.getSelected()}));
+    const mergedData = predicates.map(predicate => {
+      const matchingFilter = filterValues.find(filter => filter.name === predicate.name);
+      if (matchingFilter.selections.length > 0) {
+        return {...predicate, ...matchingFilter}
+      }
+    }).filter(el => el !== undefined);
+    return mergedData;
+  }
+
+  resetFilters(event) {
+    this.selectTargets.forEach(el => {
+      el.slim.setSelected([])
+    })
+    this.applyFilters(event)
+  }
+
+  applyFilters(e) {
+    e.preventDefault();
+    const searchParams = new URLSearchParams(window.location.search);
+    const filters = this.#filtersForQuery();
+    filters.forEach(filter => {
+      const name = `q[${filter.column_predicate}][]`
+      const selectedValues = searchParams.getAll(name)
+      filter.selections.forEach(selection => {
+        if(selectedValues) {
+          if(!selectedValues.includes(selection)) {
+            searchParams.append(name, selection)
+          }
+        } else {
+          searchParams.append(name, selection)
+        }
+      })
+    });
+    ['input[name="start_date"]', 'input[name="end_date"]'].forEach(selector => {
+      const el = document.querySelector(selector)
+      if(el.value.length) {
+        searchParams.delete("period")
+      }
+      searchParams.set(el.name, el.value);
+    });
+    Turbo.visit(window.location.pathname.replace(/\/$/, "")  + `?${searchParams.toString()}`)
+  }
+}

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

@@ -0,0 +1,17 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["delete"];
+  static values = {
+    columnPredicate: String,
+    category: String
+  }
+
+  remove(event) {
+    event.preventDefault();
+    this.dispatch('remove', {detail: {
+      paramKey: `q[${this.columnPredicateValue}]`,
+      paramValue: this.categoryValue
+    }})
+  }
+}

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

@@ -1,129 +1,143 @@
-import { Controller } from '@hotwired/stimulus';
+import {Controller} from "@hotwired/stimulus"
 import 'chartjs-plugin-datalabels';
-import { getCSS, externalTooltipHandler } from "helpers/chart_utils";
+const THOUSAND = 1000
+const HUNDRED_THOUSAND = 100000
+const MILLION = 1000000
+const HUNDRED_MILLION = 100000000
+const BILLION = 1000000000
+const HUNDRED_BILLION = 100000000000
+const TRILLION = 1000000000000
 
-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)
-  }
+function numberFormatter(num) {
+    if (num >= THOUSAND && num < MILLION) {
+        const thousands = num / THOUSAND
+        if (thousands === Math.floor(thousands) || num >= HUNDRED_THOUSAND) {
+            return Math.floor(thousands) + 'k'
+        } else {
+            return (Math.floor(thousands * 10) / 10) + 'k'
+        }
+    } else if (num >= MILLION && num < BILLION) {
+        const millions = num / MILLION
+        if (millions === Math.floor(millions) || num >= HUNDRED_MILLION) {
+            return Math.floor(millions) + 'M'
+        } else {
+            return (Math.floor(millions * 10) / 10) + 'M'
+        }
+    } else if (num >= BILLION && num < TRILLION) {
+        const billions = num / BILLION
+        if (billions === Math.floor(billions) || num >= HUNDRED_BILLION) {
+            return Math.floor(billions) + 'B'
+        } else {
+            return (Math.floor(billions * 10) / 10) + 'B'
+        }
+    } else {
+        return num
+    }
 }
 
 export default class extends Controller {
-  connect() {
-    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 = 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,
-      datasets: [
-        {
-          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',
-        },
-      ],
-    };
+    connect() {
+        const funnel = JSON.parse(this.element.dataset.data);
 
-    const config = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: [ChartDataLabels],
-      type: 'bar',
-      data,
-      options: {
-        layout: {
-          padding: 100,
-        },
-        plugins: {
-          legend: false,
-          tooltip: {
-            enabled: false,
-            position: 'nearest',
-            external: externalTooltipHandler(this)
-          },
-          datalabels: {
-            anchor: 'end',
-            align: 'end',
-            borderRadius: 4,
-            padding: {
-              top: 8, bottom: 8, right: 8, left: 8,
-            },
-            color: getCSS('--pc'),
-            textAlign: 'center',
-          },
-        },
-        scales: {
-          y: { display: false },
-          x: {
-            position: 'bottom',
-            display: true,
-            border: { display: false },
-            grid: { drawBorder: false, display: false },
-            ticks: {
-              padding: 8,
-            },
-          },
-        },
-      },
-    };
+        const getPalette = () => {
+            return {
+                dataLabelBackground: 'rgba(25, 30, 56, 0.97)',
+                dataLabelTextColor: 'rgb(243, 244, 246)',
+                visitorsBackground: 'rgb(99, 102, 241)',
+                dropoffBackground: '#2F3949',
+                dropoffStripes: 'rgb(25, 30, 56)',
+                stepNameLegendColor: 'rgb(228, 228, 231)',
+                visitorsLegendClass: 'bg-indigo-500',
+                dropoffLegendClass: 'bg-gray-600',
+                smallBarClass: 'bg-indigo-500'
+            }
+        }
 
-    const visitorsData = [];
 
-    this.chart = new Chart(
-      this.element,
-      config,
-    );
-  }
 
-  formatLabel(label) {
-    return label
-  }
+        var 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 calcBarThickness = (ctx) => {
+            if (ctx.dataset.data.length <= 3) {
+                return 160
+            } else {
+                return Math.floor(650 / ctx.dataset.data.length)
+            }
+        }
 
-  formatMetric(metric) {
-    return metric
-  }
+        const labels = funnel.steps.map((step) => step.step)
+        const stepData = funnel.steps.map((step) => step.count)
+        const dropOffData = funnel.steps.map((step) => step.drop_off)
 
+        const data = {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Visitors',
+                    data: stepData,
+                    borderRadius: 4,
+                    stack: 'Stack 0',
+                },
+                {
+                    label: 'Dropoff',
+                    data: dropOffData,
+                    borderRadius: 4,
+                    stack: 'Stack 0',
+                },
+            ],
+        }
 
-  extractTooltipData(tooltip) {
-    const data = this.funnel.steps.find(step => step.name === tooltip.title[0]);
+        console.log(data)
+        const config = {
+            responsive:true,
+            maintainAspectRatio: false,
+            plugins: [ChartDataLabels],
+            type: 'bar',
+            data: data,
+            options: {
+                layout: {
+                    padding: 100,
+                },
+                barThickness: calcBarThickness,
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: true,
+                        position: 'average',
+                    },
+                    datalabels: {
+                        anchor: 'end',
+                        align: 'end',
+                        borderRadius: 4,
+                        padding: { top: 8, bottom: 8, right: 8, left: 8 },
+                        font: { size: 12, weight: 'normal', lineHeight: 1.6, family: fontFamily },
+                        textAlign: 'center',
+                    },
+                },
+                scales: {
+                    y: { display: false },
+                    x: {
+                        position: 'bottom',
+                        display: true,
+                        border: { display: false },
+                        grid: { drawBorder: false, display: false },
+                        ticks: {
+                            padding: 8,
+                            font: { weight: 'bold', family: fontFamily, size: 14 },
+                            color: 'rgb(228, 228, 231)'
+                        },
+                    },
+                },
+            },
+        }
 
-    const value = data.total_events;
-    const label = "Visitors"
-    let comparisonLabel = "Dropoff"
-    let comparisonValue =  data.unique_visits;
+        const visitorsData = []
 
-    return {
-      comparison: true,
-      comparisonDifference: false,
-      metric: tooltip.title[0],
-      label: this.formatLabel(label),
-      labelBackgroundColor: getCSS('--bc'),
-      formattedValue: value,
-      comparisonLabel: comparisonLabel,
-      comparisonLabelBackgroundColor: "",
-      formattedComparisonValue: comparisonValue,
+        new Chart(
+            this.element,
+            config
+        );
     }
-  }
 }

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

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