Added a lot of code to add donut graph to visual console. Print donut in progress.

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -448,13 +448,6 @@ function update_button_palette_callback() {
 			setDonutsGraph(idItem, values);
 			break;
 		case 'simple_value':
-		//checkpoint
-			// if(($('#text-label_ifr').contents().find('#tinymce p').html() == '_VALUE_' || 
-			// $('#text-label_ifr').contents().find('#tinymce').html() == '_VALUE_') 
-			// && $('#data_image_check').html() != 'On'){
-			// 		alert('_VALUE_ exactly value is only enable for data image. Please change label text or select a data image module.');
-			// 		return;
-			// }
 			$("#" + idItem).html(values['label']);
 			if( (values['label'].replace( /<.*?>/g, '' ) != '_VALUE_') 
 				&& (values['label'].replace( /<.*?>/g, '' ) != '(_VALUE_)') ){
@@ -469,12 +462,7 @@ function update_button_palette_callback() {
 				$("#" + idItem).html(
 					'<table><tbody><tr><td></td></tr><tr><td><span style="" id="text_21" class="text">'+values["label"]+'</span></td></tr><tr><td></td></tr></tbody></table>'
 				)
-				
 			}
-		
-			
-			//$("#simplevalue_" + idItem)
-				//.html($('<img></img>').attr('src', "images/spinner.gif"));
 			setModuleValue(idItem,values['process_simple_value'], values['period'],values['width']);
 			break;
 		case 'label':
@@ -2011,6 +1999,53 @@ function setEventsBar(id_data, values) {
 	});
 }
 
