From 777932153fde82c79e38d4a8b64948361eb8549d Mon Sep 17 00:00:00 2001 From: TheWitness Date: Thu, 8 Oct 2026 16:14:54 -0400 Subject: [PATCH 1/3] Skin ApexCharts from the active Cacti theme's rrdtheme colors The By Method/By Table charts and the import upload donut hard-coded a single light palette and a two-theme light/dark switch that mislabeled several core themes (e.g. paper-plane and deepness are dark but rendered with light text/grid). Derive the ApexCharts foreColor, gridline color and light/dark mode from the active theme's own include/themes//rrdtheme.php - mirroring Cacti core's rrdtheme loading, honoring the CactiColorMode cookie's dark/light variants, and inferring mode from the theme font luminance so every current and future theme is covered. --- includes/slowlog_functions.php | 86 ++++++++++++++++++++++++++++++++++ slowlog.php | 31 +++++------- 2 files changed, 98 insertions(+), 19 deletions(-) diff --git a/includes/slowlog_functions.php b/includes/slowlog_functions.php index 433eedc..ba21241 100644 --- a/includes/slowlog_functions.php +++ b/includes/slowlog_functions.php @@ -3096,3 +3096,89 @@ function slowlog_get_chart_scope_items(string $chart_type, int $id): array { return $scope_items; } + +/** + * Resolves the active Cacti theme's chart surface colors so the plugin's + * ApexCharts match whatever core theme (and dark/light color mode) the user has + * selected, instead of a single hard-coded palette. + * + * Mirrors Cacti core's own rrdtheme loading (lib/rrd.php): the selected theme is + * validated against the themes allowlist, its rrdtheme.php is included for the + * canonical font/grid colors, and the CactiColorMode cookie's dark/light + * variants are honored when a theme defines them. The light/dark ApexCharts mode + * is derived from the luminance of the theme's own font color, so every current + * and future theme is covered without a hand-maintained theme-name list. + * + * Called from slowlog_import() and slowlog_view_charts() to skin the upload + * donut and the By Method/By Table charts. + * + * @return array{mode:string,foreColor:string,gridColor:string} ApexCharts theme + * mode ('light'|'dark') plus '#rrggbb' text and gridline colors. + * + * @global array $config Cacti global configuration array; used to locate the + * active theme's rrdtheme.php. + */ +function slowlog_apex_theme(): array { + global $config; + + $theme = get_selected_theme(); + $theme = function_exists('cacti_validate_theme') ? cacti_validate_theme($theme) : basename($theme); + + $rrdcolors = []; + $themefile = $config['base_path'] . '/include/themes/' . $theme . '/rrdtheme.php'; + + if (is_readable($themefile)) { + include($themefile); + + // Themes such as midwinter ship dark/light variants selected by the same + // CactiColorMode cookie core keys off of; prefer the matching variant. + if (isset($_COOKIE['CactiColorMode']) && in_array($_COOKIE['CactiColorMode'], ['dark', 'light'], true)) { + $variant = 'rrdcolors_' . $_COOKIE['CactiColorMode']; + + if (isset($$variant) && is_array($$variant)) { + $rrdcolors = array_merge($rrdcolors, $$variant); + } + } + } + + $font = slowlog_normalize_hex_color($rrdcolors['font'] ?? '', '000000'); + $grid = slowlog_normalize_hex_color($rrdcolors['grid'] ?? '', 'cccccc'); + + // A light font implies a dark theme; ApexCharts' mode drives the tooltip surface. + $r = hexdec(substr($font, 0, 2)); + $g = hexdec(substr($font, 2, 2)); + $b = hexdec(substr($font, 4, 2)); + + $luminance = (0.299 * $r) + (0.587 * $g) + (0.114 * $b); + + return [ + 'mode' => ($luminance >= 128) ? 'dark' : 'light', + 'foreColor' => '#' . $font, + 'gridColor' => '#' . $grid + ]; +} + +/** + * Normalizes a Cacti rrdtheme color (which may carry an RRDtool alpha suffix or + * be shorthand) into a plain 6-digit lowercase hex string usable by CSS/SVG. + * + * Called from slowlog_apex_theme() to sanitize the theme's font/grid colors. + * + * @param string $value Raw rrdtheme color, e.g. 'FFFFffaa' or '21212400'. + * @param string $fallback 6-digit hex to return when $value has no usable hex. + * + * @return string A 6-character lowercase hex string (no leading '#'). + */ +function slowlog_normalize_hex_color(string $value, string $fallback): string { + $hex = preg_replace('/[^0-9A-Fa-f]/', '', $value); + + if (strlen($hex) >= 6) { + return strtolower(substr($hex, 0, 6)); + } + + if (strlen($hex) === 3) { + return strtolower($hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2]); + } + + return strtolower($fallback); +} diff --git a/slowlog.php b/slowlog.php index 10bb8fb..fb48074 100644 --- a/slowlog.php +++ b/slowlog.php @@ -340,6 +340,7 @@ function slowlog_import(): void { global $config; $selected_theme = get_selected_theme(); + $apex = slowlog_apex_theme(); print get_md5_include_js('plugins/slowlog/js/apexcharts.js'); @@ -477,6 +478,7 @@ function slowlog_import(): void {