diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.js b/pandora_console/godmode/reporting/visual_console_builder.editor.js index 2c98fb5493..1ebefe58c3 100755 --- a/pandora_console/godmode/reporting/visual_console_builder.editor.js +++ b/pandora_console/godmode/reporting/visual_console_builder.editor.js @@ -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 = $('
' + + '
' + values['label'] + '
' + + '' + + '
' + ); + } + else if(values['label_position'] == 'down'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + + } + else if(values['label_position'] == 'right'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + + } + else if(values['label_position'] == 'left'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + + } + + setPercentileCircular(id_data, values); + } + else if (values['type_percentile'] == 'interior_circular_progress_bar') { + if(values['label_position'] == 'up'){ + item = $('
' + + '
' + values['label'] + '
' + + '' + + '
' + ); + } + else if(values['label_position'] == 'down'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + + } + else if(values['label_position'] == 'right'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + + } + else if(values['label_position'] == 'left'){ + item = $('
' + + '' + + '
' + values['label'] + '
' + + '
' + ); + + } + + setPercentileInteriorCircular(id_data, values); + } else { - - if(values['label_position'] == 'up'){ item = $('
' + '
' + values['label'] + '
' + diff --git a/pandora_console/images/console/signes/circular-progress-bar-interior.png b/pandora_console/images/console/signes/circular-progress-bar-interior.png new file mode 100644 index 0000000000..221c626f25 Binary files /dev/null and b/pandora_console/images/console/signes/circular-progress-bar-interior.png differ diff --git a/pandora_console/images/console/signes/circular-progress-bar.png b/pandora_console/images/console/signes/circular-progress-bar.png new file mode 100644 index 0000000000..640a8050b4 Binary files /dev/null and b/pandora_console/images/console/signes/circular-progress-bar.png differ diff --git a/pandora_console/include/ajax/visual_console_builder.ajax.php b/pandora_console/include/ajax/visual_console_builder.ajax.php index e854a31c49..4493e21935 100755 --- a/pandora_console/include/ajax/visual_console_builder.ajax.php +++ b/pandora_console/include/ajax/visual_console_builder.ajax.php @@ -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(); diff --git a/pandora_console/include/constants.php b/pandora_console/include/constants.php index f039a90504..08c3fc55da 100644 --- a/pandora_console/include/constants.php +++ b/pandora_console/include/constants.php @@ -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); diff --git a/pandora_console/include/functions_visual_map_editor.php b/pandora_console/include/functions_visual_map_editor.php index 54db2d8008..49945a30f4 100755 --- a/pandora_console/include/functions_visual_map_editor.php +++ b/pandora_console/include/functions_visual_map_editor.php @@ -408,23 +408,22 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) { __('Max value') . ' ' . html_print_input_text('max_percentile', 0, '', 3, 5, true) . ''; + $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'] = '' . __('Type') . ' ' . - 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;"') . ''; - $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'] = '' . __('Value to show') . ' ' . - 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;"') . ''; } else{ @@ -433,20 +432,26 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) { $form_items['percentile_item_row_3']['html'] = '' . __('Type') . ' ' . - 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) . ''; - $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'] = '' . __('Value to show') . ' ' . - 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) . ''; } + $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'] = '' . __('Color') . ui_print_help_tip ( + __("Only for circular percentile items."), true) . ' + ' . + html_print_input_text_extended ('percentile_color', '#ffffff', + 'text-percentile_color', '', 7, 7, false, '', + 'class="percentile_color"', true) . + ''; $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);