fnx_web/svelte/src/user_home/Home.svelte

<script>
import { onDestroy, onMount } from "svelte";
import { formatDataVolume, formatThousands } from "../util/Formatting.svelte";
import Chart from "../util/Chart.svelte";

let graph_view = null
let graph_download = null
let graph_bandwidth = null
let graph_direct_link = null
let time_start = ""
let time_end = ""
let total_views = 0
let total_downloads = 0
let total_bandwidth = 0
let total_direct_link = 0

let load_graph = (graph, stat, minutes, interval) => {
	let today = new Date()
	let start = new Date()
	start.setMinutes(start.getMinutes() - minutes)

	fetch(
		window.api_endpoint + "/user/time_series/" + stat +
		"?start=" + start.toISOString() +
		"&end=" + today.toISOString() +
		"&interval=" + interval
	).then(resp => {
		if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
		return resp.json();
	}).then(resp => {
		resp.timestamps.forEach((val, idx) => {
			let date = new Date(val);
			let dateStr = ("00" + (date.getMonth() + 1)).slice(-2);
			dateStr += "-" + ("00" + date.getDate()).slice(-2);
			dateStr += " " + ("00" + date.getHours()).slice(-2);
			dateStr += ":" + ("00" + date.getMinutes()).slice(-2);
			resp.timestamps[idx] = "   " + dateStr + "   "; // Poor man's padding
		});
		graph.chart().data.labels = resp.timestamps;
		graph.chart().data.datasets[0].data = resp.amounts;
		graph.chart().update();

		time_start = resp.timestamps[0];
		time_end = resp.timestamps.slice(-1)[0];

		let total = resp.amounts.reduce((acc, cur) => { return acc + cur }, 0)

		if (stat == "views") {
			total_views = total;
		} else if (stat == "downloads") {
			total_downloads = total;
		} else if (stat == "bandwidth") {
			total_bandwidth = total;
		} else if (stat == "direct_bandwidth") {
			total_direct_link = total;
		}
	}).catch(e => {
		console.error("Error requesting time series: " + e);
	})
}

let graph_timeout = null
let graph_timespan = 0
let update_graphs = (minutes, interval, live) => {
	if (graph_timeout !== null) { clearTimeout(graph_timeout) }
	if (live) {
		graph_timeout = setTimeout(() => { update_graphs(minutes, interval, true) }, 6000)
	}

	graph_timespan = minutes

	load_graph(graph_view, "views", minutes, interval)
	load_graph(graph_download, "downloads", minutes, interval)
	load_graph(graph_bandwidth, "bandwidth", minutes, interval)
	load_graph(graph_direct_link, "direct_bandwidth", minutes, interval)
	load_direct_bw()
}

let direct_link_bandwidth_used = 0
let direct_link_percent = 0
let storage_space_used = 0
let storage_percent = 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/direct_bandwidth" +
		"?start=" + start.toISOString() +
		"&end=" + today.toISOString() +
		"&interval=60"
	).then(resp => {
		if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
		return resp.json();
	}).then(resp => {
		let total = resp.amounts.reduce((accum, val) => accum += val, 0);
		direct_link_bandwidth_used = total
		direct_link_percent = total / window.user.subscription.direct_linking_bandwidth
		storage_space_used = window.user.storage_space_used
		storage_percent = window.user.storage_space_used / window.user.subscription.storage_space
	}).catch(e => {
		console.error("Error requesting time series: " + e);
	})
}

onMount(() => {
	update_graphs(1440, 1, true);
})
onDestroy(() => {
	if (graph_timeout !== null) {
		clearTimeout(graph_timeout)
	}
})
</script>

