easy-admin-rails 0.1.0

data/app/components/easy_admin/dashboards/card_factory.rb

@@ -0,0 +1,90 @@
+module EasyAdmin
+  module Dashboards
+    class CardFactory
+      # Registry for custom card components
+      @custom_components = {}
+
+      class << self
+        attr_reader :custom_components
+
+        def create_component(card:, card_data:, dashboard_class:)
+          component_class = resolve_component_class(card[:type], card)
+          component_class.new(
+            card: card,
+            card_data: card_data,
+            dashboard_class: dashboard_class
+          )
+        end
+
+        # Register a custom card component
+        # CardFactory.register(:custom_analytics, MyApp::CustomAnalyticsCardComponent)
+        def register(card_type, component_class)
+          @custom_components[card_type.to_sym] = component_class
+        end
+
+        # Unregister a custom card component
+        def unregister(card_type)
+          @custom_components.delete(card_type.to_sym)
+        end
+
+        private
+
+        def resolve_component_class(card_type, card)
+          # First check if it's a registered custom component
+          if @custom_components.key?(card_type.to_sym)
+            return @custom_components[card_type.to_sym]
+          end
+
+          # Check if card specifies a custom component class
+          if card[:component_class]
+            begin
+              return card[:component_class].constantize
+            rescue NameError => e
+              Rails.logger.warn "Custom card component not found: #{card[:component_class]}, falling back to type-based resolution"
+            end
+          end
+
+          # Try to resolve based on card type and naming convention
+          component_class = resolve_by_naming_convention(card_type)
+          return component_class if component_class
+
+          # Check for application-specific component
+          app_component_class = resolve_application_component(card_type)
+          return app_component_class if app_component_class
+
+          # Fallback to CustomCardComponent
+          Rails.logger.warn "Card component not found for type: #{card_type}, falling back to CustomCardComponent"
+          EasyAdmin::Dashboards::Cards::CustomCardComponent
+        end
+
+        def resolve_by_naming_convention(card_type)
+          # Convert card type to component class name
+          # :metric -> MetricCardComponent
+          # :chart -> ChartCardComponent
+          # :table -> TableCardComponent
+          component_name = "#{card_type.to_s.classify}CardComponent"
+          component_class_name = "EasyAdmin::Dashboards::Cards::#{component_name}"
+          
+          begin
+            component_class_name.constantize
+          rescue NameError
+            nil
+          end
+        end
+
+        def resolve_application_component(card_type)
+          # Check if the application has defined its own card component
+          # This allows apps to override default components
+          # E.g., App::Dashboards::Cards::MetricCardComponent
+          app_component_name = "#{Rails.application.class.module_parent}::Dashboards::Cards::#{card_type.to_s.classify}CardComponent"
+          
+          begin
+            app_component_name.constantize
+          rescue NameError
+            nil
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/dashboards/card_stream_component.rb

@@ -0,0 +1,22 @@
+module EasyAdmin
+  module Dashboards
+    class CardStreamComponent < BaseComponent
+      def initialize(card:, card_data:, dashboard_class:)
+        @card = card
+        @card_data = card_data
+        @dashboard_class = dashboard_class
+      end
+
+      def view_template
+        # Use factory to dynamically create the appropriate card component
+        card_component = CardFactory.create_component(
+          card: @card,
+          card_data: @card_data,
+          dashboard_class: @dashboard_class
+        )
+        
+        render card_component
+      end
+    end
+  end
+end

data/app/components/easy_admin/dashboards/cards/base_card_component.rb

@@ -0,0 +1,54 @@
+module EasyAdmin
+  module Dashboards
+    module Cards
+      class BaseCardComponent < BaseComponent
+        def initialize(card:, card_data:, dashboard_class:)
+          @card = card
+          @card_data = card_data
+          @dashboard_class = dashboard_class
+        end
+
+        def view_template
+          turbo_frame(id: "card_#{@card[:name]}") do
+            render_card_content
+          end
+        end
+
+        private
+
+        attr_reader :card, :card_data, :dashboard_class
+
+        def render_card_content
+          raise NotImplementedError, "Subclasses must implement #render_card_content"
+        end
+
+        # Common helper methods for all cards
+        def card_title
+          @card[:title] || @card[:name].to_s.humanize
+        end
+
+        def chart_height
+          case @card[:rows]
+          when 1 then 300
+          when 2 then 400
+          else 300
+          end
+        end
+
+        def generate_colors(count, alpha = 1.0)
+          colors = [
+            "rgba(59, 130, 246, #{alpha})",   # blue
+            "rgba(34, 197, 94, #{alpha})",    # green
+            "rgba(249, 115, 22, #{alpha})",   # orange
+            "rgba(168, 85, 247, #{alpha})",   # purple
+            "rgba(20, 184, 166, #{alpha})",   # teal
+            "rgba(236, 72, 153, #{alpha})",   # pink
+            "rgba(99, 102, 241, #{alpha})",   # indigo
+            "rgba(234, 179, 8, #{alpha})"     # yellow
+          ]
+          colors.cycle.take(count)
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/dashboards/cards/chart_card_component.rb

