rails_pulse 0.2.3 → 0.2.5.pre.pre.2

data/app/helpers/rails_pulse/tags_helper.rb

@@ -1,5 +1,43 @@
 module RailsPulse
   module TagsHelper
+    # Render a single tag badge
+    # Options:
+    # - variant: :default (no class), :secondary, :positive
+    # - removable: boolean - whether to include a remove button
+    # - taggable_type: string - type of taggable object (for remove button)
+    # - taggable_id: integer - id of taggable object (for remove button)
+    def render_tag_badge(tag, variant: :default, removable: false, taggable_type: nil, taggable_id: nil)
+      badge_class = case variant
+      when :secondary
+        "badge badge--secondary font-normal"
+      when :positive
+        "badge badge--positive font-normal"
+      else
+        "badge font-normal"
+      end
+
+      if removable && taggable_type && taggable_id
+        # For removable tags, render the full structure with button_to
+        content_tag(:span, class: badge_class) do
+          concat tag.humanize
+          concat " "
+          concat(
+            button_to(
+              remove_tag_path(taggable_type, taggable_id, tag: tag),
+              method: :delete,
+              class: "tag-remove",
+              data: { turbo_frame: "_top" }
+            ) do
+              content_tag(:span, "×", "aria-hidden": "true")
+            end
+          )
+        end
+      else
+        # For non-removable tags, just render the badge
+        content_tag(:span, tag, class: badge_class)
+      end
+    end
+
     # Display tags as badge elements
     # Accepts:
     # - Taggable objects (with tag_list method)
@@ -23,7 +61,7 @@ module RailsPulse
 
       return content_tag(:span, "-", class: "text-subtle") if tag_array.empty?
 
-      safe_join(tag_array.map { |tag| content_tag(:div, tag, class: "badge") }, " ")
+      safe_join(tag_array.map { |tag| content_tag(:div, tag.humanize, class: "badge") }, " ")
     end
   end
 end

data/app/javascript/rails_pulse/application.js

@@ -12,6 +12,7 @@ import PopoverController from "./controllers/popover_controller";
 import FormController from "./controllers/form_controller";
 
 // Rails Pulse Controllers
+import ChartController from "./controllers/chart_controller";
 import IndexController from "./controllers/index_controller";
 import ColorSchemeController from "./controllers/color_scheme_controller";
 import PaginationController from "./controllers/pagination_controller";
@@ -29,7 +30,7 @@ const application = Application.start();
 application.debug = false;
 window.Stimulus = application;
 
-// Make ECharts available globally for rails_charts gem
+// Make ECharts available globally for chart rendering
 window.echarts = echarts;
 
 // Make Turbo available globally
@@ -42,6 +43,7 @@ application.register("rails-pulse--menu", MenuController);
 application.register("rails-pulse--popover", PopoverController);
 application.register("rails-pulse--form", FormController);
 
+application.register("rails-pulse--chart", ChartController);
 application.register("rails-pulse--index", IndexController);
 application.register("rails-pulse--color-scheme", ColorSchemeController);
 application.register("rails-pulse--pagination", PaginationController);
@@ -96,59 +98,6 @@ echarts.registerTheme('railspulse', {
   "bar": { "itemStyle": { "barBorderWidth": 0 } }
 });
 
