From 6472820666fd35f9e08037d3c3b10207b3e0b888 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Tue, 25 Oct 2022 15:59:20 +0200
Subject: [PATCH] Chart fixes

---
 svelte/src/admin_panel/Home.svelte          | 12 ++--
 svelte/src/file_viewer/DetailsWindow.svelte | 75 +++++++++++----------
 svelte/src/file_viewer/viewers/Image.svelte |  1 +
 svelte/src/user_home/Home.svelte            |  2 +-
 svelte/src/util/Chart.svelte                |  2 +-
 5 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte
index 387cb3d..c62183d 100644
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -36,11 +36,12 @@ const loadGraph = (minutes, interval, live) => {
 	}).then(resp => {
 		resp.views.timestamps.forEach((val, idx) => {
 			let date = new Date(val);
-			let dateStr = ("00" + (date.getMonth() + 1)).slice(-2);
+			let dateStr = date.getFullYear();
+			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.views.timestamps[idx] = "   " + dateStr + "   "; // Poor man's padding
+			resp.views.timestamps[idx] = " " + dateStr + " "; // Poor man's padding
 		});
 		graphViews.data().labels = resp.views.timestamps;
 		graphViews.data().datasets[0].data = resp.views.amounts;
@@ -146,7 +147,7 @@ onMount(() => {
 		},
 	];
 
-	loadGraph(43200, 60, true);
+	loadGraph(10080, 10, true);
 	getStats("calls")
 	statsInterval = setInterval(() => {
 		getStats(lastOrder)
@@ -173,9 +174,10 @@ onDestroy(() => {
 	<button on:click={() => loadGraph(262800, 1440, false)}>Half-year 1d</button>
 	<button on:click={() => loadGraph(525600, 1440, false)}>Year 1d</button>
 	<button on:click={() => loadGraph(1051200, 1440, false)}>Two Years 1d</button>
+	<button on:click={() => loadGraph(2628000, 1440, false)}>Five Years 1d</button>
 </div>
-<Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
-<Chart bind:this={graphViews} data_type="number" legend={false} />
+<Chart bind:this={graphBandwidth} data_type="bytes" />
+<Chart bind:this={graphViews} data_type="number" />
 <div class="highlight_border">
 	Total usage from {start_time} to {end_time}<br/>
 	{formatDataVolume(total_bandwidth, 3)} bandwidth,
diff --git a/svelte/src/file_viewer/DetailsWindow.svelte b/svelte/src/file_viewer/DetailsWindow.svelte
index e26c524..49d3e79 100644
--- a/svelte/src/file_viewer/DetailsWindow.svelte
+++ b/svelte/src/file_viewer/DetailsWindow.svelte
@@ -8,7 +8,7 @@ export let file = {
 	id: "",
 	name: "",
 	mime_type: "",
-	date_created: "",
+	date_upload: "",
 	size: 0,
 	downloads: 0,
 	bandwidth_used: 0,
@@ -18,22 +18,46 @@ export let file = {
 	timeseries_href: "",
 }
 
-let chart
-let chart_timespan = 43200
-let chart_interval = 60
-
 $: update_file(file.id)
 let update_file = id => {
 	if (id) {
-		update_chart(chart_timespan, chart_interval)
+		update_chart(0, 0)
 	}
 }
 
+let chart
+let chart_timespan = 0
+let chart_interval = 0
+let chart_timespans = [
+	{label: "Day (1m)", span: 1440, interval: 1},
+	{label: "Week (1h)", span: 10080, interval: 60},
+	{label: "Month (1h)", span: 43200, interval: 60},
+	{label: "Quarter (1d)", span: 131400, interval: 1440},
+	{label: "Year (1d)", span: 525600, interval: 1440},
+	{label: "Two Years (1d)", span: 1051200, interval: 1440},
+	{label: "Five Years (1d)", span: 2628000, interval: 1440},
+]
+
 let update_chart = (timespan, interval) => {
+		// If the timespan is 0 we calculate the maximum timespan based on the age
+	// of the file
+	if (timespan === 0) {
+		let minutes_since_upload = (new Date().getTime() - Date.parse(file.date_upload)) / 1000 / 60
+
+		for (let i = 0; i < chart_timespans.length; i++) {
+			timespan = chart_timespans[i].span
+			interval = chart_timespans[i].interval
+
+			if (chart_timespans[i].span > minutes_since_upload) {
+				break;
+			}
+		}
+	}
+
 	chart_timespan = timespan
 	chart_interval = interval
 
-	console.log("updating graph")
+	console.log("updating graph", chart_timespan, chart_interval)
 
 	let start = new Date()
 	start.setMinutes(start.getMinutes() - timespan)
@@ -160,36 +184,13 @@ onMount(() => {
 	<h2>Views and downloads</h2>
 
 	<div class="button_bar">
-		<button
-			on:click={() => { update_chart(1440, 1) }}
-			class:button_highlight={chart_timespan == 1440}>
-			Day (1m)
-		</button>
-		<button
-			on:click={() => { update_chart(10080, 60) }}
-			class:button_highlight={chart_timespan == 10080}>
-			Week (1h)
-		</button>
-		<button
-			on:click={() => { update_chart(43200, 60) }}
-			class:button_highlight={chart_timespan == 43200}>
-			Month (1h)
-		</button>
-		<button
-			on:click={() => { update_chart(131400, 1440) }}
-			class:button_highlight={chart_timespan == 131400}>
-			Quarter (1d)
-		</button>
-		<button
-			on:click={() => { update_chart(525600, 1440) }}
-			class:button_highlight={chart_timespan == 525600}>
-			Year (1d)
-		</button>
-		<button
-			on:click={() => { update_chart(1051200, 1440) }}
-			class:button_highlight={chart_timespan == 1051200}>
-			Two Years (1d)
-		</button>
+		{#each chart_timespans as ts}
+			<button
+				on:click={() => { update_chart(ts.span, ts.interval) }}
+				class:button_highlight={chart_timespan == ts.span}>
+				{ts.label}
+			</button>
+		{/each}
 	</div>
 
 	<Chart bind:this={chart} />
diff --git a/svelte/src/file_viewer/viewers/Image.svelte b/svelte/src/file_viewer/viewers/Image.svelte
index a21c778..9ca0bc1 100644
--- a/svelte/src/file_viewer/viewers/Image.svelte
+++ b/svelte/src/file_viewer/viewers/Image.svelte
@@ -75,6 +75,7 @@ const mouseup = (e) => {
 }
 .container.zoom {
 	overflow: auto;
+	justify-content: unset;
 }
 .image {
 	position: relative;
diff --git a/svelte/src/user_home/Home.svelte b/svelte/src/user_home/Home.svelte
index 9cec666..cb3a475 100644
--- a/svelte/src/user_home/Home.svelte
+++ b/svelte/src/user_home/Home.svelte
@@ -175,7 +175,7 @@ onMount(() => {
 		}
 	];
 
-	update_graphs(10080, 60, true);
+	update_graphs(43200, 1440, true);
 })
 onDestroy(() => {
 	if (graph_timeout !== null) {
diff --git a/svelte/src/util/Chart.svelte b/svelte/src/util/Chart.svelte
index 9e158aa..8679555 100644
--- a/svelte/src/util/Chart.svelte
+++ b/svelte/src/util/Chart.svelte
@@ -122,6 +122,6 @@ onMount(() => {
 .chart-container {
 	position: relative;
 	width: 100%;
-	height: 250px;
+	height: 300px;
 }
 </style>