##// END OF EJS Templates
radarsys_met
RSS
Version probada con envio de json, nueva plantilla corregida pero error en conversion de ramp
Version probada con envio de json, nueva plantilla corregida pero error en conversion de ramp
lgonzales - - Load All Authors

File last commit:

r335:7377db7c77e8
r336:dcfb18d9813e
Show More
jroplots.js
655 lines | 20.8 KiB | application/javascript | JavascriptLexer
/ static / js / jroplots.js
History | Source | Raw |Copy content |Copy permalink
lgonzales
Nueva plantilla, prueba comunicacion y nuevos campos ddsrest
 r335
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;
};
/* In this class is defined all the function to RTI plot */
class PcolorBuffer {
constructor({ div, data }) {
this.div = document.getElementById(div);
this.n = 0;
this.divs = [];
this.wait = false;
this.lastRan = Date.now();
this.lastFunc = null;
this.zbuffer = [];
this.xbuffer = [];
this.empty = Array(data.metadata.yrange.length).fill(null);
this.timespan = 12;
this.metadata = data.metadata;
this.setup(data);
}
/* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
setup(data) {
this.last = data.time.slice(-1);
var diffArr = [];
for(var i=0; i<data.time.length-1; i++){
diffArr.push(data.time[i+1]-data.time[i]);
}
this.interval = Math.round(Math.min.apply(null, diffArr)*100 / 100);
if (data.time.length == 1) {
var values = { 'time': data.time, 'data': data['data'].map(function (x) { return [x] }) };
} else {
var values = this.fill_gaps(data.time, data['data'], this.interval, data['data'].length);
}
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.metadata.localtime == true){
a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
}
return a;
});
var label;
if (data.metadata.localtime == true){
label = "[LT]";
}
else{
label = "[UTC]";
}
for (var i = 0; i < data['data'].length; i++) {
var layout = {
height: 350,
xaxis: {
title: 'Time ' + label,
showgrid: false,
linewidth: 2,
size: 12,
mirror: true,
},
yaxis: {
title: data.metadata.ylabel || 'km',
showgrid: false,
linewidth: 2,
size: 12,
mirror: true,
},
titlefont: {
size: 16,
},
margin: {
t: 30,
}
};
var iDiv = document.createElement('div');
iDiv.id = 'plot-' + i;
//iDiv.className += iDiv.className ? ' col-lg-6 col-md-6 col-sm-12' : 'col-lg-6 col-md-12 col-sm-12';
this.zbuffer.push([]);
this.n = this.n + 1;
this.div.appendChild(iDiv);
this.divs.push(iDiv.id);
var trace = {
z: values.data[i],
x: t,
y: data.metadata.yrange,
colorscale: this.metadata.colormap || 'Jet',
transpose: true,
type: 'heatmap'
};
if (this.metadata.zmin) { trace.zmin = this.metadata.zmin }
if (this.metadata.zmax) { trace.zmax = this.metadata.zmax }
layout.title = 'Ch ' + i + ' - ' + t.slice(-1).toLocaleString();
var conf = {
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
};
Plotly.newPlot('plot-' + i, [trace], layout, conf);
}
}
getSize() {
var div = document.getElementById(this.divs[0]);
var t = this.xbuffer.slice(-1)[0];
var n = 0;
var timespan = this.timespan * 1000 * 60 * 60;
while ((t - div.data[0].x[n]) > timespan) {
n += 1;
}
if(n>720){
return 720;
}else{
return n;
}
}
fill_gaps(xBuffer, zBuffer, interval, N) {
var x = [xBuffer[0]];
var z = [];
var last;
for (var j = 0; j < N; j++) {
z.push([zBuffer[j][0]]);
}
for (var i = 1; i < xBuffer.length; i++) {
var cnt = 0;
last = x[x.length-1];
while (Math.abs(parseFloat(xBuffer[i]) - last ) > 1.5 * parseFloat(interval)) {
cnt += 1;
last = last + interval;
x.push(last);
for (var j = 0; j < N; j++) {
z[j].push(this.empty);
}
// Avoid infinite loop
if (cnt == 100) { break; }
}
x.push(xBuffer[i]);
for (var j = 0; j < N; j++) {
z[j].push(zBuffer[j][i]);
}
}
return { 'time': x, 'data': z };
}
plot() {
// add new data to plots and empty buffers
var N = this.getSize();
console.log('Plotting...');
for (var i = 0; i < this.n; i++) {
var div = document.getElementById(this.divs[i]);
if (N > 0) {
div.data[0].z = div.data[0].z.slice(N, )
div.data[0].x = div.data[0].x.slice(N, )
}
Plotly.extendTraces(div, {
z: [this.zbuffer[i]],
x: [this.xbuffer]
}, [0]);
this.zbuffer[i] = [];
}
this.xbuffer = [];
}
//This function just add the last data and is used if previously was used setup()
update(obj) {
// fill data gaps
var cnt = 0;
while (Math.abs(parseFloat(obj.time[0]) - this.last) > 1.5 * parseFloat(this.interval)) {
cnt += 1;
this.last += this.interval;
var newt = new Date((this.last) * 1000);
// This condition is used to change from UTC to LT
if (obj.metadata.localtime == true){
newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
}
this.xbuffer.push(newt);
for (var i = 0; i < obj['data'].length; i++) {
this.zbuffer[i].push(this.empty);
}
// Avoid infinite loop
if (cnt == 100) { break; }
}
// update buffers
this.last = parseFloat(obj.time[0]);
var t = new Date(obj.time[0] * 1000);
// This condition is used to change from UTC to LT
if (obj.metadata.localtime == true){
t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
}
this.xbuffer.push(t);
for (var i = 0; i < obj['data'].length; i++) {
this.zbuffer[i].push(obj['data'][i]);
var div = document.getElementById(this.divs[i]);
Plotly.relayout(div, {
title: 'Ch ' + i + ' - ' + t.toLocaleString(),
});
}
if (!this.wait) {
this.plot();
this.wait = true;
} else {
clearTimeout(this.lastFunc)
this.lastFunc = setTimeout(function (scope) {
if ((Date.now() - scope.lastRan) >= 30000) {
scope.plot()
scope.lastRan = Date.now()
}
}, 30000 - (Date.now() - this.lastRan), this)
}
}
// With this function You can change parameters in your plot
restyle(values) {
var values = list2dict(values);
var div = document.getElementById(values.plotdiv);
Plotly.relayout(div, {
yaxis: {
range: [values.ymin, values.ymax],
title: this.metadata.ylabel || 'km',
linewidth: 2,
size: 12,
mirror: true,
}
});
Plotly.restyle(div, {
zmin: values.zmin,
zmax: values.zmax,
colorscale: values.colormap
});
}
}
/* In this class is defined all the function to SPC plot */
class Pcolor {
constructor({ div, data }) {
this.div = document.getElementById(div);
this.n = 0;
this.divs = [];
this.metadata = data.metadata;
this.setup(data);
}
/* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
setup(data) {
for (var i = 0; i < data['data'].length; i++) {
var layout = {
margin: {
t:30,
},
height: 320,
xaxis: {
title: data.metadata.xlabel || 'Velocity',
showgrid: false,
zeroline: false,
linewidth: 2,
mirror: true,
size: 12,
},
yaxis: {
title: data.metadata.ylabel || 'km',
showgrid: false,
linewidth: 2,
mirror: 'all',
size: 12,
},
titlefont: {
size: 14
},
};
var iDiv = document.createElement('div');
iDiv.id = 'plot-' + i;
iDiv.className += iDiv.className ? ' col-md-5' : 'col-md-5';
this.n = this.n + 1;
this.div.appendChild(iDiv);
this.divs.push(iDiv.id);
var iDiv = document.createElement('div');
iDiv.className = 'col-md-1';
this.div.appendChild(iDiv);
var trace1 = {
z: data['data'][i],
y: data.metadata.yrange,
x: data.metadata.xrange,
colorscale: this.metadata.colormap || 'Jet',
transpose: true,
type: 'heatmap'
};
if (this.metadata.zmin) {
trace1.zmin = this.metadata.zmin
}
if (this.metadata.zmax) {
trace1.zmax = this.metadata.zmax;
}
var t = new Date(data.time * 1000);
if (data.metadata.localtime == true){
t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
}
if ('titles' in data.metadata){
layout.title = data.metadata.titles[i] + ' ' + t.toLocaleString();
}else{
layout.title = 'Ch ' + i + ': ' + t.toLocaleString();
}
var conf = {
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
};
var traces = [trace1]
Plotly.newPlot('plot-' + i, traces, layout, conf);
}
}
plot(obj) {
this.data = obj;
// add new data to plots and empty buffers
console.log('Plotting...');
var t = new Date(obj.time[0] * 1000);
// This condition is used to change from UTC to LT
if (obj.metadata.localtime == true){
t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
}
for (var i = 0; i < this.n; i++) {
var div = document.getElementById(this.divs[i]);
if ('titles' in obj.metadata){
var title = obj.metadata.titles[i] + ' ' + t.toLocaleString();
}else{
var title = 'Ch ' + i + ': ' + t.toLocaleString();
}
Plotly.relayout(div, {
title: title,
});
Plotly.restyle(div, {
z: [obj['data'][i]],
x: [obj.xrange]
}, [0]);
}
}
update(data) {
this.plot(data);
}
restyle(values) {
var values = list2dict(values);
var div = document.getElementById(values.plotdiv);
Plotly.relayout(div, {
yaxis: {
title: this.metadata.ylabel || 'km',
linewidth: 2,
range: [values.ymin, values.ymax]
},
xaxis: {
title: this.metadata.xlabel || 'Velocity',
linewidth: 2,
mirror: true,
range: [values.xmin, values.xmax]
}
});
Plotly.restyle(div, {
zmin: values.zmin,
zmax: values.zmax,
colorscale: values.colormap
});
}
}
class ScatterBuffer {
constructor({ div, data }) {
this.div = document.getElementById(div);
this.n = 0;
this.wait = false;
this.lastRan = Date.now();
this.lastFunc = null;
this.ybuffer = [];
this.xbuffer = [];
this.timespan = 12;
this.metadata = data.metadata;
this.setup(data);
}
/* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
setup(data) {
var traces = [];
this.last = data.time.slice(-1);
var diffArr = [];
for(var i=0; i<data.time.length-1; i++){
diffArr.push(data.time[i+1]-data.time[i]);
}
this.interval = Math.round(Math.min.apply(null, diffArr)*100 / 100);
if (data.time.length == 1) {
var values = { 'time': data.time, 'data': data['data'] };
} else {
var values = this.fill_gaps(data.time, data['data'], this.interval, data['data'].length);
}
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.metadata.localtime == true){
a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
}
return a;
});
for (var i = 0; i < data['data'].length; i++) {
this.n = this.n + 1;
this.ybuffer.push([]);
var trace = {
x: t,
y: values.data[i],
mode: 'lines',
type: 'scatter',
name: 'Channel ' + i,
connectgaps: false,
};
traces.push(trace);
}
var label;
if (data.metadata.localtime == true){
label = "[LT]";
}
else{
label = "[UTC]";
}
var layout = {
height: 300,
title: t.slice(-1).toLocaleString(),
font: {
size: 12,
},
xaxis: {
title: 'Time ' + label,
size: 12,
linewidth: 2,
mirror: true,
},
yaxis: {
title: data.metadata.ylabel || 'dB',
linewidth: 2,
mirror: true,
},
titlefont: {
size: 16,
},
margin: {
t: 30,
}
};
if (data.metadata.ymin) { layout.yaxis.range = [data.metadata.ymin, data.metadata.ymax] }
var conf = {
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
};
Plotly.newPlot('plot', traces, layout, conf);
}
getSize() {
var t = this.xbuffer.slice(-1)[0];
var n = 0;
var timespan = this.timespan * 1000 * 60 * 60;
while ((t - this.div.data[0].x[n]) > timespan) {
n += 1;
}
if(n>720){
return 720;
}else{
return n;
}
}
fill_gaps(xBuffer, yBuffer, interval, N) {
var x = [xBuffer[0]];
var y = [];
for (var j = 0; j < N; j++) {
y.push([yBuffer[j][0]]);
}
var last;
for (var i = 1; i < xBuffer.length; i++) {
var cnt = 0;
last = x.slice(-1)[0];
while (Math.abs(parseFloat(xBuffer[i]) - last) > 1.5 * parseFloat(interval)) {
cnt += 1;
last = last + interval;
x.push(last);
for (var j = 0; j < N; j++) {
y[j].push(null);
}
// Avoid infinite loop
if (cnt == 50) { break; }
}
x.push(xBuffer[i]);
for (var j = 0; j < N; j++) {
y[j].push(yBuffer[j][i]);
}
}
return { 'time': x, 'data': y };
}
plot() {
// add new data to plots and empty buffers
var xvalues = [];
var yvalues = [];
var traces = [];
var N = this.getSize();
console.log('Plotting...');
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, )
}
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 = [];
}
//This function just add the last data and is used if previously was used setup()
update(obj) {
// fill data gaps
var cnt = 0;
while (Math.abs(parseFloat(obj.time[0]) - this.last ) > 1.5 * parseFloat(this.interval)) {
cnt += 1;
this.last += this.interval;
var newt = new Date((this.last) * 1000);
// This condition is used to change from UTC to LT
if (obj.metadata.localtime == true){
newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
}
this.xbuffer.push(newt);
for (var i = 0; i < this.n; i++) {
this.ybuffer[i].push(null);
}
// Avoid infinite loop
if (cnt == 100) { break; }
}
// update buffers
this.last = parseFloat(obj.time[0]);
var t = new Date(obj.time[0] * 1000);
// This condition is used to change from UTC to LT
if (obj.metadata.localtime == true){
t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
}
this.xbuffer.push(t);
for (var i = 0; i < this.n; i++) {
this.ybuffer[i].push(obj['data'][i][0]);
}
Plotly.relayout(this.div, {
title: t.toLocaleString(),
});
if (!this.wait) {
this.plot();
this.wait = true;
} else {
clearTimeout(this.lastFunc)
this.lastFunc = setTimeout(function (scope) {
if ((Date.now() - scope.lastRan) >= 30000) {
scope.plot()
scope.lastRan = Date.now()
}
}, 30000 - (Date.now() - this.lastRan), this)
}
}
restyle(values) {
var values = list2dict(values);
Plotly.relayout(this.div, {
yaxis: {
range: [values.ymin, values.ymax],
title: this.metadata.ylabel || 'dB'
}
});
}
}