Initial commit — ProxMorph with TheRaiwy Dark cyber theme

2026-07-03 11:39:33 +03:00
commit 0482744090
62 changed files with 65519 additions and 0 deletions
@@ -0,0 +1,139 @@
+/**
+ * ProxMorph Chart Patcher
+ * Applies custom colors to Proxmox RRD charts
+ * 
+ * Features:
+ *   - Custom UniFi color palette for chart lines/areas
+ *   - Special handling for Network Traffic (blue/green layering)
+ *   - Subtle white border on hover dots for visibility
+ * 
+ * Color Palette:
+ *   Primary:   #30AD55 (UniFi green)
+ *   Secondary: #006EFF (UniFi blue)
+ *   Tertiary:  #5DC0E0 (Cyan/teal)
+ *   Warning:   #D08D1E (Amber/orange)
+ *   Critical:  #CC3135 (Red)
+ */
+
+(function () {
+    'use strict';
+
+    const PROXMORPH_CHART_COLORS = [
+        '#30AD55',  // UniFi green (PRIMARY)
+        '#006EFF',  // UniFi blue (SECONDARY)
+        '#5DC0E0',  // UniFi cyan/teal
+        '#D08D1E',  // UniFi amber/orange
+        '#CC3135',  // UniFi red
+        '#4797FF',  // UniFi light blue
+    ];
+
+    /**
+     * Apply custom colors to a single chart
+     */
+    function patchChart(chart) {
+        if (!chart || !chart.getSeries) return;
+
+        try {
+            const series = chart.getSeries();
+            if (!series || series.length === 0) return;
+
+            // Special handling for Network Traffic chart to avoid color blending
+            if (chart.title === 'Network Traffic') {
+                // Swap colors: Blue (bottom layer), Green (top layer)
+                chart.setColors(['#006EFF', '#30AD55']);
+                series.forEach((s, idx) => {
+                    if (idx === 0) {
+                        // Incoming - Blue area (bottom)
+                        s.setStyle({
+                            fillStyle: 'rgba(0, 110, 255, 0.7)',
+                            strokeStyle: '#006EFF',
+                            lineWidth: 2
+                        });
+                    } else if (idx === 1) {
+                        // Outgoing - Green area (top)
+                        s.setStyle({
+                            fillStyle: 'rgba(48, 173, 85, 0.8)',
+                            strokeStyle: '#30AD55',
+                            lineWidth: 2
+                        });
+                    }
+                    // Add subtle white border to hover dots
+                    s.setHighlight({
+                        opacity: 1,
+                        scaling: 1.5,
+                        strokeStyle: '#FFFFFF',
+                        lineWidth: 1
+                    });
+                });
+            } else {
+                // Standard color application for all other charts
+                chart.setColors(PROXMORPH_CHART_COLORS);
+                series.forEach((s, idx) => {
+                    const color = PROXMORPH_CHART_COLORS[idx % PROXMORPH_CHART_COLORS.length];
+                    s.setStyle({
+                        fillStyle: color,
+                        strokeStyle: color
+                    });
+                    // Add subtle white border to hover dots
+                    s.setHighlight({
+                        opacity: 1,
+                        scaling: 1.5,
+                        strokeStyle: '#FFFFFF',
+                        lineWidth: 1
+                    });
+                });
+            }
+
+            chart.redraw();
+        } catch (e) {
+            console.warn('[ProxMorph] Chart patch error:', e);
+        }
+    }
+
+    /**
+     * Check if UniFi theme is active
+     */
+    function isUnifiThemeActive() {
+        // Check for the presence of the UniFi theme stylesheet
+        return !!document.querySelector('link[href*="theme-unifi.css"]');
+    }
+
+    /**
+     * Find and patch all RRD charts on the page
+     */
+    function patchAllCharts() {
+        // Only patch if UniFi theme is active
+        if (!isUnifiThemeActive()) return;
+
+        if (typeof Ext === 'undefined' || !Ext.ComponentQuery) return;
+
+        const charts = Ext.ComponentQuery.query('proxmoxRRDChart');
+        if (charts && charts.length > 0) {
+            charts.forEach(patchChart);
+        }
+    }
+
+    /**
+     * Initialize the chart patcher with delayed start and periodic refresh
+     */
+    function init() {
+        // Initial patch after page load
+        if (document.readyState === 'complete') {
+            setTimeout(patchAllCharts, 500);
+        } else {
+            window.addEventListener('load', function () {
+                setTimeout(patchAllCharts, 500);
+            });
+        }
+
+        // Periodic re-patch to catch dynamically loaded charts
+        // Charts can be reloaded when switching views or refreshing data
+        setInterval(patchAllCharts, 2000);
+
+        console.log('[ProxMorph] Chart patcher initialized');
+    }
+
+    // Start initialization
+    init();
+
+})();