Added the new item. Only to db and js creation and update.
This commit is contained in:
Arturo Gonzalez
parent
53bb048673
commit
675426c3e0
|
|
@ -379,6 +379,12 @@ function update_button_palette_callback() {
|
|||
if (values['type_percentile'] == 'bubble') {
|
||||
setPercentileBubble(idItem, values);
|
||||
}
|
||||
else if (values['type_percentile'] == 'circular_progress_bar') {
|
||||
setPercentileCircular(idItem, values);
|
||||
}
|
||||
else if (values['type_percentile'] == 'interior_circular_progress_bar') {
|
||||
setPercentileInteriorCircular(idItem, values);
|
||||
}
|
||||
else {
|
||||
setPercentileBar(idItem, values);
|
||||
}
|
||||
|
|
@ -626,7 +632,8 @@ function readFields() {
|
|||
values['width_module_graph'] = $("input[name=width_module_graph]").val();
|
||||
values['height_module_graph'] = $("input[name=height_module_graph]").val();
|
||||
values['event_max_time_row'] = $("select[name=event_max_time_row]").val();
|
||||
values['type_percentile'] = $("input[name=type_percentile]:checked").val();
|
||||
values['type_percentile'] = $("select[name=type_percentile]").val();
|
||||
values['percentile_color'] = $("input[name='percentile_color']").val();
|
||||
values['value_show'] = $("input[name=value_show]:checked").val();
|
||||
values['enable_link'] = $("input[name=enable_link]").is(':checked') ? 1 : 0;
|
||||
values['id_group'] = $("select[name=group]").val();
|
||||
|
|
@ -1274,16 +1281,13 @@ function loadFieldsFromDB(item) {
|
|||
$("input[name=width_module_graph]").val(val);
|
||||
if (key == 'height_module_graph')
|
||||
$("input[name=height_module_graph]").val(val);
|
||||
if (key == 'type_percentile')
|
||||
$("select[name=type_percentile]").val(val);
|
||||
|
||||
if (key == 'type_percentile') {
|
||||
if (val == 'percentile') {
|
||||
$("input[name=type_percentile][value=percentile]")
|
||||
.attr("checked", "checked");
|
||||
}
|
||||
else {
|
||||
$("input[name=type_percentile][value=bubble]")
|
||||
.attr("checked", "checked");
|
||||
}
|
||||
if (key == 'percentile_color') {
|
||||
$("input[name='percentile_color']").val(val);
|
||||
$("#percentile_item_row_5 .ColorPickerDivSample")
|
||||
.css('background-color', val);
|
||||
}
|
||||
|
||||
if (key == 'value_show') {
|
||||
|
|
@ -1948,6 +1952,142 @@ function setPercentileBar(id_data, values) {
|
|||
});
|
||||
}
|
||||
|
||||
function setPercentileCircular (id_data, values) {
|
||||
metaconsole = $("input[name='metaconsole']").val();
|
||||
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
url_hack_metaconsole = '../../';
|
||||
}
|
||||
|
||||
max_percentile = values['max_percentile'];
|
||||
width_percentile = values['width_percentile'];
|
||||
|
||||
var parameter = Array();
|
||||
|
||||
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
|
||||
parameter.push ({name: "action", value: "get_module_value"});
|
||||
parameter.push ({name: "id_element", value: id_data});
|
||||
parameter.push ({name: "value_show", value: values['value_show']});
|
||||
parameter.push ({name: "id_visual_console",
|
||||
value: id_visual_console});
|
||||
jQuery.ajax({
|
||||
url: get_url_ajax(),
|
||||
data: parameter,
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
module_value = data['value'];
|
||||
max_percentile = data['max_percentile'];
|
||||
width_percentile = data['width_percentile'];
|
||||
unit_text = false;
|
||||
|
||||
if ((data['unit_text'] != false) || typeof(data['unit_text']) != 'boolean') {
|
||||
unit_text = data['unit_text'];
|
||||
}
|
||||
|
||||
colorRGB = data['colorRGB'];
|
||||
|
||||
if ( max_percentile > 0)
|
||||
var percentile = Math.round(module_value / max_percentile * 100);
|
||||
else
|
||||
var percentile = 100;
|
||||
|
||||
if (unit_text == false && typeof(unit_text) == 'boolean') {
|
||||
value_text = percentile + "%";
|
||||
}
|
||||
else {
|
||||
value_text = module_value + " " + unit_text;
|
||||
}
|
||||
|
||||
$("#" + id_data + " img").attr('src', 'images/console/signes/circular-progress-bar.png');
|
||||
if($('#text-width_percentile').val() == 0){
|
||||
$("#" + id_data + " img").css('width', '130px');
|
||||
$("#" + id_data + " img").css('height', '130px');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
|
||||
$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
|
||||
}
|
||||
|
||||
if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
|
||||
$('#'+id_data+ ' img').css('margin-top', parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);
|
||||
}
|
||||
else{
|
||||
$('#'+id_data+ ' img').css('margin-left',parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setPercentileInteriorCircular (id_data, values) {
|
||||
metaconsole = $("input[name='metaconsole']").val();
|
||||
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
url_hack_metaconsole = '../../';
|
||||
}
|
||||
|
||||
max_percentile = values['max_percentile'];
|
||||
width_percentile = values['width_percentile'];
|
||||
|
||||
var parameter = Array();
|
||||
|
||||
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
|
||||
parameter.push ({name: "action", value: "get_module_value"});
|
||||
parameter.push ({name: "id_element", value: id_data});
|
||||
parameter.push ({name: "value_show", value: values['value_show']});
|
||||
parameter.push ({name: "id_visual_console",
|
||||
value: id_visual_console});
|
||||
jQuery.ajax({
|
||||
url: get_url_ajax(),
|
||||
data: parameter,
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
module_value = data['value'];
|
||||
max_percentile = data['max_percentile'];
|
||||
width_percentile = data['width_percentile'];
|
||||
unit_text = false;
|
||||
|
||||
if ((data['unit_text'] != false) || typeof(data['unit_text']) != 'boolean') {
|
||||
unit_text = data['unit_text'];
|
||||
}
|
||||
|
||||
colorRGB = data['colorRGB'];
|
||||
|
||||
if ( max_percentile > 0)
|
||||
var percentile = Math.round(module_value / max_percentile * 100);
|
||||
else
|
||||
var percentile = 100;
|
||||
|
||||
if (unit_text == false && typeof(unit_text) == 'boolean') {
|
||||
value_text = percentile + "%";
|
||||
}
|
||||
else {
|
||||
value_text = module_value + " " + unit_text;
|
||||
}
|
||||
|
||||
$("#" + id_data + " img").attr('src', 'images/console/signes/circular-progress-bar-interior.png');
|
||||
if($('#text-width_percentile').val() == 0){
|
||||
$("#" + id_data + " img").css('width', '130px');
|
||||
$("#" + id_data + " img").css('height', '130px');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
|
||||
$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
|
||||
}
|
||||
|
||||
if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
|
||||
$('#'+id_data+ ' img').css('margin-top', parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);
|
||||
}
|
||||
else{
|
||||
$('#'+id_data+ ' img').css('margin-left',parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setEventsBar(id_data, values) {
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
|
|
@ -2396,9 +2536,77 @@ function createItem(type, values, id_data) {
|
|||
|
||||
setPercentileBar(id_data, values);
|
||||
}
|
||||
else if (values['type_percentile'] == 'circular_progress_bar') {
|
||||
if(values['label_position'] == 'up'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'down'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
else if(values['label_position'] == 'right'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:left;" />' +
|
||||
'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
else if(values['label_position'] == 'left'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:right;"/>' +
|
||||
'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
setPercentileCircular(id_data, values);
|
||||
}
|
||||
else if (values['type_percentile'] == 'interior_circular_progress_bar') {
|
||||
if(values['label_position'] == 'up'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'down'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
else if(values['label_position'] == 'right'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:left;" />' +
|
||||
'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
else if(values['label_position'] == 'left'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:right;"/>' +
|
||||
'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
setPercentileInteriorCircular(id_data, values);
|
||||
}
|
||||
else {
|
||||
|
||||
|
||||
if(values['label_position'] == 'up'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -118,6 +118,7 @@ $id_custom_graph = get_parameter('id_custom_graph', null);
|
|||
$border_width = (int)get_parameter('border_width', 0);
|
||||
$border_color = get_parameter('border_color', '');
|
||||
$fill_color = get_parameter('fill_color', '');
|
||||
$percentile_color = get_parameter('percentile_color', '');
|
||||
$width_box = (int)get_parameter('width_box', 0);
|
||||
$height_box = (int)get_parameter('height_box', 0);
|
||||
$line_start_x = (int)get_parameter('line_start_x', 0);
|
||||
|
|
@ -602,6 +603,12 @@ switch ($action) {
|
|||
if ($type_percentile == 'percentile') {
|
||||
$values['type'] = PERCENTILE_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'circular_progress_bar') {
|
||||
$values['type'] = CIRCULAR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'interior_circular_progress_bar') {
|
||||
$values['type'] = CIRCULAR_INTERIOR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'bubble') {
|
||||
$values['type'] = PERCENTILE_BUBBLE;
|
||||
}
|
||||
|
|
@ -611,6 +618,8 @@ switch ($action) {
|
|||
if (($value_show == 'percent') ||
|
||||
($value_show == 'value'))
|
||||
$values['image'] = $value_show;
|
||||
|
||||
$values['border_color'] = $percentile_color;
|
||||
}
|
||||
break;
|
||||
case 'icon':
|
||||
|
|
@ -781,6 +790,13 @@ switch ($action) {
|
|||
elseif ($elementFields['type'] == PERCENTILE_BUBBLE) {
|
||||
$elementFields['type_percentile'] = 'bubble';
|
||||
}
|
||||
elseif ($elementFields['type'] == CIRCULAR_PROGRESS_BAR) {
|
||||
$elementFields['type_percentile'] = 'circular_progress_bar';
|
||||
}
|
||||
elseif ($elementFields['type'] == CIRCULAR_INTERIOR_PROGRESS_BAR) {
|
||||
$elementFields['type_percentile'] = 'interior_circular_progress_bar';
|
||||
}
|
||||
$elementFields['percentile_color'] = $elementFields['percentile_color'];
|
||||
break;
|
||||
|
||||
case 'module_graph':
|
||||
|
|
@ -934,9 +950,16 @@ switch ($action) {
|
|||
if ($type_percentile == 'percentile') {
|
||||
$values['type'] = PERCENTILE_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'circular_progress_bar') {
|
||||
$values['type'] = CIRCULAR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'interior_circular_progress_bar') {
|
||||
$values['type'] = CIRCULAR_INTERIOR_PROGRESS_BAR;
|
||||
}
|
||||
else {
|
||||
$values['type'] = PERCENTILE_BUBBLE;
|
||||
}
|
||||
$values['border_color'] = $percentile_color;
|
||||
$values['image'] = $value_show; //Hack to save it show percent o value.
|
||||
$values['width'] = $width_percentile;
|
||||
$values['height'] = $max_percentile;
|
||||
|
|
@ -977,7 +1000,7 @@ switch ($action) {
|
|||
}
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
$idData = db_process_sql_insert('tlayout_data', $values);
|
||||
|
||||
$return = array();
|
||||
|
|
|
|||
|
|
@ -197,6 +197,8 @@ define('SERVICE', 10); //Enterprise Item.
|
|||
define('GROUP_ITEM', 11);
|
||||
define('BOX_ITEM', 12);
|
||||
define('LINE_ITEM', 13);
|
||||
define('CIRCULAR_PROGRESS_BAR', 15);
|
||||
define('CIRCULAR_INTERIOR_PROGRESS_BAR', 16);
|
||||
//Some styles
|
||||
define('MIN_WIDTH', 300);
|
||||
define('MIN_HEIGHT', 120);
|
||||
|
|
|
|||
|
|
@ -408,23 +408,22 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
__('Max value') . '</td>
|
||||
<td align="left">' . html_print_input_text('max_percentile', 0, '', 3, 5, true) . '</td>';
|
||||
|
||||
$percentile_type = array('percentile' => __('Percentile'), 'bubble' => __('Bubble'), 'circular_progress_bar' => __('Circular porgress bar'), 'interior_circular_progress_bar' => __('Circular progress bar (interior)'));
|
||||
$percentile_value = array('percent' => __('Percent'), 'value' => __('Value'));
|
||||
if (is_metaconsole()){
|
||||
$form_items['percentile_item_row_3'] = array();
|
||||
$form_items['percentile_item_row_3']['items'] = array('percentile_bar', 'percentile_item', 'datos');
|
||||
$form_items['percentile_item_row_3']['html'] = '<td align="left">' .
|
||||
__('Type') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_radio_button_extended('type_percentile', 'percentile', ('Percentile'), 'percentile', false, '', 'style="float: left;"', true) .
|
||||
html_print_radio_button_extended('type_percentile', 'bubble', ('Bubble'), 'percentile', false, '', 'style="float: left;"', true) .
|
||||
html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true, false, false, '', false, 'style="float: left;"') .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['percentile_item_row_4'] = array();
|
||||
$form_items['percentile_item_row_4']['items'] = array('percentile_bar', 'percentile_item', 'datos');
|
||||
$form_items['percentile_item_row_4']['html'] = '<td align="left">' . __('Value to show') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_radio_button_extended('value_show', 'percent', ('Percent'), 'value', false, '', 'style="float: left;"', true) .
|
||||
html_print_radio_button_extended('value_show', 'value', ('Value'), 'value', false, '', 'style="float: left;"', true) .
|
||||
html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true, false, false, '', false, 'style="float: left;"') .
|
||||
'</td>';
|
||||
}
|
||||
else{
|
||||
|
|
@ -433,20 +432,26 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$form_items['percentile_item_row_3']['html'] = '<td align="left">' .
|
||||
__('Type') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_radio_button_extended('type_percentile', 'percentile', ('Percentile'), 'percentile', false, '', '', true) .
|
||||
html_print_radio_button_extended('type_percentile', 'bubble', ('Bubble'), 'percentile', false, '', '', true) .
|
||||
html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true) .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['percentile_item_row_4'] = array();
|
||||
$form_items['percentile_item_row_4']['items'] = array('percentile_bar', 'percentile_item', 'datos');
|
||||
$form_items['percentile_item_row_4']['html'] = '<td align="left">' . __('Value to show') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_radio_button_extended('value_show', 'percent', ('Percent'), 'value', false, '', '', true) .
|
||||
html_print_radio_button_extended('value_show', 'value', ('Value'), 'value', false, '', '', true) .
|
||||
html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true) .
|
||||
'</td>';
|
||||
}
|
||||
|
||||
$form_items['percentile_item_row_5'] = array();
|
||||
$form_items['percentile_item_row_5']['items'] = array('percentile_bar', 'percentile_item', 'datos');
|
||||
$form_items['percentile_item_row_5']['html'] = '<td align="left">' . __('Color') . ui_print_help_tip (
|
||||
__("Only for circular percentile items."), true) . '</td>
|
||||
<td align="left">' .
|
||||
html_print_input_text_extended ('percentile_color', '#ffffff',
|
||||
'text-percentile_color', '', 7, 7, false, '',
|
||||
'class="percentile_color"', true) .
|
||||
'</td>';
|
||||
|
||||
$form_items['period_row'] = array();
|
||||
$form_items['period_row']['items'] = array('module_graph', 'simple_value', 'datos');
|
||||
|
|
@ -614,6 +619,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$(".border_color").attachColorPicker();
|
||||
$(".fill_color").attachColorPicker();
|
||||
$(".line_color").attachColorPicker();
|
||||
$(".percentile_color").attachColorPicker();
|
||||
|
||||
$("input[name=radio_choice]").change(function(){
|
||||
$('#count_items').html(1);
|
||||
|
|
|
|||
Loading…
Reference in New Issue