Download and view graphs

res/static/script/Toolbar.js

@@ -173,6 +173,7 @@ function loadCaptcha(){
 
 var DetailsWindow = {
 	visible:       false,
+	fileID:        "",
 	popupDiv:      document.getElementById("details_popup"),
 	detailsButton: document.getElementById("btnDetails"),
 	toggle: function () {
@@ -186,6 +187,7 @@ var DetailsWindow = {
 			this.popupDiv.style.visibility = "visible"
 			this.detailsButton.classList.add("button_highlight")
 			this.visible = true;
+			this.renderGraph(this.fileID);
 		}
 	},
 	setDetails: function (file) {
@@ -197,6 +199,7 @@ var DetailsWindow = {
 				dataType: "json",
 				url: apiEndpoint + "/file/" + file.id + "/info",
 				success: function(data){
+					this.fileID = data.id;
 					$("#info_file_details").html(
 						"<table>"
 						+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
@@ -210,9 +213,13 @@ var DetailsWindow = {
 						+ "</table>"
 					);
 					Toolbar.setStats(data.views, data.bandwidth_used/data.size);
+					if(this.visible) {
+						this.renderGraph(data.id);
+					}
 				}
 			});
 		} else {
+			this.fileID = file.id;
 			$("#info_file_details").html(
 				"<table>"
 				+ "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
@@ -224,6 +231,65 @@ var DetailsWindow = {
 				+ "</table>"
 			);
 			Toolbar.setStats(file.views, file.bandwidth_used/file.size);
+			if(this.visible) {
+				this.renderGraph(file.id);
+			}
 		}
+	},
+	renderGraph: function(fileID) {
+		console.log("rendering graph "+fileID);
+		$.get(apiEndpoint+"/file/" + fileID + "/timeseries", function(response){
+			console.log(response);
+			if (response.success) {
+				var ctx = document.getElementById('bandwidth_chart');
+				Chart.defaults.global.defaultFontColor = "#b3b3b3";
+				Chart.defaults.global.defaultFontSize = 16;
+				Chart.defaults.global.defaultFontFamily = "Ubuntu";
+				new Chart(
+					document.getElementById('bandwidth_chart'),
+					{
+						type: 'line',
+						data: response,
+						options: {
+							stacked: false,
+							aspectRatio: 2.5,
+							tooltips: {
+								mode: "index",
+								intersect: false,
+								axis: "x"
+							},
+							scales: {
+								yAxes: [
+									{
+										type: "linear",
+										display: true,
+										position: "left",
+										id: "y_bandwidth",
+										scaleLabel: {
+											display: true,
+											labelString: "Downloads"
+										}
+									}, {
+										type: "linear",
+										display: true,
+										position: "right",
+										id: "y_views",
+										scaleLabel: {
+											display: true,
+											labelString: "Views"
+										}
+									}
+								]
+							},
+							elements: {
+								point: {
+									radius: 0
+								}
+							}
+						}
+					}
+				);
+			}
+		});
 	}
 };

res/static/style/viewer.css

@@ -214,7 +214,7 @@ body{
 
 .details_popup{
 	overflow-y: scroll;
-	width: 1200px;
+	width: 1500px;
 	height: 800px;
 	z-index: 100;
 }

res/template/file_viewer.html

@@ -131,6 +131,11 @@
 					<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
 				</table>
 
+				<h3>Bandwidth and views</h3>
+				<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;">
+					<canvas id="bandwidth_chart"></canvas>
+				</div>
+
 				<h3>Credits</h3>
 				All server side code written by
 				<a target="_blank" href="https://fornaxian.com/">Fornax (me)</a>.
@@ -156,6 +161,7 @@
 			<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
 		</div>
 
+		<script src="/res/misc/chartjs/Chart.min.js"></script>
 		<script src="/res/script/jquery.js"></script>
 		<script src="/res/script/Keyboard.js"></script>
 		<script src="/res/script/Toolbar.js?v1"></script>