272 lines
8.5 KiB
Svelte
272 lines
8.5 KiB
Svelte
<script>
|
|
import { onDestroy, onMount } from "svelte";
|
|
import { formatDataVolume, formatThousands } from "../util/Formatting.svelte";
|
|
import Chart from "../util/Chart.svelte";
|
|
import StorageProgressBar from "./StorageProgressBar.svelte";
|
|
import HotlinkProgressBar from "./HotlinkProgressBar.svelte";
|
|
import Euro from "../util/Euro.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 storage_space_used = 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
|
|
storage_space_used = window.user.storage_space_used
|
|
}).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 you view files:
|
|
{#if window.user.subscription.disable_ad_display}No{:else}Yes{/if}
|
|
</li>
|
|
<li>
|
|
Advertisements when others view your 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>
|
|
{#if window.user.balance_micro_eur !== 0}
|
|
<li>
|
|
Current account balance: <Euro amount={window.user.balance_micro_eur}></Euro>
|
|
</li>
|
|
{/if}
|
|
</ul>
|
|
|
|
{#if window.user.subscription.storage_space === -1}
|
|
Storage space used: {formatDataVolume(storage_space_used, 3)}<br/>
|
|
{:else}
|
|
<StorageProgressBar used={storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
|
|
{/if}
|
|
|
|
{#if window.user.subscription.direct_linking_bandwidth === -1}
|
|
Hotlink bandwidth used in the last 30 days: {formatDataVolume(direct_link_bandwidth_used, 3)}<br/>
|
|
{:else}
|
|
<HotlinkProgressBar used={direct_link_bandwidth_used} total={window.user.subscription.direct_linking_bandwidth}></HotlinkProgressBar>
|
|
{/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>
|