@@ -0,0 +1,175 @@
+module EasyAdmin
+  module Dashboards
+    module Cards
+      class ChartCardComponent < BaseCardComponent
+        private
+
+        def render_card_content
+          div(class: "flex flex-col h-full") do
+            # Chart Content
+            div(class: "flex-1 p-6") do
+              if card_data[:chart_data] && card_data[:chart_data].any?
+                render_chart
+              else
+                render_no_data_state
+              end
+            end
+
+            # Summary Section
+            if card_data[:summary]
+              div(class: "px-6 py-4 bg-gray-50 border-t border-gray-200") do
+                p(class: "text-sm text-gray-700") { card_data[:summary] }
+              end
+            end
+          end
+        end
+
+        def render_chart
+          chart_type = (@card[:chart_type] || :line).to_s
+          chart_data = prepare_chart_data_for_type(chart_type)
+
+          div(
+            class: "ea-chart-container",
+            data: {
+              controller: "chart",
+              chart_type_value: chart_type,
+              chart_data_value: chart_data.to_json
+            },
+            style: "position: relative; height: #{chart_height}px;"
+          ) do
+            unsafe_raw "<canvas></canvas>"
+          end
+        end
+
+        def render_no_data_state
+          div(class: "flex flex-col items-center justify-center py-8 text-gray-500") do
+            unsafe_raw <<~SVG
+              <svg class="w-12 h-12 mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+              </svg>
+            SVG
+            p(class: "text-sm") { "No chart data available" }
+          end
+        end
+
+        def prepare_chart_data_for_type(chart_type)
+          case chart_type
+          when 'line', 'area', 'bar', 'horizontal_bar'
+            prepare_basic_chart_data
+          when 'pie', 'donut'
+            prepare_pie_chart_data
+          when 'scatter'
+            prepare_scatter_chart_data
+          when 'bubble'
+            prepare_bubble_chart_data
+          when 'radar'
+            prepare_radar_chart_data
+          when 'polar_area'
+            prepare_polar_area_chart_data
+          when 'mixed'
+            prepare_mixed_chart_data
+          else
+            prepare_basic_chart_data
+          end
+        end
+
+        def prepare_basic_chart_data
+          {
+            labels: card_data[:chart_data].map { |d| d[:date] || d[:label] || "Item #{card_data[:chart_data].index(d) + 1}" },
+            datasets: [{
+              label: 'Dataset 1',
+              data: card_data[:chart_data].map { |d| d[:value] },
+              backgroundColor: 'rgba(59, 130, 246, 0.2)',
+              borderColor: 'rgb(59, 130, 246)',
+              borderWidth: 2
+            }]
+          }
+        end
+
+        def prepare_pie_chart_data
+          {
+            labels: card_data[:chart_data].map { |d| d[:label] || "Item #{card_data[:chart_data].index(d) + 1}" },
+            datasets: [{
+              data: card_data[:chart_data].map { |d| d[:value] },
+              backgroundColor: generate_colors(card_data[:chart_data].length, 0.8),
+              borderColor: generate_colors(card_data[:chart_data].length),
+              borderWidth: 1
+            }]
+          }
+        end
+
+        def prepare_scatter_chart_data
+          {
+            datasets: [{
+              label: 'Scatter Dataset',
+              data: card_data[:chart_data].map { |d| { x: d[:x] || d[:date], y: d[:y] || d[:value] } },
+              backgroundColor: 'rgb(59, 130, 246)'
+            }]
+          }
+        end
+
+        def prepare_bubble_chart_data
+          {
+            datasets: [{
+              label: 'Bubble Dataset',
+              data: card_data[:chart_data].map { |d| { x: d[:x], y: d[:y], r: d[:r] } },
+              backgroundColor: generate_colors(card_data[:chart_data].length, 0.8)
+            }]
+          }
+        end
+
+        def prepare_radar_chart_data
+          {
+            labels: card_data[:chart_data].map { |d| d[:date] || d[:label] || "Item #{card_data[:chart_data].index(d) + 1}" },
+            datasets: [{
+              label: 'Dataset 1',
+              data: card_data[:chart_data].map { |d| d[:value] },
+              backgroundColor: 'rgba(59, 130, 246, 0.2)',
+              borderColor: 'rgb(59, 130, 246)',
+              borderWidth: 2,
+              pointBackgroundColor: 'rgb(59, 130, 246)',
+              pointBorderColor: '#fff',
+              pointHoverBackgroundColor: '#fff',
+              pointHoverBorderColor: 'rgb(59, 130, 246)'
+            }]
+          }
+        end
+
+        def prepare_polar_area_chart_data
+          {
+            labels: card_data[:chart_data].map { |d| d[:label] || "Item #{card_data[:chart_data].index(d) + 1}" },
+            datasets: [{
+              data: card_data[:chart_data].map { |d| d[:value] },
+              backgroundColor: generate_colors(card_data[:chart_data].length, 0.8),
+              borderColor: generate_colors(card_data[:chart_data].length),
+              borderWidth: 1
+            }]
+          }
+        end
+
+        def prepare_mixed_chart_data
+          {
+            labels: card_data[:chart_data].map { |d| d[:date] || d[:label] || "Item #{card_data[:chart_data].index(d) + 1}" },
+            datasets: [
+              {
+                type: 'line',
+                label: 'Line Dataset',
+                data: card_data[:chart_data].map { |d| d[:value] },
+                borderColor: 'rgb(59, 130, 246)',
+                backgroundColor: 'rgba(59, 130, 246, 0.2)'
+              },
+              {
+                type: 'bar',
+                label: 'Bar Dataset',
+                data: card_data[:chart_data].map { |d| (d[:value2] || d[:value] || 0) },
+                backgroundColor: 'rgba(34, 197, 94, 0.8)',
+                borderColor: 'rgb(34, 197, 94)',
+                borderWidth: 1
+              }
+            ]
+          }
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/dashboards/cards/custom_card_component.rb

