ahoy_captain 0.8 → 0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 42069eea6d1d5b65765678fa1d352cf462048c09ad5bbe69715f0f147f0a3856
-  data.tar.gz: cd0fab7a2a262b89f5688374cb566b482f0a9909b5358db5b02c9d3480f4ed21
+  metadata.gz: c7334ddf143eb3d28e42766a6cc39f1acc5ee733679e5824399d668f349e1f68
+  data.tar.gz: 98735c61175fe289a4ffc73c6ac395c540c603d1a05ca95e1369eb5619081a99
 SHA512:
-  metadata.gz: 464affe93d6d8ebfec8baf55f989a8402a6e265247259894c4f01a22b32047bc3cda4238c3e22ea06a7e6dae088353f23ed1a94cc65899ea24c7096b49a0d031
-  data.tar.gz: 22b2352c2a7c9a21b8999292ee1bff64b87bc3306dd6ecb9f7e6f0c787306a3ec2132850c8954f15bac01e830f624a961bee868d7e3c8c5d3718d3b0b6946954
+  metadata.gz: 737b08e21d4ea18f634ff5c19e10d0f9bc21f73eba746c93cc1f74f6459ebb9f8d95d7ca7ee82236bcb163cfbf6642acb30a547cc710c3d5e63abcaa4d49c1f6
+  data.tar.gz: 00dd0823f703ce906e201dd227b33a4cc0606f6d67680c63c1a1c6231110557e18ccfbb81a6964b601ba30a81fd8bd72a618b3da407f40c7f91181ed3cc6472a

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>
+<a href="https://github.com/joshmn/ahoy_captain/blob/main/ss.png"><img src="ss.png" 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,24 @@ $ bundle add ahoy_captain
 $ rails g ahoy_captain:install
 ```
 
-### 3. Star this repo
+### 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`. 
+
+For a quick sanity check:
+
+```ruby
+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.
+
+### 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 +60,12 @@ If you have a large dataset (> 1GB) you probably want some indexes. `rails g aho
     * Device type
     * OS
     * UTM tags
+    * Goal
+* CSV exports
 
 ## Coming soon ™️
 
 * Date comparison
-* More filters
-* CSV exports
 
 ## Contributors
 
