Update to svelte 5

svelte/src/util/Chart.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
 import { onMount } from "svelte";
 import { formatDataVolume, formatNumber } from "./Formatting";
-import { color_by_name } from "./Util.svelte";
+import { color_by_name } from "./Util";
 import {
 	Chart,
 	PointElement,
@@ -12,6 +12,7 @@ import {
 	Filler,
 	Tooltip,
 	Legend,
+    type Tick,
 } from "chart.js"
 Chart.register(
 	PointElement,
@@ -24,13 +25,22 @@ Chart.register(
 	Legend,
 )
 
-let chart_element
-let chart_object
-export let data_type = ""
-export let legend = true
-export let tooltips = true
-export let ticks = true
-export let height = "300px"
+let chart_element: HTMLCanvasElement = $state()
+let chart_object: Chart
+
+let {
+	data_type = "",
+	legend = true,
+	tooltips = true,
+	ticks = true,
+	height = "300px"
+}: {
+	data_type?: string;
+	legend?: boolean;
+	tooltips?: boolean;
+	ticks?: boolean;
+	height?: string;
+} = $props();
 
 export const chart = () => {
 	return chart_object
@@ -49,8 +59,6 @@ Chart.defaults.maintainAspectRatio = false;
 Chart.defaults.plugins.tooltip.mode = "index";
 Chart.defaults.plugins.tooltip.axis = "x";
 Chart.defaults.plugins.tooltip.intersect = false;
-Chart.defaults.animation.duration = 500;
-Chart.defaults.animation.easing = "linear";
 
 onMount(() => {
 	chart_object = new Chart(
@@ -91,7 +99,7 @@ onMount(() => {
 						display: true,
 						position: "left",
 						ticks: {
-							callback: function (value, index, values) {
+							callback: function (value: number, index: number, values: Tick[]) {
 								if (data_type == "bytes") {
 									return formatDataVolume(value, 3);
 								}
@@ -101,7 +109,6 @@ onMount(() => {
 						beginAtZero: true,
 						grid: {
 							display: true,
-							drawBorder: false,
 							color: color_by_name("separator"),
 						},
 					},
@@ -116,7 +123,6 @@ onMount(() => {
 						},
 						grid: {
 							display: false,
-							drawBorder: false,
 						}
 					}
 				},