@@ -0,0 +1,50 @@
+module EasyAdmin
+  module Dashboards
+    module Cards
+      class CustomCardComponent < BaseCardComponent
+        private
+
+        def render_card_content
+          div(class: "flex flex-col h-full") do
+            # Custom Content
+            div(class: "flex-1 p-6") do
+              if @card[:partial]
+                render_custom_partial
+              else
+                render_default_custom_content
+              end
+            end
+          end
+        end
+
+        def render_custom_partial
+          # This would render a custom partial specified in the card configuration
+          # For now, we'll render the default content as fallback
+          render_default_custom_content
+        end
+
+        def render_default_custom_content
+          div(class: "flex flex-col items-center justify-center py-8 text-gray-500") do
+            unsafe_raw <<~SVG
+              <svg class="w-12 h-12 mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 00-2 2v2a2 2 0 002 2m0 0h14m-14 0a2 2 0 01-2-2V9a2 2 0 012-2"/>
+              </svg>
+            SVG
+            h4(class: "text-lg font-medium text-gray-900 mb-2") { "Custom Card" }
+            p(class: "text-sm text-center") { "This is a custom card component. Override the partial or implement custom logic." }
+            
+            # Display any custom data if available
+            if card_data && !card_data.empty?
+              div(class: "mt-4 p-4 bg-gray-100 rounded-lg") do
+                h5(class: "text-sm font-medium text-gray-700 mb-2") { "Card Data:" }
+                pre(class: "text-xs text-gray-600 overflow-auto") do
+                  card_data.to_json
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/dashboards/cards/metric_card_component.rb

