@@ -686,13 +695,13 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
@@ -704,13 +713,13 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
{L.districtTitle}
- {metricOpts.map(o =>
)}
+ {metricOpts.map(o =>
)}
-
-
+
+
-
-
+
+
diff --git a/src/config/chartConfig.ts b/src/config/chartConfig.ts
index a6a89cd..aa35881 100644
--- a/src/config/chartConfig.ts
+++ b/src/config/chartConfig.ts
@@ -37,9 +37,21 @@ export const chartColors = {
success: '#059669',
danger: '#dc2626',
muted: '#94a3b8',
- grid: '#f1f5f9'
+ grid: '#e2e8f0' // fallback only; use getChartTheme().border at runtime
};
+export function getChartTheme() {
+ const style = getComputedStyle(document.documentElement);
+ const get = (v: string) => style.getPropertyValue(v).trim();
+ return {
+ surface: get('--surface') || '#ffffff',
+ textPrimary: get('--text-primary') || '#0f172a',
+ textMuted: get('--text-muted') || '#64748b',
+ border: get('--border') || '#e2e8f0',
+ textInverse: get('--text-inverse') || '#ffffff',
+ };
+}
+
// Extended palette for charts with many categories (events, channels)
export const chartPalette = [
'#2563eb', // blue
@@ -54,15 +66,15 @@ export const chartPalette = [
'#ea580c', // orange
];
-export const createDataLabelConfig = (showDataLabels: boolean): any => ({
+export const createDataLabelConfig = (showDataLabels: boolean, overrides?: { color?: string; backgroundColor?: string }): any => ({
display: showDataLabels,
- color: '#1e293b',
+ color: overrides?.color ?? '#1e293b',
font: { size: 10, weight: 600 },
anchor: 'end',
align: 'end',
offset: 4,
padding: 4,
- backgroundColor: 'rgba(255, 255, 255, 0.85)',
+ backgroundColor: overrides?.backgroundColor ?? 'rgba(255, 255, 255, 0.85)',
borderRadius: 3,
textDirection: 'ltr', // Force LTR for numbers - fixes RTL misalignment
formatter: (value: number | null) => {
@@ -74,43 +86,53 @@ export const createDataLabelConfig = (showDataLabels: boolean): any => ({
}
});
-export const createBaseOptions = (showDataLabels: boolean): any => ({
- responsive: true,
- maintainAspectRatio: false,
- locale: 'en-US', // Force LTR number formatting
- layout: {
- padding: {
- top: showDataLabels ? 25 : 5,
- right: 5,
- bottom: 5,
- left: 5
- }
- },
- plugins: {
- legend: { display: false },
- tooltip: {
- backgroundColor: '#1e293b',
- padding: 12,
- cornerRadius: 8,
- titleFont: { size: 12 },
- bodyFont: { size: 11 },
- rtl: false,
- textDirection: 'ltr'
+export const createBaseOptions = (showDataLabels: boolean): any => {
+ const theme = getChartTheme();
+ return {
+ responsive: true,
+ maintainAspectRatio: false,
+ locale: 'en-US', // Force LTR number formatting
+ layout: {
+ padding: {
+ top: showDataLabels ? 25 : 5,
+ right: 5,
+ bottom: 5,
+ left: 5
+ }
},
- datalabels: createDataLabelConfig(showDataLabels)
- },
- scales: {
- x: {
- grid: { display: false },
- ticks: { font: { size: 10 }, color: '#94a3b8' }
+ plugins: {
+ legend: { display: false },
+ tooltip: {
+ backgroundColor: theme.surface,
+ titleColor: theme.textPrimary,
+ bodyColor: theme.textMuted,
+ borderColor: theme.border,
+ borderWidth: 1,
+ padding: 12,
+ cornerRadius: 8,
+ titleFont: { size: 12 },
+ bodyFont: { size: 11 },
+ rtl: false,
+ textDirection: 'ltr'
+ },
+ datalabels: createDataLabelConfig(showDataLabels, {
+ color: theme.textPrimary,
+ backgroundColor: theme.surface + 'dd',
+ })
},
- y: {
- grid: { color: chartColors.grid },
- ticks: { font: { size: 10 }, color: '#94a3b8' },
- border: { display: false }
+ scales: {
+ x: {
+ grid: { display: false },
+ ticks: { font: { size: 10 }, color: theme.textMuted }
+ },
+ y: {
+ grid: { color: theme.border },
+ ticks: { font: { size: 10 }, color: theme.textMuted },
+ border: { display: false }
+ }
}
- }
-});
+ };
+};
export const lineDatasetDefaults = {
borderWidth: 2,