Added the new item. Only to db and js creation and update.

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 (key == 'percentile_color') {
-					if (val == 'percentile') {
+					$("input[name='percentile_color']").val(val);
-						$("input[name=type_percentile][value=percentile]")
+					$("#percentile_item_row_5 .ColorPickerDivSample")
-							.attr("checked", "checked");
+						.css('background-color', val);
-					}
-					else {
-						$("input[name=type_percentile][value=bubble]")
-							.attr("checked", "checked");
-					}
 				}
 
 				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>' +

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();

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);

pandora_console/include/functions_visual_map_editor.php

@@ -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_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true, false, false, '', false, 'style="float: left;"') .
-					html_print_radio_button_extended('type_percentile', 'bubble', ('Bubble'), 'percentile', false, '', 'style="float: left;"', 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, '', 'style="float: left;"', true) .
+					html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true, false, false, '', false, 'style="float: left;"') .
-					html_print_radio_button_extended('value_show', 'value', ('Value'), 'value', false, '', 'style="float: left;"', true) .
 					'</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_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true) .
-					html_print_radio_button_extended('type_percentile', 'bubble', ('Bubble'), 'percentile', false, '', '', 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_select($percentile_value, 'value_show', 'percent', '', '', '', true) .
-					html_print_radio_button_extended('value_show', 'value', ('Value'), 'value', false, '', '', 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);