diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js index ba83f7e..420cc4c 100644 --- a/client/jsFiles/SEAWebClientGraphics.js +++ b/client/jsFiles/SEAWebClientGraphics.js @@ -197,6 +197,9 @@ function strFormat(val, significant_digits=13) { let xyKey = "xy-control"; +/** + * Function used to handle some global controls for the graphs + */ let globalControls = (function (){ let controlsMap = {}; @@ -222,8 +225,13 @@ let globalControls = (function (){ } })(); +// Defining keys for global indicators + let datesKey = "dates-indicator"; +/** + * Function used to handle some global indicators for the graphs + */ let globalIndicators = (function (){ let indicatorsMap = {} @@ -279,7 +287,7 @@ let graphs = (function (){ let graph_array = []; // an array of Graph objects let graph_elm_array = []; // an array of HTML divs (with appropriate classes) containing the corresponding Graph objects of graph_array let vars_array = []; // an array of arrays of curve names, each curve names array is positionned at its graph id - let prev_blk = {}; + let tag_dict = {}; // a dictionnary of graph indexes (corresponding to the three indexes of the above arrays), indexed by the tag of the graphs let currentMinTime = 0, currentMaxTime = 0; // the currently displayed time range @@ -288,10 +296,10 @@ let graphs = (function (){ let minTime, maxTime; // the queried time range let lastTime = 0; // time of most recent data point - let resolution = undefined; + let resolution = undefined; // current window resolution (ms/pixel) - let activateUpdateTimeout = undefined; - let updateAutoTimeout = undefined; + let activateUpdateTimeout = undefined; // timeout for the activateUpdates function + let updateAutoTimeout = undefined; // timeout for the updateAuto function (used in onZoomCompleteCallback) let container = document.createElement('div'); container.classList.add("graphs-container"); @@ -748,6 +756,12 @@ let graphs = (function (){ resolution = Math.ceil((timeDelta / container.getBoundingClientRect().width)) } + /** + * The callback to be called when the user click on the "Jump" button of the date selector + * Gets the vars + device name for the selected date+time, then rebuilds the graphs + * @param {*} dateTimestampMs The user input for the date in ms (Unix timestamp) + * @param {*} timeValueMs The user input for the time in ms + */ function jumpToDate(dateTimestampMs, timeValueMs){ cursorLine(null); @@ -823,7 +837,7 @@ let graphs = (function (){ } /** - * Removes the cursor, gets the var + graphs for now (window visualisation to [now-30min, now]) and ask for updates + * Removes the cursor, gets the var and device name for the visualization window of [now-30min, now]) then rebuilds the graphs */ function gotoNow() { let msRightTimestamp = graphs.now(); @@ -846,20 +860,9 @@ let graphs = (function (){ }); } - /* - let g_varlist = []; - - function getVarlist(blocks){ - var varlist = []; - for (var i = 0; i < blocks.length; i++) { - for (var j = 0; j < blocks[i].curves.length; j++) { - varlist.push(blocks[i].curves[j].name); - } - } - return varlist; - } - */ - + /** + * Builds the main container for the graphs by inserting a slide, and builds the top panel + */ function buildGraphicsUI(){ let f = 0; @@ -906,16 +909,18 @@ let graphs = (function (){ adjustLegends(); } } - + /** + * Inits the graph content + * @param {[{tag:string, unit:string, curves:[{name:string, label:string, color:string, original_color:string}]}]} blocks - the received blocks + */ function initGraphs(blocks){ buildGraphicsUI(); receivedVars(blocks); } /** - * Holds the received variables from the /getvars call, gets the server time, insert slide (?), - * create the graphs, activate SSE graph-update messages, sets the different event listeners - * @param {[{tag:string, unit:string, curves:[{name:string, label:string, color:string, original_color:string}]}]} blocks_arg - + * Holds the received variables from the /getvars call, gets the server time, then creates the graphs + * @param {[{tag:string, unit:string, curves:[{name:string, label:string, color:string, original_color:string}]}]} blocks_arg - the received blocks */ function receivedVars(blocks_arg){ maxTime = timeRange[1]*1000; @@ -1140,6 +1145,10 @@ let graphs = (function (){ } } + /** + * Make sure that the updatAuto() function called in chartJS' onZoomComplete callback is delayed + * This is needed for mobile phones, as this callback is triggered too often + */ function onZoomCompleteCallback(){ if (updateAutoTimeout === undefined){ updateAutoTimeout = setTimeout(function() { @@ -1179,9 +1188,6 @@ let graphs = (function (){ jumpToDate: jumpToDate, initGraphs: initGraphs, onZoomCompleteCallback:onZoomCompleteCallback, - - prev_blk:prev_blk, - tag_dict:tag_dict } })(); @@ -1363,10 +1369,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){ return c; } - /*changecontrol = addControl("Change Dataset", function(){ - graphs.createSelection(gindex); - });*/ - hideBox = document.createElement('div'); hideBox.innerHTML = '×'; hideBox.classList.add('control'); @@ -1375,23 +1377,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){ controls.appendChild(hideBox); - /* - addControl("Hide legend", function(){ - legend.style.display = 'none'; - redrawX = null; - }); - */ - - /*let update_max = null; - addControl("Reset Zoom/Pan", function(){ - if(update_max !== null){ - chart.options.scales.xAxes[0].ticks.max = update_max; - update_max = null; - } - chart.resetZoom(); - graphs.zoompan(chart.graph); - });*/ - let autoScaleRow = addControl(" autoscale", function(){ setAutoScale(!autoScaleFlag); }); @@ -1501,17 +1486,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){ legend.style.display = 'none'; let margin = 10; - /* - function clickHandler(e){ - let trect = e.target.getBoundingClientRect(); - let X = e.clientX - trect.x, Y = e.clientY - trect.y; - graphs.showLegends(true, false); - graphs.setLiveMode(); - graphs.cursorLine(X); - graphs.update(); - } - */ - //canvas.addEventListener('click', clickHandler) canvas.addEventListener('mouseover', function(e){ graphs.bringToFront(legend); @@ -1850,7 +1824,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){ pushData: pushData, setMinMax: setMinMax, setAxesType: setAxesType, - /* clickHandler: clickHandler, */ setZoomMode: setZoomMode, showLegend: showLegend, setPanOnOff:setPanOnOff,