From d0aa3b7b42959fcaafc3844e1058d13737a8938d Mon Sep 17 00:00:00 2001 From: Rune Harlyk Date: Thu, 10 Jul 2025 21:34:20 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Updates=20colors=20for=20metrics?= =?UTF-8?q?=20chart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/lib/utilities/color-utilities.ts | 6 +- .../system/metrics/SystemMetrics.svelte | 72 +++++++++---------- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/app/src/lib/utilities/color-utilities.ts b/app/src/lib/utilities/color-utilities.ts index 8f6b0b8..1500cb8 100644 --- a/app/src/lib/utilities/color-utilities.ts +++ b/app/src/lib/utilities/color-utilities.ts @@ -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})`; }; diff --git a/app/src/routes/system/metrics/SystemMetrics.svelte b/app/src/routes/system/metrics/SystemMetrics.svelte index a37cfcb..4890498 100644 --- a/app/src/routes/system/metrics/SystemMetrics.svelte +++ b/app/src/routes/system/metrics/SystemMetrics.svelte @@ -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) }, }, }, },