Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Updates colors for metrics chart

Browse Source
This commit is contained in:
Rune Harlyk
2025-07-10 21:34:20 +02:00
committed by Rune Harlyk
parent d529eaa201
commit d0aa3b7b42
2 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/lib/utilities/color-utilities.ts
+4 -2
View File
@@ -1,4 +1,6 @@
export const daisyColor = (name: string, opacity: number = 100) => { export const daisyColor = (name: string, opacity: number = 100) => {
const color = getComputedStyle(document.documentElement).getPropertyValue(name); const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
return `oklch(${color} / ${opacity}%)`; if (opacity >= 100) return color;
const alpha = Math.min(Math.max(opacity, 0), 100) / 100;
return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`;
}; };
app/src/routes/system/metrics/SystemMetrics.svelte
+36 -36
View File
@@ -32,24 +32,24 @@
datasets: [ datasets: [
{ {
label: 'Cpu usage core 0', label: 'Cpu usage core 0',
borderColor: daisyColor('--p'), borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--p', 50), backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.cpu0_usage, data: $analytics.cpu0_usage,
yAxisID: 'y', yAxisID: 'y',
}, },
{ {
label: 'Cpu usage core 1', label: 'Cpu usage core 1',
borderColor: daisyColor('--p'), borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--p', 50), backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.cpu1_usage, data: $analytics.cpu1_usage,
yAxisID: 'y', yAxisID: 'y',
}, },
{ {
label: 'Cpu usage total', label: 'Cpu usage total',
borderColor: daisyColor('--s'), borderColor: daisyColor('--color-secondary'),
backgroundColor: daisyColor('--s', 50), backgroundColor: daisyColor('--color-secondary', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.cpu_usage, data: $analytics.cpu_usage,
yAxisID: 'y', yAxisID: 'y',
@@ -76,10 +76,10 @@
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--bc', 10), color: daisyColor('--color-base-content', 10),
}, },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
}, },
display: false, display: false,
}, },
@@ -88,7 +88,7 @@
title: { title: {
display: true, display: true,
text: 'Cpu usage [%]', text: 'Cpu usage [%]',
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold',
@@ -97,11 +97,11 @@
position: 'left', position: 'left',
min: 0, min: 0,
max: 100, max: 100,
grid: { color: daisyColor('--bc', 10) }, grid: { color: daisyColor('--color-base-content', 10) },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
}, },
border: { color: daisyColor('--bc', 10) }, border: { color: daisyColor('--color-base-content', 10) },
}, },
}, },
}, },
@@ -113,8 +113,8 @@
datasets: [ datasets: [
{ {
label: 'Used Heap', label: 'Used Heap',
borderColor: daisyColor('--p'), borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--p', 50), backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.used_heap, data: $analytics.used_heap,
fill: true, fill: true,
@@ -142,10 +142,10 @@
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--bc', 10), color: daisyColor('--color-base-content', 10),
}, },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
}, },
display: false, display: false,
}, },
@@ -154,7 +154,7 @@
title: { title: {
display: true, display: true,
text: 'Heap [kb]', text: 'Heap [kb]',
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold',
@@ -163,11 +163,11 @@
position: 'left', position: 'left',
min: 0, min: 0,
max: Math.round($analytics.total_heap[0]), max: Math.round($analytics.total_heap[0]),
grid: { color: daisyColor('--bc', 10) }, grid: { color: daisyColor('--color-base-content', 10) },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
}, },
border: { color: daisyColor('--bc', 10) }, border: { color: daisyColor('--color-base-content', 10) },
}, },
}, },
}, },
@@ -179,8 +179,8 @@
datasets: [ datasets: [
{ {
label: 'File System Used', label: 'File System Used',
borderColor: daisyColor('--p'), borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--p', 50), backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.fs_used, data: $analytics.fs_used,
fill: true, fill: true,
@@ -208,10 +208,10 @@
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--bc', 10), color: daisyColor('--color-base-content', 10),
}, },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
}, },
display: false, display: false,
}, },
@@ -220,7 +220,7 @@
title: { title: {
display: true, display: true,
text: 'File System [kb]', text: 'File System [kb]',
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold',
@@ -229,11 +229,11 @@
position: 'left', position: 'left',
min: 0, min: 0,
max: Math.round($analytics.fs_total[0]), max: Math.round($analytics.fs_total[0]),
grid: { color: daisyColor('--bc', 10) }, grid: { color: daisyColor('--color-base-content', 10) },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
}, },
border: { color: daisyColor('--bc', 10) }, border: { color: daisyColor('--color-base-content', 10) },
}, },
}, },
}, },
@@ -245,8 +245,8 @@
datasets: [ datasets: [
{ {
label: 'Core Temperature', label: 'Core Temperature',
borderColor: daisyColor('--p'), borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--p', 50), backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.core_temp, data: $analytics.core_temp,
yAxisID: 'y', yAxisID: 'y',
@@ -273,10 +273,10 @@
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--bc', 10), color: daisyColor('--color-base-content', 10),
}, },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
}, },
display: false, display: false,
}, },
@@ -285,7 +285,7 @@
title: { title: {
display: true, display: true,
text: 'Core Temperature [°C]', text: 'Core Temperature [°C]',
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold',
@@ -294,11 +294,11 @@
position: 'left', position: 'left',
suggestedMin: 20, suggestedMin: 20,
suggestedMax: 100, suggestedMax: 100,
grid: { color: daisyColor('--bc', 10) }, grid: { color: daisyColor('--color-base-content', 10) },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--color-base-content'),
}, },
border: { color: daisyColor('--bc', 10) }, border: { color: daisyColor('--color-base-content', 10) },
}, },
}, },
}, },