(no squash) #EX-308, #EX-309: Fix chart colors in light theme and after theme change

frontend/Exence/src/app/private/statistics/chart-providers.ts

@@ -174,6 +174,7 @@ const LineProvider: ProviderFn<SeriesPayload> = (
 	title: string,
 	_settings?: Record<string, unknown>,
 ): ApexOptions => {
+	const fallbackColor = getCssVariableValue('--primary-color');
 	const isSlopeChart = 'series' in data ? false : true;
 	const isMixed = isSlopeChart ? false : (data as SeriesPayload).series.some(si => si.type !== 'line');
 
@@ -195,7 +196,7 @@ const LineProvider: ProviderFn<SeriesPayload> = (
 		}));
 	} else {
 		const payload = data as SeriesPayload;
-		series = payload.series.map(si => ({ ...si, color: si.color ?? 'var(--primary-color)' }));
+		series = payload.series.map(si => ({ ...si, color: si.color ?? fallbackColor }));
 	}
 
 	const yAxisConfig: ApexYAxis | ApexYAxis[] = isMixed
@@ -538,7 +539,7 @@ const RadialBarProvider: ProviderFn<GaugePayload> = (
 			...commonChartOptions.title,
 			text: title,
 		},
-		labels: [title], // TODO should recieve from ChartWidget object (widget.title)
+		labels: [title],
 		plotOptions: {
 			radialBar: {
 				startAngle: -135,
@@ -826,7 +827,7 @@ const RadarProvider: ProviderFn<SeriesPayload> = (
 	} else {
 		series = payload.series.map(si => ({
 			...si,
-			name: new Intl.DateTimeFormat('hu-HU', { year: 'numeric', month: 'short' }).format(new Date(si.name)), // TODO this should be the default after localiszation
+			name: new Intl.DateTimeFormat('hu-HU', { year: 'numeric', month: 'short' }).format(new Date(si.name)), // TODO this should be the default after localization
 		}));
 	}
 
@@ -1004,6 +1005,16 @@ const PolarAreaProvider: ProviderFn<DistributionPayload> = (
 		series: data,
 		colors,
 		labels,
+		plotOptions: {
+			polarArea: {
+				rings: {
+					strokeColor: 'var(--apexchart-grid-color)',
+				},
+				spokes: {
+					connectorColors: 'var(--apexchart-grid-color)',
+				},
+			},
+		},
 		dataLabels: {
 			enabled: true,
 			background: {

frontend/Exence/src/app/private/statistics/chart-widget/chart-widget.component.ts

@@ -6,13 +6,14 @@ import { ApexOptions, ChartComponent, NgApexchartsModule } from 'ng-apexcharts';
 import { ExChartType } from '../../../data-model/modules/statistics/ChartType';
 import { Timeframe } from '../../../data-model/modules/statistics/Timeframe';
 import { ChartWidget } from '../../../data-model/modules/statistics/Widget';
-import { WidgetDataPayload } from '../../../data-model/modules/statistics/WidgetDataPayload';
 import {
 	mapToExChartType,
 	TIMEFRAME_HIDDEN_WIDGET_TYPES,
 } from '../../../data-model/modules/statistics/widget-config.model';
+import { WidgetDataPayload } from '../../../data-model/modules/statistics/WidgetDataPayload';
 import { AnimatedSkeletonLoaderComponent } from '../../../shared/animated-skeleton-loader/animated-skeleton-loader.component';
 import { BaseComponent } from '../../../shared/base-component/base.component';
+import { DisplayThemeService } from '../../../shared/display-theme.service';
 import { mapToProvider } from '../chart-providers';
 import { SankeyChartComponent } from '../sankey-chart/sankey-chart.component';
 import { StatisticService } from '../statistic.service';
@@ -34,6 +35,7 @@ import { TimeframeComponent } from '../timeframe/timeframe.component';
 })
 export class ChartWidgetComponent extends BaseComponent {
 	private readonly statisticService = inject(StatisticService);
+	private readonly themeService = inject(DisplayThemeService);
 
 	widget = input.required<ChartWidget>();
 	editing = input.required<boolean>();
@@ -47,6 +49,7 @@ export class ChartWidgetComponent extends BaseComponent {
 	showTimeframe = computed<boolean>(() => !TIMEFRAME_HIDDEN_WIDGET_TYPES.includes(this.widget().type));
 
 	private readonly chart = viewChild<ChartComponent>('chart');
+	private readonly cachedPayload = signal<WidgetDataPayload | undefined>(undefined);
 
 	timeframe = signal<Timeframe>(Timeframe.YEAR_TO_DATE);
 	isLoading = signal<boolean>(false);
@@ -81,13 +84,19 @@ export class ChartWidgetComponent extends BaseComponent {
 
 			this.statisticService
 				.getWidgetData(this.widget().id, timeframe)
-				.then(response => {
-					const providerFn = mapToProvider<typeof response.payload>(this.type());
-					this.data.set(providerFn(response.payload, this.widget().title) as Partial<ApexOptions>);
-				})
+				.then(response => this.cachedPayload.set(response.payload))
 				.catch(() => {})
 				.finally(() => this.isLoading.set(false));
 		});
+
+		effect(() => {
+			this.themeService.displayThemeSignal(); // dependency
+			const payload = this.cachedPayload();
+			if (!payload) return;
+
+			const providerFn = mapToProvider<typeof payload>(this.type());
+			this.data.set(providerFn(payload, this.widget().title) as Partial<ApexOptions>);
+		});
 	}
 
 	triggerRedraw(): void {

frontend/Exence/src/app/private/statistics/sankey-chart/sankey-chart.component.ts

@@ -5,10 +5,11 @@ import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChartsOption } from 'echarts/types/dist/shared';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+import { Timeframe } from '../../../data-model/modules/statistics/Timeframe';
 import { ChartWidget } from '../../../data-model/modules/statistics/Widget';
+import { WidgetDataPayload } from '../../../data-model/modules/statistics/WidgetDataPayload';
 import { AnimatedSkeletonLoaderComponent } from '../../../shared/animated-skeleton-loader/animated-skeleton-loader.component';
 import { DisplayThemeService } from '../../../shared/display-theme.service';
-import { Timeframe } from '../../../data-model/modules/statistics/Timeframe';
 import { mapToProvider } from '../chart-providers';
 import { StatisticService } from '../statistic.service';
 
@@ -41,6 +42,8 @@ export class SankeyChartComponent {
 	widget = input.required<ChartWidget>();
 	timeframe = input.required<Timeframe>();
 
+	private readonly cachedPayload = signal<WidgetDataPayload | undefined>(undefined);
+
 	isLoading = signal<boolean>(false);
 	data = signal<Partial<EChartsOption> | undefined>(undefined);
 
@@ -53,11 +56,19 @@ export class SankeyChartComponent {
 			this.statisticService
 				.getWidgetData(this.widget().id, timeframe)
 				.then(response => {
-					const providerFn = mapToProvider<typeof response.payload>('sankey');
-					this.data.set(providerFn(response.payload, this.widget().title) as Partial<EChartsOption>);
+					this.cachedPayload.set(response.payload);
 				})
 				.catch(() => {})
 				.finally(() => this.isLoading.set(false));
 		});
+
+		effect(() => {
+			this.themeService.displayThemeSignal(); // dependency
+			const payload = this.cachedPayload();
+			if (!payload) return;
+
+			const providerFn = mapToProvider<typeof payload>('sankey');
+			this.data.set(providerFn(payload, this.widget().title) as Partial<EChartsOption>);
+		});
 	}
 }

frontend/Exence/src/app/private/statistics/widget-catalog-dialog/widget-catalog-dialog.component.html

@@ -96,8 +96,8 @@ <h3 class="fs-5">{{ widget.title }}</h3>
 		ex-dialog-card-actions
 		class="d-flex flex-column-reverse flex-sm-row justify-content-end align-items-center gap-2 w-100 mt-4"
 	>
-		<ex-button filled color="accent" matIcon="chevron_left" (click)="previousStep()">Back</ex-button>
 		@if (isLastStep()) {
+			<ex-button filled color="accent" matIcon="chevron_left" (click)="previousStep()">Back</ex-button>
 			<ex-button filled color="primary" matIcon="check" iconPositionEnd (click)="create()">Create</ex-button>
 		} @else {
 			<div [matTooltip]="selectedWidget.invalid ? 'Select a widget type before creation!' : ''">

frontend/Exence/src/styles/components/apexchart.scss

@@ -95,4 +95,8 @@
 			stroke: var(--apexchart-primary-shade-1);
 		}
 	}
