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) => {
const color = getComputedStyle(document.documentElement).getPropertyValue(name);
return `oklch(${color} / ${opacity}%)`;
const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
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: [
{
label: 'Cpu usage core 0',
borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--p', 50),
borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2,
data: $analytics.cpu0_usage,
yAxisID: 'y',
},
{
label: 'Cpu usage core 1',
borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--p', 50),
borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2,
data: $analytics.cpu1_usage,
yAxisID: 'y',
},
{
label: 'Cpu usage total',
borderColor: daisyColor('--s'),
backgroundColor: daisyColor('--s', 50),
borderColor: daisyColor('--color-secondary'),
backgroundColor: daisyColor('--color-secondary', 50),
borderWidth: 2,
data: $analytics.cpu_usage,
yAxisID: 'y',
@@ -76,10 +76,10 @@
scales: {
x: {
grid: {
color: daisyColor('--bc', 10),
color: daisyColor('--color-base-content', 10),
},
ticks: {
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
},
display: false,
},
@@ -88,7 +88,7 @@
title: {
display: true,
text: 'Cpu usage [%]',
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
font: {
size: 16,
weight: 'bold',
@@ -97,11 +97,11 @@
position: 'left',
min: 0,
max: 100,
grid: { color: daisyColor('--bc', 10) },
grid: { color: daisyColor('--color-base-content', 10) },
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: [
{
label: 'Used Heap',
borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--p', 50),
borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2,
data: $analytics.used_heap,
fill: true,
@@ -142,10 +142,10 @@
scales: {
x: {
grid: {
color: daisyColor('--bc', 10),
color: daisyColor('--color-base-content', 10),
},
ticks: {
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
},
display: false,
},
@@ -154,7 +154,7 @@
title: {
display: true,
text: 'Heap [kb]',
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
font: {
size: 16,
weight: 'bold',
@@ -163,11 +163,11 @@
position: 'left',
min: 0,
max: Math.round($analytics.total_heap[0]),
grid: { color: daisyColor('--bc', 10) },
grid: { color: daisyColor('--color-base-content', 10) },
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: [
{
label: 'File System Used',
borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--p', 50),
borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2,
data: $analytics.fs_used,
fill: true,
@@ -208,10 +208,10 @@
scales: {
x: {
grid: {
color: daisyColor('--bc', 10),
color: daisyColor('--color-base-content', 10),
},
ticks: {
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
},
display: false,
},
@@ -220,7 +220,7 @@
title: {
display: true,
text: 'File System [kb]',
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
font: {
size: 16,
weight: 'bold',
@@ -229,11 +229,11 @@
position: 'left',
min: 0,
max: Math.round($analytics.fs_total[0]),
grid: { color: daisyColor('--bc', 10) },
grid: { color: daisyColor('--color-base-content', 10) },
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: [
{
label: 'Core Temperature',
borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--p', 50),
borderColor: daisyColor('--color-primary'),
backgroundColor: daisyColor('--color-primary', 50),
borderWidth: 2,
data: $analytics.core_temp,
yAxisID: 'y',
@@ -273,10 +273,10 @@
scales: {
x: {
grid: {
color: daisyColor('--bc', 10),
color: daisyColor('--color-base-content', 10),
},
ticks: {
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
},
display: false,
},
@@ -285,7 +285,7 @@
title: {
display: true,
text: 'Core Temperature [°C]',
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
font: {
size: 16,
weight: 'bold',
@@ -294,11 +294,11 @@
position: 'left',
suggestedMin: 20,
suggestedMax: 100,
grid: { color: daisyColor('--bc', 10) },
grid: { color: daisyColor('--color-base-content', 10) },
ticks: {
color: daisyColor('--bc'),
color: daisyColor('--color-base-content'),
},
border: { color: daisyColor('--bc', 10) },
border: { color: daisyColor('--color-base-content', 10) },
},
},
},