From 1bb49fd3e0bacf97fe4040d9d42ce655fc11e2a0 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Thu, 16 Dec 2021 21:42:09 +0100
Subject: [PATCH] Add chart legends

---
 svelte/src/admin_panel/Home.svelte |  4 ++--
 svelte/src/util/Chart.svelte       | 37 ++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte
index de3ab03..20dd202 100644
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -171,8 +171,8 @@ onDestroy(() => {
 		<button on:click={() => { loadGraph(525600, 1440, false) }}>Year</button>
 		<button on:click={() => { loadGraph(1051200, 1440, false) }}>Two Years</button>
 	</div>
-	<Chart bind:this={graphBandwidth} data_type="bytes" />
-	<Chart bind:this={graphViews} data_type="number" />
+	<Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
+	<Chart bind:this={graphViews} data_type="number" legend={false} />
 	<div class="highlight_dark">
 		Total usage from {start_time} to {end_time}<br/>
 		{formatDataVolume(total_bandwidth, 3)} bandwidth,
diff --git a/svelte/src/util/Chart.svelte b/svelte/src/util/Chart.svelte
index 46f5206..51865b3 100644
--- a/svelte/src/util/Chart.svelte
+++ b/svelte/src/util/Chart.svelte
@@ -1,11 +1,32 @@
 <script>
 import { onMount } from "svelte";
 import { formatDataVolume, formatNumber } from "./Formatting.svelte";
-import { Chart, PointElement, LineElement, LinearScale, CategoryScale, LineController, Filler, Tooltip } from "chart.js"
+import {
+	Chart,
+	PointElement,
+	LineElement,
+	LinearScale,
+	CategoryScale,
+	LineController,
+	Filler,
+	Tooltip,
+	Legend,
+} from "chart.js"
+Chart.register(
+	PointElement,
+	LineElement,
+	LinearScale,
+	CategoryScale,
+	LineController,
+	Filler,
+	Tooltip,
+	Legend,
+)
 
 let chart_element
 let chart_object
 export let data_type = ""
+export let legend = true
 
 export const chart = () => {
 	return chart_object
@@ -17,7 +38,6 @@ export const update = () => {
 	return chart_object.update()
 }
 
-Chart.register(PointElement, LineElement, LinearScale, CategoryScale, LineController, Filler, Tooltip)
 Chart.defaults.color = "#"+window.style.textColor;
 Chart.defaults.font.size = 15;
 Chart.defaults.font.family = "system-ui, sans-serif";
@@ -29,6 +49,7 @@ Chart.defaults.animation.duration = 500;
 Chart.defaults.animation.easing = "linear";
 
 onMount(() => {
+	console.log(legend)
 	chart_object = new Chart(
 		chart_element.getContext("2d"),
 		{
@@ -38,7 +59,15 @@ onMount(() => {
 				datasets: [],
 			},
 			options: {
-				legend: { display: false },
+				plugins: {
+					legend: {
+						display: legend,
+						labels: {
+							boxWidth: 12,
+							boxHeight: 12,
+						}
+					},
+				},
 				layout: {
 					padding: {
 						left: 4,
@@ -93,6 +122,6 @@ onMount(() => {
 .chart-container {
 	position: relative;
 	width: 100%;
-	height: 200px;
+	height: 250px;
 }
 </style>