Feature/chart widget options config by gugu · Pull Request #1596 · rocket-admin/rocketadmin

gugu · 2026-02-12T10:34:22Z

No description provided.

Extend chart widget_options with multi-series support, custom colors, units/number formatting, stacking, horizontal bars, legend/axis config, data labels, sorting, and data limiting — all backward compatible with existing saved queries. - Add TypeScript interfaces for chart config (ChartWidgetOptions, etc.) - Create shared chart-config.helper.ts for Chart.js config building - Refactor chart-widget and chart-preview to use shared helper - Add full configuration UI to chart-edit with series management, display options, units/formatting, axis config, and data options - Update tests to match new seriesList-based API Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Use the existing `convert` dependency to auto-format chart values into the best human-readable unit (e.g. 1500000 bytes → 1.5 MB, 3600000 ms → 1 h). Adds a unit mode selector in chart-edit: - None: no unit formatting - Custom text: manual prefix/suffix ($, %, EUR) - Auto-convert: pick a source unit, values auto-scale Supports time, data, length, mass, temperature, frequency, power, energy, pressure, and volume unit families via grouped dropdown. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Always set indexAxis explicitly ('y' for horizontal, 'x' for vertical) so Chart.js doesn't cache the previous value when toggling off. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Series color and custom palette now use <input type="color"> pickers instead of text inputs. Added rgba-to-hex conversion for display, and changed palette from a textarea to a visual array of color swatches with add/remove controls. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…options-config # Conflicts: # frontend/src/app/components/charts/chart-edit/chart-edit.component.html

Copilot

Pull request overview

Adds a richer, structured configuration model for chart widgets (series, formatting, axes, legend, sorting, palette) and centralizes Chart.js data/options building so dashboards and chart previews render consistently.

Changes:

Introduces typed chart widget option schemas (ChartWidgetOptions, ChartSeriesConfig, etc.) for saved queries.
Adds chart-config.helper.ts to build Chart.js data/options, formatting, sorting/limit, and a custom data-labels plugin.
Updates chart widget renderer, chart preview, and chart edit UI to use the new options model (including multi-series + advanced settings UI).

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
frontend/src/app/models/saved-query.ts	Defines structured chart widget options/series/formatting types.
frontend/src/app/lib/chart-config.helper.ts	Centralized chart data/options building + formatting + datalabels plugin.
frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.ts	Switches renderer to helper-based chart building and adds plugins support.
frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.html	Passes computed plugins into `baseChart`.
frontend/src/app/components/charts/chart-preview/chart-preview.component.ts	Uses helper-based chart building; supports new `widgetOptions` input.
frontend/src/app/components/charts/chart-preview/chart-preview.component.html	Adds plugins binding; updates to new control-flow syntax.
frontend/src/app/components/charts/chart-edit/chart-edit.component.ts	Adds UI state/signals for new chart options + series/palette management; saves structured options.
frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts	Updates tests for series-based configuration and new payload shape.
frontend/src/app/components/charts/chart-edit/chart-edit.component.html	Major UI expansion: series editor + advanced options accordion + palette editor.
frontend/src/app/components/charts/chart-edit/chart-edit.component.css	Styling for new series/advanced options/palette UI.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-12T10:39:48Z

