Convert admin panel to svelte

svelte/src/util/Chart.svelte

@@ -0,0 +1,96 @@
+<script>
+import { onMount } from "svelte";
+import { formatDataVolume, formatNumber } from "./Formatting.svelte";
+import { Chart } from "chart.js"
+
+let chart_element
+let chart_object
+export let label = "label"
+export let dataType = ""
+
+export const chart = () => {
+	return chart_object
+}
+export const update = () => {
+	return chart_object.update()
+}
+
+Chart.defaults.global.defaultFontColor = "#b3b3b3";
+Chart.defaults.global.defaultFontSize = 15;
+Chart.defaults.global.defaultFontFamily = "system-ui, sans-serif";
+Chart.defaults.global.maintainAspectRatio = false;
+Chart.defaults.global.elements.point.radius = 0;
+Chart.defaults.global.tooltips.mode = "index";
+Chart.defaults.global.tooltips.axis = "x";
+Chart.defaults.global.tooltips.intersect = false;
+Chart.defaults.global.animation.duration = 500;
+Chart.defaults.global.animation.easing = "linear";
+
+onMount(() => {
+	chart_object = new Chart(
+		chart_element.getContext("2d"),
+		{
+			type: 'line',
+			data: {
+				datasets: [
+					{
+						label: label,
+						backgroundColor: window.highlight_color,
+						borderWidth: 0,
+						lineTension: 0,
+						fill: true,
+						yAxisID: "ax_1"
+					}
+				]
+			},
+			options: {
+				legend: { display: false },
+				scales: {
+					yAxes: [
+						{
+							type: "linear",
+							display: true,
+							position: "left",
+							id: "ax_1",
+							ticks: {
+								callback: function (value, index, values) {
+									if (dataType == "bytes") {
+										return formatDataVolume(value, 3);
+									}
+									return formatNumber(value, 3);
+								},
+								beginAtZero: true
+							},
+							gridLines: { display: true },
+						}
+					],
+					xAxes: [
+						{
+							ticks: {
+								sampleSize: 1,
+								padding: 4,
+								minRotation: 0,
+								maxRotation: 0
+							},
+							gridLines: { display: false }
+						}
+					]
+				}
+			}
+		}
+	);
+})
+
+</script>
+
+<div class="chart-container">
+	<canvas bind:this={chart_element}></canvas>
+</div>
+
+<style>
+.chart-container {
+	position: relative;
+	width: 100%;
+	height: 200px;
+}
+</style>