Fix stats reporting. Add Vite compatibility

svelte/src/filesystem/DetailsWindow.svelte

@@ -40,7 +40,7 @@ let chart_timespans = [
 ]
 
 let total_downloads = $state(0)
-let total_transfer = $state(0)
+let total_egress = $state(0)
 
 let update_chart = async (base: FSNode, timespan: number, interval: number) => {
 	if (chart === undefined) {
@@ -106,10 +106,9 @@ let update_chart = async (base: FSNode, timespan: number, interval: number) => {
 		});
 
 		total_downloads = 0
-		total_transfer = 0
+		total_egress = 0
 		resp.downloads.amounts.forEach(val => total_downloads += val);
-		resp.transfer_free.amounts.forEach((val) => total_transfer += val);
-		resp.transfer_paid.amounts.forEach((val) => total_transfer += val);
+		resp.egress.amounts.forEach((val) => total_egress += val);
 
 		c.data.labels = resp.downloads.timestamps
 		c.data.datasets = [
@@ -117,25 +116,17 @@ let update_chart = async (base: FSNode, timespan: number, interval: number) => {
 				label: "Downloads",
 				borderWidth: 2,
 				pointRadius: 0,
-				borderColor: color_by_name("chart_1_color"),
-				backgroundColor: color_by_name("chart_1_color"),
+				borderColor: color_by_name("highlight_color"),
+				backgroundColor: color_by_name("highlight_color"),
 				data: resp.downloads.amounts,
 			}, {
-				label: "Free transfer",
+				label: "Egress",
 				borderWidth: 2,
 				pointRadius: 0,
-				borderColor: color_by_name("chart_2_color"),
-				backgroundColor: color_by_name("chart_2_color"),
+				borderColor: color_by_name("danger_color"),
+				backgroundColor: color_by_name("danger_color"),
 				yAxisID: "y1",
-				data: resp.transfer_free.amounts,
-			}, {
-				label: "Premium transfer",
-				borderWidth: 2,
-				pointRadius: 0,
-				borderColor: color_by_name("chart_3_color"),
-				backgroundColor: color_by_name("chart_3_color"),
-				yAxisID: "y1",
-				data: resp.transfer_paid.amounts,
+				data: resp.egress.amounts,
 			},
 		];
 		chart.update()
@@ -201,11 +192,11 @@ run(() => {
 					<td>{formatThousands(total_downloads)} (unique, counted once per IP)</td>
 				</tr>
 				<tr>
-					<td>Transfer used</td>
+					<td>Egress bandwidth</td>
 					<td>
-						{formatDataVolume(total_transfer, 4)}
-						( {formatThousands(total_transfer)} B ),
-						{(total_transfer/$nav.base.file_size).toFixed(1)}x file size
+						{formatDataVolume(total_egress, 4)}
+						( {formatThousands(total_egress)} B ),
+						{(total_egress/$nav.base.file_size).toFixed(1)}x file size
 					</td>
 				</tr>
 				<tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr>

svelte/src/filesystem/FileStats.svelte

@@ -14,7 +14,7 @@ let {
 
 let loading = $state(true)
 let downloads = $state(0)
-let transfer_used = $state(0)
+let egress_used = $state(0)
 let socket = null
 let error_msg = $state("")
 
@@ -48,6 +48,9 @@ const update_base = async () => {
 	} else if (connected_to === nav.base.path) {
 		return // If we're already connected to the same path, don't reconnect
 	}
+
+	console.debug("Websocket connection path changed from", connected_to, "to", nav.base.path)
+
 	connected_to = nav.base.path
 
 	// If the socket is already active we need to close it
@@ -68,7 +71,7 @@ const update_base = async () => {
 		error_msg = ""
 		loading = false
 		downloads = j.downloads
-		transfer_used = j.transfer_free + j.transfer_paid
+		egress_used = j.egress
 	}
 	socket.onerror = err => {
 		console.error("WS error", err)
@@ -133,7 +136,7 @@ const toggle_expand_keyboard = (e: KeyboardEvent) => {
 			<div class="group">
 				<div class="label">Egress</div>
 				<div class="stat">
-					{loading ? "Loading..." : formatDataVolume(transfer_used, 3)}
+					{loading ? "Loading..." : formatDataVolume(egress_used, 3)}
 				</div>
 			</div>
 		{/if}