hobokenchicken/GopherGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: apply Gruvbox Dark theme to dashboard and charts

Browse Source
This commit is contained in:
Dustin Newkirk
2026-02-26 18:22:19 -05:00
parent 3165aa1859
commit 9b254d50ea
2 changed files with 187 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
static/js/charts.js
View File

@@ -4,22 +4,24 @@ class ChartManager {
constructor() {
this.charts = new Map();
this.defaultColors = [
'#3b82f6', // Blue
'#10b981', // Green
'#f59e0b', // Yellow
'#ef4444', // Red
'#8b5cf6', // Purple
'#ec4899', // Pink
'#06b6d4', // Cyan
'#84cc16', // Lime
'#f97316', // Orange
'#6366f1', // Indigo
'#fe8019', // Orange
'#b8bb26', // Green
'#fabd2f', // Yellow
'#fb4934', // Red
'#83a598', // Blue
'#d3869b', // Purple
'#8ec07c', // Aqua
'#d65d0e', // Dark Orange
'#98971a', // Dark Green
'#d79921', // Dark Yellow
];
this.init();
}
init() {
// Register Chart.js plugins if needed
// Set Chart.js defaults for Gruvbox
Chart.defaults.color = '#bdae93'; // fg3
Chart.defaults.borderColor = '#504945'; // bg2
this.registerPlugins();
}
@@ -41,7 +43,7 @@ class ChartManager {
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
ctx.strokeStyle = '#665c54'; // bg3
ctx.stroke();
ctx.restore();
}
@@ -74,18 +76,19 @@ class ChartManager {
labels: {
padding: 20,
usePointStyle: true,
pointStyle: 'circle'
pointStyle: 'circle',
color: '#ebdbb2' // fg1
}
},
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(255, 255, 255, 0.95)',
titleColor: '#1e293b',
bodyColor: '#1e293b',
borderColor: '#e2e8f0',
backgroundColor: '#3c3836', // bg1
titleColor: '#fbf1c7', // fg0
bodyColor: '#ebdbb2', // fg1
borderColor: '#504945', // bg2
borderWidth: 1,
cornerRadius: 6,
cornerRadius: 4,
padding: 12,
boxPadding: 6,
callbacks: {
@@ -110,20 +113,20 @@ class ChartManager {
x: {
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)'
color: '#3c3836' // bg1
},
ticks: {
color: '#64748b'
color: '#a89984' // fg4
}
},
y: {
beginAtZero: true,
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)'
color: '#3c3836' // bg1
},
ticks: {
color: '#64748b',
color: '#a89984', // fg4
callback: function(value) {
return value.toLocaleString();
}
@@ -164,12 +167,12 @@ class ChartManager {
label: dataset.label,
data: dataset.data,
borderColor: dataset.color || this.defaultColors[index % this.defaultColors.length],
backgroundColor: dataset.fill ? this.hexToRgba(dataset.color || this.defaultColors[index % this.defaultColors.length], 0.1) : 'transparent',
backgroundColor: dataset.fill ? this.hexToRgba(dataset.color || this.defaultColors[index % this.defaultColors.length], 0.15) : 'transparent',
borderWidth: 2,
pointRadius: 3,
pointHoverRadius: 6,
pointBackgroundColor: dataset.color || this.defaultColors[index % this.defaultColors.length],
pointBorderColor: '#ffffff',
pointBorderColor: '#282828', // bg0
pointBorderWidth: 2,
fill: dataset.fill || false,
tension: 0.4,
@@ -248,7 +251,7 @@ class ChartManager {
datasets: [{
data: data.data || [],
backgroundColor: data.colors || this.defaultColors.slice(0, data.data.length),
borderColor: '#ffffff',
borderColor: '#282828', // bg0
borderWidth: 2,
hoverOffset: 15
}]
@@ -290,7 +293,7 @@ class ChartManager {
datasets: [{
data: data.data || [],
backgroundColor: data.colors || this.defaultColors.slice(0, data.data.length),
borderColor: '#ffffff',
borderColor: '#282828', // bg0
borderWidth: 2,
hoverOffset: 15
}]
@@ -334,7 +337,7 @@ class ChartManager {
label: dataset.label,
data: dataset.data,
backgroundColor: dataset.color || this.defaultColors[index % this.defaultColors.length],
borderColor: dataset.borderColor || '#ffffff',
borderColor: '#282828', // bg0
borderWidth: 1,
borderRadius: 4,
...dataset
@@ -366,10 +369,10 @@ class ChartManager {
beginAtZero: true,
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)'
color: '#3c3836' // bg1
},
ticks: {
color: '#64748b',
color: '#a89984', // fg4
callback: function(value) {
return value.toLocaleString();
}
@@ -380,7 +383,7 @@ class ChartManager {
display: false
},
ticks: {
color: '#64748b'
color: '#a89984' // fg4
}
}
},