davide
88cba13e77
Rebuilt the purple color palette from scratch using a 4-level luminance scale (~3-5x jump per level: #06000f → #110028 → #1d0845 → #3a158a), matching the approach of high-contrast Bootswatch dark themes (Darkly, Cyborg). All contrast ratios are now WCAG-compliant: body text 16:1, card header white text 8.5:1, primary button 5.5:1. Chart axis improvements: Y-axis large numbers abbreviated (1.4M, 568K), X-axis max 6 ticks at 30° rotation, Inter font throughout, dark-glass tooltips, network_charts settings added to settings.json.tmpl with transparent canvas background
70 lines
2.8 KiB
JavaScript
70 lines
2.8 KiB
JavaScript
$(document).ready(function() {
|
|
if (typeof Chart === 'undefined') return;
|
|
|
|
// ── Y-axis: abbreviate large numbers ─────────────────────────
|
|
// 1400000 → "1.4M", 45000 → "45K", 999 → "999"
|
|
function fmtAxis(value) {
|
|
var abs = Math.abs(value);
|
|
if (abs >= 1e9) return (value / 1e9).toFixed(1).replace(/\.0$/, '') + 'B';
|
|
if (abs >= 1e6) return (value / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
|
|
if (abs >= 1e3) return (value / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
|
|
return value;
|
|
}
|
|
|
|
var font = { family: 'Inter, system-ui, sans-serif', size: 11 };
|
|
|
|
// ── Linear scale (Y-axis on both charts) ─────────────────────
|
|
var lin = Chart.defaults.scales.linear;
|
|
if (lin) {
|
|
lin.ticks = Object.assign({}, lin.ticks, {
|
|
callback: fmtAxis,
|
|
font: font,
|
|
color: 'rgba(200,160,255,0.85)',
|
|
padding: 8,
|
|
maxTicksLimit: 6
|
|
});
|
|
lin.title = Object.assign({}, lin.title, {
|
|
font: Object.assign({}, font, { weight: '700', size: 11 }),
|
|
color: 'rgba(216,180,254,1)'
|
|
});
|
|
lin.grid = Object.assign({}, lin.grid, {
|
|
color: 'rgba(80,40,130,0.3)'
|
|
});
|
|
}
|
|
|
|
// ── Time scale (X-axis) ───────────────────────────────────────
|
|
// Reduce label density and avoid 90° rotation
|
|
['time', 'timeseries'].forEach(function(t) {
|
|
var s = Chart.defaults.scales[t];
|
|
if (!s) return;
|
|
s.ticks = Object.assign({}, s.ticks, {
|
|
font: font,
|
|
color: 'rgba(200,160,255,0.75)',
|
|
maxTicksLimit: 6,
|
|
maxRotation: 30,
|
|
minRotation: 0,
|
|
padding: 6
|
|
});
|
|
s.grid = Object.assign({}, s.grid, {
|
|
color: 'rgba(80,40,130,0.3)'
|
|
});
|
|
});
|
|
|
|
// ── Tooltip ───────────────────────────────────────────────────
|
|
Object.assign(Chart.defaults.plugins.tooltip, {
|
|
backgroundColor: 'rgba(10,0,28,0.96)',
|
|
borderColor: 'rgba(93,33,182,0.65)',
|
|
borderWidth: 1,
|
|
titleColor: 'rgba(216,180,254,1)',
|
|
titleFont: Object.assign({}, font, { weight: '700', size: 12 }),
|
|
bodyColor: 'rgba(240,230,255,0.9)',
|
|
bodyFont: Object.assign({}, font, { size: 12 }),
|
|
padding: 11,
|
|
cornerRadius: 7
|
|
});
|
|
|
|
// ── Legend ────────────────────────────────────────────────────
|
|
Chart.defaults.plugins.legend.labels.font = Object.assign({}, font, { size: 12 });
|
|
Chart.defaults.plugins.legend.labels.color = 'rgba(216,180,254,1)';
|
|
});
|