serialbench 0.1.1 → 0.1.2

data/lib/serialbench/templates/assets/js/navigation.js

@@ -0,0 +1,142 @@
+// Navigation and UI interaction functions for Serialbench reports
+
+/**
+ * Show a specific section and update navigation state
+ */
+function showSection(sectionName) {
+    // Hide all sections
+    document.querySelectorAll('.section').forEach(section => {
+        section.classList.remove('active');
+    });
+
+    // Remove active class from all nav buttons
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+
+    // Show selected section
+    const targetSection = document.getElementById(sectionName);
+    if (targetSection) {
+        targetSection.classList.add('active');
+    }
+
+    // Add active class to clicked button
+    if (event && event.target) {
+        event.target.classList.add('active');
+    }
+
+    // Smooth scroll to top of section
+    if (targetSection) {
+        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
+/**
+ * Initialize navigation event listeners
+ */
+function initializeNavigation() {
+    // Add click event listeners to navigation buttons
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const sectionName = this.getAttribute('data-section') ||
+                               this.textContent.toLowerCase().replace(/\s+/g, '').replace('performance', '');
+            showSection(sectionName);
+        });
+    });
+
+    // Add keyboard navigation support
+    document.addEventListener('keydown', function(e) {
+        if (e.altKey) {
+            const keyMap = {
+                '1': 'parsing',
+                '2': 'generation',
+                '3': 'streaming',
+                '4': 'memory',
+                '5': 'summary',
+                '6': 'environments'
+            };
+
+            if (keyMap[e.key]) {
+                e.preventDefault();
+                showSection(keyMap[e.key]);
+
+                // Update button state
+                document.querySelectorAll('.nav-btn').forEach(btn => {
+                    btn.classList.remove('active');
+                    if (btn.textContent.toLowerCase().includes(keyMap[e.key]) ||
+                        (keyMap[e.key] === 'parsing' && btn.textContent.toLowerCase().includes('parsing')) ||
+                        (keyMap[e.key] === 'generation' && btn.textContent.toLowerCase().includes('generation')) ||
+                        (keyMap[e.key] === 'streaming' && btn.textContent.toLowerCase().includes('streaming')) ||
+                        (keyMap[e.key] === 'memory' && btn.textContent.toLowerCase().includes('memory')) ||
+                        (keyMap[e.key] === 'summary' && btn.textContent.toLowerCase().includes('summary')) ||
+                        (keyMap[e.key] === 'environments' && btn.textContent.toLowerCase().includes('environment'))) {
+                        btn.classList.add('active');
+                    }
+                });
+            }
+        }
+    });
+}
+
+/**
+ * Add loading states to charts
+ */
+function addChartLoadingStates() {
+    document.querySelectorAll('.chart-container canvas').forEach(canvas => {
+        const container = canvas.closest('.chart-container');
+        if (container) {
+            container.classList.add('loading');
+
+            // Remove loading state after chart is rendered
+            setTimeout(() => {
+                container.classList.remove('loading');
+            }, 1000);
+        }
+    });
+}
+
+/**
+ * Add tooltips to navigation buttons
+ */
+function addNavigationTooltips() {
+    const tooltips = {
+        'parsing': 'View parsing performance benchmarks (Alt+1)',
+        'generation': 'View generation performance benchmarks (Alt+2)',
+        'streaming': 'View streaming performance benchmarks (Alt+3)',
+        'memory': 'View memory usage analysis (Alt+4)',
+        'summary': 'View performance summary and recommendations (Alt+5)',
+        'environments': 'View environment and version details (Alt+6)'
+    };
+
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        const text = btn.textContent.toLowerCase();
+        for (const [key, tooltip] of Object.entries(tooltips)) {
+            if (text.includes(key) || (key === 'environments' && text.includes('environment'))) {
+                btn.title = tooltip;
+                break;
+            }
+        }
+    });
+}
+
+/**
+ * Initialize all UI enhancements
+ */
+function initializeUI() {
+    // Wait for DOM to be fully loaded
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeNavigation();
+            addNavigationTooltips();
+            addChartLoadingStates();
+        });
+    } else {
+        initializeNavigation();
+        addNavigationTooltips();
+        addChartLoadingStates();
+    }
+}
+
+// Auto-initialize when script loads
+initializeUI();

