panelbox 0.2.0__py3-none-any.whl

panelbox/templates/assets/js/tab-navigation.js

@@ -0,0 +1,161 @@
+/**
+ * PanelBox Reports - Tab Navigation
+ * ==================================
+ *
+ * Handles tab switching for interactive reports.
+ * Lightweight vanilla JavaScript implementation.
+ *
+ * Version: 1.0.0
+ */
+
+(function() {
+    'use strict';
+
+    /**
+     * Initialize tab navigation for all tab containers
+     */
+    function initTabs() {
+        const tabContainers = document.querySelectorAll('.tabs-container');
+
+        tabContainers.forEach(container => {
+            const tabButtons = container.querySelectorAll('.tab-button');
+            const tabContents = container.querySelectorAll('.tab-content');
+
+            // Set up click handlers
+            tabButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const targetId = this.dataset.tab;
+                    switchTab(container, targetId);
+                });
+            });
+
+            // Activate first tab by default
+            if (tabButtons.length > 0) {
+                const firstTab = tabButtons[0].dataset.tab;
+                switchTab(container, firstTab);
+            }
+        });
+    }
+
+    /**
+     * Switch to a specific tab
+     * @param {HTMLElement} container - The tabs container element
+     * @param {string} targetId - The ID of the tab to activate
+     */
+    function switchTab(container, targetId) {
+        const tabButtons = container.querySelectorAll('.tab-button');
+        const tabContents = container.querySelectorAll('.tab-content');
+
+        // Deactivate all tabs
+        tabButtons.forEach(btn => btn.classList.remove('active'));
+        tabContents.forEach(content => content.classList.remove('active'));
+
+        // Activate target tab
+        const targetButton = container.querySelector(`[data-tab="${targetId}"]`);
+        const targetContent = document.getElementById(targetId);
+
+        if (targetButton && targetContent) {
+            targetButton.classList.add('active');
+            targetContent.classList.add('active');
+
+            // Scroll tab into view if needed
+            targetButton.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center'
+            });
+
+            // Dispatch custom event for other components
+            const event = new CustomEvent('tabChanged', {
+                detail: { tabId: targetId }
+            });
+            container.dispatchEvent(event);
+        }
+    }
+
+    /**
+     * Add keyboard navigation support
+     */
+    function initKeyboardNavigation() {
+        document.addEventListener('keydown', function(e) {
+            const activeTab = document.querySelector('.tab-button.active');
+
+            if (!activeTab) return;
+
+            const container = activeTab.closest('.tabs-container');
+            const tabButtons = Array.from(container.querySelectorAll('.tab-button'));
+            const currentIndex = tabButtons.indexOf(activeTab);
+
+            let nextIndex;
+
+            // Arrow key navigation
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                nextIndex = currentIndex > 0 ? currentIndex - 1 : tabButtons.length - 1;
+            } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                nextIndex = currentIndex < tabButtons.length - 1 ? currentIndex + 1 : 0;
+            } else if (e.key === 'Home') {
+                e.preventDefault();
+                nextIndex = 0;
+            } else if (e.key === 'End') {
+                e.preventDefault();
+                nextIndex = tabButtons.length - 1;
+            }
+
+            if (nextIndex !== undefined) {
+                const nextTab = tabButtons[nextIndex];
+                const targetId = nextTab.dataset.tab;
+                switchTab(container, targetId);
+                nextTab.focus();
+            }
+        });
+    }
+
+    /**
+     * Save/restore tab state in URL hash
+     */
+    function initHashNavigation() {
+        // Restore tab from hash on load
+        if (window.location.hash) {
+            const tabId = window.location.hash.substring(1);
+            const tabButton = document.querySelector(`[data-tab="${tabId}"]`);
+            if (tabButton) {
+                const container = tabButton.closest('.tabs-container');
+                switchTab(container, tabId);
+            }
+        }
+
+        // Update hash when tab changes
+        document.addEventListener('tabChanged', function(e) {
+            const tabId = e.detail.tabId;
+            if (history.replaceState) {
+                history.replaceState(null, null, '#' + tabId);
+            } else {
+                window.location.hash = tabId;
+            }
+        });
+    }
+
+    /**
+     * Initialize everything when DOM is ready
+     */
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            initTabs();
+            initKeyboardNavigation();
+            initHashNavigation();
+        });
+    } else {
+        initTabs();
+        initKeyboardNavigation();
+        initHashNavigation();
+    }
+
+    // Export functions for external use
+    window.PanelBoxTabs = {
+        init: initTabs,
+        switchTab: switchTab
+    };
+
+})();