+
+	.apexcharts-radialbar .apexcharts-datalabels-group text.apexcharts-datalabel-label {
+		fill: var(--default-text-color);
+	}
 }

frontend/Exence/src/styles/variables/colors-light.scss

@@ -8,27 +8,45 @@
 $palettes: (
 	primary: (
 		0: #000000,
-		10: #171838,
-		20: #2c2d4e,
-		25: #37385a,
-		30: #424466,
-		35: #4e4f72,
-		40: #5a5b7f,
-		50: #737499,
-		60: #8d8db4,
-		70: #a8a8cf,
-		80: #c3c3ec,
-		90: #e1e0ff,
-		95: #f1efff,
-		98: #fcf8ff,
-		99: #fffbff,
+		10: #121420,
+		20: #151828,
+		25: #22233a,
+		30: #2e2f46,
+		35: #3a3b52,
+		40: #46455e,
+		50: #5e5e7a,
+		60: #767796,
+		70: #8e8fb2,
+		80: #a6a7ce,
+		90: #c9c9f2,
+		95: #e4e4fa,
+		98: #f6f6fd,
+		99: #fcfcff,
 		100: #ffffff,
 	),
 	secondary: (
+		0: #000103,
+		10: #081a3d,
+		20: #0d285c,
+		25: #143477,
+		30: #1c4193,
+		35: #2852ae,
+		40: #3261c8,
+		50: #4f82ed,
+		60: #75a3ff,
+		70: #9dbdff,
+		80: #c2d6ff,
+		90: #e1edff,
+		95: #f0f6ff,
+		98: #f7faff,
+		99: #fafcff,
+		100: #ffffff,
+	),
+	tertiary: (
 		0: #000000,
 		10: #00210c,
 		20: #003919,
-		25: #00451f,
+		25: #004520,
 		30: #005227,
 		35: #00602e,
 		40: #006d35,
@@ -42,67 +60,49 @@ $palettes: (
 		99: #f5fff2,
 		100: #ffffff,
 	),
-	tertiary: (
-		0: #000000,
-		10: #410005,
-		20: #68000d,
-		25: #7d0012,
-		30: #8e111c,
-		35: #9f1f26,
-		40: #b02c30,
-		50: #d24546,
-		60: #f45e5d,
-		70: #ff8984,
-		80: #ffb3af,
-		90: #ffdad7,
-		95: #ffedeb,
-		98: #fff8f7,
-		99: #fffbff,
-		100: #ffffff,
-	),
 	neutral: (
 		0: #000000,
-		10: #1b1b21,
-		20: #303037,
-		25: #3b3b42,
-		30: #47464d,
-		35: #535159,
-		40: #5f5d65,
-		50: #78767e,
-		60: #928f98,
-		70: #acaab3,
-		80: #c8c5ce,
-		90: #e4e1ea,
-		95: #f3eff8,
-		98: #fcf8ff,
+		10: #1a1a1f,
+		20: #2f2f37,
+		25: #3a3a42,
+		30: #46464e,
+		35: #515159,
+		40: #5d5d65,
+		50: #76767e,
+		60: #909098,
+		70: #ababb3,
+		80: #c6c6ce,
+		90: #e2e2eb,
+		95: #f0f0f9,
+		98: #f9f9ff,
 		99: #fffbff,
 		100: #ffffff,
-		4: #0e0e14,
-		6: #131319,
-		12: #1f1f25,
-		17: #2a2930,
-		22: #35343b,
-		24: #39383f,
-		87: #dcd8e2,
-		92: #eae7f0,
-		94: #f0ecf6,
-		96: #f6f2fb,
+		4: #0e0e13,
+		6: #131318,
+		12: #1f1f24,
+		17: #2a2a2f,
+		22: #35353a,
+		24: #393940,
+		87: #dcdce5,
+		92: #e9e9f2,
+		94: #efeff8,
+		96: #f6f6ff,
 	),
 	neutral-variant: (
 		0: #000000,
-		10: #1b1b22,
-		20: #303037,
-		25: #3b3b42,
+		10: #1a1a1f,
+		20: #2f2f37,
+		25: #3a3a42,
 		30: #46464e,
-		35: #525259,
-		40: #5e5d65,
-		50: #77767e,
-		60: #919098,
-		70: #acaab3,
-		80: #c8c5ce,
-		90: #e4e1eb,
-		95: #f2eff9,
-		98: #fbf8ff,
+		35: #515159,
+		40: #5d5d65,
+		50: #76767e,
+		60: #909098,
+		70: #ababb3,
+		80: #c6c6ce,
+		90: #e2e2eb,
+		95: #f0f0f9,
+		98: #f9f9ff,
 		99: #fffbff,
 		100: #ffffff,
 	),
@@ -112,9 +112,9 @@ $palettes: (
 		20: #690005,
 		25: #7e0007,
 		30: #93000a,
-		35: #a60f13,
-		40: #b81f1e,
-		50: #db3a33,
+		35: #a80710,
+		40: #ba1a1a,
+		50: #de3730,
 		60: #ff5449,
 		70: #ff897d,
 		80: #ffb4ab,
@@ -140,16 +140,16 @@ $neutral-palette: map.merge(map.get($palettes, neutral), $_rest);
 $error-palette: map.merge(map.get($palettes, error), $_rest);
 
 // predefined variables
-$app-card-color-light: map.get($primary-palette, 90);
-$app-background-color-light: map.get($neutral-palette, 96);
+$app-card-color-light: map.get($primary-palette, 95);
+$app-background-color-light: map.get($neutral-palette, 98);
 
 $primary-color-light: map.get($primary-palette, 90);
-$secondary-color-light: map.get($secondary-palette, 80);
+$secondary-color-light: map.get($secondary-palette, 50);
 $tertiary-color-light: map.get($tertiary-palette, 60);
 $app-hover-color-light: map.get($primary-palette, 60);
 
 $shadow-light: map.get($neutral-palette, 40);
-$border-color-light: map.get($primary-palette, 10);
+$border-color-light: map.get($secondary-palette, 90);
 
 $default-text-color-light: map.get($neutral-palette, 10);
 $accent-text-color-light: map.get($neutral-palette, 30);