From 84289c1ff544b80267bb193d509836ef3598bb66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C5=91rik=20Levente?= <levminer@levminer.com>
Date: Sun, 10 Dec 2023 23:00:45 +0100
Subject: [PATCH] Fix chart colors

---
 interface/components/lineChart.svelte      | 10 ++++++++--
 interface/components/loadChart.svelte      |  2 +-
 interface/components/meterChart.svelte     | 17 +++++++++++++++--
 interface/components/multiLineChart.svelte |  3 ++-
 interface/components/usageChart.svelte     |  3 ++-
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/interface/components/lineChart.svelte b/interface/components/lineChart.svelte
index d2c6916..b719330 100644
--- a/interface/components/lineChart.svelte
+++ b/interface/components/lineChart.svelte
@@ -18,10 +18,15 @@
 
 	$: data = {
 		labels: labels,
-		datasets: [{ label: type, data: statistics, backgroundColor: [color], borderColor: color, tension: 0.3, pointHitRadius: 15 }],
+		datasets: [{ label: type, data: statistics, backgroundColor: [color], borderColor: color, tension: 0.2, pointHitRadius: 15, borderWidth: 4 }],
 	}
 
 	let options: ChartOptions<"line"> = {
+		elements: {
+			point: {
+				radius: 0,
+			},
+		},
 		animation: {
 			onProgress: (context) => {
 				if (context.initial) {
@@ -37,6 +42,7 @@
 						return `${value}${unit}`
 					},
 					precision: 2,
+					color: "#969696",
 				},
 				min: zero ? 0 : undefined,
 			},
@@ -62,7 +68,7 @@
 				},
 			},
 			legend: {
-				position: "bottom",
+				display: false,
 			},
 		},
 	}
diff --git a/interface/components/loadChart.svelte b/interface/components/loadChart.svelte
index f105348..af2fd91 100644
--- a/interface/components/loadChart.svelte
+++ b/interface/components/loadChart.svelte
@@ -93,7 +93,7 @@
 			},
 			y: {
 				grid: { display: false },
-				ticks: { display: true, crossAlign: "far" },
+				ticks: { display: true, crossAlign: "far", color: "#969696" },
 			},
 		},
 	}
diff --git a/interface/components/meterChart.svelte b/interface/components/meterChart.svelte
index 781b115..cfe4ebc 100644
--- a/interface/components/meterChart.svelte
+++ b/interface/components/meterChart.svelte
@@ -1,4 +1,4 @@
-<div class="meterChart{i}">
+<div class="meterChart{id}">
 	<Bar {data} {options} />
 </div>
 
@@ -92,7 +92,20 @@
 			},
 			y: {
 				grid: { display: false },
-				ticks: { display: true, crossAlign: "far" },
+				ticks: {
+					display: true,
+					crossAlign: "far",
+					color: "#969696",
+					callback: function (value: number) {
+						const label = this.getLabelForValue(value)
+
+						if (label.length > 18) {
+							return label.slice(0, 18) + "..."
+						} else {
+							return label
+						}
+					},
+				},
 			},
 		},
 	}
diff --git a/interface/components/multiLineChart.svelte b/interface/components/multiLineChart.svelte
index 7e58bec..88ac9c4 100644
--- a/interface/components/multiLineChart.svelte
+++ b/interface/components/multiLineChart.svelte
@@ -69,6 +69,7 @@
 		scales: {
 			y: {
 				ticks: {
+					color: "#969696",
 					callback: (value) => {
 						return `${value} ${unit}`
 					},
@@ -96,7 +97,7 @@
 				},
 			},
 			legend: {
-				position: "bottom",
+				display: false,
 			},
 		},
 	}
diff --git a/interface/components/usageChart.svelte b/interface/components/usageChart.svelte
index ac206cf..b8b8101 100644
--- a/interface/components/usageChart.svelte
+++ b/interface/components/usageChart.svelte
@@ -46,6 +46,7 @@
 						return `${value}${unit}`
 					},
 					stepSize: 10,
+					color: "#969696",
 				},
 			},
 			x: {
@@ -70,7 +71,7 @@
 				},
 			},
 			legend: {
-				position: "bottom",
+				display: false,
 			},
 		},
 	}