140 lines
4.5 KiB
JavaScript
140 lines
4.5 KiB
JavaScript
/**
|
|
* 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();
|
|
|
|
})();
|