rails_pulse 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9f5f4407186848ab8ef3c75d8453dbe44d4f90fd641a50527b26cf9f4b10b82
-  data.tar.gz: 283484459f73560755c16519e808d754bf23d82edb05ef7b98fcc396bdf3ead2
+  metadata.gz: 943ab1e08e81dbe5ede71b7d3c9ca526a65c9a0ce1767c7f9c37cee8883925cf
+  data.tar.gz: b3661c728215dc4759e6a3e04dd49dc113d13155972ed30f6ff35d0a2a07b10c
 SHA512:
-  metadata.gz: b75fca5343d2080ecc547a5c8b68d2ec7ac431aea54505ad042721262c0f95c5955e229dcd338b011dfcdc208d7e6467b8b1c768efa83379efff5d7deaf13200
-  data.tar.gz: a8e5d530527ed56d61029707825dd74885a742b132b41d5471c981f544c922e0431a6813d61e73db01dc85b17681aeb25c53347358cf93586b1b36af7874ab99
+  metadata.gz: db5d711b9d8931c6aa489b9069f05d16514a997b9798c743f2c2998611797dbc3dbdcfdcd12e69f65b2b3459292d1e7558075c02805aa0f49a398b85716736ea
+  data.tar.gz: 55ccd02b5a9bb13ba46e36e0051c2440d8026956743e02660968209c66e61fe25f4ed8c3dd04a77b08a6209df9e13c922f42e481ade7cf53447d89a93976e680

data/README.md

