1
|
ID = "Kickdown_PACK";
|
2
|
PACKAGE[ID] = {
|
3
|
"name":"Kickdown", "text":"Components made by Kickdown team", "children":["__button","__Graphing"],
|
4
|
"object":{
|
5
|
setInputText:function(e) {
|
6
|
if(e.value){
|
7
|
document.getElementById(e.id).innerHTML = e.value;
|
8
|
}
|
9
|
},
|
10
|
setInputType:function(e) {
|
11
|
if(e.value){
|
12
|
document.getElementById(e.id).type = e.value;
|
13
|
}
|
14
|
},
|
15
|
setInputClass:function(e) {
|
16
|
if(e.value){
|
17
|
document.getElementById(e.id).classList.add(e.value);
|
18
|
}
|
19
|
},
|
20
|
getParameterValue:function(e){
|
21
|
return e.value;
|
22
|
}
|
23
|
}
|
24
|
};
|
25
|
|
26
|
PACKAGE.__button = {
|
27
|
"name":"Button", "text":"Button", "children":true,
|
28
|
"parameter":[
|
29
|
{
|
30
|
name:"Text", text:"Button",
|
31
|
input:{type:"0", value:"Button"},
|
32
|
setParameter:"setInputText",
|
33
|
getParameter:"getParameterValue"
|
34
|
},{
|
35
|
name:"Type", text:"Type of button",
|
36
|
input:{
|
37
|
type:"custom",
|
38
|
value:{"type":"button"},
|
39
|
open:function(e) {
|
40
|
|
41
|
let table = document.createElement("table");
|
42
|
let tbody = document.createElement("tbody");
|
43
|
table.classList.add('table');
|
44
|
table.classList.add('table-striped');
|
45
|
|
46
|
|
47
|
/*-= Row 1 == Type of this element =-*/
|
48
|
var type_list = ["button","link","submit","reset"];
|
49
|
|
50
|
let tr1 = document.createElement("tr");
|
51
|
let td1_1 = document.createElement("td");
|
52
|
var title = document.createTextNode("Type:");
|
53
|
td1_1.appendChild(title);
|
54
|
tr1.appendChild(td1_1);
|
55
|
|
56
|
let td1_2 = document.createElement("td");
|
57
|
var div = document.createElement("div");
|
58
|
var selectList = document.createElement("select");
|
59
|
var container = e.container;
|
60
|
var parent_id = e.container.id;
|
61
|
selectList.id = parent_id + "_buttonType";
|
62
|
selectList.classList.add("form-control");
|
63
|
div.classList.add("p-1");
|
64
|
div.appendChild(selectList);
|
65
|
td1_2.appendChild(div);
|
66
|
tr1.appendChild(td1_2);
|
67
|
tbody.appendChild(tr1);
|
68
|
|
69
|
|
70
|
for (var i = 0; i < type_list.length; i++) {
|
71
|
var option = document.createElement("option");
|
72
|
option.value = type_list[i];
|
73
|
option.text = type_list[i];
|
74
|
selectList.appendChild(option);
|
75
|
}
|
76
|
selectList.value = e.value.type;
|
77
|
|
78
|
/*-= Row 2 == Link URL =-*/
|
79
|
let tr2 = document.createElement("tr");
|
80
|
|
81
|
let td2_1 = document.createElement("td");
|
82
|
var title = document.createTextNode("Link:");
|
83
|
tr2.id = parent_id + "_buttonType_input_container";
|
84
|
td2_1.appendChild(title);
|
85
|
tr2.appendChild(td2_1);
|
86
|
|
87
|
let td2_2 = document.createElement("td");
|
88
|
var input = document.createElement("input");
|
89
|
input.classList.add("form-control");
|
90
|
input.id = parent_id + "_buttonType_input_val"
|
91
|
input.placeholder = "URL with http:// or https://"
|
92
|
input.value = (e.value.link) ? e.value.link : '';
|
93
|
td2_2.appendChild(input);
|
94
|
tr2.appendChild(td2_2);
|
95
|
tr2.style.display = (selectList.value != 'link') ? "none" : '';
|
96
|
tbody.appendChild(tr2);
|
97
|
|
98
|
/*-= Row 3 == target attritube =-*/
|
99
|
let tr3 = document.createElement("tr");
|
100
|
|
101
|
let td3_1 = document.createElement("td");
|
102
|
var title = document.createTextNode("Target:");
|
103
|
tr3.id = parent_id + "_buttonType_input_container";
|
104
|
tr3.style.display = "none";
|
105
|
tr3.style.display = (selectList.value != 'link') ? "none" : '';
|
106
|
td3_1.appendChild(title);
|
107
|
tr3.appendChild(td3_1);
|
108
|
|
109
|
var target_list = ["_blank","_self","_parent","_top"];
|
110
|
|
111
|
let td3_2 = document.createElement("td");
|
112
|
var selectTargetList = document.createElement("select");
|
113
|
selectTargetList.id = parent_id + "_buttonType_target_val";
|
114
|
selectTargetList.classList.add("form-control");
|
115
|
td3_2.appendChild(selectTargetList);
|
116
|
tr3.appendChild(td3_2);
|
117
|
tbody.appendChild(tr3);
|
118
|
|
119
|
for (var i = 0; i < target_list.length; i++) {
|
120
|
var option = document.createElement("option");
|
121
|
option.value = target_list[i];
|
122
|
option.text = target_list[i];
|
123
|
selectTargetList.appendChild(option);
|
124
|
}
|
125
|
selectTargetList.value = (e.value.target) ? e.value.target : '_blank';
|
126
|
|
127
|
/*-= Event =-*/
|
128
|
selectList.onchange = function(e) {
|
129
|
if(selectList.value == 'link'){
|
130
|
tr2.style.display = "table-row";
|
131
|
tr3.style.display = "table-row";
|
132
|
}else{
|
133
|
tr2.style.display = "none";
|
134
|
tr3.style.display = "none";
|
135
|
}
|
136
|
};
|
137
|
|
138
|
table.appendChild(tbody);
|
139
|
container.appendChild(table);
|
140
|
|
141
|
},
|
142
|
save:function(e){
|
143
|
|
144
|
var parent_id = e.container.id;
|
145
|
var type_id = parent_id + '_buttonType';
|
146
|
var input_url_id = parent_id + '_buttonType_input_val';
|
147
|
var input_target_id = parent_id + '_buttonType_target_val';
|
148
|
var type = document.getElementById(type_id).value;
|
149
|
var add_value = document.getElementById(input_url_id).value;
|
150
|
var target_value = document.getElementById(input_target_id).value;
|
151
|
|
152
|
if(type == 'link'){
|
153
|
return {"type":type, "link":add_value, "target":target_value};
|
154
|
}else{
|
155
|
return {"type":type}
|
156
|
}
|
157
|
},
|
158
|
},
|
159
|
setParameter:function(e) {
|
160
|
|
161
|
document.getElementById(e.id).type = e.value['type'];
|
162
|
|
163
|
switch(e.value['type']){
|
164
|
case 'link':
|
165
|
document.getElementById(e.id).setAttribute('href', e.value['link']);
|
166
|
document.getElementById(e.id).setAttribute('target', e.value['target']);
|
167
|
break;
|
168
|
default:
|
169
|
document.getElementById(e.id).removeAttribute('href');
|
170
|
document.getElementById(e.id).removeAttribute('target');
|
171
|
break;
|
172
|
}
|
173
|
},
|
174
|
getParameter:function(e){
|
175
|
if(e.value['type'] == 'link'){
|
176
|
return {"type":e.value['type'], "link":e.value['link'], "target":e.value['target']};
|
177
|
}else{
|
178
|
return {"type":e.value['type']}
|
179
|
}
|
180
|
}
|
181
|
},{
|
182
|
name:"Style", text:"Style of button",
|
183
|
input:{
|
184
|
type:"1",
|
185
|
option:[
|
186
|
{value:"btn-primary", text:"Primary"},
|
187
|
{value:"btn-secondary", text:"Secondary"},
|
188
|
{value:"btn-success", text:"Success"},
|
189
|
{value:"btn-danger", text:"Danger"},
|
190
|
{value:"btn-warning", text:"Warning"},
|
191
|
{value:"btn-info", text:"Info"},
|
192
|
{value:"btn-light", text:"Light"},
|
193
|
{value:"btn-dark", text:"Dark"},
|
194
|
{value:"btn-outline-primary", text:"Primary Outline"},
|
195
|
{value:"btn-outline-secondary", text:"Secondary Outline"},
|
196
|
{value:"btn-outline-success", text:"Success Outline"},
|
197
|
{value:"btn-outline-danger", text:"Danger Outline"},
|
198
|
{value:"btn-outline-warning", text:"Warning Outline"},
|
199
|
{value:"btn-outline-info", text:"Info Outline"},
|
200
|
{value:"btn-outline-light", text:"Light Outline"},
|
201
|
{value:"btn-outline-dark", text:"Dark Outline"}
|
202
|
],
|
203
|
value:"btn-primary"
|
204
|
},
|
205
|
setParameter:function(e) {
|
206
|
var value = (e.value).toLowerCase();
|
207
|
if(value){
|
208
|
document.getElementById(e.id).classList.remove("btn-primary","btn-secondary","btn-success","btn-danger","btn-warning","btn-info","btn-light","btn-dark","btn-outline-primary","btn-outline-secondary","btn-outline-success","btn-outline-danger","btn-outline-warning","btn-outline-info","btn-outline-light","btn-outline-dark");
|
209
|
|
210
|
var txt_class = value.trim();
|
211
|
txt_class = (txt_class).replace("btn-", "");
|
212
|
if(txt_class.search("outline") > '-1'){
|
213
|
txt_class = (txt_class).replace("outline", "");
|
214
|
txt_class = (txt_class).replace("-", "");
|
215
|
txt_class = "outline-" + txt_class.trim();
|
216
|
}
|
217
|
|
218
|
txt_class = "btn-"+txt_class;
|
219
|
document.getElementById(e.id).classList.add(txt_class);
|
220
|
}
|
221
|
},
|
222
|
getParameter:function(e){
|
223
|
var value = (e.value).replace("btn-", "");
|
224
|
return value;
|
225
|
}
|
226
|
},{
|
227
|
name:"Size", text:"Size of button",
|
228
|
input:{
|
229
|
type:"1",
|
230
|
option:[
|
231
|
{value:"", text:"Normal"},
|
232
|
{value:"btn-lg", text:"Large"},
|
233
|
{value:"btn-sm", text:"Small"},
|
234
|
{value:"btn-block", text:"Block"}
|
235
|
],
|
236
|
value:""
|
237
|
},
|
238
|
setParameter:function(e){
|
239
|
document.getElementById(e.id).classList.remove("btn-sm","btn-lg","btn-block");
|
240
|
if(e.value){
|
241
|
var value = (e.value).toLowerCase();
|
242
|
if((value == 'small') || (value == 'sm')){
|
243
|
var text_class = 'btn-sm';
|
244
|
}else if((value == 'large') || (value == 'lg')){
|
245
|
var text_class = 'btn-lg';
|
246
|
}else if(value == 'block'){
|
247
|
var text_class = 'btn-block';
|
248
|
}else{
|
249
|
var text_class = value;
|
250
|
}
|
251
|
document.getElementById(e.id).classList.add(text_class);
|
252
|
}
|
253
|
},
|
254
|
getParameter:function(e){
|
255
|
var value = (e.value).replace("btn-", "");
|
256
|
if(value == 'lg'){
|
257
|
var text_class = 'Large';
|
258
|
}else if(value == 'sm'){
|
259
|
var text_class = 'Small';
|
260
|
}else if(value == 'block'){
|
261
|
var text_class = 'Block';
|
262
|
}else{
|
263
|
var text_class = value;
|
264
|
}
|
265
|
return text_class;
|
266
|
}
|
267
|
},{
|
268
|
name:"State", text:"State of button",
|
269
|
input:{
|
270
|
type:"1",
|
271
|
option:[
|
272
|
{value:"", text:"Normal"},
|
273
|
{value:"active", text:"Active"},
|
274
|
{value:"disabled", text:"Disabled"}
|
275
|
],
|
276
|
value:""
|
277
|
},
|
278
|
setParameter:function(e){
|
279
|
document.getElementById(e.id).classList.remove("active","disabled");
|
280
|
if(e.value){
|
281
|
var value = (e.value).toLowerCase();
|
282
|
document.getElementById(e.id).classList.add(value);
|
283
|
}
|
284
|
},
|
285
|
getParameter:"getParameterValue"
|
286
|
},{
|
287
|
name:"Custom Class", text:"Additional Class of button, In case multiple classes please use space(\" \") ",
|
288
|
input:{
|
289
|
type:"0",
|
290
|
value:""
|
291
|
},
|
292
|
setParameter:function(e){
|
293
|
if(e.value){
|
294
|
var class_name_ar = e.value.split(" ");
|
295
|
if(class_name_ar.length > 1){
|
296
|
for (var i = 0; i < class_name_ar.length; i++) {
|
297
|
var add_class = class_name_ar[i].replace(".", "");
|
298
|
if(add_class){
|
299
|
document.getElementById(e.id).classList.add(add_class);
|
300
|
}
|
301
|
}
|
302
|
}else{
|
303
|
var add_class = e.value.replace(".", "");
|
304
|
if(add_class){
|
305
|
document.getElementById(e.id).classList.add(add_class);
|
306
|
}
|
307
|
}
|
308
|
}
|
309
|
},
|
310
|
getParameter:"getParameterValue"
|
311
|
}
|
312
|
],
|
313
|
"callback":[
|
314
|
{name:"mouseclick", text:"On click",
|
315
|
setCallback:function(obj) {
|
316
|
document.getElementById(obj.id).onclick = obj.value;
|
317
|
}
|
318
|
},
|
319
|
{name:"mouseover", text:"On mouse over",
|
320
|
setCallback:function(obj) {
|
321
|
document.getElementById(obj.id).onmouseover = obj.value;
|
322
|
}
|
323
|
},
|
324
|
{name:"mouseout", text:"On mouse out",
|
325
|
setCallback:function(obj) {
|
326
|
document.getElementById(obj.id).onmouseout = obj.value;
|
327
|
}
|
328
|
},
|
329
|
{name:"mouseenter", text:"On mouse enter",
|
330
|
setCallback:function(obj) {
|
331
|
document.getElementById(obj.id).onmouseenter = obj.value;
|
332
|
}
|
333
|
}
|
334
|
|
335
|
],
|
336
|
write_body_start:function(component){
|
337
|
var elem_type = component.property.parameter.Type.type;
|
338
|
var comp_id = component.id;
|
339
|
switch(elem_type){
|
340
|
case 'link':
|
341
|
return '<a id="' + comp_id + '" class="btn">';
|
342
|
break;
|
343
|
// case 'submit': case 'reset':
|
344
|
// return '<input id="' + comp_id + '" type="' + elem_type + '" value="' + component.property.parameter.Text + '" class="btn">';
|
345
|
// break;
|
346
|
default:
|
347
|
return '<button id="' + comp_id + '" type="' + elem_type + '" class="btn" >';
|
348
|
break;
|
349
|
}
|
350
|
|
351
|
},
|
352
|
write_body_end:function(component){
|
353
|
var elem_type = component.property.parameter.Type.type;
|
354
|
switch(elem_type){
|
355
|
case 'link':
|
356
|
return '</a>';
|
357
|
break;
|
358
|
// case 'submit': case 'reset':
|
359
|
// return '';
|
360
|
// break;
|
361
|
default:
|
362
|
return '</button >';
|
363
|
break;
|
364
|
}
|
365
|
},
|
366
|
};
|
367
|
|
368
|
PACKAGE.__Graphing = {
|
369
|
"name":"Graphing", "text":"Graphing", "children":["__GraphContainer","__BarChart"]
|
370
|
};
|
371
|
|
372
|
PACKAGE.__GraphContainer = {
|
373
|
"name":"Graph Container", "text":"Graph Container", "children":true,
|
374
|
"parameter":[
|
375
|
{
|
376
|
name:"Title", text:"Title",
|
377
|
input:{type:"0", value:""},
|
378
|
setParameter:function(e){
|
379
|
var container_id = e.id;
|
380
|
var title_container_class = container_id + '_heading_container';
|
381
|
|
382
|
if($('#' + container_id).find('.' + title_container_class + ' h1').length){
|
383
|
$('#' + container_id).find('.' + title_container_class + ' h1').html(e.value);
|
384
|
}else{
|
385
|
$('#' + container_id + ' .' + title_container_class).append('<h1 class="m-2">' + e.value + '</h1>');
|
386
|
}
|
387
|
|
388
|
},
|
389
|
getParameter:function(e){
|
390
|
return e.value;
|
391
|
}
|
392
|
},{
|
393
|
name:"Align", text:"Text align",
|
394
|
input:{
|
395
|
type:"1",
|
396
|
option:[
|
397
|
{value:"left", text:"Left"},
|
398
|
{value:"center", text:"Center"},
|
399
|
{value:"right", text:"Right"}
|
400
|
],
|
401
|
value:"left"
|
402
|
},
|
403
|
setParameter:function(e){
|
404
|
$('#' + e.id).find('h1').css('text-align',e.value);
|
405
|
},
|
406
|
getParameter:function(e){
|
407
|
return e.value;
|
408
|
}
|
409
|
},{
|
410
|
name:"RefreshTime", text:"Time for refresh data (second), 0 = No refresh",
|
411
|
input:{
|
412
|
type:"0",value:"0"
|
413
|
},
|
414
|
setParameter:function(e){
|
415
|
if($('#' + e.id).find('#' + e.id + '_refreshtime').length > 0){
|
416
|
$('#' + e.id).find('#' + e.id + '_refreshtime').val(e.value);
|
417
|
}else{
|
418
|
$('#' + e.id).append('<input type="hidden" id="' + e.id + '_refreshtime" value="' + e.value + '">');
|
419
|
}
|
420
|
},
|
421
|
getParameter:function(e){
|
422
|
return e.value;
|
423
|
}
|
424
|
}
|
425
|
],
|
426
|
"callback":[
|
427
|
{name:"mouseclick", text:"On click",
|
428
|
setCallback:function(obj) {
|
429
|
document.getElementById(obj.id).onclick = obj.value;
|
430
|
}
|
431
|
},
|
432
|
{name:"mouseover", text:"On mouse over",
|
433
|
setCallback:function(obj) {
|
434
|
document.getElementById(obj.id).onmouseover = obj.value;
|
435
|
}
|
436
|
},
|
437
|
{name:"mouseout", text:"On mouse out",
|
438
|
setCallback:function(obj) {
|
439
|
document.getElementById(obj.id).onmouseout = obj.value;
|
440
|
}
|
441
|
},
|
442
|
{name:"mouseenter", text:"On mouse enter",
|
443
|
setCallback:function(obj) {
|
444
|
document.getElementById(obj.id).onmouseenter = obj.value;
|
445
|
}
|
446
|
}
|
447
|
|
448
|
],
|
449
|
write_body_start:function(component){
|
450
|
var comp_id = component.id;
|
451
|
|
452
|
var date_start_id = comp_id + '_dateStart';
|
453
|
var date_end_id = comp_id + '_dateEnd';
|
454
|
var filter_type = comp_id + '_filterType';
|
455
|
var filter_clear_btn = comp_id + '_filterClear';
|
456
|
var refresh_time = component.property.parameter.RefreshTime;
|
457
|
|
458
|
var title_container_class = comp_id + '_heading_container';
|
459
|
|
460
|
var refresh_rate = '';
|
461
|
if(refresh_time == 1){
|
462
|
refresh_rate = 'Realtime';
|
463
|
}else if(refresh_time > 1){
|
464
|
refresh_rate = 'Refesh Times: Every ' + refresh_time + 's';
|
465
|
}
|
466
|
|
467
|
var html = '';
|
468
|
html += '<div id="' + comp_id + '" class="row kd_graph_container">';
|
469
|
html += '<div class="col-12 ' + title_container_class + '"></div>';
|
470
|
html += '<div class="col-12">';
|
471
|
html += '<div class="alert alert-primary">';
|
472
|
html += '<div class="form-row justify-content-end">';
|
473
|
html += '<div class="col-auto">';
|
474
|
html += '<label>Filter:</label>';
|
475
|
html += '</div>';
|
476
|
html += '<div class="col-auto">';
|
477
|
html += '<select class="form-control form-control-sm" id="' + filter_type + '">';
|
478
|
html += '<option value="">Current</option>';
|
479
|
html += '<option value="avg">Avg</option>';
|
480
|
html += '<option value="max">Max</option>';
|
481
|
html += '<option value="min">Min</option>';
|
482
|
html += '</select>';
|
483
|
html += '</div>';
|
484
|
html += '<div class="col-auto">';
|
485
|
html += '<label>Between:</label>';
|
486
|
html += '</div>';
|
487
|
html += '<div class="col-auto">';
|
488
|
html += '<input type="text" value="" class="form-control form-control-sm" id="' + date_start_id + '" placeholder="Start Date" autocomplete="off">';
|
489
|
html += '</div>';
|
490
|
html += '<div class="col-auto">';
|
491
|
html += '<label> And </label>';
|
492
|
html += '</div>';
|
493
|
html += '<div class="col-auto">';
|
494
|
html += '<input type="text" value="" class="form-control form-control-sm" id="' + date_end_id + '" placeholder="End Date" autocomplete="off">';
|
495
|
html += '</div>';
|
496
|
html += '<div class="col-auto">';
|
497
|
html += '<button class="btn btn-danger btn-sm" id="' + filter_clear_btn + '">Clear</button>';
|
498
|
html += '</div>';
|
499
|
if(refresh_rate){
|
500
|
html += '<div class="col-auto">';
|
501
|
html += '<label>' + refresh_rate + '</label>';
|
502
|
html += '</div>';
|
503
|
}
|
504
|
html += '</div>';
|
505
|
html += '</div>';
|
506
|
html += '</div>';
|
507
|
html += '<div class="col-12">';
|
508
|
|
509
|
return html;
|
510
|
},
|
511
|
write_body_end:function(component){
|
512
|
var html = '';
|
513
|
html += '</div>';
|
514
|
html += '</div>';
|
515
|
return html;
|
516
|
},
|
517
|
add_body_script:function(component){
|
518
|
var comp_id = component.id;
|
519
|
|
520
|
$( function() {
|
521
|
var dateFormat = "dd/mm/yy",
|
522
|
from = $( "#" + comp_id + "_dateStart" ).datepicker({
|
523
|
changeMonth: true,
|
524
|
changeYear: true,
|
525
|
dateFormat: "dd/mm/yy"
|
526
|
})
|
527
|
.on( "change", function() {
|
528
|
to.datepicker( "option", "minDate", getDate( this ) );
|
529
|
}),
|
530
|
to = $( "#" + comp_id + "_dateEnd" ).datepicker({
|
531
|
changeMonth: true,
|
532
|
changeYear: true,
|
533
|
dateFormat: "dd/mm/yy"
|
534
|
})
|
535
|
.on( "change", function() {
|
536
|
from.datepicker( "option", "maxDate", getDate( this ) );
|
537
|
});
|
538
|
|
539
|
function getDate( element ) {
|
540
|
var date;
|
541
|
try{ date = $.datepicker.parseDate( dateFormat, element.value );
|
542
|
}catch( error ){ date = null; }
|
543
|
return date;
|
544
|
}
|
545
|
});
|
546
|
|
547
|
$('#' + comp_id + '_filterClear').on('click',function(){ kd_filter_clear(); });
|
548
|
|
549
|
function kd_filter_clear(){
|
550
|
$('#' + comp_id + '_filterType').val('');
|
551
|
$('#' + comp_id + '_dateStart').val('');
|
552
|
$('#' + comp_id + '_dateEnd').val('');
|
553
|
}
|
554
|
}
|
555
|
}
|
556
|
|
557
|
PACKAGE.__BarChart = {
|
558
|
"name":"Bar Charts", "text":"Bar Charts", "children":false,
|
559
|
"parameter":[
|
560
|
{
|
561
|
name:"Mode", text:"Type of Bar Chart",
|
562
|
input:{
|
563
|
type:"1",
|
564
|
option:[
|
565
|
{value:"group", text:"Basic/Grouped"},
|
566
|
{value:"group_label", text:"Basic/Grouped With Direct Labels"},
|
567
|
{value:"stack", text:"Stacked"},
|
568
|
{value:"stack_label", text:"Stacked With Direct Labels"}
|
569
|
],
|
570
|
value:"group"
|
571
|
},
|
572
|
setParameter:function(e){
|
573
|
var comp_id = e.id;
|
574
|
if($('#' + comp_id + '_chartWrapper').length){
|
575
|
Plotly.update(comp_id + '_chartWrapper', {}, {barmode:e.value});
|
576
|
}
|
577
|
},
|
578
|
getParameter:"getParameterValue"
|
579
|
},{
|
580
|
name:"Title", text:"Title of this chart",
|
581
|
input:{type:"0", value:""},
|
582
|
setParameter:function(e){
|
583
|
var comp_id = e.id;
|
584
|
if($('#' + comp_id + '_chartWrapper').length){
|
585
|
Plotly.update(comp_id + '_chartWrapper', {}, {title:e.value});
|
586
|
}
|
587
|
},
|
588
|
getParameter:"getParameterValue"
|
589
|
},{
|
590
|
name:"Trace", text:"Trace",
|
591
|
input:{
|
592
|
type:"custom",
|
593
|
value:{trace_list:[],group_list:[],trace_condition_list:[],alert_list:[]},
|
594
|
open:function(e){
|
595
|
var container = e.container;
|
596
|
var container_id = e.container.id;
|
597
|
|
598
|
var sub_container_id = container_id + '_sub_container';
|
599
|
|
600
|
var group_container_id = container_id + '_groupContainer';
|
601
|
var group_std_class = container_id + '_groupBox';
|
602
|
var group_add_button_id = container_id + '_groupBtn';
|
603
|
var group_std_line_container_class = container_id + '_line_warp';
|
604
|
var group_std_line_button_class = container_id + '_line_btn';
|
605
|
var group_num = $('.' + group_std_class).length;
|
606
|
|
607
|
var group_input_name_class = container_id + '_group_nameSelected';
|
608
|
|
609
|
var line_std_class = container_id + '_linebox';
|
610
|
var line_std_remove_button_class = container_id + '_line_remove_btn';
|
611
|
|
612
|
var line_source_container_class = container_id + '_line_source';
|
613
|
var line_column_container_class = container_id + '_line_column';
|
614
|
var line_value_container_class = container_id + '_line_value';
|
615
|
var line_trace_container_class = container_id + '_line_trace';
|
616
|
|
617
|
var line_input_source_class = container_id + '_line_sourceSelected';
|
618
|
var line_input_column_class = container_id + '_line_columnSelected';
|
619
|
var line_input_value_class = container_id + '_line_valueSelected';
|
620
|
var line_input_trace_class = container_id + '_line_traceSelected';
|
621
|
var line_input_alert_class = container_id + '_line_alertSelected';
|
622
|
var line_input_condition_class = container_id + '_line_conditionSelected';
|
623
|
|
624
|
var trace_container_id = container_id + '_traceContainer';
|
625
|
var trace_std_class = container_id + '_traceBox';
|
626
|
var trace_add_button_id = container_id + '_traceBtn';
|
627
|
var trace_std_remove_button_class = container_id + '_traceRemoveBtn';
|
628
|
var trace_num = $('.' + trace_std_class).length;
|
629
|
|
630
|
var trace_input_name_class = container_id + '_trace_nameSelected';
|
631
|
var trace_input_color_class = container_id + '_trace_colorSelected';
|
632
|
|
633
|
var trace_add_condition_button_id = container_id + '_trace_conditionBtn';
|
634
|
var trace_std_condition_container_class = container_id + '_trace_conditionContainer';
|
635
|
var trace_std_condition_box_class = container_id + '_trace_conditionBox';
|
636
|
var trace_std_condition_remove_button_class = container_id + '_trace_conditionRemoveBtn';
|
637
|
|
638
|
var trace_condition_input_name_class = container_id + '_trace_condition_nameSelected';
|
639
|
var trace_condition_input_symbol_class = container_id + '_trace_condition_symbolSelected';
|
640
|
var trace_condition_input_value_class = container_id + '_trace_condition_valueSelected';
|
641
|
var trace_condition_input_text_class = container_id + '_trace_condition_textSelected';
|
642
|
var trace_condition_input_color_class = container_id + '_trace_condition_colorSelected';
|
643
|
var trace_condition_input_border_color_class = container_id + '_trace_condition_borderColorSelected';
|
644
|
var trace_condition_num = $('.' + trace_std_condition_box_class).length;
|
645
|
|
646
|
var alert_add_button_id = container_id + '_alertBtn';
|
647
|
var alert_std_container_class = container_id + '_alertContainer';
|
648
|
var alert_std_box_class = container_id + '_alertBox';
|
649
|
var alert_std_remove_button_class = container_id + '_alertRemoveBtn';
|
650
|
var alert_std_source_container = container_id + '_alertSourceContainer';
|
651
|
var alert_std_source_table = container_id + '_alertSourceTable';
|
652
|
var alert_std_source_column = container_id + '_alertSourceColumn';
|
653
|
var alert_num = $('.' + alert_std_box_class).length;
|
654
|
|
655
|
var alert_input_name_class = container_id + '_alert_nameSelected';
|
656
|
var alert_input_symbol_class = container_id + '_alert_symbolSelected';
|
657
|
var alert_input_value_class = container_id + '_alert_valueSelected';
|
658
|
var alert_input_text_class = container_id + '_alert_textSelected';
|
659
|
var alert_input_color_class = container_id + '_alert_colorSelected';
|
660
|
var alert_input_text_color_class = container_id + '_alert_textColorSelected';
|
661
|
var alert_input_title_class = container_id + '_alert_titleSelected';
|
662
|
var alert_input_callback_class = container_id + '_alert_callbackSelected';
|
663
|
|
664
|
build_structure();
|
665
|
|
666
|
/*-= Events for Trace =-*/
|
667
|
$(document).on('click','#' + trace_add_button_id,function(){ add_trace_box(); });
|
668
|
$(document).on('blur','.' + trace_input_name_class,function(){trace_value_element();});
|
669
|
$(document).on('click','.' + trace_std_remove_button_class,function(){
|
670
|
trace_remove_value_element($(this).parents('.' + trace_std_class).find('.' + trace_input_name_class).val());
|
671
|
});
|
672
|
|
673
|
/*-= Events for Condition =-*/
|
674
|
$(document).on('click','#' + trace_add_condition_button_id,function(){trace_add_condition();});
|
675
|
$(document).on('click','.' + trace_std_condition_remove_button_class,function(){ add_condition_to_select(); });
|
676
|
$(document).on('blur','.' + trace_condition_input_name_class,function(){ add_condition_to_select(); });
|
677
|
|
678
|
/*-= Events for Group =-*/
|
679
|
$(document).on('click','#' + group_add_button_id,function(){ add_group_box(); });
|
680
|
$(document).on('click','.' + group_std_line_button_class,function(){
|
681
|
add_line_box($(this).parents('.' + group_std_class).attr('id'));
|
682
|
});
|
683
|
|
684
|
/*-= Events for Line =-*/
|
685
|
$(document).on('click','.' + line_std_remove_button_class,function(){
|
686
|
$(this).parents('.' + line_std_class).fadeOut(function(){ $(this).remove(); });
|
687
|
});
|
688
|
$(document).on('change','.' + line_input_source_class,function(){line_column_element($(this));});
|
689
|
$(document).on('change','.' + line_input_column_class,function(){
|
690
|
var source_val = $(this).parents('.' + line_std_class).find('.' + line_input_source_class).val();
|
691
|
if(source_val == 'custom_sql'){
|
692
|
line_value_customsql_element($(this));
|
693
|
}else{
|
694
|
line_value_element($(this));
|
695
|
}
|
696
|
});
|
697
|
$(document).on('change','.' + line_input_trace_class,function(){ trace_value_element(); });
|
698
|
|
699
|
/*-= Events for Alert =-*/
|
700
|
$(document).on('click','#' + alert_add_button_id,function(){ add_alert_box(); });
|
701
|
$(document).on('click','.' + alert_std_remove_button_class,function(){ add_alert_to_select(); });
|
702
|
$(document).on('blur','.' + alert_input_name_class,function(){ add_alert_to_select(); });
|
703
|
|
704
|
/*-= Get Data From DB =-*/
|
705
|
var db_table = [];
|
706
|
AmgCnt.SQLite.read.getTables((table)=>{
|
707
|
$(table).each(function(){
|
708
|
db_table.push(this.name);
|
709
|
}).promise().done( function(){
|
710
|
/*-= Stored values =-*/
|
711
|
var trace_stored = e.value.trace_list;
|
712
|
if(trace_stored){
|
713
|
$.each(trace_stored,function(index,value){
|
714
|
add_trace_box(value);
|
715
|
});
|
716
|
}
|
717
|
var trace_condition_stored = e.value.trace_condition_list;
|
718
|
if(trace_condition_stored){
|
719
|
$.each(trace_condition_stored,function(index,value){
|
720
|
trace_add_condition(value);
|
721
|
});
|
722
|
}
|
723
|
var alert_stored = e.value.alert_list;
|
724
|
if(alert_stored){
|
725
|
$.each(alert_stored,function(index,value){
|
726
|
add_alert_box(value);
|
727
|
});
|
728
|
}
|
729
|
var group_stored = e.value.group_list;
|
730
|
if(group_stored){
|
731
|
$.each(group_stored,function(index,value){
|
732
|
add_group_box(value);
|
733
|
});
|
734
|
}
|
735
|
});
|
736
|
});
|
737
|
|
738
|
/*-= Main Structure =-*/
|
739
|
function build_structure(){
|
740
|
/*-= Main Structure =-*/
|
741
|
var main_html = '<div id="' + sub_container_id + '" class="row">';
|
742
|
main_html += '<div class="col-12 col-md-8 border-right">';
|
743
|
main_html += '<div id="' + group_container_id + '" ></div>';
|
744
|
main_html += '<div class="mb-2"><button id="' + group_add_button_id + '" class="btn btn-primary btn-block"><i class="fas fa-plus mr-1"></i>More Group</button></div>';
|
745
|
main_html += '<div class="' + alert_std_container_class + '"></div>';
|
746
|
main_html += '<div class="mb-2"><button id="' + alert_add_button_id + '" class="btn btn-warning btn-block"><i class="fas fa-plus mr-1"></i>Add Alert</button></div>';
|
747
|
main_html += '</div>';
|
748
|
main_html += '<div class="col-12 col-md-4">';
|
749
|
main_html += '<div id="' + trace_container_id + '" ></div>';
|
750
|
main_html += '<div class="mb-2"><button id="' + trace_add_button_id + '" class="btn btn-primary btn-block"><i class="fas fa-plus mr-1"></i>More Trace</button></div>';
|
751
|
main_html += '<div class="' + trace_std_condition_container_class + '"></div>';
|
752
|
main_html += '<div class="mb-2"><button id="' + trace_add_condition_button_id + '" class="btn btn-success btn-block"><i class="fas fa-plus mr-1"></i>Add Condition</button></div>';
|
753
|
main_html += '</div>';
|
754
|
main_html += '</div>';
|
755
|
$(container).append(main_html);
|
756
|
}
|
757
|
|
758
|
/*-= Function's Group =-*/
|
759
|
function add_group_box(passed_value){
|
760
|
group_num = (group_num > 0) ? group_num + 1 : 1;
|
761
|
var group_id = container_id + '_group_' + group_num;
|
762
|
|
763
|
var stored_name = (passed_value && passed_value.name) ? passed_value.name : '';
|
764
|
|
765
|
/*-= Group html =-*/
|
766
|
var group_row_html = '<div class="alert alert-secondary ' + group_std_class + '" id="' + group_id + '">';
|
767
|
group_row_html += '<div class="pb-1">';
|
768
|
group_row_html += '<span class="h3 pull-left">Group ' + group_num + '</span>';
|
769
|
group_row_html += '<span class="pull-right">';
|
770
|
group_row_html += '<button type="button" class="close" data-dismiss="alert" aria-label="Close" title="Remove this group">';
|
771
|
group_row_html += '<span aria-hidden="true">×</span>';
|
772
|
group_row_html += '</button>';
|
773
|
group_row_html += '</span>';
|
774
|
group_row_html += '</div>';
|
775
|
group_row_html += '<table class="table table-striped clearfix">';
|
776
|
group_row_html += '<tr>';
|
777
|
group_row_html += '<td width="100px"><label>Name:</label></td>';
|
778
|
group_row_html += '<td><input type="text" class="form-control form-control-sm ' + group_input_name_class + '" value="' + stored_name + '"></td>';
|
779
|
group_row_html += '</tr>';
|
780
|
group_row_html += '<tr>';
|
781
|
group_row_html += '<td colspan="10">';
|
782
|
group_row_html += '<div class="' + group_std_line_container_class + '"></div>';
|
783
|
group_row_html += '<div>';
|
784
|
group_row_html += '<button class="btn btn-success ' + group_std_line_button_class + '"><i class="fas fa-plus mr-1"></i>More Line</button>';
|
785
|
group_row_html += '</div>';
|
786
|
group_row_html += '</td>';
|
787
|
group_row_html += '</tr>';
|
788
|
group_row_html += '</table>';
|
789
|
group_row_html += '</div>';
|
790
|
|
791
|
$('#' + group_container_id).append(group_row_html);
|
792
|
|
793
|
/*-= Internal auto events =-*/
|
794
|
if(passed_value && ($(passed_value.line).length > 0)){
|
795
|
$.each((passed_value.line),function(i,v){
|
796
|
add_line_box(group_id,v);
|
797
|
});
|
798
|
}
|
799
|
}
|
800
|
|
801
|
/*-= Function's Line =-*/
|
802
|
function add_line_box(parent_id,passed_value){
|
803
|
|
804
|
if(parent_id){
|
805
|
var line_num = $('#' + parent_id).find('.' + line_std_class).length;
|
806
|
line_num = (line_num > 0) ? line_num + 1 : 1;
|
807
|
var line_id = line_std_class + '_' + parent_id + '_' + line_num;
|
808
|
|
809
|
var source_container_id = line_id + '_source_wrap';
|
810
|
var input_source_id = line_id + '_source_input';
|
811
|
|
812
|
var stored_input_source = (passed_value && passed_value.source) ? passed_value.source : '';
|
813
|
var stored_input_trace = (passed_value && passed_value.trace) ? passed_value.trace : '';
|
814
|
var stored_input_alert = (passed_value && passed_value.alert) ? passed_value.alert : '';
|
815
|
var stored_input_condition = (passed_value && passed_value.condition) ? passed_value.condition : '';
|
816
|
|
817
|
var line_box_html = '<div id="' + line_id +'" class="' + line_std_class + '">';
|
818
|
line_box_html += '<div>';
|
819
|
line_box_html += '<span class="h5 pull-left">Line ' + line_num + '</span>';
|
820
|
line_box_html += '<span class="pull-right">';
|
821
|
line_box_html += '<button type="button" class="close ' + line_std_remove_button_class + '" title="Remove this line">';
|
822
|
line_box_html += '<span aria-hidden="true">×</span>';
|
823
|
line_box_html += '</button>';
|
824
|
line_box_html += '</span>';
|
825
|
line_box_html += '</div>';
|
826
|
line_box_html += '<div>';
|
827
|
line_box_html += '<table class="table table-striped" width="100%">';
|
828
|
line_box_html += '<tr>';
|
829
|
line_box_html += '<td width="80px"><label>Source:</label></td><td class="' + line_source_container_class + '"></td>';
|
830
|
line_box_html += '<td width="80px"><label>Column:</label></td><td class="' + line_column_container_class + '"></td>';
|
831
|
line_box_html += '<tr>';
|
832
|
line_box_html += '</tr>';
|
833
|
line_box_html += '<td width="80px"><label>Value</label></td><td class="' + line_value_container_class + '"></td>';
|
834
|
line_box_html += '<td width="80px"><label>Trace:</label></td><td class="' + line_trace_container_class + '"></td>';
|
835
|
line_box_html += '</tr>';
|
836
|
line_box_html += '</tr>';
|
837
|
line_box_html += '<td width="80px"><label>Alerts</label></td>';
|
838
|
line_box_html += '<td><select class="form-control form-control-sm ' + line_input_alert_class + '" multiple><option value="">Multiple Select</option></select></td>';
|
839
|
line_box_html += '<td width="80px"><label>Conditions:</label></td>';
|
840
|
line_box_html += '<td><select class="form-control form-control-sm ' + line_input_condition_class + '" multiple><option value="">Multiple Select</option></select></td>';
|
841
|
line_box_html += '</tr>';
|
842
|
line_box_html += '</table>';
|
843
|
line_box_html += '</div>';
|
844
|
line_box_html += '</div>';
|
845
|
$('#' + parent_id).find('.' + group_std_line_container_class).append(line_box_html);
|
846
|
|
847
|
/*-= Source =-*/
|
848
|
var select_source = $('<select>').appendTo('#' + line_id + ' .' + line_source_container_class);
|
849
|
select_source.addClass('form-control');
|
850
|
select_source.addClass('form-control form-control-sm');
|
851
|
select_source.addClass(line_input_source_class);
|
852
|
select_source.attr('id',input_source_id);
|
853
|
|
854
|
select_source.append($("<option>").attr('value','').text('Custom'));
|
855
|
select_source.append($("<option>").attr('value','custom_sql').text('CustomSQLite'));
|
856
|
$.each(db_table,function(i,value){
|
857
|
select_source.append($("<option>").attr('value',value).text(value));
|
858
|
});
|
859
|
if(stored_input_source){ select_source.val(stored_input_source); }
|
860
|
line_column_element($('#' + input_source_id),passed_value);
|
861
|
|
862
|
/*-= Trace selecter =-*/
|
863
|
var select_trace = $('<select>').appendTo('#' + line_id + ' .' + line_trace_container_class);
|
864
|
select_trace.addClass('form-control');
|
865
|
select_trace.addClass('form-control-sm');
|
866
|
select_trace.addClass(line_input_trace_class);
|
867
|
select_trace.append($("<option>").attr('value','').text('Select Trace...'));
|
868
|
trace_value_element();
|
869
|
if(stored_input_trace){ select_trace.val(stored_input_trace); }
|
870
|
|
871
|
/*-= Condition & Alert =-*/
|
872
|
add_alert_to_select();
|
873
|
add_condition_to_select();
|
874
|
|
875
|
$('#' + line_id).find('.' + line_input_alert_class).val(stored_input_alert);
|
876
|
$('#' + line_id).find('.' + line_input_condition_class).val(stored_input_condition);
|
877
|
|
878
|
|
879
|
}
|
880
|
};
|
881
|
|
882
|
function line_column_element(elem,passed_value){
|
883
|
|
884
|
var value = elem.val();
|
885
|
var currect_container_id = elem.parents('.' + line_std_class).attr('id');
|
886
|
|
887
|
var stored_input_column = (passed_value && passed_value.column) ? passed_value.column : '';
|
888
|
var stored_input_value = (passed_value && passed_value.value) ? passed_value.value : '';
|
889
|
|
890
|
$('#' + currect_container_id).find('.' + line_column_container_class).html('');
|
891
|
$('#' + currect_container_id).find('.' + line_value_container_class).html('');
|
892
|
|
893
|
if(value && (value != 'custom_sql')){
|
894
|
|
895
|
var select_column = $('<select>').appendTo('#' + currect_container_id +' .' + line_column_container_class);
|
896
|
select_column.addClass('form-control');
|
897
|
select_column.addClass('form-control-sm');
|
898
|
select_column.addClass(line_input_column_class);
|
899
|
|
900
|
AmgCnt.SQLite.read.all({sql:"select group_concat(name,'|') as columns from pragma_table_info('" + value + "')"},(e1)=>{
|
901
|
|
902
|
$(e1.rows).each(function(index,value){
|
903
|
var column_name_list = (value.columns).split('|');
|
904
|
$(column_name_list).each(function(lisy_key, list_value) {
|
905
|
select_column.append($("<option>").attr('value',list_value).text(list_value));
|
906
|
});
|
907
|
}).promise().done( function(){
|
908
|
if(stored_input_column){ select_column.val(stored_input_column); }
|
909
|
line_value_element(select_column,passed_value);
|
910
|
});
|
911
|
});
|
912
|
}else{
|
913
|
|
914
|
if(value == 'custom_sql'){
|
915
|
var html = '<input type="text" class="form-control form-control-sm '+ line_input_column_class +'" value="' + stored_input_column + '" placeholder="Type your SQL here, Alias is value">';
|
916
|
var readonly = 'readonly';
|
917
|
}else{
|
918
|
var html = '<label>N/A</label>';
|
919
|
var readonly = '';
|
920
|
}
|
921
|
$('#' + currect_container_id).find('.' + line_column_container_class).html(html);
|
922
|
$('#' + currect_container_id).find('.' + line_value_container_class).html('<input type="text" class="form-control form-control-sm '+ line_input_value_class +'" value="' + stored_input_value + '" '+readonly+'>');
|
923
|
}
|
924
|
}
|
925
|
|
926
|
function line_value_element(elem,passed_value){
|
927
|
|
928
|
var selected_column = elem.val();
|
929
|
var selected_source = elem.parents('.' + line_std_class).find('.' + line_input_source_class).val();
|
930
|
var currect_container_id = elem.parents('.' + line_std_class).attr('id');
|
931
|
|
932
|
$('#' + currect_container_id).find('.' + line_value_container_class).html('');
|
933
|
if(selected_column && (selected_source != 'custom_sql')){
|
934
|
AmgCnt.SQLite.read.get({sql:"SELECT " + selected_column + " as value FROM " + selected_source + " ORDER BY _id DESC LIMIT 1", params:[]},(e2)=>{
|
935
|
/*-= get column's value =-*/
|
936
|
if(e2.row){
|
937
|
var html = '<input type="text" class="form-control form-control-sm '+ line_input_value_class +'" readonly value="' + e2.row.value + '">';
|
938
|
}else{
|
939
|
var html = '<input type="text" class="form-control form-control-sm '+ line_input_value_class +'" >';
|
940
|
}
|
941
|
$('#' + currect_container_id +' .' + line_value_container_class).html(html);
|
942
|
});
|
943
|
}else{
|
944
|
$('#' + currect_container_id +' .' + line_value_container_class).html('<input type="text" class="form-control form-control-sm '+ line_input_value_class +'" >');
|
945
|
}
|
946
|
}
|
947
|
|
948
|
function line_value_customsql_element(elem){
|
949
|
var sql_command = elem.val();
|
950
|
var input_value = elem.parents('.' + line_std_class).find('.' + line_input_value_class);
|
951
|
input_value.attr('placeholder','');
|
952
|
AmgCnt.SQLite.read.get({sql:sql_command, params:[]},(e1)=>{
|
953
|
if(e1.err){
|
954
|
input_value.val('').attr('placeholder',e1.errMsg);
|
955
|
}else{
|
956
|
if(e1.row){
|
957
|
if(e1.row.value){
|
958
|
input_value.val(e1.row.value);
|
959
|
}else{
|
960
|
input_value.val('').attr('placeholder','Please use Alias named value in your SQL syntax.');
|
961
|
}
|
962
|
}else{
|
963
|
input_value.val('').attr('placeholder','Value not found');
|
964
|
}
|
965
|
}
|
966
|
});
|
967
|
}
|
968
|
|
969
|
/*-= Function's Trace =-*/
|
970
|
function add_trace_box(passed_value){
|
971
|
trace_num = (trace_num > 0) ? trace_num + 1 : 1;
|
972
|
var trace_id = container_id + '_trace_' + trace_num;
|
973
|
|
974
|
var stored_name = (passed_value && passed_value.name) ? passed_value.name : '';
|
975
|
var stored_color = (passed_value && passed_value.color) ? passed_value.color : '';
|
976
|
|
977
|
/*-= html =-*/
|
978
|
var trace_row_html = '<div class="alert alert-secondary ' + trace_std_class + '" id="' + trace_id + '">';
|
979
|
trace_row_html += '<div class="pb-1">';
|
980
|
trace_row_html += '<span class="h5 pull-left">Trace ' + trace_num + '</span>';
|
981
|
trace_row_html += '<span class="pull-right">';
|
982
|
trace_row_html += '<button type="button" class="close ' + trace_std_remove_button_class + '" data-dismiss="alert" aria-label="Close" title="Remove this trace">';
|
983
|
trace_row_html += '<span aria-hidden="true">×</span>';
|
984
|
trace_row_html += '</button>';
|
985
|
trace_row_html += '</span>';
|
986
|
trace_row_html += '</div>';
|
987
|
trace_row_html += '<table class="table table-striped clearfix">';
|
988
|
trace_row_html += '<tr>';
|
989
|
trace_row_html += '<td width="80px"><label>Name:</label></td>';
|
990
|
trace_row_html += '<td><input type="text" class="form-control form-control-sm ' + trace_input_name_class + '" value="' + stored_name + '"></td>';
|
991
|
trace_row_html += '</tr>';
|
992
|
trace_row_html += '<tr>';
|
993
|
trace_row_html += '<td width="80px"><label>Color:</label></td>';
|
994
|
trace_row_html += '<td><input type="color" class="form-control form-control-sm ' + trace_input_color_class + '" value="' + stored_color + '"></td>';
|
995
|
trace_row_html += '</tr>';
|
996
|
trace_row_html += '</table>';
|
997
|
trace_row_html += '</div>';
|
998
|
|
999
|
$('#' + trace_container_id).append(trace_row_html);
|
1000
|
}
|
1001
|
|
1002
|
function trace_value_element(){
|
1003
|
var trace_list = [];
|
1004
|
var delete_list = [];
|
1005
|
|
1006
|
$('.' + container_id + '_traceBox').each(function(){
|
1007
|
var name = $(this).find('.' + trace_input_name_class).val();
|
1008
|
trace_list.push(name);
|
1009
|
});
|
1010
|
|
1011
|
|
1012
|
$('.' + group_std_class).each(function(){
|
1013
|
var this_group = $(this);
|
1014
|
var trace_selected = [];
|
1015
|
this_group.find('.' + line_input_trace_class + ' option:selected').each(function(){
|
1016
|
trace_selected.push($(this).val());
|
1017
|
});
|
1018
|
|
1019
|
$(trace_list).each(function(index,value){
|
1020
|
if(value && ($.inArray(value, trace_selected) === -1 ) ){
|
1021
|
this_group.find('.' + line_input_trace_class).each(function(){
|
1022
|
if($(this).find('option[value="' + value + '"]').length == 0){
|
1023
|
$(this).append($("<option>").attr('value',value).text(value));
|
1024
|
}
|
1025
|
});
|
1026
|
}
|
1027
|
});
|
1028
|
|
1029
|
trace_selected = [];
|
1030
|
$(this).find('.' + line_input_trace_class + ' option:selected').each(function(){
|
1031
|
trace_selected.push($(this).val());
|
1032
|
});
|
1033
|
|
1034
|
$(this).find('.' + line_input_trace_class).each(function(){
|
1035
|
$(this).find('option:not(:selected)').each(function(){
|
1036
|
if(($(this).val() !== '') && ($.inArray($(this).val(), trace_selected) !== -1 )){
|
1037
|
$(this).remove();
|
1038
|
}
|
1039
|
});
|
1040
|
});
|
1041
|
});
|
1042
|
}
|
1043
|
|
1044
|
function trace_remove_value_element(value){
|
1045
|
$('.' + line_std_class).each(function(){
|
1046
|
$(this).find('.' + line_input_trace_class + ' option[value="' + value + '"]').remove();
|
1047
|
});
|
1048
|
|
1049
|
}
|
1050
|
|
1051
|
/*-= Function's Condition =-*/
|
1052
|
function trace_add_condition(passed_value){
|
1053
|
|
1054
|
trace_condition_num = (trace_condition_num > 0) ? trace_condition_num + 1 : 1;
|
1055
|
var trace_condition_id = container_id + '_trace_condition_' + trace_condition_num;
|
1056
|
|
1057
|
var stored_name = (passed_value && passed_value.name) ? passed_value.name : 'Condition ' + trace_condition_num;
|
1058
|
var stored_symbol = (passed_value && passed_value.symbol) ? passed_value.symbol : '';
|
1059
|
var stored_value = (passed_value && passed_value.value) ? passed_value.value : '';
|
1060
|
var stored_text = (passed_value && passed_value.text) ? passed_value.text : '';
|
1061
|
var stored_color = (passed_value && passed_value.color) ? passed_value.color : '';
|
1062
|
var stored_border_color = (passed_value && passed_value.border_color) ? passed_value.border_color : '';
|
1063
|
|
1064
|
/*= HTML =-*/
|
1065
|
var html = '<div class="alert alert-success ' + trace_std_condition_box_class + '" id="' + trace_condition_id + '">';
|
1066
|
html += '<div class="pb-1">';
|
1067
|
html += '<span class="h5 pull-left">Condition ' + trace_condition_num + '</span>';
|
1068
|
html += '<span class="pull-right">';
|
1069
|
html += '<button type="button" class="close ' + trace_std_condition_remove_button_class + '" data-dismiss="alert" aria-label="Close" title="Remove this condition">';
|
1070
|
html += '<span aria-hidden="true">×</span>';
|
1071
|
html += '</button>';
|
1072
|
html += '</span>';
|
1073
|
html += '</div>';
|
1074
|
html += '<div>';
|
1075
|
html += '<table class="table table-striped" width="100%">';
|
1076
|
html += '<tr>';
|
1077
|
html += '<td width="110px"><label>Name:</label></td>';
|
1078
|
html += '<td><input type="text" class="form-control form-control-sm ' + trace_condition_input_name_class + '" value="' + stored_name + '"></td>';
|
1079
|
html += '<tr>';
|
1080
|
html += '<tr>';
|
1081
|
html += '<td><label>Symbol:</label></td>';
|
1082
|
html += '<td>';
|
1083
|
html += '<select class="form-control form-control-sm ' + trace_condition_input_symbol_class + '">';
|
1084
|
html += '<option value=">" selected>></option>';
|
1085
|
html += '<option value="<"><</option>';
|
1086
|
html += '<option value=">=">>=</option>';
|
1087
|
html += '<option value="<="><=</option>';
|
1088
|
html += '<option value="==">==</option>';
|
1089
|
html += '<option value="!=">!=</option>';
|
1090
|
html += '</select>';
|
1091
|
html += '</td>';
|
1092
|
html += '<tr>';
|
1093
|
html += '<tr>';
|
1094
|
html += '<td><label>Value:</label></td>';
|
1095
|
html += '<td><input type="text" class="form-control form-control-sm ' + trace_condition_input_value_class + '" value="' + stored_value + '"></td>';
|
1096
|
html += '<tr>';
|
1097
|
html += '<tr>';
|
1098
|
html += '<td><label>Text:</label></td>';
|
1099
|
html += '<td><input type="text" class="form-control form-control-sm ' + trace_condition_input_text_class + '" value="' + stored_text + '"></td>';
|
1100
|
html += '<tr>';
|
1101
|
html += '<tr>';
|
1102
|
html += '<td><label>BG Color:</label></td>';
|
1103
|
html += '<td><input type="color" class="form-control form-control-sm ' + trace_condition_input_color_class + '" value="' + stored_color + '"></td>';
|
1104
|
html += '<tr>';
|
1105
|
html += '<tr>';
|
1106
|
html += '<td><label>Border Color:</label></td>';
|
1107
|
html += '<td><input type="color" class="form-control form-control-sm ' + trace_condition_input_border_color_class + '" value="' + stored_border_color + '"></td>';
|
1108
|
html += '<tr>';
|
1109
|
html += '</table>';
|
1110
|
html += '</div>';
|
1111
|
html += '</div>';
|
1112
|
|
1113
|
$('.' + trace_std_condition_container_class).append(html);
|
1114
|
if(stored_symbol){ $('#' + trace_condition_id + ' .' + trace_condition_input_symbol_class).val(stored_symbol); }
|
1115
|
add_condition_to_select();
|
1116
|
}
|
1117
|
|
1118
|
function add_condition_to_select(){
|
1119
|
var condition_list = [];
|
1120
|
|
1121
|
$('.' + container_id + '_trace_conditionBox').each(function(){
|
1122
|
var name = $(this).find('.' + trace_condition_input_name_class).val();
|
1123
|
condition_list.push(name);
|
1124
|
});
|
1125
|
|
1126
|
$('.' + line_std_class).each(function(){
|
1127
|
var this_condition_input = $(this).find('.' + line_input_condition_class);
|
1128
|
|
1129
|
$(condition_list).each(function(index,value){
|
1130
|
if(this_condition_input.find('option[value="' + value + '"]').length == 0){
|
1131
|
this_condition_input.append($("<option>").attr('value',value).text(value));
|
1132
|
}
|
1133
|
});
|
1134
|
|
1135
|
this_condition_input.find('option').each(function(){
|
1136
|
if(($(this).val() !== '') && ($.inArray($(this).val(), condition_list) === -1 )){
|
1137
|
$(this).remove();
|
1138
|
}
|
1139
|
});
|
1140
|
});
|
1141
|
}
|
1142
|
|
1143
|
/*-= Function's Alert =-*/
|
1144
|
function add_alert_box(passed_value){
|
1145
|
alert_num = (alert_num > 0) ? alert_num + 1 : 1;
|
1146
|
var alert_id = container_id + '_alert_' + alert_num;
|
1147
|
|
1148
|
var stored_name = (passed_value && passed_value.name) ? passed_value.name : 'Alert ' + alert_num;
|
1149
|
var stored_symbol = (passed_value && passed_value.symbol) ? passed_value.symbol : '';
|
1150
|
var stored_value = (passed_value && passed_value.value) ? passed_value.value : '';
|
1151
|
var stored_text = (passed_value && passed_value.text) ? passed_value.text : '';
|
1152
|
var stored_color = (passed_value && passed_value.color) ? passed_value.color : '';
|
1153
|
var stored_text_color = (passed_value && passed_value.text_color) ? passed_value.text_color : '';
|
1154
|
var stored_title = (passed_value && passed_value.title) ? passed_value.title : '';
|
1155
|
var stored_callback = (passed_value && passed_value.callback) ? passed_value.callback : '';
|
1156
|
|
1157
|
var source_origin_id = alert_id + '_origin';
|
1158
|
|
1159
|
/*= HTML =-*/
|
1160
|
var html = '<div class="alert alert-warning ' + alert_std_box_class + '" id="' + alert_id + '">';
|
1161
|
html += '<div class="pb-1">';
|
1162
|
html += '<span class="h5 pull-left">Alert ' + alert_num + '</span>';
|
1163
|
html += '<span class="pull-right">';
|
1164
|
html += '<button type="button" class="close ' + alert_std_remove_button_class + '" data-dismiss="alert" aria-label="Close" title="Remove this alert">';
|
1165
|
html += '<span aria-hidden="true">×</span>';
|
1166
|
html += '</button>';
|
1167
|
html += '</span>';
|
1168
|
html += '</div>';
|
1169
|
html += '<div>';
|
1170
|
html += '<table class="table table-striped" width="100%">';
|
1171
|
html += '<tr>';
|
1172
|
html += '<td><label>Name:</label></td>';
|
1173
|
html += '<td colspan="3"><input type="text" class="form-control form-control-sm ' + alert_input_name_class + '" value="' + stored_name + '"></td>';
|
1174
|
html += '<tr>';
|
1175
|
html += '<tr>';
|
1176
|
html += '<td width="90px"><label>Symbol:</label></td>';
|
1177
|
html += '<td>';
|
1178
|
html += '<select class="form-control form-control-sm ' + alert_input_symbol_class + '">';
|
1179
|
html += '<option value=">" selected>></option>';
|
1180
|
html += '<option value="<"><</option>';
|
1181
|
html += '<option value=">=">>=</option>';
|
1182
|
html += '<option value="<="><=</option>';
|
1183
|
html += '<option value="==">==</option>';
|
1184
|
html += '<option value="!=">!=</option>';
|
1185
|
html += '</select>';
|
1186
|
html += '</td>';
|
1187
|
html += '<td width="90px"><label>Value:</label></td>';
|
1188
|
html += '<td><input type="text" class="form-control form-control-sm ' + alert_input_value_class + '" value="' + stored_value + '"></td>';
|
1189
|
html += '<tr>';
|
1190
|
html += '<tr>';
|
1191
|
html += '<td><label>Text:</label></td>';
|
1192
|
html += '<td><input type="text" class="form-control form-control-sm ' + alert_input_text_class + '" value="' + stored_text + '"></td>';
|
1193
|
html += '<td><label>Hover:</label></td>';
|
1194
|
html += '<td><input type="text" class="form-control form-control-sm ' + alert_input_title_class + '" value="' + stored_title + '"></td>';
|
1195
|
html += '<tr>';
|
1196
|
html += '<tr>';
|
1197
|
html += '<td><label>BG Color:</label></td>';
|
1198
|
html += '<td><input type="color" class="form-control form-control-sm ' + alert_input_color_class + '" value="' + stored_color + '"></td>';
|
1199
|
html += '<td><label>Text Color:</label></td>';
|
1200
|
html += '<td><input type="color" class="form-control form-control-sm ' + alert_input_text_color_class + '" value="' + stored_text_color + '"></td>';
|
1201
|
html += '<tr>';
|
1202
|
html += '<tr>';
|
1203
|
html += '<td><label>Onclick:</label></td>';
|
1204
|
html += '<td colspan="3"><textarea rows="5" class="form-control form-control-sm ' + alert_input_callback_class + '">' + stored_callback + '</textarea>';
|
1205
|
html += '<tr>';
|
1206
|
html += '</table>';
|
1207
|
html += '</div>';
|
1208
|
html += '</div>';
|
1209
|
$('.' + alert_std_container_class).append(html);
|
1210
|
|
1211
|
if(stored_symbol){
|
1212
|
$('#' + alert_id).find('.' + alert_input_symbol_class).val(stored_symbol);
|
1213
|
}
|
1214
|
|
1215
|
add_alert_to_select();
|
1216
|
}
|
1217
|
|
1218
|
function add_alert_to_select(){
|
1219
|
var alert_list = [];
|
1220
|
|
1221
|
$('.' + container_id + '_alertBox').each(function(){
|
1222
|
var name = $(this).find('.' + alert_input_name_class).val();
|
1223
|
alert_list.push(name);
|
1224
|
});
|
1225
|
|
1226
|
$('.' + line_std_class).each(function(){
|
1227
|
var this_alert_input = $(this).find('.' + line_input_alert_class);
|
1228
|
|
1229
|
$(alert_list).each(function(index,value){
|
1230
|
if(this_alert_input.find('option[value="' + value + '"]').length == 0){
|
1231
|
this_alert_input.append($("<option>").attr('value',value).text(value));
|
1232
|
}
|
1233
|
});
|
1234
|
|
1235
|
this_alert_input.find('option').each(function(){
|
1236
|
if(($(this).val() !== '') && ($.inArray($(this).val(), alert_list) === -1 )){
|
1237
|
$(this).remove();
|
1238
|
}
|
1239
|
});
|
1240
|
});
|
1241
|
}
|
1242
|
|
1243
|
},
|
1244
|
save:function(e){
|
1245
|
var container_id = e.container.id;
|
1246
|
|
1247
|
var group_list = [];
|
1248
|
var trace_list = [];
|
1249
|
var trace_condition_list = [];
|
1250
|
var alert_list = [];
|
1251
|
|
1252
|
/*-= Trace -=*/
|
1253
|
$('.' + container_id + '_traceBox').each(function(){
|
1254
|
var trace_id = $(this).attr('id');
|
1255
|
var trace_name_val = $(this).find('.' + container_id + '_trace_nameSelected').val();
|
1256
|
var trace_color_val = $(this).find('.' + container_id + '_trace_colorSelected').val();
|
1257
|
|
1258
|
trace_list.push({
|
1259
|
name:trace_name_val,
|
1260
|
color:trace_color_val
|
1261
|
});
|
1262
|
});
|
1263
|
|
1264
|
/*-= Condition =-*/
|
1265
|
$('.' + container_id + '_trace_conditionBox').each(function(){
|
1266
|
var name = $(this).find('.' + container_id + '_trace_condition_nameSelected').val();
|
1267
|
var symbol = $(this).find('.' + container_id + '_trace_condition_symbolSelected').val();
|
1268
|
var value = $(this).find('.' + container_id + '_trace_condition_valueSelected').val();
|
1269
|
var text = $(this).find('.' + container_id + '_trace_condition_textSelected').val();
|
1270
|
var color = $(this).find('.' + container_id + '_trace_condition_colorSelected').val();
|
1271
|
var border_color = $(this).find('.' + container_id + '_trace_condition_borderColorSelected').val();
|
1272
|
trace_condition_list.push({
|
1273
|
name:name,
|
1274
|
symbol:symbol,
|
1275
|
value:value,
|
1276
|
text:text,
|
1277
|
color:color,
|
1278
|
border_color:border_color
|
1279
|
});
|
1280
|
});
|
1281
|
|
1282
|
/*-= Group =-*/
|
1283
|
$('.' + container_id + '_groupBox').each(function(){
|
1284
|
var group_id = $(this).attr('id');
|
1285
|
var group_name_val = $(this).find('.' + container_id + '_group_nameSelected').val();
|
1286
|
|
1287
|
var line_value_list = [];
|
1288
|
var exist_trace_list = [];
|
1289
|
$(this).find('.' + container_id + '_linebox').each(function(){
|
1290
|
var line_source_value = $(this).find('.' + container_id + '_line_sourceSelected').val();
|
1291
|
var line_column_value = $(this).find('.' + container_id + '_line_columnSelected').val();
|
1292
|
var line_value_value = $(this).find('.' + container_id + '_line_valueSelected').val();
|
1293
|
var line_trace_value = $(this).find('.' + container_id + '_line_traceSelected').val();
|
1294
|
var line_alert_value = $(this).find('.' + container_id + '_line_alertSelected').val();
|
1295
|
var line_condition_value = $(this).find('.' + container_id + '_line_conditionSelected').val();
|
1296
|
|
1297
|
line_value_list.push({
|
1298
|
source:line_source_value,
|
1299
|
column:line_column_value,
|
1300
|
value:line_value_value,
|
1301
|
trace:line_trace_value,
|
1302
|
alert:line_alert_value,
|
1303
|
condition:line_condition_value
|
1304
|
});
|
1305
|
|
1306
|
exist_trace_list.push(line_trace_value);
|
1307
|
});
|
1308
|
|
1309
|
$.each(trace_list,function(i,v){
|
1310
|
if(($.inArray(v.name, exist_trace_list) === -1 )){
|
1311
|
line_value_list.push({
|
1312
|
source:'',
|
1313
|
column:'',
|
1314
|
value:'',
|
1315
|
trace:v.name,
|
1316
|
alert:'',
|
1317
|
condition:'',
|
1318
|
});
|
1319
|
}
|
1320
|
});
|
1321
|
|
1322
|
group_list.push({
|
1323
|
name:group_name_val,
|
1324
|
line:line_value_list
|
1325
|
});
|
1326
|
});
|
1327
|
|
1328
|
/*-= Alert =-*/
|
1329
|
$('.' + container_id + '_alertBox').each(function(){
|
1330
|
|
1331
|
var alert_name_val = $(this).find('.' + container_id + '_alert_nameSelected').val();
|
1332
|
var alert_column_val = $(this).find('.' + container_id + '_alert_columnSelected').val();
|
1333
|
var alert_symbol_val = $(this).find('.' + container_id + '_alert_symbolSelected').val();
|
1334
|
var alert_value_val = $(this).find('.' + container_id + '_alert_valueSelected').val();
|
1335
|
var alert_text_val = $(this).find('.' + container_id + '_alert_textSelected').val();
|
1336
|
var alert_color_val = $(this).find('.' + container_id + '_alert_colorSelected').val();
|
1337
|
var alert_text_color_val = $(this).find('.' + container_id + '_alert_textColorSelected').val();
|
1338
|
var alert_title_val = $(this).find('.' + container_id + '_alert_titleSelected').val();
|
1339
|
var alert_callback_val = $(this).find('.' + container_id + '_alert_callbackSelected').val();
|
1340
|
|
1341
|
alert_list.push({
|
1342
|
name:alert_name_val,
|
1343
|
column:alert_column_val,
|
1344
|
symbol:alert_symbol_val,
|
1345
|
value:alert_value_val,
|
1346
|
text:alert_text_val,
|
1347
|
color:alert_color_val,
|
1348
|
text_color:alert_text_color_val,
|
1349
|
title:alert_title_val,
|
1350
|
callback:alert_callback_val
|
1351
|
});
|
1352
|
});
|
1353
|
|
1354
|
return {trace_list,group_list,trace_condition_list,alert_list};
|
1355
|
}
|
1356
|
},
|
1357
|
setParameter:function(e){
|
1358
|
if($('#' + e.id + '_chartWrapper').length){
|
1359
|
console.log('No setParameter function for Trace');
|
1360
|
}
|
1361
|
},
|
1362
|
getParameter:"getParameterValue"
|
1363
|
},{
|
1364
|
name:"Legend", text:"Show legend",
|
1365
|
input:{ type:"4",value:true },
|
1366
|
setParameter:function(e){
|
1367
|
var comp_id = e.id;
|
1368
|
if($('#' + comp_id + '_chartWrapper').length){
|
1369
|
if(!e.value){
|
1370
|
$('.' + comp_id + '_conditionBox').hide();
|
1371
|
}else{
|
1372
|
$('.' + comp_id + '_conditionBox').show();
|
1373
|
}
|
1374
|
}
|
1375
|
},
|
1376
|
getParameter:"getParameterValue"
|
1377
|
},{
|
1378
|
name:"Bargap", text:"Bar Gap",
|
1379
|
input:{
|
1380
|
type:"1",
|
1381
|
option:[
|
1382
|
{value:"0", text:"Close"},
|
1383
|
{value:"0.05", text:"Normal"},
|
1384
|
{value:"0.1", text:"Far"},
|
1385
|
{value:"0.2", text:"Farthest"}
|
1386
|
],
|
1387
|
value:"0.05"
|
1388
|
},
|
1389
|
setParameter:function(e){
|
1390
|
var comp_id = e.id;
|
1391
|
if($('#' + comp_id + '_chartWrapper').length){
|
1392
|
var data_update = {
|
1393
|
bargap:e.value
|
1394
|
};
|
1395
|
Plotly.update(comp_id + '_chartWrapper', {}, data_update);
|
1396
|
}
|
1397
|
},
|
1398
|
getParameter:"getParameterValue"
|
1399
|
},{
|
1400
|
name:"Horizontal", text:"Would You Like to Show Bar Chart With Horizontal Layout?",
|
1401
|
input:{
|
1402
|
type:"4",
|
1403
|
value:false
|
1404
|
},
|
1405
|
setParameter:function(e){
|
1406
|
if($('#' + e.id + '_chartWrapper').length){
|
1407
|
console.log('No setParameter function for Horizontal');
|
1408
|
}
|
1409
|
},
|
1410
|
getParameter:"getParameterValue"
|
1411
|
},{
|
1412
|
name:"Tickangle", text:"tickangle",
|
1413
|
input:{
|
1414
|
type:"1",
|
1415
|
option:[
|
1416
|
{value:"0", text:"Normal"},
|
1417
|
{value:"-45", text:"-45 Degree"},
|
1418
|
{value:"-90", text:"-90 Degree"},
|
1419
|
{value:"45", text:"45 Degree"},
|
1420
|
{value:"90", text:"90 Degree"}
|
1421
|
],
|
1422
|
value:"0"
|
1423
|
},
|
1424
|
setParameter:function(e){
|
1425
|
var comp_id = e.id;
|
1426
|
if($('#' + comp_id + '_chartWrapper').length){
|
1427
|
Plotly.update(comp_id + '_chartWrapper', {}, {xaxis: {tickangle:e.value}});
|
1428
|
}
|
1429
|
},
|
1430
|
getParameter:"getParameterValue"
|
1431
|
}
|
1432
|
],
|
1433
|
"callback":[
|
1434
|
{name:"mouseclick", text:"On click",
|
1435
|
setCallback:function(obj) {
|
1436
|
document.getElementById(obj.id).onclick = obj.value;
|
1437
|
}
|
1438
|
},
|
1439
|
{name:"mouseover", text:"On mouse over",
|
1440
|
setCallback:function(obj) {
|
1441
|
document.getElementById(obj.id).onmouseover = obj.value;
|
1442
|
}
|
1443
|
},
|
1444
|
{name:"mouseout", text:"On mouse out",
|
1445
|
setCallback:function(obj) {
|
1446
|
document.getElementById(obj.id).onmouseout = obj.value;
|
1447
|
}
|
1448
|
},
|
1449
|
{name:"mouseenter", text:"On mouse enter",
|
1450
|
setCallback:function(obj) {
|
1451
|
document.getElementById(obj.id).onmouseenter = obj.value;
|
1452
|
}
|
1453
|
}
|
1454
|
],
|
1455
|
write_body_start:function(component){
|
1456
|
var comp_id = component.id;
|
1457
|
return '<div id="' + comp_id + '">';
|
1458
|
},
|
1459
|
write_body_end:function(component){
|
1460
|
return '</div>';
|
1461
|
},
|
1462
|
add_body_script:function(component){
|
1463
|
|
1464
|
var comp_id = component.id;
|
1465
|
var comp_chart_id = component.id + '_chartWrapper';
|
1466
|
var comp_chart_alert_id = component.id + '_alertWrapper';
|
1467
|
var trace_list = component.property.parameter.Trace.trace_list;
|
1468
|
var trace_condition_list = component.property.parameter.Trace.trace_condition_list;
|
1469
|
var alert_list = component.property.parameter.Trace.alert_list;
|
1470
|
var group_list = component.property.parameter.Trace.group_list;
|
1471
|
var input_mode = component.property.parameter.Mode;
|
1472
|
var input_horizontal = component.property.parameter.Horizontal;
|
1473
|
|
1474
|
/*-= If under graph container =-*/
|
1475
|
var refresh_time = 0;
|
1476
|
if( $('#' + comp_id).parents('.' + 'kd_graph_container').length > 0 ){
|
1477
|
var graph_container = $('#' + comp_id).parents('.' + 'kd_graph_container');
|
1478
|
var graph_container_id = graph_container.attr('id');
|
1479
|
refresh_time = graph_container.find('#' + graph_container_id + '_refreshtime').val();
|
1480
|
}
|
1481
|
|
1482
|
/*-= Create new container =-*/
|
1483
|
$('#' + comp_id).append('<div id="' + comp_chart_id + '"></div>');
|
1484
|
$('#' + comp_id).append('<div id="' + comp_chart_alert_id + '"></div>');
|
1485
|
|
1486
|
kd_build_alertContainer();
|
1487
|
kd_bulid_barChart(component.property.parameter);
|
1488
|
|
1489
|
/*-= Filter Set up =-*/
|
1490
|
var loop_status = 0;
|
1491
|
var new_group_list = [];
|
1492
|
var graph_container_id = ($('#' + comp_id).parents('.kd_graph_container')) ? $('#' + comp_id).parents('.kd_graph_container').attr('id') : '';
|
1493
|
var filter_type = '';
|
1494
|
var filter_date_start = '';
|
1495
|
var filter_date_end = '';
|
1496
|
var setTimeOut_id = '';
|
1497
|
|
1498
|
$('#' + graph_container_id + '_filterType').change(function(){clearTimeout(setTimeOut_id);kd_filter_update()});
|
1499
|
$('#' + graph_container_id + '_dateStart').change(function(){clearTimeout(setTimeOut_id);kd_filter_update()});
|
1500
|
$('#' + graph_container_id + '_dateEnd').change(function(){clearTimeout(setTimeOut_id);kd_filter_update()});
|
1501
|
$('#' + graph_container_id + '_filterClear').on('click',function(){
|
1502
|
$('#' + graph_container_id + '_filterType').val('');
|
1503
|
$('#' + graph_container_id + '_dateStart').val('');
|
1504
|
$('#' + graph_container_id + '_dateEnd').val('');
|
1505
|
$('.input-daterange input').each(function (){
|
1506
|
$(this).datepicker("clearDates");
|
1507
|
});
|
1508
|
clearTimeout(setTimeOut_id);
|
1509
|
setTimeout(kd_filter_update(), 300);
|
1510
|
});
|
1511
|
|
1512
|
/*-= Functions =-*/
|
1513
|
function kd_bulid_barChart(source){
|
1514
|
|
1515
|
var layout = {};
|
1516
|
var input_mode = source.Mode;
|
1517
|
var input_title = source.Title;
|
1518
|
var input_axis_tickangle = source.Tickangle;
|
1519
|
var input_bargap = source.Bargap;
|
1520
|
|
1521
|
if(input_title){ Object.assign(layout, {title: input_title}); }
|
1522
|
if(input_bargap){ Object.assign(layout, {bargap:input_bargap}); }
|
1523
|
if(input_axis_tickangle){ Object.assign(layout, {xaxis: {tickangle:input_axis_tickangle}}); }
|
1524
|
if(input_mode == 'group_label'){
|
1525
|
Object.assign(layout, {barmode: 'group'});
|
1526
|
}else if(input_mode == 'stack_label'){
|
1527
|
Object.assign(layout, {barmode: 'stack'});
|
1528
|
}else{
|
1529
|
Object.assign(layout, {barmode: input_mode});
|
1530
|
}
|
1531
|
Object.assign(layout, {showlegend: false});
|
1532
|
|
1533
|
Plotly.newPlot(comp_chart_id, [], layout);
|
1534
|
|
1535
|
kd_barChart_buildTrace(source);
|
1536
|
|
1537
|
}
|
1538
|
|
1539
|
function kd_barChart_buildTrace(source){
|
1540
|
|
1541
|
var data = [];
|
1542
|
|
1543
|
if(trace_list){
|
1544
|
$.each(trace_list,function(trace_index,trace_value){
|
1545
|
|
1546
|
var trace = {};
|
1547
|
var x_axis = [];
|
1548
|
var y_axis = [];
|
1549
|
|
1550
|
var trace_name = trace_value.name;
|
1551
|
/*-= Group =-*/
|
1552
|
if(group_list){
|
1553
|
$.each(group_list,function(g_index,g_val){
|
1554
|
if( (g_val.line).length > 0 ){
|
1555
|
$.each(g_val.line,function(line_index,line_val){
|
1556
|
if(trace_name == line_val.trace){
|
1557
|
x_axis.push(g_val.name);
|
1558
|
y_axis.push(line_val.value);
|
1559
|
}
|
1560
|
});
|
1561
|
}
|
1562
|
});
|
1563
|
|
1564
|
if(input_horizontal){
|
1565
|
Object.assign(trace, {x: y_axis});
|
1566
|
Object.assign(trace, {y: x_axis});
|
1567
|
}else{
|
1568
|
Object.assign(trace, {x: x_axis});
|
1569
|
Object.assign(trace, {y: y_axis});
|
1570
|
}
|
1571
|
}
|
1572
|
|
1573
|
Object.assign(trace, {marker: {color:trace_value.color}});
|
1574
|
Object.assign(trace, {name: trace_name});
|
1575
|
Object.assign(trace, {type: 'bar'});
|
1576
|
Object.assign(trace, {hoverinfo: 'all'});
|
1577
|
if(input_horizontal){
|
1578
|
Object.assign(trace, {orientation: 'h'});
|
1579
|
}
|
1580
|
if( (input_mode == 'group_label') || (input_mode == 'stack_label') ){
|
1581
|
Object.assign(trace, {textposition: 'auto'});
|
1582
|
}
|
1583
|
|
1584
|
data.push(trace);
|
1585
|
});
|
1586
|
}
|
1587
|
|
1588
|
Plotly.addTraces(comp_chart_id,data);
|
1589
|
|
1590
|
kd_barChart_Update(group_list);
|
1591
|
}
|
1592
|
|
1593
|
function kd_barChart_Update(source){
|
1594
|
var trace_condition_html = '';
|
1595
|
var loop = 0;
|
1596
|
|
1597
|
if(trace_list){
|
1598
|
$.each(trace_list,function(trace_index,trace_value){
|
1599
|
|
1600
|
var y_axis = new Array();
|
1601
|
var color_ar = new Array();
|
1602
|
var border_color_ar = new Array();
|
1603
|
var text_ar = new Array();
|
1604
|
var trace_name = trace_value.name;
|
1605
|
|
1606
|
if(source){
|
1607
|
$.each(source,function(g_index,g_val){
|
1608
|
if( (g_val.line).length > 0 ){
|
1609
|
$.each(g_val.line,function(line_index,line_val){
|
1610
|
if(trace_name == line_val.trace){
|
1611
|
y_axis.push(line_val.value);
|
1612
|
|
1613
|
var color_selected = trace_value.color;
|
1614
|
var border_color_selected = color_selected;
|
1615
|
var text_selected = line_val.value;
|
1616
|
|
1617
|
if( (trace_condition_list.length > 0) ){
|
1618
|
$.each(line_val.condition,function(line_condition_index,line_condition_value){
|
1619
|
$.each(trace_condition_list,function(trace_condition_index,trace_condition_value){
|
1620
|
if(trace_condition_value.name == line_condition_value){
|
1621
|
if(trace_condition_value.symbol && trace_condition_value.value && trace_condition_value.text){
|
1622
|
if(eval(line_val.value + ' ' + trace_condition_value.symbol + ' ' + trace_condition_value.value)){
|
1623
|
color_selected = trace_condition_value.color;
|
1624
|
text_selected = trace_condition_value.text;
|
1625
|
border_color_selected = trace_condition_value.border_color;
|
1626
|
}
|
1627
|
}
|
1628
|
}
|
1629
|
});
|
1630
|
});
|
1631
|
}
|
1632
|
color_ar.push(color_selected);
|
1633
|
border_color_ar.push(border_color_selected);
|
1634
|
text_ar.push(text_selected);
|
1635
|
}
|
1636
|
});
|
1637
|
}
|
1638
|
});
|
1639
|
}
|
1640
|
|
1641
|
if(color_ar.length){
|
1642
|
var data_update = {
|
1643
|
marker:{
|
1644
|
color: color_ar,
|
1645
|
line:{
|
1646
|
color: border_color_ar,
|
1647
|
width: 1
|
1648
|
}
|
1649
|
}
|
1650
|
};
|
1651
|
|
1652
|
Object.assign(data_update, {text: [text_ar]});
|
1653
|
if(input_horizontal){
|
1654
|
Object.assign(data_update, {hoverinfo: 'name+text'});
|
1655
|
Object.assign(data_update, {orientation: 'h'});
|
1656
|
}else{
|
1657
|
Object.assign(data_update, {hoverinfo: 'x+name+text'});
|
1658
|
}
|
1659
|
if( (input_mode == 'group_label') || (input_mode == 'stack_label') ){
|
1660
|
Object.assign(data_update, {textposition: 'auto'});
|
1661
|
}
|
1662
|
|
1663
|
Plotly.update(comp_chart_id, data_update, {}, parseInt(trace_index));
|
1664
|
}
|
1665
|
if(y_axis.length){
|
1666
|
if(input_horizontal){
|
1667
|
Plotly.prependTraces(comp_chart_id, {x: [y_axis]}, [parseInt(trace_index)]);
|
1668
|
}else{
|
1669
|
Plotly.prependTraces(comp_chart_id, {y: [y_axis]}, [parseInt(trace_index)]);
|
1670
|
}
|
1671
|
}
|
1672
|
});
|
1673
|
}
|
1674
|
|
1675
|
kd_genarate_alert(source);
|
1676
|
}
|
1677
|
|
1678
|
/*-= Alert =-*/
|
1679
|
function kd_build_alertContainer(){
|
1680
|
|
1681
|
var show_legends = component.property.parameter.Legend;
|
1682
|
var count_trace = (trace_condition_list.length) + (trace_list.length);
|
1683
|
|
1684
|
var html = '<div class="' + comp_id + '_alertContainer" data-trace_count="'+count_trace+'">';
|
1685
|
html += '<div class="row">';
|
1686
|
|
1687
|
/*-= Alert =-*/
|
1688
|
html += '<div class="col-8"><div class="' + comp_id + '_alertBox alert alert-light"></div></div>';
|
1689
|
|
1690
|
/*-= Legends =-*/
|
1691
|
if(show_legends == true){
|
1692
|
html += '<div class="col-4">';
|
1693
|
html += '<div class="' + comp_id + '_conditionBox text-right alert alert-light">';
|
1694
|
html += '<div class="mb-1">';
|
1695
|
html += '<strong>Trace:</strong>';
|
1696
|
$.each(trace_list,function(trace_index,trace_value){
|
1697
|
html += '<span style="color:' + trace_value.color + ';display:inline-block;margin:5px 10px;"><i class="fas fa-square-full"></i> ' + trace_value.name + '</span>';
|
1698
|
});
|
1699
|
html += '</div>';
|
1700
|
|
1701
|
if( trace_condition_list.length > 0 ){
|
1702
|
html += '<div>';
|
1703
|
html += '<strong>Trace Condition:</strong>';
|
1704
|
$.each(trace_condition_list,function(tc_index,tc_val){
|
1705
|
if(tc_val.symbol && tc_val.value && tc_val.text){
|
1706
|
html += '<span style="color:' + tc_val.color + ';display:inline-block;margin:5px 10px;"><i class="fas fa-square-full"></i> ' + tc_val.text + ' [' + tc_val.symbol + ' ' + tc_val.value +']</span>';
|
1707
|
}
|
1708
|
});
|
1709
|
html += '</div>';
|
1710
|
}
|
1711
|
html += '</div>';
|
1712
|
}
|
1713
|
|
1714
|
html += '</div>';
|
1715
|
html += '</div>';
|
1716
|
$('#' + comp_chart_alert_id).append(html);
|
1717
|
}
|
1718
|
|
1719
|
function kd_genarate_alert(source){
|
1720
|
|
1721
|
$('#' + comp_id).find('.' + comp_id + '_alertBox a').remove();
|
1722
|
|
1723
|
if(source && ( Object.keys(alert_list).length > 0) ){
|
1724
|
$.each(source,function(g_index,g_val){
|
1725
|
if( Object.keys(g_val.line).length > 0 ){
|
1726
|
$.each(g_val.line,function(line_index,line_val){
|
1727
|
$.each(line_val.alert,function(line_alert_index,line_alert_value){
|
1728
|
$.each(alert_list,function(alert_index,alert_value){
|
1729
|
if(alert_value.name == line_alert_value){
|
1730
|
if(eval(line_val.value + ' ' + alert_value.symbol + ' ' + alert_value.value)){
|
1731
|
var alert_id = comp_id + '_' + line_val.trace.split(" ").join("") + '_' + g_val.name.split(" ").join("") + '_' + alert_index;
|
1732
|
|
1733
|
if( $('#' + comp_id).find('.' + comp_id + '_alertBox').find('#' + alert_id).length <= 0 ){
|
1734
|
var callback_func = (alert_value.callback) ? 'onclick="' + alert_value.callback + '"' : '';
|
1735
|
var html = '<a href="#" id="' + alert_id + '" class="btn btn-primary mr-2" style="background-color:' + alert_value.color + ';border-color:' + alert_value.color + ';color:'+ alert_value.text_color +'" title="' + alert_value.title + '" data-toggle="tooltip" data-placement="top" '+ callback_func +'>';
|
1736
|
html += '<p class="m-1">' + line_val.trace + ' | ' + g_val.name + '</p>';
|
1737
|
html += '<p class="m-1">' + alert_value.text + '</p>';
|
1738
|
html += '</a>';
|
1739
|
|
1740
|
$('#' + comp_id).find('.' + comp_id + '_alertBox').append(html);
|
1741
|
$('[data-toggle="tooltip"]').tooltip();
|
1742
|
}
|
1743
|
}
|
1744
|
}
|
1745
|
});
|
1746
|
});
|
1747
|
});
|
1748
|
}
|
1749
|
});
|
1750
|
}
|
1751
|
}
|
1752
|
|
1753
|
/*-= Fetching data from DB, Working for any line that use value from Database =-*/
|
1754
|
function kd_barchart_data_loop(){
|
1755
|
|
1756
|
new_group_list = new Array();
|
1757
|
$(group_list).each(function(g_index,g_value){
|
1758
|
var new_line_list = [];
|
1759
|
if(g_value.line){
|
1760
|
$(g_value.line).each(function(l_index,l_value){
|
1761
|
if(l_value.source == ''){
|
1762
|
loop_status++;
|
1763
|
new_line_list.push({source:l_value.source,column:l_value.column,value:l_value.value,trace:l_value.trace,alert:l_value.alert,condition:l_value.condition});
|
1764
|
loop_status--;
|
1765
|
}else if(l_value.source == 'custom_sql'){
|
1766
|
loop_status++;
|
1767
|
AmgCnt.SQLite.read.get({sql:l_value.column, params:[]},(e1)=>{
|
1768
|
new_line_list.push({source:l_value.source,column:l_value.column,value:e1.row.value,trace:l_value.trace,alert:l_value.alert,condition:l_value.condition});
|
1769
|
loop_status--;
|
1770
|
});
|
1771
|
}else{
|
1772
|
loop_status++;
|
1773
|
|
1774
|
if(filter_date_start && filter_date_end){
|
1775
|
var date_start_ar = filter_date_start.split('/');
|
1776
|
var date_end_ar = filter_date_end.split('/');
|
1777
|
var new_start_date = date_start_ar[2] + '-' + date_start_ar[1] + '-' + date_start_ar[0];
|
1778
|
var new_end_date = date_end_ar[2] + '-' + date_end_ar[1] + '-' + date_end_ar[0];
|
1779
|
|
1780
|
var sql_command = '';
|
1781
|
if(filter_type == 'avg'){
|
1782
|
|
1783
|
AmgCnt.SQLite.read.all({sql:"select group_concat(name,'|') as columns from pragma_table_info('" + l_value.source + "')"},(e1)=>{
|
1784
|
$.each(e1.rows,function(i,v){
|
1785
|
var column_name_list = (v.columns).split('|');
|
1786
|
$(column_name_list).each(function(lisy_key, list_value) {
|
1787
|
if( (list_value.toLowerCase() == 'datetime') || (list_value.toLowerCase() == 'date') ){
|
1788
|
sql_command = "SELECT printf(\"%.2f\",AVG(CAST(" + l_value.column + " AS float))) as value FROM " + l_value.source + " WHERE DATE(substr(date,1,4) || '-' || substr(date,6,2) || '-' || substr(date,9,2)) BETWEEN '" + new_start_date + "' AND '" + new_end_date + "'";
|
1789
|
return false;
|
1790
|
}
|
1791
|
});
|
1792
|
});
|
1793
|
|
1794
|
sql_command = (sql_command) ? sql_command : "SELECT printf(\"%.2f\",AVG(CAST(" + l_value.column + " AS float))) as value FROM " + l_value.source;
|
1795
|
|
1796
|
AmgCnt.SQLite.read.get({sql:sql_command, params:[]},(e2)=>{
|
1797
|
var row_value = (e2.row) ? e2.row.value : '';
|
1798
|
new_line_list.push({source:l_value.source,column:l_value.column,value:row_value,trace:l_value.trace,alert:l_value.alert,condition:l_value.condition});
|
1799
|
loop_status--;
|
1800
|
});
|
1801
|
});
|
1802
|
|
1803
|
}else if(filter_type == 'max'){
|
1804
|
|
1805
|
AmgCnt.SQLite.read.all({sql:"select group_concat(name,'|') as columns from pragma_table_info('" + l_value.source + "')"},(e1)=>{
|
1806
|
$.each(e1.rows,function(i,v){
|
1807
|
var column_name_list = (v.columns).split('|');
|
1808
|
$(column_name_list).each(function(lisy_key, list_value) {
|
1809
|
if( (list_value.toLowerCase() == 'datetime') || (list_value.toLowerCase() == 'date') ){
|
1810
|
sql_command = "SELECT MAX(CAST(" + l_value.column + " AS float)) as value FROM " + l_value.source + " WHERE DATE(substr(date,1,4) || '-' || substr(date,6,2) || '-' || substr(date,9,2)) BETWEEN '" + new_start_date + "' AND '" + new_end_date + "'";
|
1811
|
return false;
|
1812
|
}
|
1813
|
});
|
1814
|
});
|
1815
|
|
1816
|
sql_command = (sql_command) ? sql_command : "SELECT MAX(CAST(" + l_value.column + " AS float)) as value FROM " + l_value.source;
|
1817
|
|
1818
|
AmgCnt.SQLite.read.get({sql:sql_command, params:[]},(e2)=>{
|
1819
|
var row_value = (e2.row) ? e2.row.value : '';
|
1820
|
new_line_list.push({source:l_value.source,column:l_value.column,value:row_value,trace:l_value.trace,alert:l_value.alert,condition:l_value.condition});
|
1821
|
loop_status--;
|
1822
|
});
|
1823
|
});
|
1824
|
|
1825
|
}else if(filter_type == 'min'){
|
1826
|
|
1827
|
AmgCnt.SQLite.read.all({sql:"select group_concat(name,'|') as columns from pragma_table_info('" + l_value.source + "')"},(e1)=>{
|
1828
|
$.each(e1.rows,function(i,v){
|
1829
|
var column_name_list = (v.columns).split('|');
|
1830
|
$(column_name_list).each(function(lisy_key, list_value) {
|
1831
|
if( (list_value.toLowerCase() == 'datetime') || (list_value.toLowerCase() == 'date') ){
|
1832
|
sql_command = "SELECT MIN(CAST(" + l_value.column + " AS float)) as value FROM " + l_value.source + " WHERE DATE(substr(date,1,4) || '-' || substr(date,6,2) || '-' || substr(date,9,2)) BETWEEN '" + new_start_date + "' AND '" + new_end_date + "'";
|
1833
|
return false;
|
1834
|
}
|
1835
|
});
|
1836
|
});
|
1837
|
|
1838
|
sql_command = (sql_command) ? sql_command : "SELECT MIN(CAST(" + l_value.column + " AS float)) as value FROM " + l_value.source;
|
1839
|
|
1840
|
AmgCnt.SQLite.read.get({sql:sql_command, params:[]},(e2)=>{
|
1841
|
var row_value = (e2.row) ? e2.row.value : '';
|
1842
|
new_line_list.push({source:l_value.source,column:l_value.column,value:row_value,trace:l_value.trace,alert:l_value.alert,condition:l_value.condition});
|
1843
|
loop_status--;
|
1844
|
});
|
1845
|
});
|
1846
|
|
1847
|
}else{
|
1848
|
|
1849
|
AmgCnt.SQLite.read.all({sql:"select group_concat(name,'|') as columns from pragma_table_info('" + l_value.source + "')"},(e1)=>{
|
1850
|
$.each(e1.rows,function(i,v){
|
1851
|
var column_name_list = (v.columns).split('|');
|
1852
|
$(column_name_list).each(function(lisy_key, list_value) {
|
1853
|
if( (list_value.toLowerCase() == 'datetime') || (list_value.toLowerCase() == 'date') ){
|
1854
|
sql_command = "SELECT " + l_value.column + " as value FROM " + l_value.source + " WHERE DATE(substr(date,1,4) || '-' || substr(date,6,2) || '-' || substr(date,9,2)) BETWEEN '" + new_start_date + "' AND '" + new_end_date + "' ORDER BY " + list_value + " DESC LIMIT 1";
|
1855
|
return false;
|
1856
|
}
|
1857
|
});
|
1858
|
});
|
1859
|
|
1860
|
sql_command = (sql_command) ? sql_command : "SELECT " + l_value.column + " as value FROM " + l_value.source + " ORDER BY _id DESC LIMIT 1";
|
1861
|
|
1862
|
AmgCnt.SQLite.read.get({sql:sql_command, params:[]},(e2)=>{
|
1863
|
var row_value = (e2.row) ? e2.row.value : '';
|
1864
|
new_line_list.push({source:l_value.source,column:l_value.column,value:row_value,trace:l_value.trace,alert:l_value.alert,condition:l_value.condition});
|
1865
|
loop_status--;
|
1866
|
});
|
1867
|
});
|
1868
|
|
1869
|
}
|
1870
|
}else{
|
1871
|
AmgCnt.SQLite.read.get({sql:"PRAGMA table_info('"+l_value.source+"')", params:[]},(e1)=>{
|
1872
|
AmgCnt.SQLite.read.get({sql:"SELECT " + l_value.column + " as value FROM " + l_value.source + " ORDER BY _id DESC LIMIT 1", params:[]},(e2)=>{
|
1873
|
var row_value = (e2.row) ? e2.row.value : '';
|
1874
|
new_line_list.push({source:l_value.source,column:l_value.column,value:row_value,trace:l_value.trace,alert:l_value.alert,condition:l_value.condition});
|
1875
|
loop_status--;
|
1876
|
});
|
1877
|
});
|
1878
|
}
|
1879
|
|
1880
|
}
|
1881
|
});
|
1882
|
}
|
1883
|
|
1884
|
new_group_list.push({
|
1885
|
name:g_value.name,
|
1886
|
line:new_line_list
|
1887
|
});
|
1888
|
}).promise().done(function(){
|
1889
|
kd_send_value_for_update(new_group_list);
|
1890
|
});
|
1891
|
}
|
1892
|
|
1893
|
function kd_send_value_for_update(){
|
1894
|
if(loop_status == 0){
|
1895
|
kd_barChart_Update(new_group_list);
|
1896
|
if(refresh_time > 0){
|
1897
|
setTimeOut_id = setTimeout(kd_filter_update, refresh_time * 1000);
|
1898
|
}
|
1899
|
}else{
|
1900
|
setTimeout(kd_send_value_for_update, 500);
|
1901
|
}
|
1902
|
}
|
1903
|
|
1904
|
function kd_filter_update(){
|
1905
|
|
1906
|
filter_type = (graph_container_id) ? $('#' + graph_container_id).find('#' + graph_container_id + '_filterType').val() : '';
|
1907
|
filter_date_start = (graph_container_id) ? $('#' + graph_container_id).find('#' + graph_container_id + '_dateStart').val() : '';
|
1908
|
filter_date_end = (graph_container_id) ? $('#' + graph_container_id).find('#' + graph_container_id + '_dateEnd').val() : '';
|
1909
|
kd_barchart_data_loop();
|
1910
|
}
|
1911
|
|
1912
|
if(refresh_time > 0){
|
1913
|
setTimeout(kd_filter_update, refresh_time * 1000);
|
1914
|
}
|
1915
|
}
|
1916
|
};
|