ahoy_captain 0.76 → 0.81

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bdbe217ea7df263239572663d05816b79847f65f7c4ec9dfa120749c0f5b45d3
-  data.tar.gz: 6176d55f8d2502a46891032ddfd51043fe4c4e7bd5efb9ac754d7e1576e4f866
+  metadata.gz: be1cf9a1c2b19db594abc06b05d15085bc180fe720986671f9016f1d660feec5
+  data.tar.gz: e447a70fc694ae39ad8500661a5726eb73ecd4777a0c6d9b4f4bc7d1fdee0541
 SHA512:
-  metadata.gz: 6ec21ec3864bfb7b6d87fa65df0b1cb67879cd8cdd9b25c246bec2ccf9dac72d9858bfef19e9d0fb590dac11d5cb4dad491d81f5a81ca87532254051c2cb335b
-  data.tar.gz: 9a0a6fba58462a0aaea1ee6d5536e21c7ca5c40c4332c89688ae99409e94495ee7215b31aa948ee9123b10f821b9405742f3f4946ee5c50b96f156476f6ae80a
+  metadata.gz: cef676f367fd05a6b080db63106ab748347b32316f93245a1b1f1bed2bca99a1cb6df185b168721629eae537d14167ef494fc42f6ad1cb24d9eabbd1160ae0f1
+  data.tar.gz: af29e7be6843d2ceb9922b5e234219c6466e72dda75d992078cf6a95c20e52fe62f6e870f6eaef68d546d00beaf4179222b4bd504eee2666274e571bc158f2d3

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,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_controller.js

@@ -1,12 +1,14 @@
-import {Controller} from "@hotwired/stimulus"
-import SlimSelect from 'slim-select'
+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'];
+
+  static targets = ['select', 'predicate'];
+
   connect() {
     this.selectTargets.forEach(async (target) => {
       const url = target.dataset.filterUrlValue;
@@ -20,29 +22,30 @@ export default class extends Controller {
           searchText: 'Sorry, no results found',
           searchPlaceholder: 'Type to populate results',
           placeholderText: `Search for ${target.dataset.filterColumnValue}`,
-          searchHighlight: true
+          searchHighlight: true,
         },
         events: {
           beforeOpen: async () => {
-            if (!this.#hasData(target) & !this.#hasSelections(target) ) {
+            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 ))
+            // eslint-disable-next-line max-len
+            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)
+      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) {
@@ -51,42 +54,41 @@ export default class extends Controller {
       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)
+    const otherFilters = this.selectTargets.filter((filter) => filter !== target);
+    otherFilters.forEach((filter) => {
+      filter.slim.getSelected().forEach((val) => {
+        const filterName = `${filter.name}[]`;
+        if (query.has(filterName)) {
+          if (!query.get(`${filter.name}[]`).includes(val)) {
+            query.append(filterName, val);
           }
         } else {
-          query.append(filterName, value)
+          query.append(filterName, val);
         }
-      })
+      });
     });
-    query.set(`q[${target.dataset.filterColumnValue}_i_cont]`, search || "");
+    query.set(`q[${target.dataset.filterColumnValue}_i_cont]`, search || '');
     return query;
   }
 
-  #beforeChange(target, url) {
+  #beforeChange(target) {
     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 })))
+      const otherFilters = this.selectTargets.filter((filter) => filter !== target);
+      otherFilters.forEach(async (filter) => {
+        if (this.#hasData(filter)) {
+          const selected = filter.slim.getSelected();
+          filter.slim.setData(selected.map((text) => ({ text })));
           // setting data triggers a slim render, so need to also set selected again
-          target.slim.setSelected(selected)
+          filter.slim.setSelected(selected);
         }
-      })
-    return true;
-    }
+      });
+      return true;
+    };
   }
 
   #hasData(target) {
@@ -98,48 +100,52 @@ export default class extends Controller {
   }
 
   #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);
+    // eslint-disable-next-line max-len
+    const predicates = this.predicateTargets.map((el) => ({ name: el.name, column_predicate: el.value }));
+    // eslint-disable-next-line max-len
+    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}
+        return { ...predicate, ...matchingFilter };
       }
-    }).filter(el => el !== undefined);
+      return undefined;
+    }).filter((el) => el !== undefined);
     return mergedData;
   }
 
   resetFilters(event) {
-    this.selectTargets.forEach(el => {
-      el.slim.setSelected([])
-    })
-    this.applyFilters(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)
+    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)
+          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")
+    ['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()}`)
+
+    Turbo.visit(`${window.location.pathname.replace(/\/$/, '')}?${searchParams.toString()}`);
   }
 }

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,143 +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);
-
-        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'
-            }
-        }
-
+  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);
 
-        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)
-            }
-        }
+    const data = {
+      labels,
+      datasets: [
+        {
+          label: 'Visitors',
+          data: stepData,
+          borderRadius: 4,
+          stack: 'Stack 0',
+        },
+        {
+          label: 'Dropoff',
+          data: dropOffData,
+          borderRadius: 4,
+          stack: 'Stack 0',
+        },
+      ],
+    };
 
-        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',
-                },
-            ],
-        }
-
-        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 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

@@ -0,0 +1,10 @@
+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;
+  }
+}

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

@@ -1,43 +1,43 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ["countriesLink", "top_pagesLink", "devicesLink", "top_sourcesLink"]
-  static classes = ["countries", "top_pages", "devices", "top_sources"]
+  static targets = ['countriesLink', 'top_pagesLink', 'devicesLink', 'top_sourcesLink'];
+
+  static classes = ['countries', 'top_pages', 'devices', 'top_sources'];
 
   changeCountries(event) {
-    console.log(...this.countriesClasses)
-    event.currentTarget.classList.add(...this.countriesClasses)
+    event.currentTarget.classList.add(...this.countriesClasses);
     this.countriesLinkTargets.forEach((target) => {
-      if (target != event.currentTarget) {
-        target.classList.remove(...this.countriesClasses)
+      if (target !== event.currentTarget) {
+        target.classList.remove(...this.countriesClasses);
       }
-    })
+    });
   }
 
   changeTopSources(event) {
-    event.currentTarget.classList.add(...this.top_sourcesClasses)
+    event.currentTarget.classList.add(...this.top_sourcesClasses);
     this.top_sourcesLinkTargets.forEach((target) => {
-      if (target != event.currentTarget) {
-        target.classList.remove(...this.top_sourcesClasses)
+      if (target !== event.currentTarget) {
+        target.classList.remove(...this.top_sourcesClasses);
       }
-    })
+    });
   }
-  
+
   changeTopPages(event) {
-    event.currentTarget.classList.add(...this.top_pagesClasses)
+    event.currentTarget.classList.add(...this.top_pagesClasses);
     this.top_pagesLinkTargets.forEach((target) => {
-      if (target != event.currentTarget) {
-        target.classList.remove(...this.top_pagesClasses)
+      if (target !== event.currentTarget) {
+        target.classList.remove(...this.top_pagesClasses);
       }
-    })
+    });
   }
 
   changeDevices(event) {
-    event.currentTarget.classList.add(...this.devicesClasses)
+    event.currentTarget.classList.add(...this.devicesClasses);
     this.devicesLinkTargets.forEach((target) => {
-      if (target != event.currentTarget) {
-        target.classList.remove(...this.devicesClasses)
+      if (target !== event.currentTarget) {
+        target.classList.remove(...this.devicesClasses);
       }
-    })
+    });
   }
-}
+}