ahoy_captain 0.8 → 0.10.0

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

@@ -1,117 +1,129 @@
-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
+import { getCSS, externalTooltipHandler } from "helpers/chart_utils";
 
-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
-    }
+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() {
-        const funnel = JSON.parse(this.element.dataset.data);
+  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 = 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 = 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: 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,
+          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',
+        },
+      ],
+    };
 
-        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: 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 visitorsData = [];
+
+    this.chart = new Chart(
+      this.element,
+      config,
+    );
+  }
+
+  formatLabel(label) {
+    return label
+  }
+
+  formatMetric(metric) {
+    return metric
+  }
+
+
+  extractTooltipData(tooltip) {
+    const data = this.funnel.steps.find(step => step.name === tooltip.title[0]);
 
-        const visitorsData = []
+    const value = data.total_events;
+    const label = "Visitors"
+    let comparisonLabel = "Dropoff"
+    let comparisonValue =  data.unique_visits;
 
-        new Chart(
-            this.element,
-            config
-        );
+    return {
+      comparison: true,
+      comparisonDifference: false,
+      metric: tooltip.title[0],
+      label: this.formatLabel(label),
+      labelBackgroundColor: getCSS('--bc'),
+      formattedValue: value,
+      comparisonLabel: comparisonLabel,
+      comparisonLabelBackgroundColor: "",
+      formattedComparisonValue: comparisonValue,
     }
+  }
 }

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,15 @@
-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;
+    document.querySelectorAll('a[data-turbo-frame="chart"]').forEach(el => {
+      const url = new URL(el.href);
+      url.searchParams.set('interval', interval);
+      el.href = url.href
+    })
   }
 }

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

@@ -0,0 +1,188 @@
+import { Controller } from '@hotwired/stimulus';
+import { getCSS, externalTooltipHandler, dateFormatter, metricFormatter } 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)
+  }
+}
+
+const footer = (tooltipItems) => {
+  let sum = 0;
+
+  tooltipItems.forEach(function(tooltipItem) {
+    sum += tooltipItem.parsed.y;
+  });
+  return 'Sum: ' + sum;
+};
+
+export default class extends Controller {
+  static values = {
+    current: Object,
+    comparedTo: Object,
+    interval: String,
+    label: String,
+    metric: String,
+    comparison: String
+  }
+
+  connect() {
+    const onClick = (e) => {
+      const element = this.chart.getElementsAtEventForMode(e, 'index', { intersect: false })[0];
+      const searchParams = new URLSearchParams(window.location.search);
+
+      searchParams.delete('period')
+      searchParams.delete('start_date')
+      searchParams.delete('end_date')
+      searchParams.delete('compare_to_start_date')
+      searchParams.delete('compare_to_end_date')
+      searchParams.set('date', Object.keys(this.currentValue)[element.index])
+
+      Turbo.visit(window.location.pathname + "?" + searchParams.toString())
+    }
+    const datasets = [
+      {
+        label: Object.keys(this.currentValue),
+        data: Object.values(this.currentValue),
+        borderColor: getCSS('--a'),
+        backgroundColor: getCSS('--a'),
+        color: getCSS('--bc'),
+        yAxisID: 'y',
+      }
+    ]
+
+    if(this.hasComparedToValue) {
+      datasets.push({
+        label: Object.keys(this.comparedToValue),
+        data: Object.values(this.comparedToValue),
+        borderColor: getCSS('--s', 0.8),
+        backgroundColor: getCSS('--s', 0.8),
+        color: getCSS('--bc'),
+        yAxisID: 'yComparison',
+      })
+    }
+
+    const calculateMaximumY = function(dataset) {
+      if (dataset) {
+        return Math.max(Object.values(dataset))
+      } else {
+        return 1
+      }
+    }
+
+    const typeForDate = this.comparisonValue === 'year' ? 'long' : "short"
+    this.chart = new Chart(this.element,
+      {
+        type: 'line',
+        data: {
+          labels: Object.keys(this.currentValue),
+          datasets: datasets
+        },
+        options: {
+          onClick: onClick,
+          responsive: true,
+          maintainAspectRatio: false,
+          interaction: {
+            intersect: false,
+            mode: 'index',
+          },
+          plugins: {
+            legend: false,
+            tooltip: {
+              enabled: false,
+              position: 'nearest',
+              external: externalTooltipHandler(this)
+            }
+          },
+          scales: {
+            y: {
+              min: 0,
+              suggestedMax: calculateMaximumY(this.currentValue),
+              ticks: {
+              },
+              grid: {
+                zeroLineColor: 'transparent',
+                drawBorder: false,
+              }
+            },
+            yComparison: {
+              min: 0,
+              suggestedMax: calculateMaximumY(this.currentValue),
+              display: false,
+              grid: { display: false },
+            },
+            x: {
+              ticks: {
+                grid: { display: false },
+
+                color: getCSS('--bc'),
+                callback: (val, idx) => {
+                  if(idx % 2 == 0) {
+                    const date = Object.keys(this.currentValue)[val];
+                    return dateFormatter[this.intervalValue](date, typeForDate)
+                  } else {
+                    return ""
+                  }
+
+                }
+              }
+            }
+          },
+          elements: {
+            point: {
+              radius: 0
+            }
+          }
+        }
+      },
+    );
+  }
+
+  formatLabel(label) {
+    return dateFormatter[this.intervalValue](label, 'long')
+  }
+
+  formatMetric(value) {
+    return metricFormatter[this.metricValue](value)
+  }
+
+  resize() { this.chart.resize() };
+
+  extractTooltipData(tooltip) {
+    const data = this.chart.config.data.datasets.find((set) => set.yAxisID == "y")
+    const comparisonData = this.chart.config.data.datasets.find((set) => set.yAxisID == "yComparison");
+    const dataIndex = this.chart.config.data.datasets.indexOf(data)
+    const comparisonDataIndex = this.chart.config.data.datasets.indexOf(comparisonData);
+
+    const tooltipData = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == dataIndex)
+    const label = data.label[tooltipData.dataIndex];
+    let comparisonLabel = false
+    let comparisonValue = false
+    let comparisonLabelBackgroundColor = false
+    if(this.hasComparedToValue) {
+      const tooltipComparisonData = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == comparisonDataIndex);
+      comparisonLabel = comparisonData.label[tooltipComparisonData.dataIndex];
+      comparisonValue = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == comparisonDataIndex)?.raw || 0
+      comparisonLabelBackgroundColor = comparisonData.backgroundColor
+    }
+
+    const value = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == dataIndex)?.raw || 0
+
+    return {
+      comparison: this.hasComparedToValue,
+      comparisonDifference: calculatePercentageDifference(comparisonValue, value),
+      metric: this.labelValue,
+      label: this.formatLabel(label),
+      labelBackgroundColor: data.backgroundColor,
+      formattedValue: this.formatMetric(value),
+      comparisonLabel: this.formatLabel(comparisonLabel),
+      comparisonLabelBackgroundColor: comparisonLabelBackgroundColor,
+      formattedComparisonValue: this.formatMetric(comparisonValue)
+    }
+  }
+}

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

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

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

