Added donut to node visual consoles

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -435,14 +435,6 @@ function update_button_palette_callback() {
 			setEventsBar(idItem, values);
 			break;
 		case 'donut_graph':
-			if($('input[name=width]').val() == ''){
-				alert('Undefined width');
-				return false;
-			}
-			if($('input[name=height]').val() == ''){
-				alert('Undefined height');
-				return false;
-			}
 			$("#image_" + idItem).attr("src", "images/spinner.gif");
 
 			setDonutsGraph(idItem, values);
@@ -2005,6 +1997,8 @@ function setDonutsGraph (id_data, values) {
 		url_hack_metaconsole = '../../';
 	}
 
+	width_percentile = values['width_percentile'];
+
 	parameter = Array();
 
 	parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
@@ -2021,25 +2015,26 @@ function setDonutsGraph (id_data, values) {
 		type: "POST",
 		dataType: 'json',
 		success: function (data) {
+			console.log(data);
 			if (data['no_data'] == true) {
-				if (values['width'] == "0" || values['height'] == "0") {
+				if (values['width'] == "0") {
-					$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.png');
+					$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/wrong_donut_graph.png');
 				}
 				else {
-					$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.png');
+					$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/wrong_donut_graph.png');
-					$("#" + id_data + " img").css('width', values['width'] + 'px');
+					$("#" + id_data + " img").css('width', width_percentile + 'px');
-					$("#" + id_data + " img").css('height', values['height'] + 'px');
+					$("#" + id_data + " img").css('height', width_percentile + 'px');
 				}
 			}
 			else {
-				$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.png');
+				$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/donut-graph.png');
 				
 				if($('#text-width').val() == 0 || $('#text-height').val() == 0){
 					// Image size
 				}
 				else{
-					$("#" + id_data + " img").css('width', $('#text-width').val()+'px');
+					$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
-					$("#" + id_data + " img").css('height', $('#text-height').val()+'px');
+					$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
 				}
 			}
 		}

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -153,12 +153,12 @@ switch ($action) {
 
 		$is_string = db_get_value_filter ('id_tipo_modulo', 'tagente_modulo',
 			array ('id_agente' => $id_agent,
-				'id_agente_modulo' => $id_module));
+				'id_agente_modulo' => $id_agent_module));
 		
 		if (!empty($id_metaconsole)) {
 			metaconsole_restore_db();
 		}
-
+		
 		$return = array();
 		if (($is_string == 17) || ($is_string == 23) || ($is_string == 3) ||
 			($is_string == 10) || ($is_string == 33)) {
@@ -583,13 +583,11 @@ switch ($action) {
 						}
 						break;
 					case 'donut_graph':
+						if ($width_percentile !== null) {
+							$values['width'] = $width_percentile;
+							$values['height'] = $width_percentile;
+						}
 						$values['type'] = DONUT_GRAPH;
-						if ($width !== null) {
-							$values['width'] = $width;
-						}
-						if ($height !== null) {
-							$values['height'] = $height;
-						}
 						break;
 					case 'box_item':
 						$values['border_width'] = $border_width;
@@ -823,7 +821,9 @@ switch ($action) {
 							$elementFields['type_percentile'] = 'bubble';
 						}
 						break;
-					
+					case 'donut_graph':
+						$elementFields['width_percentile'] = $elementFields['width'];
+						break;
 					case 'module_graph':
 						$elementFields['width_module_graph'] = $elementFields['width'];
 						$elementFields['height_module_graph'] = $elementFields['height'];

pandora_console/include/functions_visual_map.php

@@ -1141,34 +1141,78 @@ function visual_map_print_item($mode = "read", $layoutData,
 			break;
 		
 		case DONUT_GRAPH:
-			$donut_data = get_donut_module_data($layoutData['id_agente_modulo']);
+			if (!empty($id_metaconsole)) {
+				$connection = db_get_row_filter ('tmetaconsole_setup', $id_metaconsole);
+				if (metaconsole_load_external_db($connection) != NOERR) {
+					continue;
+				}
+			}
 
-			if ((get_parameter('action') == 'edit') || (get_parameter('operation') == 'edit_visualmap')) {
+			$is_string = db_get_value_filter ('id_tipo_modulo', 'tagente_modulo',
-				if($width == 0 || $height == 0){
+				array ('id_agente' => $layoutData['id_agent'],
+					'id_agente_modulo' => $id_module));
+			
+			if (!empty($id_metaconsole)) {
+				metaconsole_restore_db();
+			}
+
+			if (($is_string == 17) || ($is_string == 23) || ($is_string == 3) ||
+				($is_string == 10) || ($is_string == 33)) {
+				$no_data = false;
+			}
+			else {
+				$no_data = true;
+			}
+
+			if ($no_data) {
+				if($width == 0){
 					if ($layoutData['id_metaconsole'] != 0) {
-						$img =  '<img src="../../images/console/signes/module-events.png">';
+						$img =  '<img src="../../images/console/signes/wrong_donut_graph.png">';
 					}
 					else{
-						$img =  '<img src="images/console/signes/module-events.png">';	
+						$img =  '<img src="images/console/signes/wrong_donut_graph.png">';	
 					}
 				}
 				else{
 					if ($layoutData['id_metaconsole'] != 0) {
-						$img =  '<img src="../../images/console/signes/module-events.png" style="width:'.$width.'px;height:'. $height.'px;">';
+						$img =  '<img src="../../images/console/signes/wrong_donut_graph.png" style="width:'.$width.'px;height:'. $height.'px;">';
 					}
 					else{
-						$img =  '<img src="images/console/signes/module-events.png" style="width:'.$width.'px;height:'. $height.'px;">';
+						$img =  '<img src="images/console/signes/wrong_donut_graph.png" style="width:'.$width.'px;height:'. $height.'px;">';
 					}
 				}
 			}
 			else {
-				if ($width == 0 || $height == 0) {
+				$donut_data = get_donut_module_data($layoutData['id_agente_modulo']);
-					$img = d3_donut_graph ($layoutData['id'], 200, 300, $donut_data);
+
+				if ((get_parameter('action') == 'edit') || (get_parameter('operation') == 'edit_visualmap')) {
+					if($width == 0){
+						if ($layoutData['id_metaconsole'] != 0) {
+							$img =  '<img src="../../images/console/signes/donut-graph.png">';
+						}
+						else{
+							$img =  '<img src="images/console/signes/donut-graph.png">';	
+						}
+					}
+					else{
+						if ($layoutData['id_metaconsole'] != 0) {
+							$img =  '<img src="../../images/console/signes/donut-graph.png" style="width:'.$width.'px;height:'. $height.'px;">';
+						}
+						else{
+							$img =  '<img src="images/console/signes/donut-graph.png" style="width:'.$width.'px;height:'. $height.'px;">';
+						}
+					}
 				}
-				else{
+				else {
-					$img = d3_donut_graph ($layoutData['id'], $width, $height, $donut_data);
+					if ($width == 0) {
+						$img = d3_donut_graph ($layoutData['id'], 400, 400, $donut_data);
+					}
+					else{
+						$img = d3_donut_graph ($layoutData['id'], $width, $width, $donut_data);
+					}
 				}
 			}
+			
 
 			//Restore db connection
 			if ($layoutData['id_metaconsole'] != 0) {
@@ -1808,7 +1852,7 @@ function get_donut_module_data ($id_module) {
 	foreach ($values as $val) {
 		if ($index < $max_elements) {
 			$data = explode(":", $val);
-			$values_to_return[$index]['tag_name'] = $data[0];
+			$values_to_return[$index]['tag_name'] = $data[0] . ", " . $data[1];
 			$values_to_return[$index]['color'] = $colors[$index];
 			$values_to_return[$index]['value'] = (int)$data[1];
 			$total += (int)$data[1];
@@ -1816,7 +1860,7 @@ function get_donut_module_data ($id_module) {
 		}
 		else {
 			$data = explode(":", $val);
-			$values_to_return[$index]['tag_name'] = __('Others');
+			$values_to_return[$index]['tag_name'] = __('Others') . ", " . $data[1];
 			$values_to_return[$index]['color'] = $colors[$index];
 			$values_to_return[$index]['value'] += (int)$data[1];
 			$total += (int)$data[1];

pandora_console/include/functions_visual_map_editor.php

@@ -397,7 +397,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			
 			
 			$form_items['percentile_bar_row_1'] = array();
-			$form_items['percentile_bar_row_1']['items'] = array('percentile_bar', 'percentile_item', 'datos');
+			$form_items['percentile_bar_row_1']['items'] = array('percentile_bar', 'percentile_item', 'datos', 'donut_graph');
 			$form_items['percentile_bar_row_1']['html'] = '<td align="left">' .
 				__('Width') . '</td>
 				<td align="left">' . html_print_input_text('width_percentile', 0, '', 3, 5, true) . '</td>';
@@ -525,7 +525,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items_advance['size_row']['items'] = array(
 				'group_item', 'background',
 				'static_graph', 'icon datos',
-				'auto_sla_graph', 'donut_graph');
+				'auto_sla_graph');
 			$form_items_advance['size_row']['html'] = '<td align="left">' .
 				__('Size') .
 				ui_print_help_tip (

pandora_console/include/graphs/pandora.d3.js

@@ -1504,7 +1504,53 @@ function print_donut_graph (recipient, width, height, module_data) {
 	svg.append("g")
 		.attr("class", "slices");
 
-	var radius = 100;
+	var radius = 120;
+	var increment_y = 60;
+	var increment_y_padding = 25;
+	var text_size = 15;
+	var decrement_x_padding = 150;
+	if (width >= 500) {
+		radius = 160;
+		increment_y = 60;
+		text_size = 25;
+		increment_y_padding = 25;
+		decrement_x_padding = 75;
+	}
+	else if (width >= 400) {
+		radius = 120;
+		increment_y = 60;
+		text_size = 22;
+		increment_y_padding = 25;
+		decrement_x_padding = 75;
+	}
+	else if (width >= 300) {
+		radius = 80;
+		increment_y = 40;
+		text_size = 14;
+		increment_y_padding = 20;
+		decrement_x_padding = 60;
+	}
+	else if (width >= 200) {
+		radius = 50;
+		increment_y = 40;
+		text_size = 14;
+		increment_y_padding = 15;
+		decrement_x_padding = 45;
+	}
+	else if (width >= 100) {
+		radius = 20;
+		increment_y = 20;
+		text_size = 10;
+		increment_y_padding = 8;
+		decrement_x_padding = 25;
+	}
+	else {
+		radius = 10;
+		increment_y = 10;
+		text_size = 4;
+		increment_y_padding = 3;
+		decrement_x_padding = 5;
+	}
 
 	var arc = d3.svg.arc()
 		.outerRadius(radius * 0.8)
@@ -1518,28 +1564,20 @@ function print_donut_graph (recipient, width, height, module_data) {
 			return parseFloat(d.percent);
 		});
 
-	var increment_y = 0;
 	jQuery.each(module_data, function (key, m_d) {
 		svg.append("g")
 			.append("text")
-				.append("tspan")
+				.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")")
-					.attr("dy", increment_y + ".8em")
+				.text(m_d.tag_name)
-					.attr("dx", ".1em")
+				.style("font-family", "Verdana")
-					.text(m_d.tag_name + ", ")
+				.style("font-size", text_size + "px");
-					.style("font-family", "Verdana")
-					.style("font-size", "15px")
-				.append("tspan")
-					.attr("dx", ".2em")
-					.text(m_d.value)
-					.style("font-family", "Verdana")
-					.style("font-size", "15px");
 		
-		increment_y += 1;
+		increment_y -= increment_y_padding;
 	});
 
 	function donutData (){
 		return module_data.map(function(m_data){
-			return { label: m_data.tag_name, value: m_data.value , percent: m_data.percent, color : m_data.color}
+			return { label: m_data.tag_name, percent: m_data.percent, color : m_data.color}
 		});
 	}
 

pandora_console/include/styles/pandora.css

@@ -787,6 +787,12 @@ input.auto_sla_graph_min {
 input.auto_sla_graph_min[disabled] {
 	background: #fefefe url(../../images/auto_sla_graph.disabled.png) no-repeat center !important;
 }
+input.donut_graph_min {
+	background: #fefefe url(../../images/icono-quesito.png) no-repeat center !important;
+}
+input.donut_graph_min[disabled] {
+	background: #fefefe url(../../images/icono-quesito.disabled.png) no-repeat center !important;
+}
 input.binary_min {
 	background: #fefefe url(../../images/binary.png) no-repeat center !important;
 }