<div>
	<div class="limit_width">
		<h2>Account information</h2>
		<ul>
			<li>Username: {window.user.username}</li>
			<li>E-mail address: {window.user.email}</li>
			<li>
				Supporter level: {window.user.subscription.name}
				{#if window.user.subscription.type === "patreon"}
					(<a href="https://www.patreon.com/join/pixeldrain/checkout?edit=1">Manage subscription</a>)
				{/if}
				<ul>
					<li>
						Max file size: {formatDataVolume(window.user.subscription.file_size_limit, 3)}
					</li>
					<li>
						Advertisements when viewing files:
						{#if window.user.subscription.disable_ad_display}No{:else}Yes{/if}
					</li>
					<li>
						Advertisements on your uploaded files:
						{#if window.user.subscription.disable_ads_on_files}No{:else}Yes{/if}
					</li>
					{#if window.user.subscription.file_expiry_days > 0}
						<li>Files expire after {window.user.subscription.file_expiry_days} days</li>
					{:else}
						<li>Files never expire</li>
					{/if}
				</ul>
			</li>
		</ul>

		Storage:
		{formatDataVolume(storage_space_used, 3)}
		out of
		{formatDataVolume(window.user.subscription.storage_space, 3)}
		<br/>
		<div class="progress_bar_outer">
			<div id="storage_progress" class="progress_bar_inner" style="width: {storage_percent*100}%;"></div>
		</div>

		{#if storage_percent > 0.99}
			<div class="highlight_red">
				You have used all of your storage space. You won't be able to
				upload new files anymore. Please upgrade to a higher support
				tier to continue uploading files:
				<br/>
				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
					Upgrade options
				</a>
			</div>
		{:else if storage_percent > 0.8}
			<div class="highlight_yellow">
				You have used {(storage_percent*100).toFixed(0)}% of your
				storage space. If your storage space runs out you won't be able
				to upload new files anymore. Please upgrade to a higher support
				tier to continue uploading files:
				<br/>
				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
					Upgrade options
				</a>
			</div>
		{/if}

		Hotlink bandwidth:
		{formatDataVolume(direct_link_bandwidth_used, 3)}
		out of
		{formatDataVolume(window.user.subscription.direct_linking_bandwidth, 3)}
		(<a href="/#hotlinking">More information about hotlinking</a>)
		<br/>
		<div class="progress_bar_outer">
			<div id="direct_bandwidth_progress" class="progress_bar_inner" style="width: {direct_link_percent*100}%;"></div>
		</div>

		{#if direct_link_percent > 0.99}
			<div class="highlight_red">
				You have used all of your hotlink bandwidth. Other people won't
				be able to download your files directly from the API anymore.
				Downloads will have to go through the file viewer page. Please
				upgrade to a higher support tier to continue hotlinking files:
				<br/>
				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
					Upgrade options
				</a>
			</div>
		{:else if direct_link_percent > 0.8}
			<div class="highlight_yellow">
				You have used {(direct_link_percent*100).toFixed(0)}% of your
				hotlink bandwidth. If your hotlink bandwidth runs out people
				won't be able to download your files directly from the API
				anymore. Downloads will have to go through the file viewer page.
				Please upgrade to a higher support tier to continue hotlinking
				files:
				<br/>
				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
					Upgrade options
				</a>
			</div>
		{/if}

		<h3>Exports</h3>
		<div style="text-align: center;">
			<a href="/user/export/files" class="button">
				<i class="icon">list</i>
				Export uploaded files to CSV
			</a>
			<a href="/user/export/lists" class="button">
				<i class="icon">list</i>
				Export created lists to CSV
			</a>
		</div>

		<h2>Statistics</h2>
		<p>
			Here you can see how often your files are viewed, downloaded
			and how much bandwidth they consume. The buttons at the top
			can be pressed to adjust the timeframe. If you choose 'Day'
			the statistics will be updated periodically. No need to
			refresh the page.
		</p>
	</div>
	<div class="highlight_light">
		<button
			on:click={() => { update_graphs(1440, 1, true) }}
			class:button_highlight={graph_timespan == 1440}>
			Day (1m)
		</button>
		<button
			on:click={() => { update_graphs(10080, 10, false) }}
			class:button_highlight={graph_timespan == 10080}>
			Week (10m)
		</button>
		<button
			on:click={() => { update_graphs(20160, 60, false) }}
			class:button_highlight={graph_timespan == 20160}>
			Two Weeks (1h)
		</button>
		<button
			on:click={() => { update_graphs(43200, 1440, false) }}
			class:button_highlight={graph_timespan == 43200}>
			Month (1d)
		</button>
		<button
			on:click={() => { update_graphs(131400, 1440, false) }}
			class:button_highlight={graph_timespan == 131400}>
			Quarter (1d)
		</button>
		<button
			on:click={() => { update_graphs(525600, 1440, false) }}
			class:button_highlight={graph_timespan == 525600}>
			Year (1d)
		</button>
		<button
			on:click={() => { update_graphs(1051200, 1440, false) }}
			class:button_highlight={graph_timespan == 1051200}>
			Two Years (1d)
		</button>
		<br/>
		Total usage from {time_start} to {time_end}<br/>
		{formatThousands(total_views)} views,
		{formatThousands(total_downloads)} downloads,
		{formatDataVolume(total_bandwidth, 3)} bandwidth and
		{formatDataVolume(total_direct_link, 3)} direct link bandwidth
	</div>
	<div class="limit_width">
		<h3>Views</h3>
		<p>
			A view is counted when someone visits the download page of one
			of your files. Views are unique per user per file.
		</p>
	</div>
	<Chart bind:this={graph_view} dataType="number" label="Views" />
	<div class="limit_width">
		<h3>Downloads</h3>
		<p>
			Downloads are counted when a user clicks the download button
			on one of your files. It does not matter whether the
			download is completed or not, only the start of the download
			is counted.
		</p>
	</div>
	<Chart bind:this={graph_download} dataType="number" label="Downloads" />
	<div class="limit_width">
		<h3>Bandwidth</h3>
		<p>
			This is how much bandwidth your files are using in total.
			Bandwidth is used when a file is tranferred from a
			pixeldrain server to a user who is downloading the file.
			When a 5 MB file is downloaded 8 times it has used 40 MB of
			bandwidth.
		</p>
	</div>
	<Chart bind:this={graph_bandwidth} dataType="bytes" label="Bandwidth" />
	<div class="limit_width">
		<h3>Hotlink bandwidth</h3>
		<p>
			When a file is downloaded without going through pixeldrain's
			download page it counts as a hotlink. Because hotlinking costs us
			bandwidth and doesn't generate any ad revenue we have to limit it.
			When your hotlink bandwidth runs out people will be asked to do a
			test before they can download your files. See our
			<a href="/#pro">subscription options</a> to get more hotlink
			bandwidth.
		</p>
	</div>
	<Chart bind:this={graph_direct_link} dataType="bytes" label="Hotlink bandwidth" />
</div>

<style>
.progress_bar_outer {
	display: block;
	background-color: var(--layer_1_color);
	width: 100%;
	height: 3px;
	margin: 6px 0 12px 0;
}
.progress_bar_inner {
	background-color: var(--highlight_color);
	height: 100%;
	width: 0;
	transition: width 1s;
}
</style>