panelbox/templates/assets/js/utils.js

@@ -0,0 +1,276 @@
+/**
+ * PanelBox Reports - Utility Functions
+ * =====================================
+ *
+ * Common utility functions for reports.
+ *
+ * Version: 1.0.0
+ */
+
+(function() {
+    'use strict';
+
+    /**
+     * Format a number with specified decimal places
+     * @param {number} value - The number to format
+     * @param {number} decimals - Number of decimal places
+     * @returns {string} Formatted number
+     */
+    function formatNumber(value, decimals = 3) {
+        if (value === null || value === undefined || isNaN(value)) {
+            return 'N/A';
+        }
+        return value.toFixed(decimals);
+    }
+
+    /**
+     * Format a p-value with scientific notation if small
+     * @param {number} pvalue - The p-value to format
+     * @returns {string} Formatted p-value
+     */
+    function formatPValue(pvalue) {
+        if (pvalue === null || pvalue === undefined || isNaN(pvalue)) {
+            return 'N/A';
+        }
+        if (pvalue < 0.001) {
+            return pvalue.toExponential(2);
+        }
+        return pvalue.toFixed(4);
+    }
+
+    /**
+     * Format a percentage
+     * @param {number} value - The value to format as percentage
+     * @param {number} decimals - Number of decimal places
+     * @returns {string} Formatted percentage
+     */
+    function formatPercentage(value, decimals = 2) {
+        if (value === null || value === undefined || isNaN(value)) {
+            return 'N/A';
+        }
+        return (value * 100).toFixed(decimals) + '%';
+    }
+
+    /**
+     * Add significance stars to a p-value
+     * @param {number} pvalue - The p-value
+     * @returns {string} Stars string
+     */
+    function significanceStars(pvalue) {
+        if (pvalue < 0.001) return '***';
+        if (pvalue < 0.01) return '**';
+        if (pvalue < 0.05) return '*';
+        if (pvalue < 0.1) return '.';
+        return '';
+    }
+
+    /**
+     * Copy text to clipboard
+     * @param {string} text - Text to copy
+     * @returns {Promise<void>}
+     */
+    async function copyToClipboard(text) {
+        try {
+            await navigator.clipboard.writeText(text);
+            showNotification('Copied to clipboard!', 'success');
+        } catch (err) {
+            // Fallback for older browsers
+            const textarea = document.createElement('textarea');
+            textarea.value = text;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            try {
+                document.execCommand('copy');
+                showNotification('Copied to clipboard!', 'success');
+            } catch (err2) {
+                showNotification('Failed to copy', 'danger');
+            }
+            document.body.removeChild(textarea);
+        }
+    }
+
+    /**
+     * Show a temporary notification
+     * @param {string} message - Message to show
+     * @param {string} type - Type: success, warning, danger, info
+     * @param {number} duration - Duration in ms
+     */
+    function showNotification(message, type = 'info', duration = 3000) {
+        const notification = document.createElement('div');
+        notification.className = `notification notification-${type}`;
+        notification.textContent = message;
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 12px 24px;
+            border-radius: 8px;
+            background: white;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            z-index: 9999;
+            animation: slideInRight 0.3s ease;
+        `;
+
+        // Set color based on type
+        const colors = {
+            success: '#10b981',
+            warning: '#f59e0b',
+            danger: '#ef4444',
+            info: '#3b82f6'
+        };
+        notification.style.borderLeft = `4px solid ${colors[type] || colors.info}`;
+
+        document.body.appendChild(notification);
+
+        setTimeout(() => {
+            notification.style.animation = 'slideOutRight 0.3s ease';
+            setTimeout(() => {
+                document.body.removeChild(notification);
+            }, 300);
+        }, duration);
+    }
+
+    /**
+     * Export table to CSV
+     * @param {string} tableId - ID of the table element
+     * @param {string} filename - Name for the CSV file
+     */
+    function exportTableToCSV(tableId, filename = 'table.csv') {
+        const table = document.getElementById(tableId);
+        if (!table) return;
+
+        const rows = Array.from(table.querySelectorAll('tr'));
+        const csv = rows.map(row => {
+            const cells = Array.from(row.querySelectorAll('th, td'));
+            return cells.map(cell => {
+                let text = cell.textContent.trim();
+                // Escape quotes and wrap in quotes if contains comma
+                if (text.includes(',') || text.includes('"')) {
+                    text = '"' + text.replace(/"/g, '""') + '"';
+                }
+                return text;
+            }).join(',');
+        }).join('\n');
+
+        // Download CSV
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        const url = URL.createObjectURL(blob);
+        link.setAttribute('href', url);
+        link.setAttribute('download', filename);
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+
+        showNotification('Table exported to CSV', 'success');
+    }
+
+    /**
+     * Print the report
+     */
+    function printReport() {
+        window.print();
+    }
+
+    /**
+     * Toggle element visibility
+     * @param {string} elementId - ID of element to toggle
+     */
+    function toggleVisibility(elementId) {
+        const element = document.getElementById(elementId);
+        if (element) {
+            element.style.display = element.style.display === 'none' ? '' : 'none';
+        }
+    }
+
+    /**
+     * Smooth scroll to element
+     * @param {string} elementId - ID of element to scroll to
+     */
+    function scrollToElement(elementId) {
+        const element = document.getElementById(elementId);
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    }
+
+    /**
+     * Debounce function
+     * @param {Function} func - Function to debounce
+     * @param {number} wait - Wait time in ms
+     * @returns {Function} Debounced function
+     */
+    function debounce(func, wait = 300) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
+    /**
+     * Check if element is in viewport
+     * @param {HTMLElement} element - Element to check
+     * @returns {boolean} True if in viewport
+     */
+    function isInViewport(element) {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+
+    // Add CSS for animations
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes slideInRight {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        @keyframes slideOutRight {
+            from {
+                transform: translateX(0);
+                opacity: 1;
+            }
+            to {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+        }
+    `;
+    document.head.appendChild(style);
+
+    // Export utilities
+    window.PanelBoxUtils = {
+        formatNumber,
+        formatPValue,
+        formatPercentage,
+        significanceStars,
+        copyToClipboard,
+        showNotification,
+        exportTableToCSV,
+        printReport,
+        toggleVisibility,
+        scrollToElement,
+        debounce,
+        isInViewport
+    };
+
+})();

panelbox/templates/common/footer.html

@@ -0,0 +1,24 @@
+<div class="report-footer">
+    <div class="report-footer-actions no-print">
+        <button class="btn btn-secondary btn-sm" onclick="window.print()">
+            Print Report
+        </button>
+        {% if show_export_buttons %}
+        <button class="btn btn-secondary btn-sm" onclick="PanelBoxUtils.exportTableToCSV('summary-table', 'panelbox_results.csv')">
+            Export to CSV
+        </button>
+        {% endif %}
+    </div>
+
+    <div class="report-footer-text">
+        <p>
+            Generated with <strong>PanelBox {{ panelbox_version }}</strong> |
+            <a href="https://github.com/panelbox/panelbox" target="_blank">Documentation</a>
+        </p>
+        <p class="text-xs text-gray-500">
+            Report Type: {{ report_type }} |
+            Generated: {{ generation_date }} |
+            Python {{ python_version }}
+        </p>
+    </div>
+</div>

panelbox/templates/common/header.html

@@ -0,0 +1,44 @@
+<div class="report-header">
+    <h1 class="report-title">{{ report_title }}</h1>
+    {% if report_subtitle %}
+    <p class="report-subtitle">{{ report_subtitle }}</p>
+    {% endif %}
+
+    <div class="report-meta">
+        <div class="report-meta-item">
+            <span class="report-meta-label">Model:</span>
+            <span>{{ model_type }}</span>
+        </div>
+
+        {% if formula %}
+        <div class="report-meta-item">
+            <span class="report-meta-label">Formula:</span>
+            <code class="text-sm">{{ formula }}</code>
+        </div>
+        {% endif %}
+
+        <div class="report-meta-item">
+            <span class="report-meta-label">Observations:</span>
+            <span>{{ nobs|number_format }}</span>
+        </div>
+
+        {% if n_entities %}
+        <div class="report-meta-item">
+            <span class="report-meta-label">Entities:</span>
+            <span>{{ n_entities|number_format }}</span>
+        </div>
+        {% endif %}
+
+        {% if n_periods %}
+        <div class="report-meta-item">
+            <span class="report-meta-label">Periods:</span>
+            <span>{{ n_periods }}</span>
+        </div>
+        {% endif %}
+
+        <div class="report-meta-item">
+            <span class="report-meta-label">Generated:</span>
+            <span>{{ generation_date }}</span>
+        </div>
+    </div>
+</div>

panelbox/templates/common/meta.html

@@ -0,0 +1,5 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="generator" content="PanelBox {{ panelbox_version }}">
+<meta name="description" content="PanelBox {{ report_type }} Report{% if report_title %} - {{ report_title }}{% endif %}">
+<title>{% if report_title %}{{ report_title }} - {% endif %}PanelBox Report</title>