@@ -601,7 +601,7 @@ Rails Pulse is built using modern, battle-tested technologies that ensure reliab
 - **[Turbo Frames](https://turbo.hotwired.dev/handbook/frames)** - Lazy loading and partial page updates for optimal performance
 
 ### **Data Visualization**
-- **[Rails Charts](https://github.com/railsjazz/rails_charts)** - Rails wrapper around Apache ECharts
+- **[Apache ECharts](https://echarts.apache.org/)** - Powerful, interactive charting library
 - **[Lucide Icons](https://lucide.dev/)** - Beautiful, consistent iconography with pre-compiled SVG bundle
 
 ### **Asset Management**

data/app/controllers/concerns/chart_table_concern.rb

@@ -2,7 +2,6 @@ module ChartTableConcern
   extend ActiveSupport::Concern
 
   included do
-    include Pagy::Backend
     include TimeRangeConcern
     include ResponseRangeConcern
     include ZoomRangeConcern
@@ -41,7 +40,7 @@ module ChartTableConcern
       disabled_tags: session_disabled_tags,
       show_non_tagged: session[:show_non_tagged] != false,
       **chart_options
-    ).to_rails_chart
+    ).to_chart_data
   end
 
   def setup_table_data(ransack_params)
@@ -52,7 +51,7 @@ module ChartTableConcern
     table_results = build_table_results
     handle_pagination
 
-    @pagy, @table_data = pagy(table_results, limit: session_pagination_limit)
+    @pagy, @table_data = pagy(table_results, items: session_pagination_limit)
   end
 
   def setup_zoom_range_data

data/app/controllers/rails_pulse/application_controller.rb

@@ -1,5 +1,12 @@
 module RailsPulse
   class ApplicationController < ActionController::Base
+    # Support both Pagy 8.x (Backend) and Pagy 9+ (Method)
+    if defined?(Pagy::Method)
+      include Pagy::Method
+    else
+      include Pagy::Backend
+    end
+
     before_action :authenticate_rails_pulse_user!
     before_action :set_show_non_tagged_default
     helper_method :session_global_filters, :session_disabled_tags
@@ -8,10 +15,10 @@ module RailsPulse
       limit = limit || params[:limit]
       session[:pagination_limit] = limit.to_i if limit.present?
 
-      # Render JSON for direct API calls or AJAX requests (but not turbo frame requests)
-      if (request.xhr? && !turbo_frame_request?) || (request.patch? && action_name == "set_pagination_limit")
+    # Render JSON for direct API calls or AJAX requests (but not turbo frame requests)
+    if (request.xhr? && !turbo_frame_request?) || (request.patch? && action_name == "set_pagination_limit")
         render json: { status: "ok" }
-      end
+    end
     end
 
     def set_global_filters

data/app/controllers/rails_pulse/queries_controller.rb

@@ -163,7 +163,7 @@ module RailsPulse
       table_results = build_table_results
       handle_pagination
 
-      @pagy, @table_data = pagy(table_results, limit: session_pagination_limit)
+      @pagy, @table_data = pagy(table_results, items: session_pagination_limit)
     end
 
     def handle_pagination

data/app/controllers/rails_pulse/requests_controller.rb

@@ -128,7 +128,8 @@ module RailsPulse
       table_results = build_table_results
       handle_pagination
 
-      @pagy, @table_data = pagy(table_results, limit: session_pagination_limit)
+      # Use 'items:' for Pagy 8.x compatibility ('limit:' is for Pagy 43+)
+      @pagy, @table_data = pagy(table_results, items: session_pagination_limit)
     end
 
     def handle_pagination

data/app/controllers/rails_pulse/routes_controller.rb

@@ -142,7 +142,7 @@ module RailsPulse
       table_results = build_table_results
       handle_pagination
 
-      @pagy, @table_data = pagy(table_results, limit: session_pagination_limit)
+      @pagy, @table_data = pagy(table_results, items: session_pagination_limit)
     end
 
     def handle_pagination

data/app/helpers/rails_pulse/application_helper.rb

@@ -1,7 +1,5 @@
 module RailsPulse
   module ApplicationHelper
-    include Pagy::Frontend
-
     include BreadcrumbsHelper
     include ChartHelper
     include FormattingHelper
@@ -10,6 +8,10 @@ module RailsPulse
     include FormHelper
     include TagsHelper
 
+    # Include Pagy frontend helpers for Pagy 8.x compatibility
+    # Pagy 43+ doesn't need this, but it doesn't hurt to include it
+    include Pagy::Frontend if defined?(Pagy::Frontend)
+
     # Replacement for lucide_icon helper that works with pre-compiled assets
     # Outputs a custom element that will be hydrated by Stimulus
     def rails_pulse_icon(name, options = {})
@@ -36,6 +38,49 @@ module RailsPulse
     # Backward compatibility alias - can be removed after migration
     alias_method :lucide_icon, :rails_pulse_icon
 
+    # Get items per page from Pagy instance (compatible with Pagy 8.x and 43+)
+    def pagy_items(pagy)
+      # Pagy 43+ uses options[:items] or has a limit method
+      if pagy.respond_to?(:options) && pagy.options.is_a?(Hash)
+        pagy.options[:items]
+      # Pagy 8.x uses vars[:items]
+      elsif pagy.respond_to?(:vars)
+        pagy.vars[:items]
+      # Fallback
+      else
+        pagy.limit || 10
+      end
+    end
+
+    # Get page URL from Pagy instance (compatible with Pagy 8.x and 43+)
+    def pagy_page_url(pagy, page_number)
+      # Pagy 43+ has page_url method
+      if pagy.respond_to?(:page_url)
+        pagy.page_url(page_number)
+      # Pagy 8.x requires using pagy_url_for helper
+      else
+        pagy_url_for(pagy, page_number)
+      end
+    end
+
+    # Get previous page number (compatible with Pagy 8.x and 43+)
+    def pagy_previous(pagy)
+      # Pagy 43+ uses 'previous'
+      if pagy.respond_to?(:previous)
+        pagy.previous
+      # Pagy 8.x uses 'prev'
+      elsif pagy.respond_to?(:prev)
+        pagy.prev
+      else
+        nil
+      end
+    end
+
+    # Get next page number (compatible with Pagy 8.x and 43+)
+    def pagy_next(pagy)
+      pagy.respond_to?(:next) ? pagy.next : nil
+    end
+
     # Make Rails Pulse routes available as rails_pulse in views
     def rails_pulse
       @rails_pulse_helper ||= RailsPulseHelper.new(self)

data/app/helpers/rails_pulse/chart_helper.rb

@@ -1,5 +1,30 @@
 module RailsPulse
   module ChartHelper
+    # Main chart rendering method - unified API for all chart types
+    # Uses Stimulus controller to handle chart initialization
+    def render_stimulus_chart(data, type:, **options)
+      chart_id = options[:id] || "rails-pulse-chart-#{SecureRandom.hex(8)}"
+      height = options[:height] || "400px"
+      width = options[:width] || "100%"
+      theme = options[:theme] || "railspulse"
+      chart_options = options[:options] || {}
+
+      # Build data attributes for Stimulus
+      stimulus_data = {
+        controller: "rails-pulse--chart",
+        rails_pulse__chart_type_value: type,
+        rails_pulse__chart_data_value: data.to_json,
+        rails_pulse__chart_options_value: chart_options.to_json,
+        rails_pulse__chart_theme_value: theme
+      }
+
+      content_tag(:div, "",
+        id: chart_id,
+        style: "height: #{height}; width: #{width};",
+        data: stimulus_data
+      )
+    end
+
     # Base chart options shared across all chart types
     def base_chart_options(units: nil, zoom: false)
       {
@@ -97,16 +122,21 @@ module RailsPulse
 
     private
 
+    # Wraps JavaScript function strings for later processing
+    def js_function(func_string)
+      "__FUNCTION_START__#{func_string}__FUNCTION_END__"
+    end
+
     def apply_tooltip_formatter(options, tooltip_formatter)
       return unless tooltip_formatter.present?
 
-      options[:tooltip][:formatter] = RailsCharts.js(tooltip_formatter)
+      options[:tooltip][:formatter] = js_function(tooltip_formatter)
     end
 
     def apply_xaxis_formatter(options, xaxis_formatter)
       return unless xaxis_formatter.present?
 
-      options[:xAxis][:axisLabel] ||= { formatter: RailsCharts.js(xaxis_formatter) }
+      options[:xAxis][:axisLabel] ||= { formatter: js_function(xaxis_formatter) }
     end
 
     def apply_zoom_configuration(options, zoom, zoom_start, zoom_end, chart_data)

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,229 @@
+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, parse it
+    if (cleanString.trim().startsWith('function')) {
+      try {
+        // eslint-disable-next-line no-eval
+        return eval(`(${cleanString})`)
+      } catch (error) {
+        console.error('[RailsPulse] Error parsing formatter function:', error)
+        return cleanString
+      }
+    }
+    return cleanString
+  }
+
+  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;
     }