Fix chart colors

Levminer · Dec 10, 2023 · 84289c1 · 84289c1
1 parent 5e40ff4
commit 84289c1
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -46,6 +46,7 @@
 						return `${value}${unit}`
 					},
 					stepSize: 10,
+					color: "#969696",
 				},
 			},
 			x: {
@@ -70,7 +71,7 @@
 				},
 			},
 			legend: {
-				position: "bottom",
+				display: false,
 			},
 		},
 	}