Skip to content

Fix white ApexCharts backgrounds under dark themes (deepness) by setting chart.background from the theme #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheWitness merged 1 commit into from
Oct 9, 2026
Merged

Fix white ApexCharts backgrounds under dark themes (deepness) by setting chart.background from the theme #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
* bug: Migrate an existing `plugin_slowlog_details_methods` table in place during upgrade - `api_plugin_db_table_create()` never retrofits a table that already exists, so on an existing install the de-normalization above would otherwise leave the old `methodid` column (and no `method` column), breaking every import/detail/stat/chart query with an unknown-column error. `slowlog_check_upgrade()` now runs an idempotent `slowlog_migrate_details_methods_to_method()` that adds the `method` column, backfills the names from the `plugin_slowlog_methods` dictionary, then swaps the primary key to `(logid, logentry, method)` and drops `methodid`. It runs on every page (self-gating on the `methodid` column) because this schema change ships without a version bump, so the version-drift upgrade branch would never fire for it
* refactor: Move the slowlog_functions.php library file into includes/ and switch every file inclusion from include/include_once to require/require_once for fail-fast consistency (references updated across setup.php, slowlog.php, import_log.php, and the test suite)
* refactor: Rename includes/slowlog_functions.php to includes/functions.php to match the Cacti plugin naming convention; every require/loadPluginSource reference and the Pest coverage source list were updated, and a manifest.json tombstone (includes/slowlog_functions.php) prunes the old filename from existing installs on upgrade
* bug: Fix the By Method/By Table charts and the import upload donut still rendering a white plot surface under dark themes (e.g. deepness) - `slowlog_apex_theme()` skinned the text (`foreColor`), gridlines, and donut track from the active theme's rrdtheme but never set the ApexCharts `chart.background`, so ApexCharts painted its default white background over the dark theme regardless of `theme.mode`. The helper now also resolves the theme's own panel background (rrdtheme `back`, falling back to the plotting `canvas`, then white) and it is applied as `chart.background` on the bar, box, and donut charts
* refactor: Move all schema management (table definitions, create, upgrade, and drop helpers) into includes/database.php (the thold model) with the Cacti copyright header; setup.php's install/uninstall/upgrade paths now require that file and delegate to it, keeping the api_plugin_db_table_create() create path and the db_update_table() upgrade refresh unchanged
* dev: Enforce patch coverage of changed lines in CI and remove the inert COMPOSER_ROOT_VERSION env from the Pest step
* bug: Fix the By Method/By Table chart scope filter rendering two overlapping widgets (a select2 multi-select and the jQuery multiselect) with an overlapping search box - `slowlog_charts_filter()` unconditionally applied `.multiselect()` to `#chart_scope` while Cacti core independently turned the same plain `<select>` into a select2. The control now carries the `select2-multi-count` class and prefers select2 when it is loaded (binding `select2:close` to re-apply the filter), only falling back to the jquery-multiselect widget when select2 is unavailable; its empty-selection state preserves the original `Select Method`/`Select Table` prompt rather than an inaccurate `All Selected`
Expand Down
17 changes: 12 additions & 5 deletions includes/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3112,8 +3112,9 @@ function slowlog_get_chart_scope_items(string $chart_type, int $id): array {
* 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.
* @return array{mode:string,foreColor:string,gridColor:string,background:string}
* ApexCharts theme mode ('light'|'dark') plus '#rrggbb' text,
* gridline, and chart-surface background colors.
*
* @global array $config Cacti global configuration array; used to locate the
* active theme's rrdtheme.php.
Expand Down Expand Up @@ -3151,6 +3152,11 @@ function slowlog_apex_theme(): array {
$font = slowlog_normalize_hex_color($rrdcolors['font'] ?? '', '000000');
$grid = slowlog_normalize_hex_color($rrdcolors['grid'] ?? '', 'cccccc');

// The chart surface must follow the theme too, or ApexCharts paints its default
// white plot background over a dark theme. Prefer the theme's panel background
// ('back'), falling back to the plotting canvas, then white for light defaults.
$back = slowlog_normalize_hex_color($rrdcolors['back'] ?? ($rrdcolors['canvas'] ?? ''), 'ffffff');

// 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));
Expand All @@ -3159,9 +3165,10 @@ function slowlog_apex_theme(): array {
$luminance = (0.299 * $r) + (0.587 * $g) + (0.114 * $b);

return [
'mode' => ($luminance >= 128) ? 'dark' : 'light',
'foreColor' => '#' . $font,
'gridColor' => '#' . $grid
'mode' => ($luminance >= 128) ? 'dark' : 'light',
'foreColor' => '#' . $font,
'gridColor' => '#' . $grid,
'background' => '#' . $back
];
}

Expand Down
3 changes: 3 additions & 0 deletions slowlog.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,6 +510,7 @@ function initDonut() {
type: 'radialBar',
height: 160,
width: 160,
background: slowlogThemeColors.background,
sparkline: { enabled: true }
},
series: [0],
Expand Down Expand Up @@ -1189,6 +1190,7 @@ function renderChart(chartid, title, yaxislabel, categories, data, mode, height,
type: 'bar',
height: height,
width: width,
background: slowlogThemeColors.background,
foreColor: slowlogThemeColors.foreColor,
redrawOnParentResize: true,
redrawOnWindowResize: true,
Expand Down Expand Up @@ -1301,6 +1303,7 @@ function renderBoxChart(chartid, title, yaxislabel, categories, boxData, p95Data
type: 'boxPlot',
height: height,
width: width,
background: slowlogThemeColors.background,
foreColor: slowlogThemeColors.foreColor,
redrawOnParentResize: true,
redrawOnWindowResize: true
Expand Down
18 changes: 15 additions & 3 deletions tests/Unit/ApexThemeTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,15 @@

$themes = $this->sandbox . '/include/themes';

foreach (array('lightx', 'darkx', 'alphax', 'variantx') as $theme) {
foreach (array('lightx', 'darkx', 'alphax', 'variantx', 'canvasx') as $theme) {
mkdir($themes . '/' . $theme, 0777, true);
}

file_put_contents($themes . '/lightx/rrdtheme.php', "<?php\n\$rrdcolors['font'] = '000000';\n\$rrdcolors['grid'] = 'cccccc';\n");
file_put_contents($themes . '/darkx/rrdtheme.php', "<?php\n\$rrdcolors['font'] = 'FFFFFF';\n\$rrdcolors['grid'] = '545454';\n");
file_put_contents($themes . '/darkx/rrdtheme.php', "<?php\n\$rrdcolors['font'] = 'FFFFFF';\n\$rrdcolors['grid'] = '545454';\n\$rrdcolors['back'] = '11161D';\n");
file_put_contents($themes . '/alphax/rrdtheme.php', "<?php\n\$rrdcolors['font'] = 'FFFFffaa';\n\$rrdcolors['grid'] = '21212400';\n");
file_put_contents($themes . '/variantx/rrdtheme.php', "<?php\n\$rrdcolors['font'] = '000000';\n\$rrdcolors_dark['font'] = 'FFFFFF';\n\$rrdcolors_light['font'] = '000000';\n");
file_put_contents($themes . '/canvasx/rrdtheme.php', "<?php\n\$rrdcolors['font'] = 'FFFFFF';\n\$rrdcolors['canvas'] = '0B0E13';\n");

$GLOBALS['config']['base_path'] = $this->sandbox;
});
Expand All @@ -53,7 +54,7 @@

$themes = $this->sandbox . '/include/themes';

foreach (array('lightx', 'darkx', 'alphax', 'variantx') as $theme) {
foreach (array('lightx', 'darkx', 'alphax', 'variantx', 'canvasx') as $theme) {
@unlink($themes . '/' . $theme . '/rrdtheme.php');
@rmdir($themes . '/' . $theme);
}
Expand Down Expand Up @@ -85,6 +86,7 @@
expect($apex['mode'])->toBe('light');
expect($apex['foreColor'])->toBe('#000000');
expect($apex['gridColor'])->toBe('#cccccc');
expect($apex['background'])->toBe('#ffffff');
});

it('resolves a dark theme to dark mode from its light font luminance', function () {
Expand All @@ -95,6 +97,15 @@
expect($apex['mode'])->toBe('dark');
expect($apex['foreColor'])->toBe('#ffffff');
expect($apex['gridColor'])->toBe('#545454');
expect($apex['background'])->toBe('#11161d');
});

it('uses the plotting canvas color as the background when back is absent', function () {
$GLOBALS['__test_selected_theme'] = 'canvasx';

$apex = slowlog_apex_theme();

expect($apex['background'])->toBe('#0b0e13');
});

it('strips RRDtool alpha suffixes from the resolved theme colors', function () {
Expand Down Expand Up @@ -135,4 +146,5 @@
expect($apex['mode'])->toBe('light');
expect($apex['foreColor'])->toBe('#000000');
expect($apex['gridColor'])->toBe('#cccccc');
expect($apex['background'])->toBe('#ffffff');
});
Loading