Fix stats reporting. Add Vite compatibility

svelte/src/user_home/BandwidthSharing.svelte

@@ -52,7 +52,7 @@ let load_transfer_used = () => {
 	start.setDate(start.getDate() - 30)
 
 	fetch(
-		window.api_endpoint + "/user/time_series/transfer_paid" +
+		window.api_endpoint + "/user/time_series/egress" +
 		"?start=" + start.toISOString() +
 		"&end=" + today.toISOString() +
 		"&interval=60"

svelte/src/user_home/dashboard/CardStatistics.svelte

@@ -10,8 +10,8 @@ let { card_size = 1 }: {
 } = $props();
 
 let chart_height = $derived((80 + (card_size * 60)) + "px")
-let graph_views_downloads = $state(null)
-let graph_bandwidth = $state(null)
+let graph_downloads = $state(null)
+let graph_egress = $state(null)
 
 let load_graphs = async (minutes, interval) => {
 	let end = new Date()
@@ -19,34 +19,26 @@ let load_graphs = async (minutes, interval) => {
 	start.setMinutes(start.getMinutes() - minutes)
 
 	try {
-		let views_req = get_graph_data("views", start, end, interval);
 		let downloads_req = get_graph_data("downloads", start, end, interval);
-		let bandwidth_req = get_graph_data("bandwidth", start, end, interval);
-		let transfer_paid_req = get_graph_data("transfer_paid", start, end, interval);
-		let views = await views_req
+		let egress_req = get_graph_data("egress", start, end, interval);
 		let downloads = await downloads_req
-		let bandwidth = await bandwidth_req
-		let transfer_paid = await transfer_paid_req
+		let egress = await egress_req
 
-		graph_views_downloads.data().labels = views.timestamps;
-		graph_views_downloads.data().datasets[0].data = views.amounts
-		graph_views_downloads.data().datasets[1].data = downloads.amounts
-		graph_bandwidth.data().labels = bandwidth.timestamps;
-		graph_bandwidth.data().datasets[0].data = bandwidth.amounts
-		graph_bandwidth.data().datasets[1].data = transfer_paid.amounts
+		graph_downloads.data().labels = downloads.timestamps;
+		graph_downloads.data().datasets[0].data = downloads.amounts
+		graph_egress.data().labels = egress.timestamps;
+		graph_egress.data().datasets[0].data = egress.amounts
 
-		graph_views_downloads.update()
-		graph_bandwidth.update()
+		graph_downloads.update()
+		graph_egress.update()
 	} catch (err) {
 		console.error("Failed to update graphs", err)
 		return
 	}
 }
 
-let total_views = $state(0)
 let total_downloads = $state(0)
-let total_bandwidth = $state(0)
-let total_transfer_paid = $state(0)
+let total_egress = $state(0)
 
 let get_graph_data = async (stat: string, start: Date, end: Date, interval: number) => {
 	let resp = await fetch(
@@ -74,15 +66,10 @@ let get_graph_data = async (stat: string, start: Date, end: Date, interval: numb
 	// Add up the total amount and save it in the correct place
 	let total = resp_json.amounts.reduce((acc, cur) => { return acc + cur }, 0)
 
-	if (stat == "views") {
-		total_views = total;
-	} else if (stat == "downloads") {
-		total_downloads = total;
-		graph_views_downloads.update()
-	} else if (stat == "bandwidth") {
-		total_bandwidth = total;
-	} else if (stat == "transfer_paid") {
-		total_transfer_paid = total;
+	if (stat == "downloads") {
+		total_downloads = total
+	} else if (stat == "egress") {
+		total_egress = total
 	}
 
 	return resp_json
@@ -95,37 +82,23 @@ let update_graphs = (minutes, interval) => {
 }
 
 onMount(() => {
-	graph_views_downloads.data().datasets = [
-		{
-			label: "Views",
-			borderWidth: 2,
-			pointRadius: 0,
-			borderColor: color_by_name("highlight_color"),
-			backgroundColor: color_by_name("highlight_color"),
-		},
+	graph_downloads.data().datasets = [
 		{
 			label: "Downloads",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: color_by_name("danger_color"),
-			backgroundColor: color_by_name("danger_color"),
+			borderColor: color_by_name("highlight_color"),
+			backgroundColor: color_by_name("highlight_color"),
 		},
 	];
-	graph_bandwidth.data().datasets = [
+	graph_egress.data().datasets = [
 		{
-			label: "Free transfer",
+			label: "Egress",
 			borderWidth: 2,
 			pointRadius: 0,
 			borderColor: color_by_name("highlight_color"),
 			backgroundColor: color_by_name("highlight_color"),
 		},
-		{
-			label: "Premium transfer",
-			borderWidth: 2,
-			pointRadius: 0,
-			borderColor: color_by_name("danger_color"),
-			backgroundColor: color_by_name("danger_color"),
-		}
 	];
 
 	update_graphs(43200, 1440);
@@ -171,15 +144,13 @@ onMount(() => {
 	</button>
 </div>
 
-<Chart bind:this={graph_bandwidth} data_type="bytes" height={chart_height} ticks={false}/>
+<Chart bind:this={graph_egress} data_type="bytes" height={chart_height} ticks={false}/>
 <div class="center">
-	{formatDataVolume(total_bandwidth, 3)} free downloads and
-	{formatDataVolume(total_transfer_paid, 3)} paid downloads
+	{formatDataVolume(total_egress, 3)} egress used
 </div>
 
-<Chart bind:this={graph_views_downloads} data_type="number" height={chart_height} ticks={false}/>
+<Chart bind:this={graph_downloads} data_type="number" height={chart_height} ticks={false}/>
 <div class="center">
-	{formatThousands(total_views)} views and
 	{formatThousands(total_downloads)} downloads
 </div>
 

svelte/src/user_home/dashboard/CardUsage.svelte

@@ -1,20 +1,20 @@
-<script>
+<script lang="ts">
+import { get_endpoint, get_user, type User } from "lib/PixeldrainAPI";
 import { onMount } from "svelte";
 import HotlinkProgressBar from "user_home/HotlinkProgressBar.svelte";
 import StorageProgressBar from "user_home/StorageProgressBar.svelte";
-import ProgressBar from "util/ProgressBar.svelte";
 
 let transfer_cap = $state(0)
 let transfer_used = $state(0)
-let storage_limit = window.user.subscription.storage_space
-let fs_storage_limit = window.user.subscription.filesystem_storage_limit
+let storage_limit = $state(0)
+
 let load_direct_bw = () => {
 	let today = new Date()
 	let start = new Date()
 	start.setDate(start.getDate() - 30)
 
 	fetch(
-		window.api_endpoint + "/user/time_series/transfer_paid" +
+		get_endpoint() + "/user/time_series/egress" +
 		"?start=" + start.toISOString() +
 		"&end=" + today.toISOString() +
 		"&interval=60"
@@ -29,34 +29,31 @@ let load_direct_bw = () => {
 	})
 }
 
-onMount(() => {
-	if (window.user.monthly_transfer_cap > 0) {
-		transfer_cap = window.user.monthly_transfer_cap
-	} else if (window.user.subscription.monthly_transfer_cap > 0) {
-		transfer_cap = window.user.subscription.monthly_transfer_cap
+let user: User = $state()
+onMount(async () => {
+	user = await get_user()
+
+	if (user.monthly_transfer_cap > 0) {
+		transfer_cap = user.monthly_transfer_cap
+	} else if (user.subscription.monthly_transfer_cap > 0) {
+		transfer_cap = user.subscription.monthly_transfer_cap
 	} else {
 		transfer_cap = -1
 	}
 
+	storage_limit = user.subscription.storage_space
+
 	load_direct_bw()
 })
 
 </script>
 
-Total storage space used:
-<StorageProgressBar used={window.user.storage_space_used} total={storage_limit}/>
-<br/>
-
-{#if window.user.subscription.filesystem_access === true}
-	Filesystem storage space used:
-	<StorageProgressBar
-		used={window.user.filesystem_storage_used}
-		total={fs_storage_limit > 0 ? fs_storage_limit : storage_limit}
-		disable_warnings
-	/>
+{#if user !== undefined}
+	Storage space used:
+	<StorageProgressBar used={user.storage_space_used} total={storage_limit}/>
 	<br/>
-{/if}
 
-Premium data transfer:
-(<a href="/user/sharing/bandwidth">set custom limit</a>)
-<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
+	Egress used (30 days):
+	(<a href="/user/sharing/bandwidth">set custom limit</a>)
+	<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
+{/if}