@@ -0,0 +1,164 @@
+module EasyAdmin
+  module Dashboards
+    module Cards
+      class MetricCardComponent < BaseCardComponent
+        private
+
+        def render_card_content
+          div(class: "p-6 flex flex-col h-full") do
+            # Main Metric Value with Trend Color  
+            div(class: "flex items-start justify-between mb-4") do
+              div(class: "flex-1") do
+                div(class: metric_value_classes) do
+                  number_with_delimiter(card_data[:value] || 0)
+                end
+                div(class: "text-sm text-gray-600 font-medium") do
+                  @card[:description] || @card[:title]
+                end
+              end
+              
+              # Trend Indicator
+              if card_data[:delta]
+                div(class: trend_indicator_classes) do
+                  trend_icon
+                end
+              end
+            end
+            
+            # Sparkline
+            if @card[:show_sparkline] && card_data[:sparkline_data]
+              div(class: "flex-1 mb-4") do
+                render_sparkline
+              end
+            end
+            
+            # Delta Information
+            if card_data[:delta]
+              div(class: "mt-auto pt-4 border-t border-gray-100") do
+                div(class: "flex items-center justify-between") do
+                  span(class: delta_badge_classes) do
+                    trend_icon
+                    span(class: "ml-1 font-semibold") { "#{card_data[:delta].abs}%" }
+                  end
+                  span(class: "text-xs text-gray-500") do
+                    "vs #{card_data[:compare_period] || 'last period'}"
+                  end
+                end
+              end
+            end
+          end
+        end
+
+        # Helper methods matching the ERB template
+        def metric_value_classes
+          base_classes = "text-3xl font-bold mb-1"
+          if card_data[:delta]
+            case trend_direction
+            when :positive
+              "#{base_classes} text-green-600"
+            when :negative  
+              "#{base_classes} text-red-600"
+            else
+              "#{base_classes} text-gray-900"
+            end
+          else
+            "#{base_classes} text-gray-900"
+          end
+        end
+        
+        def trend_indicator_classes
+          base_classes = "flex items-center justify-center w-10 h-10 rounded-full"
+          case trend_direction
+          when :positive
+            "#{base_classes} bg-green-100 text-green-600"
+          when :negative
+            "#{base_classes} bg-red-100 text-red-600" 
+          else
+            "#{base_classes} bg-gray-100 text-gray-600"
+          end
+        end
+        
+        def delta_badge_classes
+          base_classes = "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
+          case trend_direction
+          when :positive
+            "#{base_classes} bg-green-100 text-green-800"
+          when :negative
+            "#{base_classes} bg-red-100 text-red-800"
+          else
+            "#{base_classes} bg-gray-100 text-gray-600" 
+          end
+        end
+        
+        def trend_direction
+          return :neutral unless card_data[:delta]
+          card_data[:delta].to_f > 0 ? :positive : (card_data[:delta].to_f < 0 ? :negative : :neutral)
+        end
+        
+        def trend_icon
+          case trend_direction
+          when :positive
+            "↗"
+          when :negative
+            "↘"
+          else
+            "→"
+          end
+        end
+        
+        def sparkline_color
+          case trend_direction
+          when :positive
+            "#059669" # green-600
+          when :negative
+            "#dc2626" # red-600
+          else
+            "#4f46e5" # indigo-600
+          end
+        end
+        
+        def sparkline_points
+          return "" unless card_data[:sparkline_data]&.any?
+          
+          data = card_data[:sparkline_data]
+          max_val = data.map { |d| d[:value] }.max
+          min_val = data.map { |d| d[:value] }.min
+          range = max_val - min_val
+          range = 1 if range == 0
+          
+          data.map.with_index do |point, i|
+            x = i * (100.0 / (data.length - 1))
+            y = 25 - ((point[:value] - min_val) / range.to_f * 20)
+            "#{x},#{y}"
+          end.join(' ')
+        end
+
+        def render_sparkline
+          points = sparkline_points
+          color = sparkline_color
+          gradient_id = "sparkline-gradient-#{@card[:name]}"
+          
+          unsafe_raw <<~SVG
+            <svg viewBox="0 0 100 30" class="w-full h-12">
+              <defs>
+                <linearGradient id="#{gradient_id}" x1="0%" y1="0%" x2="0%" y2="100%">
+                  <stop offset="0%" style="stop-color:#{color};stop-opacity:0.3" />
+                  <stop offset="100%" style="stop-color:#{color};stop-opacity:0" />
+                </linearGradient>
+              </defs>
+              <polyline 
+                points="#{points}" 
+                stroke="#{color}" 
+                stroke-width="2" 
+                fill="none"
+                class="drop-shadow-sm"/>
+              <polygon 
+                points="#{points},100,30 0,30" 
+                fill="url(##{gradient_id})"/>
+            </svg>
+          SVG
+        end
+      end
+    end
+  end
+end