@@ -65,7 +73,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,14 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["link"]
+  connect() {
+    this.handleLinkClick = (event) => {
+      this.linkTargets.forEach(link => link.classList.remove('text-primary', 'font-semibold'))
+      event.target.classList.add('text-primary', 'font-semibold')
+    }
+    this.linkTargets.forEach(link => {
+      link.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,13 @@
-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() {
+    if (new URLSearchParams(window.location.search).get('period') === 'realtime') {
+      this.element.querySelectorAll('turbo-frame').forEach((frame) => {
+        setInterval(() => {
+          frame.reload();
+        }, 1000 * 30);
+      });
     }
-
+  }
 }

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

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

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

@@ -1,117 +1,87 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 import 'chartjs-plugin-datalabels';
-const THOUSAND = 1000
-const HUNDRED_THOUSAND = 100000
-const MILLION = 1000000
-const HUNDRED_MILLION = 100000000
-const BILLION = 1000000000
-const HUNDRED_BILLION = 100000000000
-const TRILLION = 1000000000000
-
-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() {
-        const funnel = JSON.parse(this.element.dataset.data);
+  connect() {
+    const 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 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 data = {
-            labels: labels,
-            datasets: [
-                {
-                    label: 'Visitors',
-                    data: stepData,
-                    borderRadius: 4,
-                    stack: 'Stack 0',
-                },
-                {
-                    label: 'Dropoff',
-                    data: dropOffData,
-                    borderRadius: 4,
-                    stack: 'Stack 0',
-                },
-            ],
-        }
+    const data = {
+      labels,
+      datasets: [
+        {
+          label: 'Visitors',
+          data: stepData,
+          borderRadius: 4,
+          stack: 'Stack 0',
+        },
+        {
+          label: 'Dropoff',
+          data: dropOffData,
+          borderRadius: 4,
+          stack: 'Stack 0',
+        },
+      ],
+    };
 
-        const config = {
-            responsive:true,
-            maintainAspectRatio: false,
-            plugins: [ChartDataLabels],
-            type: 'bar',
-            data: data,
-            options: {
-                layout: {
-                    padding: 100,
-                },
-                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 config = {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: [ChartDataLabels],
+      type: 'bar',
+      data,
+      options: {
+        layout: {
+          padding: 100,
+        },
+        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 visitorsData = []
+    const visitorsData = [];
 
-        new Chart(
-            this.element,
-            config
-        );
-    }
+    new Chart(
+      this.element,
+      config,
+    );
+  }
 }

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

@@ -1,3 +1,4 @@
-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);

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

@@ -1,10 +1,10 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
   handleChange(event) {
     const url = new URL(event.target.form.action);
     const interval = event.target.value;
-    url.searchParams.set("interval", interval)
-    event.target.closest('turbo-frame').src = url.href
+    url.searchParams.set('interval', interval);
+    event.target.closest('turbo-frame').src = url.href;
   }
 }

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

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static values = {
+    data: Object,
+    label: String
+  }
+  connect() {
+    const getCSS = (varname) => {
+      return `hsl(${getComputedStyle(document.documentElement).getPropertyValue(varname)})`
+    }
+
+    new Chart(this.element,
+      {
+        type: 'line',
+        data: {
+          labels: Object.keys(this.dataValue),
+          datasets: [
+            {
+              label: this.labelValue,
+              data: Object.values(this.dataValue),
+              borderColor: getCSS('--s'),
+              backgroundColor: getCSS('--sc'),
+              color: getCSS('--sf')
+            }
+          ]
+        },
+        plugins: {
+          colors: {
+            forceOverride: true
+          }
+        }
+      },
+    )
+
+  }
+}

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

@@ -0,0 +1,10 @@
+import {Controller} from "@hotwired/stimulus"
+import SlimSelect from 'slim-select'
+
+export default class extends Controller {
+  static targets = ["select"]
+
+  handleChange(event) {
+    this.selectTarget.name = event.target.value
+  }
+}

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

@@ -1,13 +1,14 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ["label"]
+  static targets = ['label'];
 
   connect() {
-    this.reload = this.reload.bind(this)
-    this.setLabel = this.setLabel.bind(this)
+    this.reload = this.reload.bind(this);
+    this.setLabel = this.setLabel.bind(this);
     this.labelCount = 0;
-
+    this.reloadInterval = setInterval(this.reload, 1000 * 30);
+    this.labelInterval = setInterval(this.setLabel, 1000);
   }
 
   reload() {
@@ -17,11 +18,11 @@ export default class extends Controller {
 
   setLabel() {
     this.labelTarget.title = `Last updated ${this.labelCount} seconds ago`;
-    this.labelCount += 1
+    this.labelCount += 1;
   }
 
   disconnect() {
-    clearInterval(this.labelInterval)
-    clearInterval(this.reloadInterval)
+    clearInterval(this.labelInterval);
+    clearInterval(this.reloadInterval);
   }
 }

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

@@ -0,0 +1,65 @@
+import {Controller} from "@hotwired/stimulus"
+import SlimSelect from 'slim-select'
+
+export default class extends Controller {
+  static values = {
+    query: String,
+    url: String,
+    selected: Array
+  }
+
+  connect() {
+    this.loadedInitialData = false;
+    this.search = this.search.bind(this)
+    this.select = new SlimSelect({
+      select: this.element,
+      data: [],
+      settings: {
+        contentPosition: 'relative',
+        contentLocation: this.element.closest('fieldset'),
+        searchText: 'Sorry, no results found',
+        searchPlaceholder: 'Type to populate results',
+        placeholderText: `Search`,
+        searchHighlight: true
+      },
+      events: {
+        beforeOpen: async () => {
+          if (!this.loadedInitialData) {
+            const data = await this.search("");
+            this.select.setData(data);
+            this.loadedInitialData = true
+          }
+        },
+        search: this.search
+      }
+    });
+
+    if(this.selectedValue.length) {
+      this.select.setData(this.selectedValue.map(item => ({ "text": item, "value": item })))
+      this.select.setSelected(this.selectedValue)
+    }
+  }
+
+  async search(query) {
+    const searchParams = new URLSearchParams(window.location.search);
+    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.append(key, value)
+    }
+
+    searchParams.delete(this.element.name);
+    searchParams.set(this.queryValue, query);
+
+    const response = await fetch(`${this.urlValue}?${searchParams.toString()}`);
+    const data = await response.json();
+    return data;
+  }
+
+}

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

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Connects to data-controller="toggle"
+export default class extends Controller {
+  static targets = ['toggleable'];
+  static values = {
+    enable: Boolean
+  }
+
+  trigger() {
+    if (this.enableValue) {
+      this.toggleableTargets.forEach(element => {
+        element.classList.toggle('hidden');
+      });
+    }
+  }
+}

data/app/components/ahoy_captain/dropdown_button_component.html.erb

@@ -1,16 +1,16 @@
 <div class="dropdown dropdown-end">
-  <label 
-    tabindex="0" 
-    class="btn btn-ghost dark:hover:bg-neutral flex" 
+  <label
+    tabindex="0"
+    class="btn btn-ghost dark:hover:bg-neutral flex"
     >
     <%= header_icon %>
     <span><%= title %></span>
   </label>
-  <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+  <ul class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box">
     <% options.each do |option| %>
       <li>
         <%= option %>
       <li>
     <% end %>
   </ul>
-</div>
+</div>