+function setDonutsGraph (id_data, values) {
+	var url_hack_metaconsole = '';
+	if (is_metaconsole()) {
+		url_hack_metaconsole = '../../';
+	}
+
+	parameter = Array();
+
+	parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
+	parameter.push ({name: "action", value: "get_module_type_string"});
+	parameter.push ({name: "id_agent", value: values['id_agent']});
+	parameter.push ({name: "id_agent_module", value: values['module']});
+	if (is_metaconsole()) {
+		parameter.push ({name: "id_metaconsole", value: id_metaconsole});
+	}
+	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) {
+			if (data['no_data'] == true) {
+				if (values['width'] == "0" || values['height'] == "0") {
+					$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.png');
+				}
+				else {
+					$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.png');
+					$("#" + id_data + " img").css('width', values['width'] + 'px');
+					$("#" + id_data + " img").css('height', values['height'] + 'px');
+				}
+			}
+			else {
+				$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/module-events.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('height', $('#text-height').val()+'px');
+				}
+			}
+		}
+	});
+}
+
 function setPercentileBubble(id_data, values) {
 	metaconsole = $("input[name='metaconsole']").val();
 
@@ -2373,7 +2408,6 @@ function createItem(type, values, id_data) {
 			var sizeStyle = '';
 			var imageSize = '';
 			item = $('<div id="' + id_data + '" class="item donut_graph" 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></td></tr><tr><td></td></tr></table>' +
 							'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
 					'</div>'
 					);

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -141,6 +141,36 @@ switch ($action) {
 		echo json_encode($return);
 		break;
 	
+	case 'get_module_type_string':
+		$data = array ();
+
+		if (!empty($id_metaconsole)) {
+			$connection = db_get_row_filter ('tmetaconsole_setup', $id_metaconsole);
+			if (metaconsole_load_external_db($connection) != NOERR) {
+				continue;
+			}
+		}
+
+		$is_string = db_get_value_filter ('id_tipo_modulo', 'tagente_modulo',
+			array ('id_agente' => $id_agent,
+				'id_agente_modulo' => $id_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)) {
+			$return['no_data'] = false;
+		}
+		else {
+			$return['no_data'] = true;
+		}
+
+		echo json_encode($return);
+		break;
+
 	case 'get_module_events':
 		$data = array ();
 		
@@ -465,6 +495,7 @@ switch ($action) {
 			case 'label':
 			case 'icon':
 			case 'auto_sla_graph':
+			case 'donut_graph':
 			default:
 				if ($type == 'label') {
 					$values['type'] = LABEL;
@@ -551,6 +582,15 @@ switch ($action) {
 							$values['height'] = $height;
 						}
 						break;
+					case 'donut_graph':
+						$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;
 						$values['border_color'] = $border_color;
@@ -711,6 +751,7 @@ switch ($action) {
 			case 'label':
 			case 'icon':
 			case 'auto_sla_graph':
+			case 'donut_graph':
 				$elementFields = db_get_row_filter('tlayout_data',
 					array('id' => $id_element));
 				
@@ -929,6 +970,11 @@ switch ($action) {
 				$values['width'] = $width;
 				$values['height'] = $height;
 				break;
+			case 'donut_graph':
+				$values['type'] = DONUT_GRAPH;
+				$values['width'] = $width;
+				$values['height'] = $height;
+				break;
 			case 'percentile_item':
 			case 'percentile_bar': 
 				if ($type_percentile == 'percentile') {

pandora_console/include/functions_visual_map.php

@@ -379,6 +379,9 @@ function visual_map_print_item($mode = "read", $layoutData,
 			case AUTO_SLA_GRAPH:
 				$link = true;
 				break;
+			case DONUT_GRAPH:
+				$link = true;
+				break;
 			default:
 				if (!empty($element_enterprise)) {
 					$link = $element_enterprise['link'];
@@ -487,6 +490,18 @@ function visual_map_print_item($mode = "read", $layoutData,
 						"&date_to=" . $date_to . "&time_to=" . $time_to . "&status=-1";
 				}
 				break;
+
+			case DONUT_GRAPH:
+				if (empty($layout_data['id_metaconsole'])) {
+					$url = $config['homeurl'] . "index.php?sec=gagente&sec2=godmode/agentes/configurar_agente&id_agente=" . $layoutData['id_agent'] . 
+						"&tab=module&edit_module=1&id_agent_module=" . $layoutData['id_agente_modulo'];
+				}
+				else {
+					$url = "index.php?sec=gagente&sec2=godmode/agentes/configurar_agente&id_agente=" . $layoutData['id_agent'] . 
+						"&tab=module&edit_module=1&id_agent_module=" . $layoutData['id_agente_modulo'];
+				}
+				break;
+
 			case GROUP_ITEM:
 				$is_a_link_to_other_visualconsole = false;
 				if ($layoutData['id_layout_linked'] != 0) {
@@ -1121,6 +1136,44 @@ function visual_map_print_item($mode = "read", $layoutData,
 				metaconsole_restore_db();
 			}
 
+			$z_index = 2 + 1;
+			break;
+		
+		case DONUT_GRAPH:
+			$donut_data = get_donut_module_data($layoutData['id_agent'], $layoutData['id_agente_modulo']);
+
+			if ((get_parameter('action') == 'edit') || (get_parameter('operation') == 'edit_visualmap')) {
+				if($width == 0 || $height == 0){
+					if ($layoutData['id_metaconsole'] != 0) {
+						$img =  '<img src="../../images/console/signes/module-events.png">';
+					}
+					else{
+						$img =  '<img src="images/console/signes/module-events.png">';	
+					}
+				}
+				else{
+					if ($layoutData['id_metaconsole'] != 0) {
+						$img =  '<img src="../../images/console/signes/module-events.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;">';
+					}
+				}
+			}
+			else {
+				if ($width == 0 || $height == 0) {
+					$img = d3_donut_graph ($layoutData['id'], 200, 400, $donut_data);
+				}
+				else{
+					$img = d3_donut_graph ($layoutData['id'], $width, $height, $donut_data);
+				}
+			}
+		
+			//Restore db connection
+			if ($layoutData['id_metaconsole'] != 0) {
+				metaconsole_restore_db();
+			}
+
 			$z_index = 2 + 1;
 			break;
 	}
@@ -1133,6 +1186,9 @@ function visual_map_print_item($mode = "read", $layoutData,
 		case AUTO_SLA_GRAPH:
 			$class .= "auto_sla_graph";
 			break;
+		case DONUT_GRAPH:
+			$class .= "donut_graph";
+			break;
 		case GROUP_ITEM:
 			$class .= "group_item";
 			break;
@@ -1575,6 +1631,9 @@ function visual_map_print_item($mode = "read", $layoutData,
 				echo io_safe_output($text);
 			}
 			break;
+		case DONUT_GRAPH:
+			echo $img;
+			break;
 		case SIMPLE_VALUE:
 		case SIMPLE_VALUE_MAX:
 		case SIMPLE_VALUE_MIN:
@@ -1726,6 +1785,10 @@ function visual_map_print_item($mode = "read", $layoutData,
 	}
 }
 
+function get_donut_module_data ($id_agent, $id_module) {
+	
+}
+
 /**
  * The function to get simple value type from the value of process type in the form
  * 

pandora_console/include/graphs/functions_d3.php

@@ -309,4 +309,32 @@ function ux_console_phases_donut ($phases, $id, $return = false) {
 	
 	return $output;
 }
+
+function d3_donut_graph ($id, $width, $height, $module_data) {
+	global $config;
+
+	$module_data = json_encode($module_data);
+
+	$recipient_name = "donut_graph_" . $id;
+	$recipient_name_to_js = "#donut_graph_" . $id;
+
+	$output = "<div id=" . $recipient_name .  " style='overflow: hidden;'></div>";
+	$output .= include_javascript_d3(true);
+	$output .= "<style type=\"text/css\">
+					path {
+						stroke: #fff;
+						fill-rule: evenodd;
+					}
+				</style>";
+
+	$output .= "<script language=\"javascript\" type=\"text/javascript\">
+					print_donut_graph('" . $recipient_name_to_js . "', " . $width . ", " . $height . ", " . $module_data . ");
+				</script>";
+
+	if (!$return)
+		echo $output;
+	
+	return $output;
+}
+
 ?>

pandora_console/include/graphs/pandora.d3.js

@@ -1492,4 +1492,51 @@ function print_phases_donut (recipient, phases) {
 		polyline.exit()
 			.remove();
 	}
+}
+
+function print_donut_graph (recipient, width, height, module_data) {
+	var svg = d3.select(recipient)
+		.append("svg")
+			.attr("width", width)
+			.attr("height", height)
+		.append("g");
+
+	var radius = Math.min(width, height) / 2;
+
+	var pie = d3.layout.pie()
+		.sort(null)
+		.value(function(d) {
+			return parseFloat(d.label2);
+		});
+
+	svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+	/* ------- PIE SLICES -------*/
+	var slice = svg.select(".slices").selectAll("path.slice")
+		.data(module_data);
+
+	slice.enter()
+		.insert("path")
+		.style("fill", function(d) {
+			if (d.data.value == 0) {
+				return "#80BA27";
+			}
+			else {
+				return "#FC4444";
+			}
+		})
+		.attr("class", "slice");
+
+	slice.transition()
+			.duration(0)
+			.attrTween("d", function(d) {
+				this._current = this._current || d;
+				var interpolate = d3.interpolate(this._current, d);
+				this._current = interpolate(0);
+				return function(t) {
+					return arc(interpolate(t));
+				};
+			});
+
+	slice.exit().remove();
 }