jroplots.js
678 lines
| 22.1 KiB
| application/javascript
|
JavascriptLexer
| r0 | ||||
| r5 | var icon = { | |||
| 'width': 20, | ||||
| 'path': 'M18.303,4.742l-1.454-1.455c-0.171-0.171-0.475-0.171-0.646,0l-3.061,3.064H2.019c-0.251,0-0.457,0.205-0.457,0.456v9.578c0,0.251,0.206,0.456,0.457,0.456h13.683c0.252,0,0.457-0.205,0.457-0.456V7.533l2.144-2.146C18.481,5.208,18.483,4.917,18.303,4.742 M15.258,15.929H2.476V7.263h9.754L9.695,9.792c-0.057,0.057-0.101,0.13-0.119,0.212L9.18,11.36h-3.98c-0.251,0-0.457,0.205-0.457,0.456c0,0.253,0.205,0.456,0.457,0.456h4.336c0.023,0,0.899,0.02,1.498-0.127c0.312-0.077,0.55-0.137,0.55-0.137c0.08-0.018,0.155-0.059,0.212-0.118l3.463-3.443V15.929z M11.241,11.156l-1.078,0.267l0.267-1.076l6.097-6.091l0.808,0.808L11.241,11.156z', | ||||
| 'ascent': 20, | ||||
| 'descent': 2, | ||||
| }; | ||||
| function list2dict(values) { | ||||
| var o = {}; | ||||
| $.each(values, function () { | ||||
| o[this.name] = this.value; | ||||
| }); | ||||
| return o; | ||||
| }; | ||||
Developer
|
r11 | /* In this class is defined all the function to RTI plot */ | ||
| r5 | class PcolorBuffer { | |||
| constructor({ div, data, key, props }) { | ||||
| r0 | this.div = document.getElementById(div); | |||
|
Developer
|
r11 | this.n = 0; | ||
| r0 | this.divs = []; | |||
| this.wait = false; | ||||
| this.key = key; | ||||
| r5 | this.timer = (props.throttle || 30) * 1000; | |||
| r0 | this.lastRan = Date.now(); | |||
| this.lastFunc = null; | ||||
| this.zbuffer = []; | ||||
| this.xbuffer = []; | ||||
| this.empty = Array(data.yrange.length).fill(null); | ||||
| this.props = props; | ||||
| this.setup(data); | ||||
| } | ||||
|
Developer
|
r11 | /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/ | ||
| r5 | setup(data) { | |||
| r0 | this.last = data.time.slice(-1); | |||
| r5 | if (data.time.length == 1) { | |||
| var values = { 'time': data.time, 'data': data[this.key].map(function (x) { return [x] }) }; | ||||
| } else { | ||||
| r0 | var values = this.fill_gaps(data.time, data[this.key], data.interval, data[this.key].length); | |||
| } | ||||
|
Developer
|
r11 | var t = values.time.map(function (x) { | ||
| var a = new Date(x * 1000); | ||||
| // This condition is used to change from UTC to LT | ||||
| if (data.localtime == true){ | ||||
| a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 ); | ||||
| } | ||||
| return a; | ||||
| }); | ||||
| r0 | ||||
|
Developer
|
r11 | var label; | ||
| if (data.localtime == true){ | ||||
| label = "LT"; | ||||
| } | ||||
| else{ | ||||
| label = "UTC"; | ||||
| } | ||||
| r5 | ||||
| for (var i = 0; i < data[this.key].length; i++) { | ||||
| r0 | var layout = { | |||
| xaxis: { | ||||
|
Developer
|
r11 | title: 'Time ' + label, | ||
| r5 | showgrid: false, | |||
|
Developer
|
r11 | linecolor: 'rgb(40, 223, 247)', | ||
| color: 'rgb(40, 223, 247)', | ||||
| size: 24, | ||||
| titlefont: { | ||||
| color: 'white', | ||||
| size: 24 | ||||
| }, | ||||
| r0 | }, | |||
| yaxis: { | ||||
| r5 | title: 'km', | |||
| showgrid: false, | ||||
|
Developer
|
r11 | linecolor: 'rgb(40, 223, 247)', | ||
| color: 'rgb(40, 223, 247)', | ||||
| size: 24, | ||||
| titlefont: { | ||||
| color: 'white', | ||||
| size: 24 | ||||
| }, | ||||
| r0 | }, | |||
|
Developer
|
r11 | paper_bgcolor: 'black', | ||
| plot_bgcolor: 'white', | ||||
| r0 | titlefont: { | |||
|
Developer
|
r11 | color: 'white', | ||
| size: 24, | ||||
| }, | ||||
| font: { | ||||
| color: 'rgb(40, 223, 247)' | ||||
| r0 | } | |||
|
Developer
|
r11 | |||
| r0 | }; | |||
| var iDiv = document.createElement('div'); | ||||
| iDiv.id = 'plot-' + i; | ||||
| this.zbuffer.push([]); | ||||
| r5 | this.n = this.n + 1; | |||
| r0 | this.div.appendChild(iDiv); | |||
| this.divs.push(iDiv.id); | ||||
| var trace = { | ||||
| z: values.data[i], | ||||
| x: t, | ||||
| y: data.yrange, | ||||
|
Developer
|
r11 | colorscale: this.props.colormap || 'Jet', | ||
| r0 | transpose: true, | |||
| type: 'heatmap' | ||||
| }; | ||||
| r5 | if (this.props.zmin) { trace.zmin = this.props.zmin } | |||
| if (this.props.zmax) { trace.zmax = this.props.zmax } | ||||
| r0 | ||||
| layout.title = 'Channel ' + i + ' - ' + t.slice(-1).toLocaleString(); | ||||
| var conf = { | ||||
| r5 | modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'], | |||
| modeBarButtonsToAdd: [{ | ||||
| name: 'Edit plot', | ||||
| icon: icon, | ||||
| click: function (gd) { | ||||
| var div = gd.id; | ||||
| $('input[id=id_plotdiv]').val(div); | ||||
| $('#setup').modal('show'); | ||||
| } | ||||
| }], | ||||
| displaylogo: false, | ||||
| showTips: true | ||||
| r0 | }; | |||
| r5 | Plotly.newPlot('plot-' + i, [trace], layout, conf); | |||
| r0 | } | |||
| } | ||||
| r5 | getSize() { | |||
| r0 | var div = document.getElementById(this.divs[0]); | |||
| var t = this.xbuffer.slice(-1)[0]; | ||||
| var n = 0; | ||||
|
Developer
|
r11 | var timespan = (this.props.timespan || 8) * 1000 * 60 * 60; //If i dont put timespan in rti.html, by default is 8hs | ||
| r5 | ||||
| while ((t - div.data[0].x[n]) > timespan) { | ||||
| r0 | n += 1; | |||
| } | ||||
| return n; | ||||
| } | ||||
| r5 | fill_gaps(xBuffer, zBuffer, interval, N) { | |||
| r0 | ||||
| var x = [xBuffer[0]]; | ||||
| var z = []; | ||||
| var last; | ||||
| r5 | ||||
| for (var j = 0; j < N; j++) { | ||||
| r0 | z.push([zBuffer[j][0]]); | |||
| } | ||||
| r5 | for (var i = 1; i < xBuffer.length; i++) { | |||
| r0 | var cnt = 0; | |||
| last = x.slice(-1)[0]; | ||||
|
Developer
|
r11 | while (Math.abs(parseFloat(xBuffer[i]) - last ) > 1.5 * parseFloat(interval)) { | ||
| //console.log(parseFloat(xBuffer[i])); | ||||
| //console.log(last); | ||||
| //console.log(Math.abs(parseFloat(xBuffer[i]) - last)); | ||||
| //console.log(parseFloat(interval)); | ||||
| //console.log("=========="); | ||||
| r0 | cnt += 1; | |||
| r5 | last = last + interval; | |||
| r0 | x.push(last); | |||
| r5 | for (var j = 0; j < N; j++) { | |||
| r0 | z[j].push(this.empty); | |||
| } | ||||
| // Avoid infinite loop | ||||
| r5 | if (cnt == 100) { break; } | |||
| r0 | } | |||
| x.push(xBuffer[i]); | ||||
| r5 | for (var j = 0; j < N; j++) { | |||
| r0 | z[j].push(zBuffer[j][i]); | |||
| } | ||||
| } | ||||
| r5 | return { 'time': x, 'data': z }; | |||
| r0 | } | |||
| r5 | plot() { | |||
| r0 | // add new data to plots and empty buffers | |||
| var N = this.getSize(); | ||||
| console.log('Plotting...'); | ||||
| r5 | for (var i = 0; i < this.n; i++) { | |||
| r0 | var div = document.getElementById(this.divs[i]); | |||
| r5 | if (N > 0) { | |||
| div.data[0].z = div.data[0].z.slice(N, ) | ||||
| div.data[0].x = div.data[0].x.slice(N, ) | ||||
| r0 | } | |||
| Plotly.extendTraces(div, { | ||||
| z: [this.zbuffer[i]], | ||||
| x: [this.xbuffer] | ||||
| }, [0]); | ||||
| this.zbuffer[i] = []; | ||||
| } | ||||
| this.xbuffer = []; | ||||
| } | ||||
|
Developer
|
r11 | //This function just add the last data and is used if previously was used setup() | ||
| r5 | update(obj) { | |||
| r0 | // fill data gaps | |||
| var cnt = 0; | ||||
|
Developer
|
r11 | console.log('updating'); | ||
| while (Math.abs(parseFloat(obj.time[0]) - this.last) > 1.5 * parseFloat(obj.interval)) { | ||||
| r0 | cnt += 1; | |||
| this.last += obj.interval; | ||||
| r5 | var newt = new Date((this.last) * 1000); | |||
|
Developer
|
r11 | // This condition is used to change from UTC to LT | ||
| if (obj.localtime == true){ | ||||
| newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 ); | ||||
| } | ||||
| r0 | this.xbuffer.push(newt); | |||
| r5 | for (var i = 0; i < obj[this.key].length; i++) { | |||
| r0 | this.zbuffer[i].push(this.empty); | |||
| } | ||||
| // Avoid infinite loop | ||||
| r5 | if (cnt == 100) { break; } | |||
| r0 | } | |||
| // update buffers | ||||
| this.last = parseFloat(obj.time[0]); | ||||
| r5 | var t = new Date(obj.time[0] * 1000); | |||
|
Developer
|
r11 | // This condition is used to change from UTC to LT | ||
| if (obj.localtime == true){ | ||||
| t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 ); | ||||
| } | ||||
| r0 | this.xbuffer.push(t); | |||
| r5 | for (var i = 0; i < obj[this.key].length; i++) { | |||
| r0 | this.zbuffer[i].push(obj[this.key][i]); | |||
| // update title | ||||
| r3 | var title = this.props.title || '' | |||
| r0 | var div = document.getElementById(this.divs[i]); | |||
| Plotly.relayout(div, { | ||||
| r3 | title: title + ': Channel ' + i + ' - ' + t.toLocaleString(), | |||
| r0 | }); | |||
| } | ||||
| // plot when ready (every 10 secs) | ||||
| r5 | if (!this.wait) { | |||
| r0 | this.plot(); | |||
| this.wait = true; | ||||
| } else { | ||||
| clearTimeout(this.lastFunc) | ||||
| r5 | this.lastFunc = setTimeout(function (scope) { | |||
| r0 | if ((Date.now() - scope.lastRan) >= scope.timer) { | |||
| r5 | scope.plot() | |||
| scope.lastRan = Date.now() | ||||
| r0 | } | |||
| r5 | }, this.timer - (Date.now() - this.lastRan), this) | |||
| r0 | } | |||
| } | ||||
|
Developer
|
r11 | // With this function You can change parameters in your plot | ||
| r5 | restyle(values) { | |||
| var values = list2dict(values); | ||||
| var div = document.getElementById(values.plotdiv); | ||||
| Plotly.relayout(div, { | ||||
| yaxis: { | ||||
| range: [values.ymin, values.ymax] | ||||
| } | ||||
| }); | ||||
| Plotly.restyle(div, { | ||||
| zmin: values.zmin, | ||||
| zmax: values.zmax, | ||||
| colorscale: values.colormap | ||||
| }); | ||||
| } | ||||
| r0 | } | |||
|
Developer
|
r11 | /* In this class is defined all the function to SPC plot */ | ||
| r5 | class Pcolor { | |||
| constructor({ div, data, props }) { | ||||
| r0 | this.div = document.getElementById(div); | |||
|
Developer
|
r11 | this.n = 0; | ||
| r0 | this.divs = []; | |||
| this.props = props; | ||||
| this.setup(data); | ||||
| } | ||||
|
Developer
|
r11 | /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/ | ||
| r5 | setup(data) { | |||
|
Developer
|
r11 | console.log(data); | ||
| r5 | for (var i = 0; i < data.spc.length; i++) { | |||
| r0 | var layout = { | |||
| height: 400, | ||||
| xaxis: { | ||||
| r5 | title: 'Velocity', | |||
| showgrid: false, | ||||
| zeroline: false, | ||||
| domain: [0, 0.7], | ||||
|
Developer
|
r11 | linecolor: 'rgb(40, 223, 247)', | ||
| color: 'rgb(40, 223, 247)', | ||||
| size: 24, | ||||
| titlefont: { | ||||
| color: 'white', | ||||
| size: 24 | ||||
| }, | ||||
| r0 | }, | |||
| yaxis: { | ||||
| r5 | title: 'km', | |||
| showgrid: false, | ||||
|
Developer
|
r11 | linecolor: 'rgb(40, 223, 247)', | ||
| color: 'rgb(40, 223, 247)', | ||||
| size: 24, | ||||
| titlefont: { | ||||
| color: 'white', | ||||
| size: 24 | ||||
| }, | ||||
| r0 | }, | |||
| xaxis2: { | ||||
| title: 'dB', | ||||
| domain: [0.75, 1], | ||||
| ticks: 'outside', | ||||
|
Developer
|
r11 | linecolor: 'rgb(40, 223, 247)', | ||
| color: 'rgb(40, 223, 247)', | ||||
| size: 24, | ||||
| titlefont: { | ||||
| color: 'white', | ||||
| size: 24 | ||||
| }, | ||||
| r5 | }, | |||
| r0 | titlefont: { | |||
|
Developer
|
r11 | color: 'white', | ||
| size: 18 | ||||
| }, | ||||
| font:{ | ||||
| color:'rgb(40, 223, 247)' | ||||
| }, | ||||
| paper_bgcolor: 'black', | ||||
| plot_bgcolor: 'white', | ||||
| r0 | }; | |||
| var iDiv = document.createElement('div'); | ||||
| iDiv.id = 'plot-' + i; | ||||
| iDiv.className += iDiv.className ? ' col-md-6' : 'col-md-6'; | ||||
| r5 | this.n = this.n + 1; | |||
| r0 | this.div.appendChild(iDiv); | |||
| this.divs.push(iDiv.id); | ||||
| r5 | ||||
| r0 | var trace1 = { | |||
| z: data.spc[i], | ||||
| x: data.xrange, | ||||
| y: data.yrange, | ||||
|
Developer
|
r11 | colorscale: this.props.colormap || 'Jet', | ||
| r0 | transpose: true, | |||
| type: 'heatmap' | ||||
| }; | ||||
| var trace2 = { | ||||
| x: data.rti[i], | ||||
| y: data.yrange, | ||||
| xaxis: 'x2', | ||||
| yaxis: 'y', | ||||
| type: 'scatter', | ||||
| }; | ||||
| r5 | ||||
| r0 | if (this.props.zmin) { | |||
| trace1.zmin = this.props.zmin | ||||
| } | ||||
| if (this.props.zmax) { | ||||
| trace1.zmax = this.props.zmax; | ||||
| layout.xaxis2.range = [this.props.zmin, this.props.zmax] | ||||
| } | ||||
| r5 | ||||
| var t = new Date(data.time * 1000); | ||||
|
Developer
|
r11 | // This condition is used to change from UTC to LT | ||
| if (data.localtime == true){ | ||||
| t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 ); | ||||
| } | ||||
| r5 | layout.title = 'Channel ' + i + ': ' + data.noise[i] + 'dB - ' + t.toLocaleString(); | |||
| r0 | var conf = { | |||
| r5 | modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'], | |||
| modeBarButtonsToAdd: [{ | ||||
| name: 'Edit plot', | ||||
| icon: icon, | ||||
| click: function (gd) { | ||||
| var div = gd.id; | ||||
| $('input[id=id_plotdiv]').val(div); | ||||
| $('#setup').modal('show'); | ||||
| } | ||||
| }], | ||||
| displaylogo: false, | ||||
| showTips: true | ||||
| r0 | }; | |||
| r5 | Plotly.newPlot('plot-' + i, [trace1, trace2], layout, conf); | |||
| r0 | } | |||
| } | ||||
| r5 | plot(obj) { | |||
|
Developer
|
r11 | this.data = obj; | ||
| r0 | // add new data to plots and empty buffers | |||
| console.log('Plotting...'); | ||||
| r5 | var t = new Date(obj.time[0] * 1000); | |||
|
Developer
|
r11 | // This condition is used to change from UTC to LT | ||
| if (obj.localtime == true){ | ||||
| t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 ); | ||||
| } | ||||
| r5 | for (var i = 0; i < this.n; i++) { | |||
| r0 | var div = document.getElementById(this.divs[i]); | |||
| Plotly.relayout(div, { | ||||
| r5 | title: 'Channel ' + i + ': ' + obj.noise[i] + 'dB - ' + t.toLocaleString(), | |||
|
Developer
|
r11 | |||
| r0 | }); | |||
| Plotly.restyle(div, { | ||||
| z: [obj.spc[i], null], | ||||
| x: [obj.xrange, obj.rti[i]] | ||||
| }, [0, 1]); | ||||
| } | ||||
| } | ||||
|
Developer
|
r11 | // With this function You can change parameters in your plot | ||
| r5 | restyle(values) { | |||
| var values = list2dict(values); | ||||
| var div = document.getElementById(values.plotdiv); | ||||
| Plotly.relayout(div, { | ||||
| yaxis: { | ||||
| range: [values.ymin, values.ymax] | ||||
|
Developer
|
r11 | }, | ||
| r5 | ||||
| }); | ||||
|
Developer
|
r11 | /*Plotly.relayout(div, { | ||
| xaxis: { | ||||
| range: [values.xmin, values.xmax] | ||||
| }, | ||||
| });*/ | ||||
| r5 | Plotly.restyle(div, { | |||
| zmin: values.zmin, | ||||
| zmax: values.zmax, | ||||
| xmin: values.xmin, | ||||
| xmax: values.xmax, | ||||
|
Developer
|
r11 | |||
| r5 | colorscale: values.colormap | |||
| }); | ||||
| } | ||||
| r0 | } | |||
|
Developer
|
r11 | /* In this class is defined all the function to Scatter(noise) plot */ | ||
| r5 | class Scatter { | |||
| constructor({ div, data, key, props }) { | ||||
| r0 | this.div = document.getElementById(div); | |||
|
Developer
|
r11 | this.n = 0; | ||
| r0 | this.key = key; | |||
| this.wait = false; | ||||
| r5 | this.timer = (props.throttle || 30) * 1000; | |||
| r0 | this.lastRan = Date.now(); | |||
| this.lastFunc = null; | ||||
| this.ybuffer = []; | ||||
| this.xbuffer = []; | ||||
| this.props = props; | ||||
| this.setup(data); | ||||
| } | ||||
|
Developer
|
r11 | /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/ | ||
| r5 | setup(data) { | |||
| r0 | ||||
|
Developer
|
r11 | this.data = data; //le agrego juan carlos para ver la data en mi consola | ||
| r0 | var traces = []; | |||
| this.last = data.time.slice(-1); | ||||
| r5 | if (data.time.length == 1) { | |||
| r0 | var values = { 'time': data.time, 'data': data[this.key] }; | |||
| r5 | } else { | |||
| r0 | var values = this.fill_gaps(data.time, data[this.key], data.interval, data[this.key].length); | |||
| } | ||||
|
Developer
|
r11 | var t = values.time.map(function (x) { | ||
| var a = new Date(x * 1000); | ||||
| // This condition is used to change from UTC to LT | ||||
| if (data.localtime == true){ | ||||
| a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 ); | ||||
| } | ||||
| return a; | ||||
| }); | ||||
| r5 | ||||
| for (var i = 0; i < data[this.key].length; i++) { | ||||
| this.n = this.n + 1; | ||||
| r0 | this.ybuffer.push([]); | |||
| var trace = { | ||||
| x: t, | ||||
| y: data[this.key][i], | ||||
| mode: 'lines', | ||||
| type: 'scatter', | ||||
| r8 | name: 'Channel ' + i, | |||
|
Developer
|
r11 | connectgaps:false, | ||
| r0 | }; | |||
| traces.push(trace); | ||||
| } | ||||
| var title = this.props.title || '' | ||||
| var layout = { | ||||
| // autosize: false, | ||||
| // width: 800, | ||||
| // height: 400, | ||||
| title: title + ' - ' + t.slice(-1).toLocaleString(), | ||||
|
Developer
|
r11 | font: { | ||
| size: 18, | ||||
| color: 'white' | ||||
| }, | ||||
| plot_bgcolor: 'black', | ||||
| paper_bgcolor: 'black', | ||||
| r0 | xaxis: { | |||
| r5 | title: 'Time', | |||
|
Developer
|
r11 | linecolor: 'rgb(40, 223, 247)', | ||
| color: 'rgb(40, 223, 247)', | ||||
| size: 24, | ||||
| titlefont: { | ||||
| color: 'white', | ||||
| size: 24 | ||||
| }, | ||||
| r0 | }, | |||
| yaxis: { | ||||
| r5 | title: this.props.ylabel || 'dB', | |||
|
Developer
|
r11 | linecolor: 'rgb(40, 223, 247)', | ||
| color: 'rgb(40, 223, 247)', | ||||
| size: 24, | ||||
| titlefont: { | ||||
| color: 'white', | ||||
| size: 24 | ||||
| }, | ||||
| r0 | }, | |||
| titlefont: { | ||||
|
Developer
|
r11 | size: 24, | ||
| r0 | } | |||
| }; | ||||
| r5 | if (this.props.ymin) { layout.yaxis.range = [this.props.ymin, this.props.ymax] } | |||
| r0 | ||||
| var conf = { | ||||
| r5 | modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'], | |||
| modeBarButtonsToAdd: [{ | ||||
| name: 'Edit plot', | ||||
| icon: icon, | ||||
| click: function (gd) { | ||||
| $('#setup').modal('show'); | ||||
| } | ||||
| }], | ||||
| displaylogo: false, | ||||
| showTips: true | ||||
| r0 | }; | |||
| Plotly.newPlot('plot', traces, layout, conf); | ||||
| } | ||||
| r5 | getSize() { | |||
| r0 | var t = this.xbuffer.slice(-1)[0]; | |||
| var n = 0; | ||||
| r5 | var timespan = (this.props.timespan || 12) * 1000 * 60 * 60; | |||
| while ((t - this.div.data[0].x[n]) > timespan) { | ||||
| r0 | n += 1; | |||
| } | ||||
| return n; | ||||
| } | ||||
| r5 | fill_gaps(xBuffer, yBuffer, interval, N) { | |||
| r0 | ||||
| var x = [xBuffer[0]]; | ||||
| var y = []; | ||||
| r5 | for (var j = 0; j < N; j++) { | |||
| r0 | y.push([yBuffer[j][0]]); | |||
| } | ||||
| var last; | ||||
| r5 | ||||
| for (var i = 1; i < xBuffer.length; i++) { | ||||
| r0 | var cnt = 0; | |||
| last = x.slice(-1)[0]; | ||||
|
Developer
|
r11 | while (Math.abs(parseFloat(xBuffer[i]) - last) > 1.5 * parseFloat(interval)) { | ||
| r0 | cnt += 1; | |||
| r5 | last = last + interval; | |||
| r0 | x.push(last); | |||
| r5 | for (var j = 0; j < N; j++) { | |||
| r2 | y[j].push(null); | |||
| r0 | } | |||
| // Avoid infinite loop | ||||
|
Developer
|
r11 | if (cnt == 50) { break; } | ||
| r0 | } | |||
| x.push(xBuffer[i]); | ||||
| r5 | ||||
| for (var j = 0; j < N; j++) { | ||||
| r0 | y[j].push(yBuffer[j][i]); | |||
| } | ||||
| } | ||||
| r5 | return { 'time': x, 'data': y }; | |||
| r0 | } | |||
| r5 | plot() { | |||
| r0 | // add new data to plots and empty buffers | |||
| var xvalues = []; | ||||
| var yvalues = []; | ||||
| var traces = []; | ||||
| var N = this.getSize(); | ||||
| console.log('Plotting...'); | ||||
| r5 | for (var i = 0; i < this.n; i++) { | |||
| if (N > 0) { | ||||
| this.div.data[i].y = this.div.data[i].y.slice(N, ) | ||||
| this.div.data[i].x = this.div.data[i].x.slice(N, ) | ||||
| r0 | } | |||
| yvalues.push(this.ybuffer[i]); | ||||
| xvalues.push(this.xbuffer); | ||||
| traces.push(i); | ||||
| this.ybuffer[i] = []; | ||||
| } | ||||
| Plotly.extendTraces(this.div, { | ||||
| y: yvalues, | ||||
| x: xvalues | ||||
| }, traces); | ||||
| this.xbuffer = []; | ||||
| } | ||||
|
Developer
|
r11 | //This function just add the last data and is used if previously was used setup() | ||
| r5 | update(obj) { | |||
| r0 | // fill data gaps | |||
| var cnt = 0; | ||||
|
Developer
|
r11 | while (Math.abs(parseFloat(obj.time[0]) - this.last ) > 1.5 * parseFloat(obj.interval)) { | ||
| r0 | cnt += 1; | |||
| this.last += obj.interval; | ||||
| r5 | var newt = new Date((this.last) * 1000); | |||
|
Developer
|
r11 | // This condition is used to change from UTC to LT | ||
| if (obj.localtime == true){ | ||||
| newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 ); | ||||
| } | ||||
| r0 | this.xbuffer.push(newt); | |||
| r5 | for (var i = 0; i < this.n; i++) { | |||
| r0 | this.ybuffer[i].push(null); | |||
| } | ||||
| // Avoid infinite loop | ||||
| r5 | if (cnt == 100) { break; } | |||
| r0 | } | |||
| // update buffers | ||||
| this.last = parseFloat(obj.time[0]); | ||||
| r5 | var t = new Date(obj.time[0] * 1000); | |||
|
Developer
|
r11 | // This condition is used to change from UTC to LT | ||
| if (obj.localtime == true){ | ||||
| t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 ); | ||||
| } | ||||
| r0 | this.xbuffer.push(t); | |||
| r5 | for (var i = 0; i < this.n; i++) { | |||
| r0 | this.ybuffer[i].push(obj[this.key][i][0]); | |||
| r5 | } | |||
| r0 | var title = this.props.title || '' | |||
| Plotly.relayout(this.div, { | ||||
| title: title + ' - ' + t.toLocaleString(), | ||||
| }); | ||||
| // plot when ready (every 10 secs) | ||||
| r5 | if (!this.wait) { | |||
| r0 | this.plot(); | |||
| this.wait = true; | ||||
| } else { | ||||
| clearTimeout(this.lastFunc) | ||||
| r5 | this.lastFunc = setTimeout(function (scope) { | |||
| r0 | if ((Date.now() - scope.lastRan) >= scope.timer) { | |||
| r5 | scope.plot() | |||
| scope.lastRan = Date.now() | ||||
| r0 | } | |||
| r5 | }, this.timer - (Date.now() - this.lastRan), this) | |||
| r0 | } | |||
| } | ||||
|
Developer
|
r11 | // With this function You can change parameters in your plot | ||
| r5 | restyle(values) { | |||
| var values = list2dict(values); | ||||
| Plotly.relayout(this.div, { | ||||
| yaxis: { | ||||
| range: [values.ymin, values.ymax] | ||||
| } | ||||
| }); | ||||
| } | ||||
| r0 | } | |||
