-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchartJsDefaults.js
More file actions
85 lines (74 loc) · 2.86 KB
/
Copy pathchartJsDefaults.js
File metadata and controls
85 lines (74 loc) · 2.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, ArcElement, Title, Tooltip, Legend } from 'chart.js';
function cssVar(name, fallback) {
if (typeof document === 'undefined') return fallback;
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
return v || fallback;
}
/** Grid line color; reads `--chart-grid` from the active theme. */
export function getGridColor() {
return cssVar('--chart-grid', 'rgba(100, 116, 139, 0.5)');
}
/** Axis / scale title color (theme-aware). */
export function getChartTitleColor() {
return cssVar('--chart-title', '#64748b');
}
/** Legend label color for Chart.js plugins (theme-aware). */
export function getChartLegendLabelColor() {
return cssVar('--chart-legend', '#94a3b8');
}
/** @deprecated Same as {@link getChartLegendLabelColor}; kept so stale bundles or imports do not throw. */
export const chartLegendColor = getChartLegendLabelColor;
/** Canvas `fillStyle` for custom Chart.js plugins — matches body text (`--app-text`). */
export function getChartCanvasTextColor() {
return cssVar('--app-text', '#334155');
}
let registered = false;
/** Sync Chart.js default text color with `--app-text` after theme changes. */
export function syncChartJsDefaultsColor() {
if (typeof document === 'undefined') return;
const c = getComputedStyle(document.documentElement).getPropertyValue('--app-text').trim();
if (c && typeof ChartJS !== 'undefined' && ChartJS.defaults) {
ChartJS.defaults.color = c;
}
}
/** Register once for Bar/Doughnut charts (Category + Linear scales, Bar + Arc elements). */
export function registerChartJsBase() {
if (registered) return;
ChartJS.register(CategoryScale, LinearScale, BarElement, ArcElement, Title, Tooltip, Legend);
registered = true;
}
/** Horizontal bar defaults: frequency on X, labels on Y */
export function barOptionsHorizontal(tooltipLabel) {
const grid = getGridColor();
const titleColor = getChartTitleColor();
return {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: (ctx) => ` ${ctx.raw?.toLocaleString() ?? ctx.raw}${tooltipLabel ? ` ${tooltipLabel}` : ''}`,
},
},
},
scales: {
x: { grid: { color: grid }, beginAtZero: true, title: { display: true, text: 'Count', color: titleColor } },
y: { grid: { color: grid } },
},
};
}
export function doughnutOptionsBottomLegend(tooltipCb) {
const legendColor = chartLegendColor();
return {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { color: legendColor, font: { size: 11 }, padding: 12 } },
tooltip: tooltipCb
? { callbacks: tooltipCb }
: { callbacks: { label: (ctx) => ` ${ctx.label}: ${ctx.raw?.toLocaleString()}` } },
},
};
}