-// Chart resize functionality (moved from inline script for CSP compliance)
-window.addEventListener('resize', function() {
-  if (window.RailsCharts && window.RailsCharts.charts) {
-    Object.keys(window.RailsCharts.charts).forEach(function(chartID) {
-      window.RailsCharts.charts[chartID].resize();
-    });
-  }
-});
-
-// Apply axis label colors based on current color scheme
-function applyChartAxisLabelColors() {
-  if (!window.RailsCharts || !window.RailsCharts.charts) return;
-  const scheme = document.documentElement.getAttribute('data-color-scheme');
-  const isDark = scheme === 'dark';
-  const axisColor = isDark ? '#ffffff' : '#999999';
-  Object.keys(window.RailsCharts.charts).forEach(function(chartID) {
-    const chart = window.RailsCharts.charts[chartID];
-    try {
-      chart.setOption({
-        xAxis: { axisLabel: { color: axisColor } },
-        yAxis: { axisLabel: { color: axisColor } }
-      });
-    } catch (e) {
-      // noop
-    }
-  });
-}
-
-// Initial apply after charts initialize and on scheme changes
-document.addEventListener('DOMContentLoaded', () => {
-  // run shortly after load to allow charts to initialize
-  setTimeout(applyChartAxisLabelColors, 50);
-});
-document.addEventListener('rails-pulse:color-scheme-changed', applyChartAxisLabelColors);
-
-// Global function to initialize Rails Charts in any container.
-// This is needed as we render Rails Charts in Turbo Frames.
-window.initializeChartsInContainer = function(containerId) {
-  requestAnimationFrame(() => {
-    const container = containerId ? document.getElementById(containerId) : document;
-    const scripts = container.querySelectorAll('script');
-    scripts.forEach(script => {
-      const content = script.textContent;
-      const match = content.match(/function\s+(init_rails_charts_[a-f0-9]+)/);
-      if (match && window[match[1]]) {
-        window[match[1]]();
-      }
-    });
-    // ensure colors are correct for any charts initialized in this container
-    setTimeout(applyChartAxisLabelColors, 10);
-  });
-};
-
 // Export for global access
 window.RailsPulse = {
   application,

data/app/javascript/rails_pulse/controllers/chart_controller.js

@@ -0,0 +1,333 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    type: String,        // "bar", "line", "area", "sparkline"
+    data: Object,        // Chart data
+    options: Object,     // ECharts configuration
+    theme: String        // ECharts theme
+  }
+
+  connect() {
+    this.initializeChart()
+    this.handleColorSchemeChange = this.onColorSchemeChange.bind(this)
+    document.addEventListener('rails-pulse:color-scheme-changed', this.handleColorSchemeChange)
+  }
+
+  disconnect() {
+    document.removeEventListener('rails-pulse:color-scheme-changed', this.handleColorSchemeChange)
+    this.disposeChart()
+  }
+
+  // Main initialization with retry logic
+  initializeChart() {
+    this.retryCount = 0
+    this.maxRetries = 100 // 5 seconds
+    this.attemptInit()
+  }
+
+  attemptInit() {
+    if (typeof echarts === 'undefined') {
+      this.retryCount++
+      if (this.retryCount >= this.maxRetries) {
+        console.error('[RailsPulse] echarts not loaded after 5 seconds for', this.element.id)
+        this.showError()
+        return
+      }
+      setTimeout(() => this.attemptInit(), 50)
+      return
+    }
+
+    this.renderChart()
+  }
+
+  renderChart() {
+    try {
+      // Initialize chart
+      this.chart = echarts.init(this.element, this.themeValue || 'railspulse')
+
+      // Build and set options
+      const config = this.buildChartConfig()
+      this.chart.setOption(config)
+
+      // Apply current color scheme
+      this.applyColorScheme()
+
+      // Dispatch event for other controllers (event-based communication)
+      document.dispatchEvent(new CustomEvent('stimulus:echarts:rendered', {
+        detail: {
+          containerId: this.element.id,
+          chart: this.chart,
+          controller: this
+        }
+      }))
+
+      // Responsive resize
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      })
+      this.resizeObserver.observe(this.element)
+
+      // Mark as rendered for tests
+      this.element.setAttribute('data-chart-rendered', 'true')
+
+    } catch (error) {
+      console.error('[RailsPulse] Error initializing chart:', error)
+      this.showError()
+    }
+  }
+
+  buildChartConfig() {
+    // Start with provided options
+    const config = { ...this.optionsValue }
+
+    // Process formatters (convert function strings to actual functions)
+    this.processFormatters(config)
+
+    // Set data (xAxis and series)
+    this.setChartData(config)
+
+    return config
+  }
+
+  setChartData(config) {
+    const data = this.dataValue
+
+    // Extract labels and values
+    const labels = Object.keys(data).map(k => {
+      const num = Number(k)
+      return isNaN(num) ? k : num
+    })
+
+    const values = Object.values(data).map(v => {
+      if (typeof v === 'object' && v !== null) {
+        return v.value !== undefined ? v.value : v
+      }
+      return v
+    })
+
+    // Set xAxis data
+    config.xAxis = config.xAxis || {}
+    config.xAxis.type = 'category'
+    config.xAxis.data = labels
+
+    // Set yAxis
+    config.yAxis = config.yAxis || {}
+    config.yAxis.type = 'value'
+
+    // Set series data
+    if (Array.isArray(config.series)) {
+      // If series is already an array, update first series
+      config.series[0] = config.series[0] || {}
+      config.series[0].type = this.typeValue
+      config.series[0].data = values
+    } else if (config.series && typeof config.series === 'object') {
+      // If series is a single object (from helper), convert to array
+      const seriesConfig = { ...config.series }
+      config.series = [{
+        type: this.typeValue,
+        data: values,
+        ...seriesConfig
+      }]
+    } else {
+      // No series provided, create default
+      config.series = [{
+        type: this.typeValue,
+        data: values
+      }]
+    }
+  }
+
+  processFormatters(config) {
+    // Process tooltip formatter
+    if (config.tooltip?.formatter && typeof config.tooltip.formatter === 'string') {
+      config.tooltip.formatter = this.parseFormatter(config.tooltip.formatter)
+    }
+
+    // Process xAxis formatter
+    if (config.xAxis?.axisLabel?.formatter && typeof config.xAxis.axisLabel.formatter === 'string') {
+      config.xAxis.axisLabel.formatter = this.parseFormatter(config.xAxis.axisLabel.formatter)
+    }
+
+    // Process yAxis formatter
+    if (config.yAxis?.axisLabel?.formatter && typeof config.yAxis.axisLabel.formatter === 'string') {
+      config.yAxis.axisLabel.formatter = this.parseFormatter(config.yAxis.axisLabel.formatter)
+    }
+  }
+
+  parseFormatter(formatterString) {
+    // Remove function markers if present
+    const cleanString = formatterString.replace(/__FUNCTION_START__|__FUNCTION_END__/g, '')
+
+    // If it's a function string, use safe formatter registry instead of eval()
+    if (cleanString.trim().startsWith('function')) {
+      // Extract formatter logic using safe parsing
+      // Rather than eval(), we match against known safe patterns
+      return this.getSafeFormatter(cleanString)
+    }
+    return cleanString
+  }
+
+  /**
+   * Returns a safe formatter function based on the formatter string.
+   * This prevents arbitrary code execution by using a whitelist approach.
+   *
+   * Security: Replaces eval() to prevent XSS and code injection attacks.
+   */
+  getSafeFormatter(formatterString) {
+    // Whitelist of safe formatter patterns
+    // Each pattern maps to a safe implementation
+    const SAFE_FORMATTERS = {
+      // Duration formatter (milliseconds)
+      'duration_ms': (value) => {
+        if (typeof value === 'number') {
+          return value.toFixed(2) + ' ms'
+        }
+        return value
+      },
+
+      // Percentage formatter
+      'percentage': (value) => {
+        if (typeof value === 'number') {
+          return value.toFixed(1) + '%'
+        }
+        return value
+      },
+
+      // Number with commas
+      'number_delimited': (value) => {
+        if (typeof value === 'number') {
+          return value.toLocaleString()
+        }
+        return value
+      },
+
+      // Timestamp formatter
+      'timestamp': (value) => {
+        if (typeof value === 'number' || typeof value === 'string') {
+          const date = new Date(value)
+          return date.toLocaleString()
+        }
+        return value
+      },
+
+      // Date only
+      'date': (value) => {
+        if (typeof value === 'number' || typeof value === 'string') {
+          const date = new Date(value)
+          return date.toLocaleDateString()
+        }
+        return value
+      },
+
+      // Time only
+      'time': (value) => {
+        if (typeof value === 'number' || typeof value === 'string') {
+          const date = new Date(value)
+          return date.toLocaleTimeString()
+        }
+        return value
+      },
+
+      // Bytes formatter
+      'bytes': (value) => {
+        if (typeof value !== 'number') return value
+
+        const units = ['B', 'KB', 'MB', 'GB', 'TB']
+        let size = value
+        let unitIndex = 0
+
+        while (size >= 1024 && unitIndex < units.length - 1) {
+          size /= 1024
+          unitIndex++
+        }
+
+        return size.toFixed(2) + ' ' + units[unitIndex]
+      }
+    }
+
+    // Try to match the formatter string to a known safe pattern
+    for (const [key, formatter] of Object.entries(SAFE_FORMATTERS)) {
+      if (formatterString.includes(key) ||
+          formatterString.includes(key.replace('_', ''))) {
+        return formatter
+      }
+    }
+
+    // Check for specific safe patterns in the function string
+    if (formatterString.includes('toFixed(2)') && formatterString.includes('ms')) {
+      return SAFE_FORMATTERS.duration_ms
+    }
+
+    if (formatterString.includes('toLocaleString')) {
+      return SAFE_FORMATTERS.number_delimited
+    }
+
+    if (formatterString.includes('toLocaleDateString')) {
+      return SAFE_FORMATTERS.date
+    }
+
+    if (formatterString.includes('toLocaleTimeString')) {
+      return SAFE_FORMATTERS.time
+    }
+
+    // Default: return a safe identity function that just returns the value
+    console.warn('[RailsPulse] Unknown formatter pattern, using identity function:', formatterString)
+    return (value) => value
+  }
+
+  showError() {
+    this.element.classList.add('chart-error')
+    this.element.innerHTML = '<p class="text-subtle p-4">Chart failed to load</p>'
+  }
+
+  // Public accessor for chart instance
+  get chartInstance() {
+    return this.chart
+  }
+
+  disposeChart() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  }
+
+  // Action for dynamic updates
+  update(event) {
+    if (event.detail?.data) {
+      this.dataValue = event.detail.data
+    }
+    if (event.detail?.options) {
+      this.optionsValue = event.detail.options
+    }
+    if (this.chart) {
+      const config = this.buildChartConfig()
+      this.chart.setOption(config, true) // true = not merge
+    }
+  }
+
+  // Color scheme management
+  onColorSchemeChange() {
+    this.applyColorScheme()
+  }
+
+  applyColorScheme() {
+    if (!this.chart) return
+
+    const scheme = document.documentElement.getAttribute('data-color-scheme')
+    const isDark = scheme === 'dark'
+    const axisColor = isDark ? '#ffffff' : '#999999'
+
+    this.chart.setOption({
+      xAxis: { axisLabel: { color: axisColor } },
+      yAxis: { axisLabel: { color: axisColor } }
+    })
+  }
+}

