ahoy_captain 0.77 → 0.82

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc2218d617b8530eb24d10b8f8cf8da63364fece7069a6610fb621c80eda9450
-  data.tar.gz: 6a9fd5388653ad8654062447fa564c81fc716c644d36cf00c64987c6d2627f3c
+  metadata.gz: c46c8a68d18711be0ceee5db679399c9945cd8735666cb44a5577e46e2371294
+  data.tar.gz: 28e7a6863f0b7b7d3c32298b08198f9fcbcf06ea6e2350d6aa998250f836fd80
 SHA512:
-  metadata.gz: 07c8677c2052fc124aa9e23338fcd75d8b963bf18d27a1f804e1e506e21bcc96e74803c0ae1cc051cae420fe572dd2144c1f2275e89ea20dba818e850a665da4
-  data.tar.gz: e8657c6e04703d68d105912a6bdf75335aa98eb38311c76214828d1cf5e35f351c368584fd39cd5c61ef2215adf8dfffae42afff763590cd1021d6d58522846d
+  metadata.gz: 8a238b7d58c0fe3c39ced96f0e3d33233d06fe78d4c83ede1a14d45ae07045cb9aeb8d22bd004ddf86a8e63eb657b938c9e90cf0b10f092c7677a34dffb2b207
+  data.tar.gz: 5bf02dd5c2de5db42618bc133a9b54e6cacb6602a9305dfdb1423a906a8f92a704ccc996ea63adfb6e30dbd1de70d96a518a88d9a7fbe9a7a27350f104f87ad8

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,15 @@
+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_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,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/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)})`
+    }
+    Chart.register(Chart.Colors)
+
+    new Chart(this.element,
+      {
+        type: 'line',
+        data: {
+          labels: Object.keys(this.dataValue),
+          datasets: [
+            {
+              label: this.labelValue,
+              data: Object.values(this.dataValue),
+              borderColor: getCSS('--p'),
+              backgroundColor: getCSS('--af'),
+              color: getCSS('--pc')
+            }
+          ]
+        },
+        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/components/ahoy_captain/filter/modal_component.html.erb

@@ -1,13 +1,14 @@
 <dialog id="<%= id %>" class="modal">
-  <form method="dialog" class="modal-box w-11/12 max-w-5xl" data-controller='filter' data-action="submit->filter#applyFilters reset->filter#resetFilters">
+  <div class="modal-box w-11/12 max-w-5xl">
     <fieldset>
       <h5><%= title %></h5>
       <%= modal_display %>
       <button class="btn btn-primary mt-4" type="submit">Apply</button>
       <button class="btn btn-primary mt-4" type="reset">Reset</button>
     </fieldset>
-  </form>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
+  </div>
+  <label  class="modal-backdrop">
+    <button onclick="event.preventDefault(); <%=id %>.close();">Close</button>
+  </label>
 </dialog>
+

data/app/components/ahoy_captain/filter/select_component.html.erb

@@ -1,21 +1,23 @@
-<fieldset class="flex space-x-4 items-end">
+<fieldset class="flex space-x-4 items-end" data-controller="predicate-select">
   <div class="flex flex-col w-[20%]">
     <label class="label"><%= label %></label>
-    <select class='select select-bordered' data-filter-target='predicate' name="<%= column %>">
-      <% predicates.each do |predicate| %>
-        <option value="<%= column %>_<%= predicate %>" <%= 'selected' if selected_predicate == "#{column}_#{predicate}" %>>
+    <select class='select select-bordered' data-action='change->predicate-select#handleChange'>
+      <% predicate_options.each do |predicate| %>
+        <option value="<%= option_value(predicate) %>" <%= 'selected' if selected_predicate == predicate %>>
           <%= predicate.to_s.humanize %>
         </option>
       <% end %>
     </select>
   </div>
+
   <select
+    data-predicate-select-target="select"
+    data-controller="search-select"
     class='w-[50%] border-base-content border-opacity-20 rounded-lg min-h-[3rem]'
-    name="<%= column %>"
-    multiple
-    data-filter-target="select"
-    data-filter-column-value="<%= column %>"
-    data-filter-url-value="<%= url %>"
-    data-filter-selected="<%= values %>"
-    ></select>
+    name="<%= column_name_with_predicate %>"
+    <% if multiple %>multiple<% end %>
+    data-search-select-query-value="q[<%= column %>_i_cont]"
+    data-search-select-url-value="<%= url %>"
+    data-search-select-selected-value="<%= values %>"
+  ></select>
 </fieldset>

data/app/components/ahoy_captain/filter/select_component.rb

@@ -1,17 +1,35 @@
 # frozen_string_literal: true
 
 class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
-  def initialize(label:, column:, url:, predicates:)
+  def initialize(label:, column:, url:, predicates:, form:, multiple: true)
     @label = label
     @column = column
     @url = url
     @predicates = predicates
+    @form = form
+    @multiple = multiple
   end
 
+  private
+
   def selected_predicate
     predicate_options.detect { |option| params.dig(:q, option) }
   end
 
+  def option_value(predicate)
+    name = "q[#{predicate}]"
+    name += "[]" if multiple
+    name
+  end
+
+  def column_name_with_predicate
+    if selected_predicate
+      option_value(selected_predicate)
+    else
+      option_value(predicate_options.first)
+    end
+  end
+
   def values
     predicate_options.each do |predicate|
       option = params.dig(:q, predicate)
@@ -23,10 +41,9 @@ class AhoyCaptain::Filter::SelectComponent < ViewComponent::Base
     []
   end
 
-  private
-
   def predicate_options
     @predicate_options ||= @predicates.map { |predicate| "#{@column}_#{predicate}" }
   end
-  attr_reader :label, :column, :url, :predicates
+
+  attr_reader :label, :column, :url, :predicates, :form, :multiple
 end