From 619f61161f13ca37d7bb508a8746667edb712696 Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Sun, 7 Jul 2019 12:09:13 +0200 Subject: [PATCH] Fix graph in lists --- res/static/script/ListNavigator.js | 1 - res/static/script/Toolbar.js | 168 +++++++++++++++-------------- 2 files changed, 89 insertions(+), 80 deletions(-) diff --git a/res/static/script/ListNavigator.js b/res/static/script/ListNavigator.js index 583ee9d..b0848c0 100644 --- a/res/static/script/ListNavigator.js +++ b/res/static/script/ListNavigator.js @@ -208,7 +208,6 @@ var ListNavigator = { document.getElementById("toolbar").style.top = navHeight+"px"; document.getElementById("button-expand-toolbar").style.top = navHeight+"px"; document.getElementById("sharebar").style.top = navHeight+"px"; - document.getElementById("info_popup").style.top = (navHeight+20)+"px"; }, 200); } }; diff --git a/res/static/script/Toolbar.js b/res/static/script/Toolbar.js index cc511d8..c690bdf 100644 --- a/res/static/script/Toolbar.js +++ b/res/static/script/Toolbar.js @@ -174,6 +174,7 @@ function loadCaptcha(){ var DetailsWindow = { visible: false, fileID: "", + graph: 0, popupDiv: document.getElementById("details_popup"), detailsButton: document.getElementById("btnDetails"), toggle: function () { @@ -187,10 +188,15 @@ var DetailsWindow = { this.popupDiv.style.visibility = "visible" this.detailsButton.classList.add("button_highlight") this.visible = true; - this.renderGraph(this.fileID); + + if (this.graph === 0) { + this.renderGraph(); + } + this.updateGraph(this.fileID); } }, setDetails: function (file) { + var that = this; if (Viewer.isList) { // Lists give incomplete file information, so we have to request // more details in the background. File descriptions only exist in @@ -199,7 +205,7 @@ var DetailsWindow = { dataType: "json", url: apiEndpoint + "/file/" + file.id + "/info", success: function(data){ - this.fileID = data.id; + that.fileID = data.id; $("#info_file_details").html( "" + "" @@ -213,8 +219,8 @@ var DetailsWindow = { + "
Name" + escapeHTML(data.name) + "
" ); Toolbar.setStats(data.views, data.bandwidth_used/data.size); - if(this.visible) { - this.renderGraph(data.id); + if(that.visible) { + that.updateGraph(that.fileID); } } }); @@ -232,88 +238,92 @@ var DetailsWindow = { ); Toolbar.setStats(file.views, file.bandwidth_used/file.size); if(this.visible) { - this.renderGraph(file.id); + this.updateGraph(file.id); } } }, - renderGraph: function(fileID) { - console.log("rendering graph "+fileID); + updateGraph: function(fileID) { + var that = this; + console.log("updating 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: { - labels: response.labels, - datasets: [ - { - label: "Downloads", - backgroundColor: "rgba(100, 255, 100, .4)", - borderColor: "rgba(100, 255, 100, .8)", - borderWidth: 2, - fill: false, - yAxisID: "y_bandwidth", - data: response.downloads - }, { - label: "Views", - backgroundColor: "rgba(128, 128, 255, .4)", - borderColor: "rgba(128, 128, 255, .8)", - borderWidth: 2, - fill: false, - yAxisID: "y_views", - data: response.views - } - ] - }, - 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" - }, - gridLines: { - color: "rgba(0, 0, 0, 0)" - } - } - ] - }, - elements: { - point: { - radius: 0 - } - } - } - } - ); + that.graph.data.labels = response.labels; + that.graph.data.datasets[0].data = response.downloads; + that.graph.data.datasets[1].data = response.views; + that.graph.update(); } }); + }, + renderGraph: function() { + console.log("rendering graph"); + Chart.defaults.global.defaultFontColor = "#b3b3b3"; + Chart.defaults.global.defaultFontSize = 16; + Chart.defaults.global.defaultFontFamily = "Ubuntu"; + this.graph = new Chart( + document.getElementById('bandwidth_chart'), + { + type: 'line', + data: { + datasets: [ + { + label: "Downloads", + backgroundColor: "rgba(100, 255, 100, .4)", + borderColor: "rgba(100, 255, 100, .8)", + borderWidth: 2, + fill: false, + yAxisID: "y_bandwidth", + }, { + label: "Views", + backgroundColor: "rgba(128, 128, 255, .4)", + borderColor: "rgba(128, 128, 255, .8)", + borderWidth: 2, + fill: false, + yAxisID: "y_views", + } + ] + }, + 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" + }, + gridLines: { + color: "rgba(0, 0, 0, 0)" + } + } + ] + }, + elements: { + point: { + radius: 0 + } + } + } + } + ); } };