data/app/javascript/rails_pulse/controllers/index_controller.js

@@ -15,21 +15,16 @@ export default class extends Controller {
   originalSeriesOption = null;
 
   connect() {
-    // Listen for the custom event 'chart:initialized' to set up the chart.
-    // This event is sent from the RailsCharts library when the chart is ready.
+    // Listen for the custom event 'stimulus:echarts:rendered' to set up the chart.
+    // This event is dispatched by the chart controller when the chart is ready.
     this.handleChartInitialized = this.onChartInitialized.bind(this);
 
-    document.addEventListener('chart:rendered', this.handleChartInitialized);
-
-    // If the chart is already initialized (e.g., on back navigation), set up immediately
-    if (window.RailsCharts?.charts?.[this.chartIdValue]) {
-      this.setup();
-    }
+    document.addEventListener('stimulus:echarts:rendered', this.handleChartInitialized);
   }
 
   disconnect() {
-    // Remove the event listener from RailsCharts when the controller is disconnected
-    document.removeEventListener('chart:rendered', this.handleChartInitialized);
+    // Remove the event listener when the controller is disconnected
+    document.removeEventListener('stimulus:echarts:rendered', this.handleChartInitialized);
 
     // Remove chart event listeners if they exist
     if (this.hasChartTarget && this.chartTarget) {
@@ -47,6 +42,8 @@ export default class extends Controller {
   // After the chart is initialized, set up the event listeners and data tracking
   onChartInitialized(event) {
     if (event.detail.containerId === this.chartIdValue) {
+      // Store the chart instance from the event
+      this.chart = event.detail.chart;
       this.setup();
     }
   }
@@ -56,7 +53,7 @@ export default class extends Controller {
       return; // Prevent multiple setups
     }
 
-    // We need both the chart target in DOM and the chart object from RailsCharts
+    // We need both the chart target in DOM and the chart object from the event
     let hasTarget = false;
     try {
       hasTarget = !!this.chartTarget;
@@ -64,10 +61,8 @@ export default class extends Controller {
       hasTarget = false;
     }
 
-    // Get the chart element which the RailsCharts library has created
-    this.chart = window.RailsCharts.charts[this.chartIdValue];
-
     // Only proceed if we have BOTH the DOM target and the chart object
+    // (chart is set by onChartInitialized from the event)
     if (!hasTarget || !this.chart) {
       return;
     }

data/app/javascript/rails_pulse/controllers/pagination_controller.js

@@ -3,56 +3,50 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["limit"]
   static values = {
-    storageKey: { type: String, default: "rails_pulse_pagination_limit" },
-    url: String
+    storageKey: { type: String, default: "rails_pulse_pagination_limit" }
   }
 
   connect() {
     this.restorePaginationLimit()
   }
 
-  // Update pagination limit and refresh the turbo frame
+  // Update pagination limit and navigate to page 1 with new limit
   updateLimit() {
     const limit = this.limitTarget.value
 
-    // Save to session storage only - no server request needed
+    // Save to session storage for persistence
     sessionStorage.setItem(this.storageKeyValue, limit)
 
-    // Find the closest turbo frame and reload it to apply new pagination
-    const turboFrame = this.element.closest('turbo-frame')
-    if (turboFrame) {
-      // Add the limit as a URL parameter so server picks it up
-      const currentUrl = new URL(window.location)
-      currentUrl.searchParams.set('limit', limit)
-      turboFrame.src = currentUrl.pathname + currentUrl.search
+    // Build URL with limit parameter and reset to page 1
+    const currentUrl = new URL(window.location)
+    currentUrl.searchParams.set('limit', limit)
+    currentUrl.searchParams.delete('page')
+
+    // Use Turbo.visit for smooth navigation that preserves query params
+    if (typeof Turbo !== 'undefined') {
+      Turbo.visit(currentUrl.toString(), { action: 'replace' })
     } else {
-      // Fallback to page reload if not within a turbo frame
-      const currentUrl = new URL(window.location)
-      currentUrl.searchParams.set('limit', limit)
-      window.location.href = currentUrl.pathname + currentUrl.search
+      window.location.href = currentUrl.toString()
     }
   }
 
-  // Get CSRF token from meta tag
-  getCSRFToken() {
-    const token = document.querySelector('meta[name="csrf-token"]')
-    return token ? token.getAttribute('content') : ''
-  }
-
-  // Save the pagination limit to session storage when it changes
-  savePaginationLimit() {
-    const limit = this.limitTarget.value
-    sessionStorage.setItem(this.storageKeyValue, limit)
-  }
-
-  // Restore the pagination limit from session storage on page load
+  // Restore the pagination limit from URL or session storage on page load
   restorePaginationLimit() {
-    const savedLimit = sessionStorage.getItem(this.storageKeyValue)
-    if (savedLimit && this.limitTarget) {
-      // Only set if the current value is different (prevents unnecessary DOM updates)
-      if (this.limitTarget.value !== savedLimit) {
+    // URL params take precedence over session storage
+    const urlParams = new URLSearchParams(window.location.search)
+    const urlLimit = urlParams.get('limit')
+
+    if (urlLimit && this.limitTarget) {
+      // Sync sessionStorage with URL param
+      sessionStorage.setItem(this.storageKeyValue, urlLimit)
+      if (this.limitTarget.value !== urlLimit) {
+        this.limitTarget.value = urlLimit
+      }
+    } else {
+      // Fall back to sessionStorage if no URL param
+      const savedLimit = sessionStorage.getItem(this.storageKeyValue)
+      if (savedLimit && this.limitTarget && this.limitTarget.value !== savedLimit) {
         this.limitTarget.value = savedLimit
-        // Don't trigger change event when restoring from session - prevents infinite loops
       }
     }
   }

data/app/jobs/rails_pulse/backfill_summaries_job.rb

@@ -1,7 +1,5 @@
 module RailsPulse
   class BackfillSummariesJob < ApplicationJob
-    queue_as :low_priority
-
     def perform(start_date, end_date, period_types = [ "hour", "day" ])
       start_date = start_date.to_datetime
       end_date = end_date.to_datetime

data/app/jobs/rails_pulse/cleanup_job.rb

@@ -1,7 +1,5 @@
 module RailsPulse
   class CleanupJob < ApplicationJob
-    queue_as :default
-
     def perform
       return unless RailsPulse.configuration.archiving_enabled
 

data/app/jobs/rails_pulse/summary_job.rb

@@ -1,7 +1,5 @@
 module RailsPulse
   class SummaryJob < ApplicationJob
-    queue_as :low_priority
-
     def perform(target_hour = nil)
       target_hour ||= 1.hour.ago.beginning_of_hour