@@ -0,0 +1,8 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+
+  handleChange(event) {
+    document.querySelector('turbo-frame#goals').src = event.target.value
+  }
+}

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

@@ -0,0 +1,46 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['name', 'value'];
+
+  connect() {
+    this.init = this.init.bind(this)
+
+    const interval = setInterval(() => {
+      if(window.comboboxConnected === 2) {
+        clearInterval(interval);
+        this.init()
+      }
+    }, 100)
+
+  }
+
+  init() {
+
+    if(this.nameTarget.value) {
+      this.valueTarget.combobox.element.dataset.comboboxQueryValue = `q[properties.${this.nameTarget.value}_i_cont]`
+    }
+
+    this.nameTarget.addEventListener("change", (event) => {
+      if(event.target.value) {
+        event.target.dataset.column = event.target.value;
+        this.valueTarget.combobox.element.dataset.comboboxQueryValue = `q[properties.${event.target.value}_i_cont]`
+        this.valueTarget.combobox.setDisabled(false)
+        this.valueTarget.combobox.isOpenValue = false
+      } else {
+        this.valueTarget.combobox.setSelected([])
+        this.valueTarget.combobox.setDisabled(true)
+      }
+    })
+    this.valueTarget.addEventListener("change", (event) => {
+      if(event.target.value.length > 0) {
+        this.valueTarget.name = `q[properties.${this.nameTarget.dataset.column}_in]`
+      } else {
+        this.valueTarget.name = null
+        this.valueTarget.combobox.element.dataset.comboboxQueryValue = ""
+      }
+    })
+
+  }
+
+}

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

@@ -1,13 +1,16 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ["label"]
-
+  static targets = ['label'];
+  static values = {
+    interval: Number
+  }
   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 * this.intervalValue);
+    this.labelInterval = setInterval(this.setLabel, 1000);
   }
 
   reload() {
@@ -17,11 +20,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/tile_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ["title"]
+  setTitle(event) {
+    this.titleTarget.innerHTML = event.target.title || event.target.text
+  }
+
+}

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');
+      });
+    }
+  }
+}