+): ChartData<ChartJsType> | null {
+	if (!rawData.length) return null;
+
+	const palette = options.color_palette ?? DEFAULT_COLOR_PALETTE;


options.color_palette ?? DEFAULT_COLOR_PALETTE will treat an empty array as a valid palette, which later produces undefined colors due to modulo by palette.length (0). Consider falling back to DEFAULT_COLOR_PALETTE when color_palette is missing or empty (e.g., check .length).

Suggested change

const palette = options.color_palette ?? DEFAULT_COLOR_PALETTE;

const palette =

options.color_palette && options.color_palette.length

? options.color_palette

: DEFAULT_COLOR_PALETTE;

Copilot · 2026-02-12T10:39:48Z

+								: typeof raw === 'object' && raw !== null
+									? ((raw as { y?: number }).y ?? 0)
+									: 0;
+						const label = context.dataset.label ?? '';


Tooltip label callback uses context.dataset.label for all chart types. For pie/doughnut/polarArea this loses the per-slice label (available on context.label), so every slice tooltip will show the same label. Adjust the callback to include the slice label for pie-type charts.

Suggested change

const label = context.dataset.label ?? '';

const datasetLabel = context.dataset.label ?? '';

const sliceLabel = context.label ?? '';

let label: string;

if (isPieType) {

if (datasetLabel && sliceLabel) {

label = `${datasetLabel} - ${sliceLabel}`;

} else {

label = datasetLabel || sliceLabel;

}

} else {

label = datasetLabel;

}

Copilot · 2026-02-12T10:39:48Z

+					const value = typeof tickValue === 'number' ? tickValue : parseFloat(tickValue);
+					return formatChartValue(value, globalUnits, globalFormat);


Tick callback parses string ticks with parseFloat(tickValue) but doesn't handle NaN (e.g., unexpected tick strings), which can render "NaN" on the axis. Consider using the existing numeric-extraction helper (or || 0) before calling formatChartValue.

Suggested change

const value = typeof tickValue === 'number' ? tickValue : parseFloat(tickValue);

return formatChartValue(value, globalUnits, globalFormat);

const parsed = typeof tickValue === 'number' ? tickValue : parseFloat(tickValue);

const safeValue = Number.isNaN(parsed) ? 0 : parsed;

return formatChartValue(safeValue, globalUnits, globalFormat);

Copilot · 2026-02-12T10:39:49Z

+export function buildChartData(
+	rawData: Record<string, unknown>[],
+	chartType: ChartType,
+	options: ChartWidgetOptions,
+): ChartData<ChartJsType> | null {
+	if (!rawData.length) return null;


This helper adds a lot of new chart behavior (unit conversion, series handling, sorting/limit, tooltip/tick formatting), but there are no unit tests for it. Since frontend/src/app/lib already has *.spec.ts coverage for other helpers, consider adding a chart-config.helper.spec.ts to cover key option combinations across chart types.

Copilot · 2026-02-12T10:39:49Z

+	ChartLegendConfig,
+	ChartNumberFormatConfig,
+	ChartSeriesConfig,
+	ChartType,
+	ChartUnitConfig,


ChartLegendConfig and ChartUnitConfig are imported here but never referenced in the file. Removing unused imports will avoid lint noise and keep the import list accurate.

Suggested change

ChartLegendConfig,

ChartNumberFormatConfig,

ChartSeriesConfig,

ChartType,

ChartUnitConfig,

ChartNumberFormatConfig,

ChartSeriesConfig,

ChartType,

Move .actions div outside .chart-edit-page so it sits directly in .chart-edit-main, matching the main branch layout where the sticky bottom bar spans the full panel width. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Allow users to pick a categorical column that automatically creates one dataset per unique value (pivot operation), instead of manually adding series. Also export DEFAULT_COLOR_PALETTE and add a "Load defaults" button in the color palette section. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

gugu and others added 4 commits February 12, 2026 08:55

Fix horizontal toggle not reverting chart to vertical

ca850fb

Always set indexAxis explicitly ('y' for horizontal, 'x' for vertical) so Chart.js doesn't cache the previous value when toggling off. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings February 12, 2026 10:34

Copilot started reviewing on behalf of gugu February 12, 2026 10:34 View session

Merge remote-tracking branch 'origin/main' into feature/chart-widget-…

29e3fe4

…options-config # Conflicts: # frontend/src/app/components/charts/chart-edit/chart-edit.component.html

Copilot AI reviewed Feb 12, 2026

View reviewed changes

gugu and others added 3 commits February 12, 2026 14:01

Fix actions bar to span full width outside chart-edit-page

26de598

Move .actions div outside .chart-edit-page so it sits directly in .chart-edit-main, matching the main branch layout where the sticky bottom bar spans the full panel width. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge branch 'main' into feature/chart-widget-options-config

68b92b0

lyubov-voloshko enabled auto-merge February 13, 2026 16:09

Merge branch 'main' into feature/chart-widget-options-config

4cd4d24

lyubov-voloshko merged commit 3bf8a7e into main Feb 13, 2026
19 checks passed

lyubov-voloshko deleted the feature/chart-widget-options-config branch February 13, 2026 16:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Feature/chart widget options config#1596

Feature/chart widget options config#1596
lyubov-voloshko merged 9 commits into
mainfrom
feature/chart-widget-options-config

gugu commented Feb 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-	const palette = options.color_palette ?? DEFAULT_COLOR_PALETTE;
+	const palette =
+		options.color_palette && options.color_palette.length
+			? options.color_palette
+			: DEFAULT_COLOR_PALETTE;

-						const label = context.dataset.label ?? '';
+						const datasetLabel = context.dataset.label ?? '';
+						const sliceLabel = context.label ?? '';
+						let label: string;
+						if (isPieType) {
+							if (datasetLabel && sliceLabel) {
+								label = `${datasetLabel} - ${sliceLabel}`;
+							} else {
+								label = datasetLabel || sliceLabel;
+							}
+						} else {
+							label = datasetLabel;
+						}

		const value = typeof tickValue === 'number' ? tickValue : parseFloat(tickValue);
		return formatChartValue(value, globalUnits, globalFormat);

-					const value = typeof tickValue === 'number' ? tickValue : parseFloat(tickValue);
-					return formatChartValue(value, globalUnits, globalFormat);
+					const parsed = typeof tickValue === 'number' ? tickValue : parseFloat(tickValue);
+					const safeValue = Number.isNaN(parsed) ? 0 : parsed;
+					return formatChartValue(safeValue, globalUnits, globalFormat);

Uh oh!

Uh oh!

Conversation

gugu commented Feb 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants