Added a new item to the visual console

Former-commit-id: 6dcb8c9500e12932775d929646f7fdc676ee94fa

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -145,7 +145,9 @@ function visual_map_main() {
 			}
 					
 		});
-		
+
+		bindColorRangeEvents();
+
 			draw_lines(lines, 'background', true);
 
 			draw_user_lines("", 0, 0, 0 , 0, 0, true);
@@ -651,6 +653,9 @@ function update_button_palette_callback() {
 			var image = values['image'] + ".png";
 			set_image("image", idItem, image);
 			break;
+			case "color_cloud":
+				setColorCloud(id_visual_console, idItem);
+				break;
 		default:
 		if($('input[name=width]').val() == ''){
 		alert('Undefined width');
@@ -813,6 +818,25 @@ function readFields() {
 	values['clock_animation'] = $("select[name=clock_animation]").val();
 	values['show_last_value'] = $("select[name=last_value]").val();
 	
+	// Color Cloud values
+	if (selectedItem == "color_cloud" || creationItem == "color_cloud") {
+		var diameter = $("input[name=diameter]").val();
+		values["diameter"] = values["width"] = values["height"] = diameter;
+		var defaultColor = $("input[name=default_color]").val();
+		values["default_color"] = defaultColor;
+
+		// Ranges
+		$('input[name="color_range_from_values[]"]').each(function (index, element) {
+			values["color_range_from_values[" + index + "]"] = $(element).val();
+		});
+		$('input[name="color_range_to_values[]"]').each(function (index, element) {
+			values["color_range_to_values[" + index + "]"] = $(element).val();
+		});
+		$('input[name="color_range_color_values[]"]').each(function (index, element) {
+			values["color_range_colors[" + index + "]"] = $(element).val();
+		});
+	}
+
 	if (is_metaconsole()) {
 		values['metaconsole'] = 1;
 		values['id_agent'] = $("#hidden-agent").val();
@@ -1179,6 +1203,7 @@ function toggle_item_palette() {
 		activeToolboxButton('line_item', true);
 		activeToolboxButton('auto_sla_graph', true);
 		activeToolboxButton('donut_graph', true);
+		activeToolboxButton('color_cloud', true);
 
 		if (typeof(enterprise_activeToolboxButton) == 'function') {
 			enterprise_activeToolboxButton(true);
@@ -1209,6 +1234,7 @@ function toggle_item_palette() {
 		activeToolboxButton('group_item', false);
 		activeToolboxButton('box_item', false);
 		activeToolboxButton('line_item', false);
+		activeToolboxButton('color_cloud', false);
 
 		activeToolboxButton('copy_item', false);
 		activeToolboxButton('edit_item', false);
@@ -1615,6 +1641,26 @@ function loadFieldsFromDB(item) {
 						.css('background-color', val);
 				}
 
+				// Color Cloud values
+				if (key === "diameter") $("input[name='diameter']").val(val);
+				if (key === "dynamic_data") {
+					if (val == null) val = {};
+					var defaultColor = val["default_color"] || "#FFFFFF";
+					$('input[name="default_color"]').val(defaultColor);
+					
+					var colorRanges = val["color_ranges"] || [];
+					var $colorRangeCreationTable = $("table.color-range-creation");
+
+					if ($colorRangeCreationTable.length > 0) {
+						colorRanges.forEach(function (range) {
+							$colorRangeTable = getColorRangeTable(
+								$colorRangeCreationTable,
+								range
+							);
+							$colorRangeTable.insertBefore($colorRangeCreationTable);
+						});
+					}
+				}
 			});
 			
 				$('#count_items').html(1);		
@@ -1896,6 +1942,14 @@ function hiddenFields(item) {
 	$("#line_case").css('display', 'none');
 	$("#line_case." + item).css('display', '');
 
+	// Color cloud rows
+	$("#color_cloud_diameter_row").hide();
+	$("#color_cloud_diameter_row." + item).show();
+	$("#color_cloud_def_color_row").hide();
+	$("#color_cloud_def_color_row." + item).show();
+	$("#color_cloud_color_ranges_row").hide();
+	$("#color_cloud_color_ranges_row." + item).show();
+
 	$("input[name='radio_choice']").trigger('change');
 
 	if (typeof(enterprise_hiddenFields) == 'function') {
@@ -1949,6 +2003,11 @@ function cleanFields(item) {
 	$("select[name='timezone']").val('Europe/Madrid');
 	$("select[name='clock_animation']").val('analogic_1');
 
+	// Color cloud fields
+	$("input[name='diameter']").val(100);
+	$("input[name='default_color']").val("#FFFFFF");
+	// Clean dynamic fields
+	$("table.color-range:not(table.color-range-creation)").remove();
 
 	$("#preview").empty();
 
@@ -2717,6 +2776,43 @@ function setPercentileBubble(id_data, values) {
 	});
 }
 
+function setColorCloud (visualConsoleId, dataId, $container) {
+	$container = $container || $("#" + dataId + ".item.color_cloud");
+	if ($container.length === 0) return;
+
+	var $spinner = $container.find("#image_" + dataId);
+	var $svg = $container.children("svg");
+
+	if ($svg.length === 0) {
+		$svg = $("<svg />");
+		$container.append($svg);
+	}
+	
+	if ($spinner.length > 0) $svg.hide();
+
+	jQuery
+		.post(
+			get_url_ajax(),
+			{
+				"page": "include/ajax/visual_console_builder.ajax",
+				"action": "get_color_cloud",
+				"id_visual_console": visualConsoleId,
+				"id_element": dataId
+			},
+			null,
+			"html"
+		)
+		.done(function (data) {
+			var $newSvg = $(data);
+			// Check if $newSvg contains a svg
+			if ($newSvg.is("svg")) $svg.replaceWith($newSvg);
+		})
+		.always(function () {
+			if ($spinner.length > 0) $spinner.remove();
+			$svg.show();
+		});
+}
+
 function get_image_url(img_src) {
 	var img_url= null;
 	var parameter = Array();
@@ -2765,9 +2861,6 @@ function set_color_line_status(lines, id_data, values) {
 
 }
 
-
-
-
 function createItem(type, values, id_data) {
 	var sizeStyle = '';
 	var imageSize = '';
@@ -2775,7 +2868,6 @@ function createItem(type, values, id_data) {
 
 	metaconsole = $("input[name='metaconsole']").val();
 
-
 	switch (type) {
 		case 'box_item':
 		
@@ -3586,6 +3678,15 @@ function createItem(type, values, id_data) {
 			var image = values['image'] + ".png";
 			set_image("image", id_data, image);
 			break;
+		case 'color_cloud':
+			var diameter = values["diameter"] || values["width"] || 100;
+
+			item = $('<div id="' + id_data + '" class="item color_cloud" style="text-align: left; position: absolute; width: ' + diameter  + 'px; height: ' + diameter + 'px; top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+				'<img id="image_' + id_data + '" class="image" src="images/spinner.gif" width="' + diameter  + '" height="' + diameter + '" /><br />' +
+				'</div>'
+			);
+			setColorCloud(id_visual_console, id_data, item);
+			break;
 		default:
 			//Maybe create in any Enterprise item.
 			if (typeof(enterprise_createItem) == 'function') {
@@ -3821,6 +3922,15 @@ function updateDB_visual(type, idElement , values, event, top, left) {
 				}
 			}
 			
+			break;
+		case 'color_cloud':
+			var diameter = values["diameter"];
+			var $container = $("#" + idElement + ".item.color_cloud");
+			$container
+				.children("svg")
+					.attr("width", diameter)
+					.attr("height", diameter);
+			setColorCloud(id_visual_console, idElement, $container);
 			break;
 		case 'background':
 			if(values['width'] == '0' || values['height'] == '0'){
@@ -4276,6 +4386,15 @@ function eventsItems(drag) {
 				activeToolboxButton('delete_item', true);
 				activeToolboxButton('show_grid', false);
 			}
+			if ($(divParent).hasClass('color_cloud')) {
+				creationItem = null;
+				selectedItem = 'color_cloud';
+				idItem = $(divParent).attr('id');
+				activeToolboxButton('copy_item', true);
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+				activeToolboxButton('show_grid', false);
+			}
 			if ($(divParent).hasClass('handler_start')) {
 				idItem = $(divParent).attr('id')
 					.replace("handler_start_", "");
@@ -4463,6 +4582,9 @@ function eventsItems(drag) {
 			if ($(event.target).hasClass('clock')) {
 				selectedItem = 'clock';
 			}
+			if ($(event.target).hasClass('color_cloud')) {
+				selectedItem = 'color_cloud';
+			}
 			if ($(event.target).hasClass('handler_start')) {
 				selectedItem = 'handler_start';
 			}
@@ -4801,6 +4923,10 @@ function click_button_toolbox(id) {
 			toolbuttonActive = creationItem = 'line_item';
 			toggle_item_palette();
 			break;
+		case 'color_cloud':
+			toolbuttonActive = creationItem = 'color_cloud';
+			toggle_item_palette();
+			break;
 		case 'copy_item':
 			click_copy_item_callback();
 			break;
@@ -4835,6 +4961,7 @@ function click_button_toolbox(id) {
 				activeToolboxButton('group_item', false);
 				activeToolboxButton('auto_sla_graph', false);
 				activeToolboxButton('donut_graph', false);
+				activeToolboxButton('color_cloud', false);
 				activeToolboxButton('copy_item', false);
 				activeToolboxButton('edit_item', false);
 				activeToolboxButton('delete_item', false);
@@ -4868,6 +4995,7 @@ function click_button_toolbox(id) {
 				activeToolboxButton('group_item', true);
 				activeToolboxButton('auto_sla_graph', true);
 				activeToolboxButton('donut_graph', true);
+				activeToolboxButton('color_cloud', true);
 			}
 			break;
 		case 'save_visualmap':
@@ -5214,3 +5342,96 @@ function onLinkedMapStatusCalculationTypeChange (event) {
 	var value = event.target.value || "default";
 	linkedMapStatusCalculationTypeChanged($linkedMapStatusCalcRow, value);
 }
+
+function validateColorRange (values) {
+	return (
+		(values["from_value"].length > 0 || values["to_value"].length > 0) &&
+		values["color"].length > 0 &&
+		!Number.isNaN(Number.parseFloat(values["from_value"])) &&
+		!Number.isNaN(Number.parseFloat(values["to_value"]))
+	)
+}
+
+function getColorRangeTable ($colorRangeCreationTable, values) {
+	var $colorRangeTable = $colorRangeCreationTable.clone();
+	$colorRangeTable.attr("id", "").removeClass("color-range-creation");
+
+	// ref inputs
+	var $fromValueInput = $colorRangeTable.find('input[name="from_value_new"]');
+	var $toValueInput = $colorRangeTable.find('input[name="to_value_new"]');
+	var $colorInput = $colorRangeTable.find('input[name="color_new"]');
+
+	// Override input values
+	if (values != null) {
+		if (values["from_value"] != null) {
+			$fromValueInput.val(values["from_value"]);
+		}
+		if (values["to_value"] != null) {
+			$toValueInput.val(values["to_value"]);
+		}
+		if (values["color"] != null) {
+			$colorInput.val(values["color"]);
+		}
+	}
+
+	// Change the name of the new inputs (and clear the id attr)
+	$fromValueInput.attr("name", "color_range_from_values[]").attr("id", "");
+	$toValueInput.attr("name", "color_range_to_values[]").attr("id", "");
+	$colorInput.attr("name", "color_range_color_values[]").attr("id", "");
+
+	// Change the add button
+	$colorRangeAddBtn = $colorRangeTable.find("a.color-range-add");
+	if ($colorRangeAddBtn.length > 0) {
+		$colorRangeAddBtn
+			.removeClass("color-range-add")
+			.addClass("color-range-delete")
+			.click(function (e) {
+				e.preventDefault();
+				e.stopPropagation();
+				$colorRangeTable.remove();
+			});
+			
+			// Change img
+			$colorRangeAddImg = $colorRangeAddBtn.children("img");
+			if ($colorRangeAddImg.length > 0) {
+				$colorRangeAddImg.prop("src", "images/delete.png");
+			}
+	}
+
+	return $colorRangeTable;
+}
+
+function handleColorRangeCreation (event) {
+	event.preventDefault();
+	event.stopPropagation();
+
+	var $creationBtn = $(event.target);
+	var $colorRangeCreationTable = $creationBtn.parents("table.color-range-creation");
+
+	// ref inputs
+	var $fromValueInput = $colorRangeCreationTable.find('input[name="from_value_new"]');
+	var $toValueInput = $colorRangeCreationTable.find('input[name="to_value_new"]');
+	var $colorInput = $colorRangeCreationTable.find('input[name="color_new"]');
+
+	// TODO: Show info about validation
+	var values = {
+		"from_value": $fromValueInput.val(),
+		"to_value": $toValueInput.val(),
+		"color": $colorInput.val()
+	}
+	if (!validateColorRange(values)) return;
+
+	var $newColorRangeTable = getColorRangeTable($colorRangeCreationTable);
+	
+	// Clear creation inputs
+	$fromValueInput.val("");
+	$toValueInput.val("");
+	$colorInput.val("#FFFFFF");
+
+	// Add the new table
+	$newColorRangeTable.insertBefore($colorRangeCreationTable);
+}
+
+function bindColorRangeEvents () {
+	$("a.color-range-add").click(handleColorRangeCreation);
+}

pandora_console/godmode/reporting/visual_console_builder.elements.php

@@ -202,6 +202,11 @@ foreach ($layoutDatas as $layoutData) {
 				html_print_image('images/line_item.png', true,
 					array('title' => __('Line')));
 			break;
+		case COLOR_CLOUD:
+			$table->data[$i + 1]['icon'] =
+				html_print_image('images/color_cloud_item.png', true,
+					array('title' => __('Color cloud')));
+			break;
 		default:
 			if (enterprise_installed()) {
 				$table->data[$i + 1]['icon'] =
@@ -259,6 +264,11 @@ foreach ($layoutDatas as $layoutData) {
 			// hasn't the width and height.
 			$table->data[$i + 1][2] = '';
 			break;
+		case COLOR_CLOUD:
+			$table->data[$i + 1][2] = html_print_input_text('width_' . $idLayoutData, $layoutData['width'], '', 2, 5, true) .
+					' x ' .
+					html_print_input_text('height_' . $idLayoutData, $layoutData['width'], '', 2, 5, true);
+			break;
 		default:
 			$table->data[$i + 1][2] = html_print_input_text('width_' . $idLayoutData, $layoutData['width'], '', 2, 5, true) .
 				' x ' .
@@ -284,6 +294,7 @@ foreach ($layoutDatas as $layoutData) {
 	switch ($layoutData['type']) {
 		case BOX_ITEM:
 		case LINE_ITEM:
+		case COLOR_CLOUD:
 			$table->data[$i + 1][4] = "";
 			break;
 		default:
@@ -485,6 +496,7 @@ foreach ($layoutDatas as $layoutData) {
 		case LINE_ITEM:
 		case BOX_ITEM:
 		case AUTO_SLA_GRAPH:
+		case COLOR_CLOUD:
 			$table->data[$i + 2][4] = "";
 			break;
 		default:

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -15,9 +15,7 @@
 // Login check
 global $config;
 
-check_login ();
+check_login();
-
-
 
 $get_image_path_status = get_parameter('get_image_path_status', 0);
 if ($get_image_path_status){
@@ -165,6 +163,12 @@ $timezone = get_parameter('timezone', 'Europe/Madrid');
 
 $show_last_value = get_parameter('show_last_value', null);
 
+$diameter = (int) get_parameter("diameter", $width);
+$default_color = get_parameter("default_color", "#FFFFFF");
+$color_range_from_values = get_parameter("color_range_from_values", array());
+$color_range_to_values = get_parameter("color_range_to_values", array());
+$color_range_colors = get_parameter("color_range_colors", array());
+
 switch ($action) {
 	case 'get_font':
 		$return = array();
@@ -538,7 +542,10 @@ switch ($action) {
 		echo json_encode($return);
 		break;
 	
-	
+	case 'get_color_cloud':
+		$layoutData = db_get_row_filter('tlayout_data', array('id' => $id_element));
+		echo visual_map_get_color_cloud_element($layoutData);
+		break;
 	
 	case 'update':
 	case 'move':
@@ -835,6 +842,36 @@ switch ($action) {
 							$values['fill_color'] = $fill_color;
 						}
 						break;
+					case "color_cloud":
+						$values['width'] = $diameter;
+						$values['height'] = $diameter;
+						// Fill Color Cloud values
+						$extra = array(
+							"default_color" => $default_color,
+							"color_ranges" => array()
+						);
+
+						$num_ranges = count($color_range_colors);
+						for ($i = 0; $i < $num_ranges; $i++) {
+							if (
+								!isset($color_range_from_values[$i]) ||
+								!isset($color_range_to_values[$i]) ||
+								!isset($color_range_colors[$i])
+							) {
+								return;
+							}
+
+							$extra["color_ranges"][] = array(
+								"from_value" => (float) $color_range_from_values[$i],
+								"to_value" => (float) $color_range_to_values[$i],
+								"color" => $color_range_colors[$i] // already html encoded
+							);
+						}
+
+						// Yes, we are using the label to store the extra info.
+						// Sorry not sorry.
+						$values["label"] = json_encode($extra);
+						break;
 					default:
 						if (enterprise_installed()) {
 							if ($image !== null) {
@@ -896,6 +933,12 @@ switch ($action) {
 							unset($values['width']);
 							unset($values['height']);
 							break;
+						case 'color_cloud':
+							unset($values['width']);
+							unset($values['height']);
+							unset($values['diameter']);
+							unset($values['label']);
+							break;
 						// -- line_item --
 						case 'handler_start':
 						case 'handler_end':
@@ -952,6 +995,7 @@ switch ($action) {
 			case 'clock':
 			case 'auto_sla_graph':
 			case 'donut_graph':
+			case 'color_cloud':
 				$elementFields = db_get_row_filter('tlayout_data',
 					array('id' => $id_element));
 				
@@ -1092,6 +1136,16 @@ switch ($action) {
 						$elementFields['fill_color'] = $elementFields['fill_color'];
 						break;
 					
+					case 'color_cloud':
+						$elementFields["diameter"] = $elementFields["width"];
+						$elementFields["dynamic_data"] = null;
+						try {
+							// Yes, it's using the label field to store the extra data
+							$elementFields["dynamic_data"] = json_decode($elementFields["label"], true);
+						} catch (Exception $ex) {}
+						$elementFields["label"] = "";
+						break;
+					
 					// -- line_item --
 					case 'handler_start':
 					case 'handler_end':
@@ -1347,6 +1401,37 @@ switch ($action) {
 				$values['width'] = $width;
 				$values['height'] = $height;
 				break;
+			case 'color_cloud':
+				$values['type'] = COLOR_CLOUD;
+				$values['width'] = $diameter;
+				$values['height'] = $diameter;
+
+				$extra = array(
+					"default_color" => $default_color,
+					"color_ranges" => array()
+				);
+
+				$num_ranges = count($color_range_colors);
+				for ($i = 0; $i < $num_ranges; $i++) {
+					if (
+						!isset($color_range_from_values[$i]) ||
+						!isset($color_range_to_values[$i]) ||
+						!isset($color_range_colors[$i])
+					) {
+						return;
+					}
+
+					$extra["color_ranges"][] = array(
+						"from_value" => (int) $color_range_from_values[$i],
+						"to_value" => (int) $color_range_to_values[$i],
+						"color" => $color_range_colors[$i] // already html encoded
+					);
+				}
+
+				// Yes, we are using the label to store the extra info.
+				// Sorry not sorry.
+				$values["label"] = json_encode($extra);
+				break;
 			default:
 				if (enterprise_installed()) {
 					enterprise_ajax_insert_fill_values_insert($type, $values);
@@ -1391,7 +1476,6 @@ switch ($action) {
 			
 			$text = visual_map_create_internal_name_item($label, $type, $image, $agent, $id_module, $idData);
 			
-			$values['label'] = io_safe_output($values['label']);
 			$values['left'] = $values['pos_x'];
 			$values['top'] = $values['pos_y'];
 			$values['parent'] = $values['parent_item'];
@@ -1423,9 +1507,22 @@ switch ($action) {
 					$return['values']['type_percentile'] = 'percentile';
 					break;				
 			
-				
+				case COLOR_CLOUD:
+					$return["values"]["diameter"] = $values["width"];
+					
+					try {
+						// Yes, it's using the label field to store the extra data
+						$return["values"]["dynamic_data"] = json_decode($values["label"], true);
+					} catch (Exception $ex) {
+						$return["values"]["dynamic_data"] = array();
+					}
+					$values["label"] = "";
+					break;
 			}
 		}
+
+		// Don't move this piece of code
+		$return["values"]["label"] = io_safe_output($values['label']);
 		
 		echo json_encode($return);
 		break;

pandora_console/include/constants.php

@@ -204,6 +204,7 @@ define('CIRCULAR_INTERIOR_PROGRESS_BAR', 16);
 define('DONUT_GRAPH',		17);
 define('BARS_GRAPH',		18);
 define('CLOCK',		19);
+define('COLOR_CLOUD',	20);
 //Some styles
 define('MIN_WIDTH',			300);
 define('MIN_HEIGHT',		120);

pandora_console/include/functions_visual_map.php

@@ -1569,6 +1569,9 @@ function visual_map_print_item($mode = "read", $layoutData,
 		case BOX_ITEM:
 			$class .= "box_item";
 			break;
+		case COLOR_CLOUD:
+			$class .= "color_cloud";
+			break;
 		default:
 			if (!empty($element_enterprise)) {
 				$class .= $element_enterprise['class'];
@@ -2181,6 +2184,9 @@ function visual_map_print_item($mode = "read", $layoutData,
 			
 			}
 			break;
+		case COLOR_CLOUD:
+			echo visual_map_get_color_cloud_element($layoutData);
+			break;
 		default:
 			if (!empty($element_enterprise)) {
 				echo $element_enterprise['item'];
@@ -3883,6 +3889,10 @@ function visual_map_create_internal_name_item($label = null, $type, $image, $age
 			case 'group_item':
 				$text = __('Group') . " - ";
 				break;
+			case COLOR_CLOUD:
+			case 'color_cloud':
+				$text = __('Color cloud') . " - ";
+				break;
 			case 'icon':
 			case ICON:
 				$text = __('Icon') . " - " .
@@ -4020,6 +4030,8 @@ function visual_map_type_in_js($type) {
 			break;
 		case LINE_ITEM:
 			return 'line_item';
+		case COLOR_CLOUD:
+			return 'color_cloud';
 			break;
 	}
 }
@@ -4035,5 +4047,63 @@ function visual_map_macro($label,$module){
 	return $label;
 }
 
+function visual_map_get_color_cloud_element ($data) {
+	$id = (int) $data["id"];
+	$diameter = (int) $data["width"];
+	$dynamic_fields = array();
+
+	try {
+		// Yes, the dynamic fields object is stored into the label field. ¯\_(ツ)_/¯
+		if (!empty($data["label"])) {
+			$dynamic_fields = json_decode($data["label"], true);
+		}
+	} catch (Exception $ex) {}
+
+	$default_color = !empty($dynamic_fields["default_color"])
+		? $dynamic_fields["default_color"]
+		: "#FFFFFF";
+	$color = $default_color;
+	// The svg gradient needs a unique identifier
+	$gradient_id = "grad_" . $id;
+
+	// Color ranges
+	if (
+		!empty($dynamic_fields["color_ranges"]) &&
+		!empty($data["id_agente_modulo"])
+	) {
+		// TODO: Metaconsole support.
+		$value = modules_get_last_value($data["id_agente_modulo"]);
+
+		if ($value !== false) {
+			/* TODO: It would be ok to give support to string values in the future?
+			 * It can be done by matching the range value with the value if it is a
+			 * string. I think the function to retrieve the value only supports
+			 * numeric values.
+			 */
+			$value = (float) $value;
+			foreach ($dynamic_fields["color_ranges"] as $range) {
+				if ($range["from_value"] <= $value && $range["to_value"] >= $value) {
+					$color = $range["color"];
+					break;
+				}
+			}
+		}
+	}
+
+	ob_start();
+?>
+	<svg height="<?php echo $diameter; ?>" width="<?php echo $diameter; ?>">
+		<defs>
+			<radialGradient id="<?php echo $gradient_id; ?>" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+				<stop offset="0%" style="stop-color:<?php echo $color; ?>;stop-opacity:0.8" />
+				<stop offset="60%" style="stop-color:<?php echo $color; ?>;stop-opacity:0.4" />
+				<stop offset="100%" style="stop-color:<?php echo $color; ?>;stop-opacity:0" />
+			</radialGradient>
+		</defs>
+		<circle cx="50%" cy="50%" r="50%" fill="url(#<?php echo $gradient_id; ?>)" />
+	</svg>
+<?php
+	return ob_get_clean();
+}
 
 ?>

pandora_console/include/functions_visual_map_editor.php

@@ -62,7 +62,9 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 				'clock' => __('Clock'),
 				'group_item' => __('Group'),
 				'box_item' => __('Box'),
-				'line_item' => __('Line'));
+				'line_item' => __('Line'),
+				'color_cloud' => __('Color cloud')
+			);
 			
 			if (enterprise_installed()) {
 				enterprise_visual_map_editor_add_title_palette($titles);
@@ -328,7 +330,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items['agent_row'] = array();
 			$form_items['agent_row']['items'] = array('static_graph',
 				'percentile_bar', 'percentile_item', 'module_graph',
-				'simple_value', 'datos', 'auto_sla_graph');
+				'simple_value', 'datos', 'auto_sla_graph', 'color_cloud');
 			$form_items['agent_row']['html'] = '<td align="left">' .
 				__('Agent') . '</td>';
 			$params = array();
@@ -395,7 +397,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items['module_row'] = array();
 			$form_items['module_row']['items'] = array('static_graph',
 				'percentile_bar', 'percentile_item', 'module_graph',
-				'simple_value', 'datos', 'auto_sla_graph', 'donut_graph', 'bars_graph');
+				'simple_value', 'datos', 'auto_sla_graph', 'donut_graph', 'bars_graph',
+				'color_cloud');
 			$form_items['module_row']['html'] = '<td align="left">' .
 				__('Module') . '</td>
 				<td align="left">' .
@@ -510,7 +513,12 @@ 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 progress bar'), 'interior_circular_progress_bar' => __('Circular progress bar (interior)'));
+			$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();
@@ -534,14 +542,14 @@ 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_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true) .
+					html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true, false, false) .
 					'</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_select($percentile_value, 'value_show', 'percent', '', '', '', true) .
+					html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true, false, false) .
 					'</td>';
 			}
 
@@ -580,7 +588,66 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 				'<td align="left" style="">' . __('Show statistics') . '</td>
 				<td align="left" style="">' .
 				html_print_checkbox('show_statistics', 1, '', true) . '</td>';
+			
+			// Start of Color Cloud rows
+			
+			// Diameter
+			$default_diameter = 100;
+			$form_items["color_cloud_diameter_row"] = array();
+			$form_items["color_cloud_diameter_row"]["items"] = array("color_cloud");
+			$form_items["color_cloud_diameter_row"]["html"] =
+				"<td align=\"left\">" . __("Diameter") . "</td>
+				<td align=\"left\">" .
+					html_print_input_text("diameter", $default_diameter, "", 3, 5, true) .
+				"</td>";
+
+			// Default color
+			$default_color = "#FFFFFF";
+			$form_items["color_cloud_def_color_row"] = array();
+			$form_items["color_cloud_def_color_row"]["items"] = array("color_cloud");
+			$form_items["color_cloud_def_color_row"]["html"] =
+				"<td align=\"left\">" . __("Default color") . "</td>
+				<td align=\"left\">" .
+					html_print_input_color("default_color", $default_color, false, true) .
+				"</td>";
+
+			// Color ranges
+			$form_items["color_cloud_color_ranges_row"] = array();
+			$form_items["color_cloud_color_ranges_row"]["items"] = array("color_cloud");
+			$form_items["color_cloud_color_ranges_row"]["html"] =
+				"<td align=\"left\">" . __("Color ranges") . "</td>" .
+				"<td align=\"left\">" .
+					"<table id=\"new-color-range\" class=\"databox color-range color-range-creation\">" .
+						"<tr>" .
+							"<td>" . __("From value") . "</td>" .
+							"<td>" .
+								html_print_input_text("from_value_new", "", "", 5, 255, true) .
+							"</td>" .
+							"<td rowspan=\"4\">" .
+								"<a class=\"color-range-add\" href=\"#\">" .
+									html_print_image("images/add.png", true) .
+								"</a>" .
+							"</td>" .
+						"</tr>" .
+							"<td>" . __("To value") . "</td>" .
+							"<td>" .
+								html_print_input_text("to_value_new", "", "", 5, 255, true) .
+							"</td>" .
+							"<td></td>" .
+						"<tr>" .
+						"</tr>" .
+						"<tr>" .
+							"<td>" . __("Color") . "</td>" .
+							"<td>" .
+								html_print_input_color("color_new", $default_color, false, true) .
+							"</td>" .
+							"<td></td>" .
+						"</tr>" .
+					"</table>" .
+				"</td>";
 				
+			// End of Color Cloud rows
+			
 			$form_items['show_on_top_row'] = array();
 			$form_items['show_on_top_row']['items'] = array('group_item');
 			$form_items['show_on_top_row']['html'] = 
@@ -616,7 +683,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 				__('Type') . '</td>
 				<td align="left">' . html_print_select($bars_graph_types, 'bars_graph_type', 'vertical', '', '', '', true) . '</td>';
 			
-			
+
 			//Insert and modify before the buttons to create or update.
 			if (enterprise_installed()) {
 				enterprise_visual_map_editor_modify_form_items_palette($form_items);
@@ -661,7 +728,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items_advance['position_row']['items'] = array('static_graph',
 				'percentile_bar', 'percentile_item', 'module_graph',
 				'simple_value', 'label', 'icon', 'datos', 'box_item',
-				'auto_sla_graph', 'bars_graph','clock', 'donut_graph');
+				'auto_sla_graph', 'bars_graph','clock', 'donut_graph', 'color_cloud');
 			$form_items_advance['position_row']['html'] = '
 				<td align="left">' . __('Position') . '</td>
 				<td align="left">(' . html_print_input_text('left', '0', '', 3, 5, true) .
@@ -870,7 +937,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items_advance['element_group_row']['items'] = array(
 				'group_item', 'static_graph', 'percentile_bar',
 				'percentile_item', 'module_graph', 'simple_value',
-				'icon', 'label', 'datos', 'donut_graph');
+				'icon', 'label', 'datos', 'donut_graph', 'color_cloud');
 			$form_items_advance['element_group_row']['html'] = '<td align="left">'.
 				__('Restrict access to group') . '</td>' .
 				'<td align="left">' .
@@ -1021,6 +1088,7 @@ function visual_map_editor_print_toolbox() {
 		visual_map_print_button_editor('group_item', __('Group'), 'left', false, 'group_item_min', true);
 		visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item_min', true);
 		visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item_min', true);
+		visual_map_print_button_editor('color_cloud', __('Color cloud'), 'left', false, 'color_cloud_min', true);
   		if(defined("METACONSOLE")){
  		 echo '<a href="javascript:" class="tip"><img src="'.$config['homeurl_static'].'/images/tip.png" data-title="The data displayed in editor mode is not real" data-use_title_for_force_title="1" 
 			class="forced_title" alt="The data displayed in editor mode is not real"></a>';