Project

General

Profile

การสร้าง Aimagin Connect components » bar-chart-v14.js

ตัวอย่าง bar chart widget - Sornakarach Nakdee (กระบี่), 24 Jan 2020 12:24

 
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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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
};
(4-4/4)