data/lib/serialbench/templates/base.liquid

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ page_title | default: "Serialbench Results" }}</title>
+
+    <!-- Preload fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js" defer></script>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="assets/css/benchmark_report.css">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23F97316' viewBox='0 0 24 24'%3e%3cpath d='M12 2L2 7v10c0 5.55 3.84 9.95 9 11 5.16-1.05 9-5.45 9-11V7l-10-5z'/%3e%3c/svg%3e">
+</head>
+<body>
+    <!-- Navigation Bar -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <div class="navbar-header">
+                <a href="#" class="navbar-brand">
+                    <div class="navbar-brand-icon">
+                        <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 2L2 7v10c0 5.55 3.84 9.95 9 11 5.16-1.05 9-5.45 9-11V7l-10-5z"/>
+                        </svg>
+                    </div>
+                    Serialbench
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        {{ content }}
+    </main>
+
+    <!-- JavaScript -->
+    <script src="assets/js/chart_helpers.js" defer></script>
+    <script src="assets/js/navigation.js" defer></script>
+
+</body>
+</html>

data/lib/serialbench/templates/format_based.liquid

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SerialBench - Format Performance Dashboard</title>
+
+    <!-- Preload fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js" defer></script>
+
+    <!-- Theme CSS -->
+    <link rel="stylesheet" href="assets/css/themes.css">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23F97316' viewBox='0 0 24 24'%3e%3cpath d='M12 2L2 7v10c0 5.55 3.84 9.95 9 11 5.16-1.05 9-5.45 9-11V7l-10-5z'/%3e%3c/svg%3e">
+</head>
+<body>
+    <!-- Navigation Bar -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <!-- Header -->
+            <div class="navbar-header">
+                <a href="#" class="navbar-brand">
+                    <div class="navbar-brand-icon">
+                        <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 2L2 7v10c0 5.55 3.84 9.95 9 11 5.16-1.05 9-5.45 9-11V7l-10-5z"/>
+                        </svg>
+                    </div>
+                    SerialBench
+                </a>
+
+                <div class="navbar-controls">
+                    <button class="theme-toggle" title="Toggle theme">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <circle cx="12" cy="12" r="5"></circle>
+                            <line x1="12" y1="1" x2="12" y2="3"></line>
+                            <line x1="12" y1="21" x2="12" y2="23"></line>
+                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                            <line x1="1" y1="12" x2="3" y2="12"></line>
+                            <line x1="21" y1="12" x2="23" y2="12"></line>
+                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Filter Bar -->
+            <div class="filter-bar">
+                <div class="filter-container">
+                    <!-- Platform Filter -->
+                    <div class="filter-group">
+                        <label class="filter-label" for="platform-filter">Platform:</label>
+                        <div class="custom-select">
+                            <select id="platform-filter">
+                                <option value="">All Platforms</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <!-- Ruby Type Filter -->
+                    <div class="filter-group">
+                        <label class="filter-label" for="ruby-type-filter">Ruby Type:</label>
+                        <div class="custom-select">
+                            <select id="ruby-type-filter">
+                                <option value="">All Types</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <!-- Ruby Version Filter -->
+                    <div class="filter-group">
+                        <label class="filter-label" for="ruby-version-filter">Version:</label>
+                        <div class="custom-select">
+                            <select id="ruby-version-filter">
+                                <option value="">All Versions</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <!-- Format Tabs -->
+                    <div class="format-tabs">
+                        <button class="format-tab active" data-format="xml">XML</button>
+                        <button class="format-tab" data-format="json">JSON</button>
+                        <button class="format-tab" data-format="yaml">YAML</button>
+                        <button class="format-tab" data-format="toml">TOML</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <!-- Dashboard Header -->
+        <header class="dashboard-header">
+            <h1>Performance Dashboard</h1>
+            <p class="dashboard-subtitle">
+                Comprehensive serialization performance analysis across formats, platforms, and Ruby versions
+            </p>
+            <div class="dashboard-meta">
+                <span><strong>Generated:</strong> {{ metadata.timestamp | default: "Unknown" }}</span>
+                <span><strong>Ruby Versions:</strong> {{ metadata.ruby_versions | join: ", " | default: "Unknown" }}</span>
+                <span><strong>Platforms:</strong> {{ metadata.platforms | join: ", " | default: "Unknown" }}</span>
+            </div>
+        </header>
+
+        <!-- Charts Grid -->
+        <section class="dashboard-grid">
+            <!-- Parsing Performance Chart -->
+            <div class="chart-card fade-in-up">
+                <div class="chart-header">
+                    <h2 class="chart-title">Parsing Performance</h2>
+                    <p class="chart-subtitle">Operations per second across different file sizes</p>
+                </div>
+                <div class="chart-container">
+                    <canvas id="chart-parsing"></canvas>
+                </div>
+            </div>
+
+            <!-- Generation Performance Chart -->
+            <div class="chart-card fade-in-up">
+                <div class="chart-header">
+                    <h2 class="chart-title">Generation Performance</h2>
+                    <p class="chart-subtitle">Serialization speed across different file sizes</p>
+                </div>
+                <div class="chart-container">
+                    <canvas id="chart-generation"></canvas>
+                </div>
+            </div>
+
+            <!-- Memory Usage Chart -->
+            <div class="chart-card fade-in-up">
+                <div class="chart-header">
+                    <h2 class="chart-title">Memory Usage</h2>
+                    <p class="chart-subtitle">Memory consumption during operations</p>
+                </div>
+                <div class="chart-container">
+                    <canvas id="chart-memory"></canvas>
+                </div>
+            </div>
+
+            <!-- Streaming Performance Chart -->
+            <div class="chart-card fade-in-up">
+                <div class="chart-header">
+                    <h2 class="chart-title">Streaming Performance</h2>
+                    <p class="chart-subtitle">Streaming operations performance</p>
+                </div>
+                <div class="chart-container">
+                    <canvas id="chart-streaming"></canvas>
+                </div>
+            </div>
+        </section>
+
+        <!-- Environment Information -->
+        <section class="environment-section fade-in-up">
+            <h2 class="summary-title">Environment Information</h2>
+            <div class="environment-grid" id="environment-info">
+                <!-- Environment cards will be populated by JavaScript -->
+            </div>
+        </section>
+    </main>
+
+    <!-- Embedded Data -->
+    <script>
+        window.benchmarkData = {{ data }};
+    </script>
+
+    <!-- JavaScript -->
+    <script src="assets/js/dashboard.js" defer></script>
+
+    <!-- Loading indicator -->
+    <style>
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: var(--bg-primary);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+            transition: opacity 0.3s ease;
+        }
+
+        .loading-spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid var(--border-primary);
+            border-top: 3px solid var(--accent-primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .dashboard-header {
+            text-align: center;
+            margin-bottom: var(--space-2xl);
+            padding: var(--space-xl) 0;
+        }
+
+        .dashboard-header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: var(--space-md);
+            background: var(--gradient-primary);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .dashboard-subtitle {
+            font-size: 1.125rem;
+            color: var(--text-secondary);
+            margin-bottom: var(--space-lg);
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .dashboard-meta {
+            display: flex;
+            justify-content: center;
+            gap: var(--space-lg);
+            flex-wrap: wrap;
+            font-size: 0.875rem;
+            color: var(--text-muted);
+        }
+
+        @media (max-width: 768px) {
+            .dashboard-header h1 {
+                font-size: 2rem;
+            }
+
+            .dashboard-meta {
+                flex-direction: column;
+                gap: var(--space-sm);
+            }
+        }
+    </style>
+
+    <div class="loading-overlay" id="loading-overlay">
+        <div class="loading-spinner"></div>
+    </div>
+
+    <script>
+        // Hide loading overlay once everything is loaded
+        window.addEventListener('load', () => {
+            const overlay = document.getElementById('loading-overlay');
+            if (overlay) {
+                overlay.style.opacity = '0';
+                setTimeout(() => overlay.remove(), 300);
+            }
+        });
+
+        // Fallback to hide loading after 5 seconds
+        setTimeout(() => {
+            const overlay = document.getElementById('loading-overlay');
+            if (overlay) {
+                overlay.style.opacity = '0';
+                setTimeout(() => overlay.remove(), 300);
+            }
+        }, 5000);
+    </script>
+</body>
+</html>

data/lib/serialbench/templates/partials/chart_section.liquid

@@ -0,0 +1,4 @@
+<div class="chart-container">
+    <h4>{{ chart.title }}</h4>
+    <canvas id="{{ chart.id }}" width="400" height="300"></canvas>
+</div>

data/lib/serialbench/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Serialbench
-  VERSION = '0.1.1'
+  VERSION = '0.1.2'
 end

data/lib/serialbench.rb

@@ -3,40 +3,11 @@
 require_relative 'serialbench/version'
 require_relative 'serialbench/serializers'
 require_relative 'serialbench/benchmark_runner'
-require_relative 'serialbench/result_merger'
 require_relative 'serialbench/cli'
-require_relative 'serialbench/result_formatter'
-require_relative 'serialbench/chart_generator'
 require_relative 'serialbench/memory_profiler'
+require_relative 'serialbench/models'
+require_relative 'serialbench/site_generator'
 
 module Serialbench
   class Error < StandardError; end
-
-  # Supported serialization formats
-  FORMATS = %i[xml json toml].freeze
-
-  def self.run_benchmarks(formats: FORMATS, options: {})
-    runner = BenchmarkRunner.new(formats: formats, **options)
-    runner.run_all_benchmarks
-  end
-
-  def self.available_serializers(format = nil)
-    runner = BenchmarkRunner.new
-    if format
-      runner.serializers_for_format(format)
-    else
-      runner.all_serializers
-    end
-  end
-
-  def self.generate_reports(results)
-    result_merger = Serialbench::ResultMerger.new
-    result_merger.generate_all_reports(results)
-  end
-
-  def self.generate_reports_from_data(data_file)
-    require 'json'
-    data = JSON.parse(File.read(data_file), symbolize_names: true)
-    generate_reports(data)
-  end
 end

data/serialbench.gemspec

@@ -32,18 +32,20 @@ Gem::Specification.new do |spec|
 
   # Runtime dependencies
   spec.add_dependency 'benchmark-ips'
+  spec.add_dependency 'lutaml-model'
   spec.add_dependency 'memory_profiler'
   spec.add_dependency 'thor'
 
   # Reporting dependencies
   spec.add_dependency 'csv' # Required from Ruby 3.4+
+  spec.add_dependency 'liquid' # Template engine for HTML reports
 
   # XML serializers
-  spec.add_dependency 'rexml' # needed for Ruby 3.4+
   spec.add_dependency 'libxml-ruby'
   spec.add_dependency 'nokogiri'
   spec.add_dependency 'oga'
   spec.add_dependency 'ox'
+  spec.add_dependency 'rexml' # needed for Ruby 3.4+
 
   # JSON serializers
   spec.add_dependency 'oj'
@@ -56,4 +58,5 @@ Gem::Specification.new do |spec|
   # TOML serializers
   spec.add_dependency 'tomlib'
   spec.add_dependency 'toml-rb'
+  spec.add_dependency 'tomlrb'
 end