From 900f2511c700d28f3666cf501e4030a16ee7f4aa Mon Sep 17 00:00:00 2001 From: Trystan Lea Date: Mon, 20 Apr 2026 21:54:47 +0100 Subject: [PATCH 1/3] split out js for readability --- embed.php | 5 + graph.csv.js | 125 +++++ graph.editor.js | 456 ++++++++++++++++ graph.histogram.js | 98 ++++ graph.js | 1276 -------------------------------------------- graph.legend.js | 89 +++ graph.saved.js | 448 ++++++++++++++++ graph.utils.js | 72 +++ view.php | 6 + 9 files changed, 1299 insertions(+), 1276 deletions(-) create mode 100644 graph.csv.js create mode 100644 graph.editor.js create mode 100644 graph.histogram.js create mode 100644 graph.legend.js create mode 100644 graph.saved.js create mode 100644 graph.utils.js diff --git a/embed.php b/embed.php index 688b9f7..e3eca3b 100644 --- a/embed.php +++ b/embed.php @@ -99,7 +99,12 @@ + + + + + + + + + + + - - - - - - - - - - - - - -
- - -
- -

Data viewer

- - - - - - - -
-
-
- - -
-
- - - - - - From 5ca2f93310af43a5781a52611c4be2e425bb34e8 Mon Sep 17 00:00:00 2001 From: Trystan Lea Date: Tue, 21 Apr 2026 08:01:20 +0100 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20phase=201=20cleanup=20-=20extra?= =?UTF-8?q?ct=20HTML=20builders,=20consolidate=20inline=20scripts,=20var?= =?UTF-8?q?=E2=86=92const/let?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- graph.csv.js | 108 ++++++++----------- graph.editor.js | 175 +++++++++++++++--------------- graph.histogram.js | 124 ++++++++++----------- graph.js | 264 +++++++++++++++++++++------------------------ graph.saved.js | 40 +++---- view.php | 142 ++++++++++++------------ vis.helper.js | 92 ++++++++-------- 7 files changed, 444 insertions(+), 501 deletions(-) diff --git a/graph.csv.js b/graph.csv.js index 7c2528d..c494a4e 100644 --- a/graph.csv.js +++ b/graph.csv.js @@ -4,93 +4,71 @@ function printcsv() { - if (typeof(feedlist[0]) === "undefined" ) {return}; + if (typeof feedlist[0] === "undefined") return; - var timeformat = $("#csvtimeformat").val(); - var nullvalues = $("#csvnullvalues").val(); - var headers = $("#csvheaders").val(); + const timeformat = $("#csvtimeformat").val(); + const nullvalues = $("#csvnullvalues").val(); + const headers = $("#csvheaders").val(); - var csvout = ""; + let csvout = ""; - var value = []; - var line = []; - var lastvalue = []; - var start_time = feedlist[0].data[0][0]; - var end_time = feedlist[feedlist.length-1].data[feedlist[feedlist.length-1].data.length-1][0]; - var showName=false; - var showTag=false; + const value = []; + let line = []; + const lastvalue = []; + const start_time = feedlist[0].data[0][0]; + let showName = false; + let showTag = false; switch (headers) { - case "showNameTag": - showName=true; - showTag=true; - break; - case "showName": - showName=true; - break; + case "showNameTag": showName = true; showTag = true; break; + case "showName": showName = true; break; } - if (showName || showTag ) { + if (showName || showTag) { switch (timeformat) { - case "unix": - line = ["Unix timestamp"]; - break; - case "seconds": - line = ["Seconds since start"]; - break; - case "datestr": - line = ["Date-time string"]; - break; + case "unix": line = ["Unix timestamp"]; break; + case "seconds": line = ["Seconds since start"]; break; + case "datestr": line = ["Date-time string"]; break; } - - for (var f in feedlist) { - line.push((showTag ? feedlist[f].tag : "")+(showTag && showName ? ":" : "")+(showName ? feedlist[f].name : "")); + for (const f in feedlist) { + line.push((showTag ? feedlist[f].tag : "") + (showTag && showName ? ":" : "") + (showName ? feedlist[f].name : "")); } - csvout = "\"" + line.join("\", \"")+"\"\n"; + csvout = '"' + line.join('", "') + '"\n'; } - for (var z in feedlist[0].data) { + for (const z in feedlist[0].data) { line = []; - // Different time format options for csv output - if (timeformat=="unix") { + if (timeformat === "unix") { line.push(Math.round(feedlist[0].data[z][0] / 1000)); - } else if (timeformat=="seconds") { - line.push(Math.round((feedlist[0].data[z][0]-start_time)/1000)); - } else if (timeformat=="datestr") { - // Create date time string - var t = new Date(feedlist[0].data[z][0]); - var year = t.getFullYear(); - var month = t.getMonth()+1; - if (month<10) month = "0"+month; - var day = t.getDate(); - if (day<10) day = "0"+day; - var hours = t.getHours(); - if (hours<10) hours = "0"+hours; - var minutes = t.getMinutes(); - if (minutes<10) minutes = "0"+minutes; - var seconds = t.getSeconds(); - if (seconds<10) seconds = "0"+seconds; - - var formatted = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds; - line.push(formatted); + } else if (timeformat === "seconds") { + line.push(Math.round((feedlist[0].data[z][0] - start_time) / 1000)); + } else if (timeformat === "datestr") { + const t = new Date(feedlist[0].data[z][0]); + const year = t.getFullYear(); + const month = String(t.getMonth() + 1).padStart(2, '0'); + const day = String(t.getDate()).padStart(2, '0'); + const hours = String(t.getHours()).padStart(2, '0'); + const minutes = String(t.getMinutes()).padStart(2, '0'); + const seconds = String(t.getSeconds()).padStart(2, '0'); + line.push(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`); } - var nullfound = false; - for (var f in feedlist) { - if (value[f]==undefined) value[f] = null; + let nullfound = false; + for (const f in feedlist) { + if (value[f] === undefined) value[f] = null; lastvalue[f] = value[f]; - if (feedlist[f].data[z]!=undefined) { - if (feedlist[f].data[z][1]==null) nullfound = true; - if (feedlist[f].data[z][1]!=null || nullvalues=="show") value[f] = feedlist[f].data[z][1]; - if (value[f]!=null) value[f] = (value[f]*1.0).toFixed(feedlist[f].dp); - line.push(value[f]+""); + if (feedlist[f].data[z] !== undefined) { + if (feedlist[f].data[z][1] === null) nullfound = true; + if (feedlist[f].data[z][1] !== null || nullvalues === "show") value[f] = feedlist[f].data[z][1]; + if (value[f] !== null) value[f] = (value[f] * 1.0).toFixed(feedlist[f].dp); + line.push(value[f] + ""); } } - if (nullvalues=="remove" && nullfound) { + if (nullvalues === "remove" && nullfound) { // pass } else { - csvout += line.join(", ")+"\n"; + csvout += line.join(", ") + "\n"; } } $("#csv").val(csvout); diff --git a/graph.editor.js b/graph.editor.js index eb9f809..0172e97 100644 --- a/graph.editor.js +++ b/graph.editor.js @@ -3,6 +3,49 @@ // Only loaded by view.php (not embed.php) //---------------------------------------------------------------------------------------- +//---------------------------------------------------------------------------------------- +// buildFeedSelectorHTML - builds the HTML for the sidebar feed selector table +// Returns { html, feedsbytag, numberoftags } +//---------------------------------------------------------------------------------------- +function buildFeedSelectorHTML(feeds) { + const feedsbytag = {}; + let numberoftags = 0; + for (const feed of feeds) { + if (feedsbytag[feed.tag] === undefined) { + feedsbytag[feed.tag] = []; + numberoftags++; + } + feedsbytag[feed.tag].push(feed); + } + + let out = ` + + + + `; + + for (const tag in feedsbytag) { + const tagname = tag || 'undefined'; + out += ` + + ${tagname} + + + `; + for (const feed of feedsbytag[tag]) { + let name = feed.name; + if (name && name.length > 20) name = name.substr(0, 20) + '..'; + out += ` + ${name} + + + `; + } + out += ''; + } + return { html: out, feedsbytag, numberoftags }; +} + //---------------------------------------------------------------------------------------- // Side bar feed selector and events associated with editor only, not loaded in embed mode //---------------------------------------------------------------------------------------- @@ -10,48 +53,8 @@ function graph_init_editor() { if (!feeds) feeds = feedlist; - var numberoftags = 0; - feedsbytag = {}; - for (var z in feeds) { - if (feedsbytag[feeds[z].tag]==undefined) { - feedsbytag[feeds[z].tag] = []; - numberoftags++; - } - feedsbytag[feeds[z].tag].push(feeds[z]); - } - // Draw sidebar feed selector ------------------------------------------- - - var out = ""; - out += ""; - out += ""; - out += ""; - out += ""; - out += ""; - - for (var tag in feedsbytag) { - tagname = tag; - if (tag=="") tagname = "undefined"; - out += ""; - out += ""; - out += ""+tagname+""; - out += ""; - out += ""; - out += ""; - for (var z in feedsbytag[tag]) - { - out += ""; - var name = feedsbytag[tag][z].name; - if (name && name.length>20) { - name = name.substr(0,20)+".."; - } - out += ""+name+""; - out += ""; - out += ""; - out += ""; - } - out += ""; - } + const { html, feedsbytag, numberoftags } = buildFeedSelectorHTML(feeds); // --------------------------------------------------------------- // Writting direct to the menu system here @@ -61,14 +64,14 @@ function graph_init_editor() // 2. Clear original hidden element $("#sidebar_html").html(""); // 3. Populate with feed list selector - $("#feeds").html(out); + $("#feeds").html(html); // 4. Show l3 menu - if (menu.width>=576) menu.show_l3(); + if (menu.width >= 576) menu.show_l3(); // 5. Enable l3 menu so that collapsing and re-expanding works - if (menu.obj.setup!=undefined) { - if (menu.obj.setup.l2!=undefined) { - if (menu.obj.setup.l2.graph!=undefined) { - menu.obj.setup.l2.graph.l3 = [] + if (menu.obj.setup != undefined) { + if (menu.obj.setup.l2 != undefined) { + if (menu.obj.setup.l2.graph != undefined) { + menu.obj.setup.l2.graph.l3 = []; menu.active_l3 = true; } } @@ -76,7 +79,7 @@ function graph_init_editor() if (session_write) load_saved_graphs_menu(); // --------------------------------------------------------------- - if (feeds.length>12 && numberoftags>2) { + if (feeds.length > 12 && numberoftags > 2) { $(".tagbody").hide(); } @@ -106,21 +109,21 @@ function graph_init_editor() showmissing = false; showtag = true; showlegend = true; - floatingtime=1; - yaxismin="auto"; - yaxismax="auto"; - yaxismin2="auto"; - yaxismax2="auto"; - csvtimeformat="datestr"; - csvnullvalues="show"; - csvheaders="showNameTag"; + floatingtime = 1; + yaxismin = "auto"; + yaxismax = "auto"; + yaxismin2 = "auto"; + yaxismax2 = "auto"; + csvtimeformat = "datestr"; + csvnullvalues = "show"; + csvheaders = "showNameTag"; current_graph_id = ""; current_graph_name = ""; previousPoint = 0; active_histogram_feed = 0; - var timeWindow = 3600000*24.0*7; - var now = Math.round(+new Date * 0.001)*1000; + const timeWindow = 3600000 * 24.0 * 7; + const now = Math.round(+new Date() * 0.001) * 1000; view.start = now - timeWindow; view.end = now; view.calc_interval(); @@ -223,42 +226,42 @@ function graph_init_editor() }); $("body").on("click",".feed-select-left",function(){ - var feedid = $(this).data("feedid"); - var checked = $(this)[0].checked; + const feedid = $(this).data("feedid"); + const checked = $(this)[0].checked; - var loaded = false; - for (var z in feedlist) { - if (feedlist[z].id==feedid) { - if (!checked) { - feedlist.splice(z,1); - } else { - feedlist[z].yaxis = 1; - loaded = true; - $(".feed-select-right[data-feedid="+feedid+"]")[0].checked = false; - } - } + let loaded = false; + for (const z in feedlist) { + if (feedlist[z].id == feedid) { + if (!checked) { + feedlist.splice(z, 1); + } else { + feedlist[z].yaxis = 1; + loaded = true; + $(".feed-select-right[data-feedid="+feedid+"]")[0].checked = false; + } + } } - if (loaded==false && checked) pushfeedlist(feedid, 1); + if (!loaded && checked) pushfeedlist(feedid, 1); graph_reload(); }); $("body").on("click",".feed-select-right",function(){ - var feedid = $(this).data("feedid"); - var checked = $(this)[0].checked; + const feedid = $(this).data("feedid"); + const checked = $(this)[0].checked; - var loaded = false; - for (var z in feedlist) { - if (feedlist[z].id==feedid) { - if (!checked) { - feedlist.splice(z,1); - } else { - feedlist[z].yaxis = 2; - loaded = true; - $(".feed-select-left[data-feedid="+feedid+"]")[0].checked = false; - } - } + let loaded = false; + for (const z in feedlist) { + if (feedlist[z].id == feedid) { + if (!checked) { + feedlist.splice(z, 1); + } else { + feedlist[z].yaxis = 2; + loaded = true; + $(".feed-select-left[data-feedid="+feedid+"]")[0].checked = false; + } + } } - if (loaded==false && checked) pushfeedlist(feedid, 2); + if (!loaded && checked) pushfeedlist(feedid, 2); graph_reload(); }); diff --git a/graph.histogram.js b/graph.histogram.js index 97e3784..8d35513 100644 --- a/graph.histogram.js +++ b/graph.histogram.js @@ -3,96 +3,88 @@ //---------------------------------------------------------------------------------------- // Launch histogram mode for a given feed -$("body").on("click",".histogram",function(){ - $("#navigation").hide(); - $("#histogram-controls").show(); - var feedid = $(this).attr("feedid"); +$('body').on('click', '.histogram', function() { + $('#navigation').hide(); + $('#histogram-controls').show(); + const feedid = $(this).attr('feedid'); active_histogram_feed = feedid; - var type = $("#histogram-type").val(); - var resolution = 1; - - var index = 0; - for (var z in feedlist) { - if (feedlist[z].id==feedid) { - index = z; - break; - } + const type = $('#histogram-type').val(); + let resolution = 1; + + let index = 0; + for (const z in feedlist) { + if (feedlist[z].id == feedid) { index = z; break; } } - if (feedlist[index].stats.diff<5000) resolution = 10; - if (feedlist[index].stats.diff<100) resolution = 0.1; - $("#histogram-resolution").val(resolution); + if (feedlist[index].stats.diff < 5000) resolution = 10; + if (feedlist[index].stats.diff < 100) resolution = 0.1; + $('#histogram-resolution').val(resolution); - histogram(feedid,type,resolution); + histogram(feedid, type, resolution); }); // Change the histogram resolution -$("#histogram-resolution").change(function(){ - var type = $("#histogram-type").val(); - var resolution = $("#histogram-resolution").val(); - histogram(active_histogram_feed,type,resolution); +$('#histogram-resolution').change(function() { + const type = $('#histogram-type').val(); + const resolution = $('#histogram-resolution').val(); + histogram(active_histogram_feed, type, resolution); }); -// time at value or power to kwh -$("#histogram-type").change(function(){ - var type = $("#histogram-type").val(); - var resolution = $("#histogram-resolution").val(); - histogram(active_histogram_feed,type,resolution); +// Time at value or power to kWh +$('#histogram-type').change(function() { + const type = $('#histogram-type').val(); + const resolution = $('#histogram-resolution').val(); + histogram(active_histogram_feed, type, resolution); }); -// return to power graph -$("#histogram-back").click(function(){ - $("#navigation").show(); - $("#histogram-controls").hide(); +// Return to power graph +$('#histogram-back').click(function() { + $('#navigation').show(); + $('#histogram-controls').hide(); graph_draw(); }); // Draw the histogram -function histogram(feedid,type,resolution) +function histogram(feedid, type, resolution) { - var histogram = {}; - var total_histogram = 0; - var val = 0; + const histData = {}; + let val = 0; // Get the feedlist index of the feedid - var index = -1; - for (var z in feedlist) - if (feedlist[z].id==feedid) index = z; - if (index==-1) return false; + let index = -1; + for (const z in feedlist) { + if (feedlist[z].id == feedid) { index = z; } + } + if (index === -1) return false; // Load data from feedlist object - var data = feedlist[index].data; - - for (var i=1; ib[0]) return 1; else return -1;}); - histogram = tmp; - - var options = { - series: { bars: { show: true, barWidth:resolution*0.8 } }, - grid: {hoverable: true} + const tmp = []; + for (const z in histData) tmp.push([z * 1, histData[z]]); + tmp.sort(function(a, b) { return a[0] > b[0] ? 1 : -1; }); + + const options = { + series: { bars: { show: true, barWidth: resolution * 0.8 } }, + grid: { hoverable: true } }; - var label = ""; - if (showtag) label += feedlist[index].tag+": "; + let label = ''; + if (showtag) label += feedlist[index].tag + ': '; label += feedlist[index].name; - $.plot("#placeholder",[{label:label, data:histogram}], options); -} + $.plot('#placeholder', [{label: label, data: tmp}], options); +} \ No newline at end of file diff --git a/graph.js b/graph.js index c11706a..c65a023 100644 --- a/graph.js +++ b/graph.js @@ -175,32 +175,32 @@ function reloadDatetimePrep() } function pushfeedlist(feedid, yaxis) { - var f = getfeed(feedid); - var dp=0; + let f = getfeed(feedid); + let dp = 0; - if (f==false) f = getfeedpublic(feedid); - if (f!=false) { - if (f.value % 1 !== 0 ) dp=1; - feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:yaxis, fill:0, scale: 1.0, offset: 0.0, delta:0, average:0, dp:dp, plottype:'lines'}); + if (f === false) f = getfeedpublic(feedid); + if (f !== false) { + if (f.value % 1 !== 0) dp = 1; + feedlist.push({id:feedid, name:f.name, tag:f.tag, yaxis:yaxis, fill:0, scale:1.0, offset:0.0, delta:0, average:0, dp:dp, plottype:'lines'}); } } function graph_reload() { - var ds = new Date(view.start); - var de = new Date(view.end); + const ds = new Date(view.start); + const de = new Date(view.end); // Round start and end time if (view.mode=="daily" || view.mode=="weekly") { view.start = (new Date(ds.getFullYear(), ds.getMonth(), ds.getDate(), 0,0,0,0)).getTime(); view.end = (new Date(de.getFullYear(), de.getMonth(), de.getDate(), 0,0,0,0)).getTime(); } else if (view.mode=="monthly") { - var month_offset = 0; + let month_offset = 0; if (ds.getMonth()==de.getMonth()) month_offset = 1; view.start = (new Date(ds.getFullYear(), ds.getMonth(), 1, 0,0,0,0)).getTime(); view.end = (new Date(de.getFullYear(), de.getMonth()+month_offset, 1, 0,0,0,0)).getTime(); } else if (view.mode=="annual") { - var year_offset = 0; + let year_offset = 0; if (ds.getFullYear()==de.getFullYear()) year_offset = 1; view.start = (new Date(ds.getFullYear(), 0, 1, 0,0,0,0)).getTime(); view.end = (new Date(de.getFullYear()+1, 0, 1, 0,0,0,0)).getTime(); @@ -222,18 +222,18 @@ function graph_reload() $("#request-limitinterval").attr("checked",view.limitinterval); // Convert feedlist into csv properties - var ids = []; - var averages = []; - var deltas = []; - for (var z in feedlist) { + const ids = []; + const averages = []; + const deltas = []; + for (const z in feedlist) { ids.push(feedlist[z].id); if (feedlist[z].average==false) feedlist[z].average = 0; - averages.push(feedlist[z].average) + averages.push(feedlist[z].average); if (feedlist[z].delta==false) feedlist[z].delta = 0; - deltas.push(feedlist[z].delta) + deltas.push(feedlist[z].delta); } - var data = { + const data = { ids: ids.join(','), start: view.start, end: view.end, @@ -264,7 +264,7 @@ function graph_reload() $('#cloned_toggle').remove(); // get feedlist data - $.getJSON(path+"feed/data.json", data, addFeedlistData) + $.getJSON(path + "feed/data.json", data, addFeedlistData) .fail(handleFeedlistDataError) .done(checkFeedlistData); } @@ -272,11 +272,11 @@ function graph_reload() function addFeedlistData(response){ // loop through feedlist and add response data to data property - var valid = false; - for (i in feedlist) { - let feed = feedlist[i]; - for (j in response) { - let item = response[j]; + let valid = false; + for (const i in feedlist) { + const feed = feedlist[i]; + for (const j in response) { + const item = response[j]; if (parseInt(feed.id) === parseInt(item.feedid) && item.data!=undefined) { feed.postprocessed = false; feed.data = item.data; @@ -334,23 +334,17 @@ function checkFeedlistData(response){ function set_feedlist() { + const remove_null = embed ? false : $(".remove-null")[0].checked; + const remove_null_max_duration = embed ? 900 : $(".remove-null-max-duration").val(); - var remove_null = false; - var remove_null_max_duration = 900; - if (!embed) { - remove_null = $(".remove-null")[0].checked; - remove_null_max_duration = $(".remove-null-max-duration").val(); - } - - for (var z in feedlist) - { - var scale = $(".scale[feedid="+feedlist[z].id+"]").val(); - if (scale!=undefined) feedlist[z].scale = scale; - var offset = $(".offset[feedid="+feedlist[z].id+"]").val(); - if (offset!=undefined) feedlist[z].offset = offset; + for (const z in feedlist) { + const scale = $(".scale[feedid="+feedlist[z].id+"]").val(); + if (scale !== undefined) feedlist[z].scale = scale; + const offset = $(".offset[feedid="+feedlist[z].id+"]").val(); + if (offset !== undefined) feedlist[z].offset = offset; // check to ensure feed scaling and data are only applied once - if (feedlist[z].postprocessed==false) { + if (feedlist[z].postprocessed === false) { feedlist[z].postprocessed = true; console.log("postprocessing feed "+feedlist[z].id+" "+feedlist[z].name); @@ -360,32 +354,88 @@ function set_feedlist() { } // Apply a scale to feed values - if (feedlist[z].scale!=undefined && feedlist[z].scale!=1.0) { - for (var i=0; i + `` + ).join(''); + out += ` + + ${z > 0 ? `` : ''} + ${z < feedlist.length - 1 ? `` : ''} + + ${getFeedName(feed)} + + + + + + + + + + + `; + } + return out; +} + +//---------------------------------------------------------------------------------------- +// buildFeedStatsHTML - builds the HTML for the feed statistics table rows +//---------------------------------------------------------------------------------------- +function buildFeedStatsHTML(feedlist, time_in_window) { + let out = ''; + for (const feed of feedlist) { + const quality = Math.round(100 * (1 - (feed.stats.npointsnull / feed.stats.npoints))); + const dp = feed.dp; + out += ` + + ${getFeedName(feed)} + ${quality}% (${feed.stats.npoints - feed.stats.npointsnull}/${feed.stats.npoints}) + ${!isNaN(Number(feed.stats.minval)) ? feed.stats.minval.toFixed(dp) : ''} + ${!isNaN(Number(feed.stats.maxval)) ? feed.stats.maxval.toFixed(dp) : ''} + ${feed.stats.diff.toFixed(dp)} + ${feed.stats.mean.toFixed(dp)} + ${feed.stats.stdev.toFixed(dp)} + ${Math.round((feed.stats.mean * time_in_window) / 3600)} + `; + } + return out; +} + function graph_draw() { - var options = { + const options = { lines: { fill: false }, xaxis: { mode: "time", @@ -434,38 +484,37 @@ function graph_draw() if (yaxismax!='auto' && yaxismax!='') { options.yaxes[0].max = yaxismax; } if (yaxismax2!='auto' && yaxismax2!='') { options.yaxes[1].max = yaxismax2; } - var time_in_window = (view.end - view.start) / 1000; - var hours = Math.floor(time_in_window / 3600); - var mins = Math.round(((time_in_window / 3600) - hours)*60); - if (mins!=0) { - if (mins<10) mins = "0"+mins; + const time_in_window = (view.end - view.start) / 1000; + const hours = Math.floor(time_in_window / 3600); + let mins = Math.round(((time_in_window / 3600) - hours) * 60); + if (mins !== 0) { + if (mins < 10) mins = "0" + mins; } else { mins = ""; } - if (!embed) $("#window-info").html(""+_lang['Window']+": "+printdate(view.start)+" → "+printdate(view.end)+"
"+_lang['Length']+": "+hours+"h"+mins+" ("+time_in_window+" seconds)"); + if (!embed) $("#window-info").html(`${_lang['Window']}: ${printdate(view.start)} → ${printdate(view.end)}
${_lang['Length']}: ${hours}h${mins} (${time_in_window} seconds)`); plotdata = []; let num_left = 0; let num_right = 0; - for (var z in feedlist) { + for (const z in feedlist) { - var data = feedlist[z].data; + let data = feedlist[z].data; // Hide missing data (only affects the plot view) if (!showmissing) { - var tmp = []; - for (var n in data) { - if (data[n][1]!=null) tmp.push(data[n]); + const tmp = []; + for (const n in data) { + if (data[n][1] !== null) tmp.push(data[n]); } data = tmp; } // Add series to plot - var label = ""; - if (showtag) label += feedlist[z].tag+": "; + let label = ""; + if (showtag) label += feedlist[z].tag + ": "; label += feedlist[z].name; - // label += ' '+getFeedUnit(feedlist[z].id); - var stacked = (typeof(feedlist[z].stack) !== "undefined" && feedlist[z].stack); - var plot = {label:label, data:data, yaxis:feedlist[z].yaxis, color: feedlist[z].color, stack: stacked}; + const stacked = (typeof feedlist[z].stack !== "undefined" && feedlist[z].stack); + const plot = {label:label, data:data, yaxis:feedlist[z].yaxis, color:feedlist[z].color, stack:stacked}; if (feedlist[z].plottype=="lines") { plot.lines = { show: true, fill: (feedlist[z].fill ? (stacked ? 1.0 : 0.5) : 0.0), fill: feedlist[z].fill } }; if (feedlist[z].plottype=="bars") { plot.bars = { align: "center", fill: (feedlist[z].fill ? (stacked ? 1.0 : 0.5) : 0.0), show: true, barWidth: view.interval * 1000 * 0.75 } }; @@ -499,87 +548,27 @@ function graph_draw() if (!embed) { - for (var z in feedlist) { + for (const z in feedlist) { feedlist[z].stats = stats(feedlist[z].data); } - var default_linecolor = "000"; - var out = ""; - for (var z in feedlist) { - var dp = feedlist[z].dp; - - out += ""; - out += ""; - if (z > 0) { - out += ""; - } - if (z < feedlist.length-1) { - out += ""; - } - out += ""; - - out += ""+getFeedName(feedlist[z])+""; - out += ""; - out += ""; - out += ""; - out += ""; - - for (var i=0; i<11; i++) out += ""; - out += ""; - out += ""; - out += ""; - out += ""; - out += ""; - out += ""; - out += ""; - // out += ""; - out += ""; - } - $("#feed-controls").html(out); - - var out = ""; - for (var z in feedlist) { - out += ""; - out += ""; - out += ""+getFeedName(feedlist[z])+""; - var quality = Math.round(100 * (1-(feedlist[z].stats.npointsnull/feedlist[z].stats.npoints))); - out += ""+quality+"% ("+(feedlist[z].stats.npoints-feedlist[z].stats.npointsnull)+"/"+feedlist[z].stats.npoints+")"; - var dp = feedlist[z].dp; - if(!isNaN(Number(feedlist[z].stats.minval))) out += ""+feedlist[z].stats.minval.toFixed(dp)+""; - if(!isNaN(Number(feedlist[z].stats.maxval))) out += ""+feedlist[z].stats.maxval.toFixed(dp)+""; - out += ""+feedlist[z].stats.diff.toFixed(dp)+""; - out += ""+feedlist[z].stats.mean.toFixed(dp)+""; - out += ""+feedlist[z].stats.stdev.toFixed(dp)+""; - out += ""+Math.round((feedlist[z].stats.mean*time_in_window)/3600)+""; - out += ""; - } - $("#feed-stats").html(out); + $("#feed-controls").html(buildFeedControlsHTML(feedlist)); + $("#feed-stats").html(buildFeedStatsHTML(feedlist, time_in_window)); if (feedlist.length) $(".feed-options").show(); else $(".feed-options").hide(); - for (var z in feedlist) { + for (const z in feedlist) { $(".decimalpoints[feedid="+feedlist[z].id+"]").val(feedlist[z].dp); - if ($(".average[feedid="+feedlist[z].id+"]")[0]!=undefined) + if ($(".average[feedid="+feedlist[z].id+"]")[0] !== undefined) $(".average[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].average; - if ($(".delta[feedid="+feedlist[z].id+"]")[0]!=undefined) + if ($(".delta[feedid="+feedlist[z].id+"]")[0] !== undefined) $(".delta[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].delta; $(".scale[feedid="+feedlist[z].id+"]").val(feedlist[z].scale); - $(".offset[feedid="+feedlist[z].id+"]").val(feedlist[z].offset); + $(".offset[feedid="+feedlist[z].id+"]").val(feedlist[z].offset); $(".linecolor[feedid="+feedlist[z].id+"]").val(feedlist[z].color); - if ($(".fill[feedid="+feedlist[z].id+"]")[0]!=undefined) + if ($(".fill[feedid="+feedlist[z].id+"]")[0] !== undefined) $(".fill[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].fill; - if ($(".stack[feedid="+feedlist[z].id+"]")[0]!=undefined) + if ($(".stack[feedid="+feedlist[z].id+"]")[0] !== undefined) $(".stack[feedid="+feedlist[z].id+"]")[0].checked = feedlist[z].stack; } @@ -636,12 +625,9 @@ function getfeedindex(id) return false; } -function getFeedUnit(id){ - let unit = '' - for(let key in feeds) { - if (feeds[key].id == id){ - unit = feeds[key].unit || '' - } +function getFeedUnit(id) { + for (const key in feeds) { + if (feeds[key].id == id) return feeds[key].unit || ''; } - return unit + return ''; } diff --git a/graph.saved.js b/graph.saved.js index 44d37fd..0e72b4f 100644 --- a/graph.saved.js +++ b/graph.saved.js @@ -162,8 +162,8 @@ function load_saved_graphs_menu() if (typeof list === 'undefined' || typeof property === 'undefined' || typeof value === 'undefined') { return -1 } - for (n in list) { - var item = list[n] + for (const n in list) { + const item = list[n] if (item.hasOwnProperty(property)) { if (item[property] === value) { return n @@ -288,8 +288,8 @@ $(function(){ function load_saved_graph(graph) { // @todo: unload_saved_graph() - if(typeof graph === 'undefined') return; - if (graph.mode==undefined) graph.mode = 'interval'; + if (typeof graph === 'undefined') return; + if (graph.mode == undefined) graph.mode = 'interval'; // view settings view.start = graph.start; @@ -298,17 +298,17 @@ function load_saved_graph(graph) { view.mode = graph.mode; view.limitinterval = graph.limitinterval; view.fixinterval = graph.fixinterval; - floatingtime = graph.floatingtime, + floatingtime = graph.floatingtime; yaxismin = graph.yaxismin; yaxismin2 = graph.yaxismin2 || 'auto'; yaxismax = graph.yaxismax; yaxismax2 = graph.yaxismax2 || 'auto'; // CSV display settings - csvtimeformat = (typeof(graph.csvtimeformat)==="undefined" ? "datestr" : graph.csvtimeformat); - csvnullvalues = (typeof(graph.csvnullvalues)==="undefined" ? "show" : graph.csvnullvalues); - csvheaders = (typeof(graph.csvheaders)==="undefined" ? "showNameTag" : graph.csvheaders); - var tmpCsv = (typeof(graph.showcsv)==="undefined" ? "0" : graph.showcsv.toString()); + csvtimeformat = (typeof graph.csvtimeformat === 'undefined' ? 'datestr' : graph.csvtimeformat); + csvnullvalues = (typeof graph.csvnullvalues === 'undefined' ? 'show' : graph.csvnullvalues); + csvheaders = (typeof graph.csvheaders === 'undefined' ? 'showNameTag' : graph.csvheaders); + const tmpCsv = (typeof graph.showcsv === 'undefined' ? '0' : graph.showcsv.toString()); // show settings showmissing = graph.showmissing; @@ -316,15 +316,15 @@ function load_saved_graph(graph) { showlegend = graph.showlegend; // graph details - current_graph_id = graph.id - current_graph_name = graph.name + current_graph_id = graph.id; + current_graph_name = graph.name; // feedlist feedlist = graph.feedlist; if (floatingtime) { - var timewindow = view.end - view.start; - var now = Math.round(+new Date * 0.001)*1000; + const timewindow = view.end - view.start; + const now = Math.round(+new Date() * 0.001) * 1000; view.end = now; view.start = view.end - timewindow; } @@ -340,7 +340,7 @@ function load_saved_graph(graph) { $("#showlegend")[0].checked = showlegend; $("#request-type").val(view.mode); - if (view.mode!="interval") { + if (view.mode !== "interval") { $(".fixed-interval-options").hide(); } else { $(".fixed-interval-options").show(); @@ -356,14 +356,14 @@ function load_saved_graph(graph) { csvShowHide(tmpCsv); } -function get_graph_data () { +function get_graph_data() { - var now = Math.round(+new Date * 0.001)*1000; - if (Math.abs(now - view.end)<120000) { + const now = Math.round(+new Date() * 0.001) * 1000; + if (Math.abs(now - view.end) < 120000) { floatingtime = 1; } - var graph_to_save = { + const graph_to_save = { name: current_graph_name, start: view.start, end: view.end, @@ -391,8 +391,8 @@ function get_graph_data () { function graph_update(data) { // Clean feedlist of data and stats that dont need to be saved - for (var i in data.feedlist) { - delete data.feedlist[i].data + for (const i in data.feedlist) { + delete data.feedlist[i].data; delete data.feedlist[i].stats; } diff --git a/view.php b/view.php index 692eb19..a4600d0 100644 --- a/view.php +++ b/view.php @@ -12,7 +12,7 @@ global $path, $embed, $session, $settings; $userid = 0; - $v = 28; + $v = 30; $feedidsLH = ""; if (isset($_GET['feedidsLH'])) $feedidsLH = $_GET['feedidsLH']; @@ -54,7 +54,6 @@ --> - @@ -275,12 +274,6 @@ - - @@ -289,19 +282,14 @@ - - diff --git a/vis.helper.js b/vis.helper.js index 6e5f4a2..ccf7079 100644 --- a/vis.helper.js +++ b/vis.helper.js @@ -98,50 +98,47 @@ var view = function stats(data) { - var sum = 0; - var i=0; - var minval = 0; - var maxval = 0; - var npoints = 0; - var npointsnull = 0; - - var val = null; - for (var z in data) + let sum = 0; + let i = 0; + let minval = 0; + let maxval = 0; + let npoints = 0; + let npointsnull = 0; + + for (const z in data) { - var val = data[z][1]; // 1) only calculated based on present values - //if (data[z][1]!=null) val = data[z][1]; // 2) if value is missing use last value - if (val!=null) + const val = data[z][1]; + if (val !== null) { - if (i==0) { + if (i === 0) { maxval = val; minval = val; } - if (val>maxval) maxval = val; - if (val maxval) maxval = val; + if (val < minval) minval = val; sum += val; i++; } - if (data[z][1]==null) npointsnull++; - - npoints ++; + if (data[z][1] === null) npointsnull++; + npoints++; } - var mean = sum / i; - sum = 0, i=0; - for (z in data) + const mean = sum / i; + sum = 0; i = 0; + for (const z in data) { sum += (data[z][1] - mean) * (data[z][1] - mean); i++; } - var stdev = Math.sqrt(sum / i); - + const stdev = Math.sqrt(sum / i); + return { - "minval":minval, - "maxval":maxval, - "diff":maxval-minval, - "mean":mean, - "stdev":stdev, - "npointsnull":npointsnull, - "npoints":npoints + "minval": minval, + "maxval": maxval, + "diff": maxval - minval, + "mean": mean, + "stdev": stdev, + "npointsnull": npointsnull, + "npoints": npoints }; }; @@ -161,36 +158,33 @@ var urlParams; function tooltip(x, y, contents, bgColour) { - var offset = 15; // use higher values for a little spacing between `x,y` and tooltip - var elem = $('
' + contents + '
').css({ + const offset = 15; + const elem = $('
' + contents + '
').css({ position: 'absolute', display: 'none', - 'font-weight':'bold', + 'font-weight': 'bold', border: '1px solid rgb(255, 221, 221)', padding: '2px', 'background-color': bgColour, opacity: '0.8' }).appendTo("body").fadeIn(200); - var elemY = y - elem.height() - offset; - var elemX = x - elem.width() - offset; - if (elemY < 0) { elemY = 0; } - if (elemX < 0) { elemX = 0; } - elem.css({ - top: elemY, - left: elemX - }); + let elemY = y - elem.height() - offset; + let elemX = x - elem.width() - offset; + if (elemY < 0) elemY = 0; + if (elemX < 0) elemX = 0; + elem.css({ top: elemY, left: elemX }); }; -function parseTimepickerTime(timestr){ - var tmp = timestr.split(" "); - if (tmp.length!=2) return false; +function parseTimepickerTime(timestr) { + const tmp = timestr.split(" "); + if (tmp.length !== 2) return false; - var date = tmp[0].split("/"); - if (date.length!=3) return false; + const date = tmp[0].split("/"); + if (date.length !== 3) return false; - var time = tmp[1].split(":"); - if (time.length!=3) return false; + const time = tmp[1].split(":"); + if (time.length !== 3) return false; - return new Date(date[2],date[1]-1,date[0],time[0],time[1],time[2],0).getTime() / 1000; + return new Date(date[2], date[1] - 1, date[0], time[0], time[1], time[2], 0).getTime() / 1000; }