Merge branch 'lost-code-in-visual-console-dev' into 'develop'

Added lost code

See merge request artica/pandorafms!983

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -426,6 +426,17 @@ function update_button_palette_callback() {
 			$("#image_" + idItem).attr("src", "images/spinner.gif");
 			setModuleGraph(idItem);
 			break;
+		case 'bars_graph':
+			if($('input[name=width_percentile]').val() == ''){
+				alert('Undefined width');
+				return false;
+			}
+		
+			$("#text_" + idItem).html(values['label']);
+			$("#image_" + idItem).attr("src", "images/spinner.gif");
+			
+			setBarsGraph(idItem, values);
+			break;
 		case 'auto_sla_graph':
 			if($('input[name=width]').val() == ''){
 				alert('Undefined width');
@@ -440,14 +451,12 @@ function update_button_palette_callback() {
 
 			setEventsBar(idItem, values);
 			break;
+		case 'donut_graph':
+			$("#image_" + idItem).attr("src", "images/spinner.gif");
+
+			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_)') ){
@@ -462,12 +471,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':
@@ -622,6 +626,7 @@ function readFields() {
 		}
 	}
 	values['height'] = $("input[name=height]").val();
+	values['bars_graph_type'] = $("select[name=bars_graph_type]").val();
 	values['parent'] = $("select[name=parent]").val();
 	values['map_linked'] = $("select[name=map_linked]").val();
 	values['width_percentile'] = $("input[name=width_percentile]").val();
@@ -709,6 +714,12 @@ function create_button_palette_callback() {
 				validate = false;
 			}
 			break;
+		case 'donut_graph':
+			if ((values['agent'] == '')) {
+				alert($("#message_alert_no_agent").html());
+				validate = false;
+			}
+			break;
 		case 'label':
 			if ((values['label'] == '')) {
 				alert($("#message_alert_no_label").html());
@@ -776,6 +787,16 @@ function create_button_palette_callback() {
 				}
 			}
 			break;
+		case 'bars_graph':
+			if ((values['agent'] == '')) {
+				alert($("#message_alert_no_agent").html());
+				validate = false;
+			}
+			if ((values['module'] == 0)) {
+				alert($("#message_alert_no_module").html());
+				validate = false;
+			}
+			break;
 		case 'simple_value':
 			if ((values['agent'] == '')) {
 				alert($("#message_alert_no_agent").html());
@@ -977,6 +998,7 @@ function toggle_item_palette() {
 
 		activeToolboxButton('static_graph', true);
 		activeToolboxButton('module_graph', true);
+		activeToolboxButton('bars_graph', true);
 		activeToolboxButton('simple_value', true);
 		activeToolboxButton('label', true);
 		activeToolboxButton('icon', true);
@@ -985,6 +1007,7 @@ function toggle_item_palette() {
 		activeToolboxButton('box_item', true);
 		activeToolboxButton('line_item', true);
 		activeToolboxButton('auto_sla_graph', true);
+		activeToolboxButton('donut_graph', true);
 
 		if (typeof(enterprise_activeToolboxButton) == 'function') {
 			enterprise_activeToolboxButton(true);
@@ -1004,7 +1027,9 @@ function toggle_item_palette() {
 
 		activeToolboxButton('static_graph', false);
 		activeToolboxButton('module_graph', false);
+		activeToolboxButton('bars_graph', false);
 		activeToolboxButton('auto_sla_graph', false);
+		activeToolboxButton('donut_graph', false);
 		activeToolboxButton('simple_value', false);
 		activeToolboxButton('label', false);
 		activeToolboxButton('icon', false);
@@ -1277,6 +1302,8 @@ function loadFieldsFromDB(item) {
 					$("input[name=width_module_graph]").val(val);
 				if (key == 'height_module_graph')
 					$("input[name=height_module_graph]").val(val);
+				if (key == 'bars_graph_type')
+					$("select[name=bars_graph_type]").val(val);
 				if (key == 'type_percentile') 
 					$("select[name=type_percentile]").val(val);
 				if (key == 'percentile_label') 
@@ -1540,6 +1567,9 @@ function hiddenFields(item) {
 	$("#module_graph_size_row").css('display', 'none');
 	$("#module_graph_size_row." + item).css('display', '');
 
+	$("#bars_graph_type").css('display', 'none');
+	$("#bars_graph_type." + item).css('display', '');
+
 	$("#background_color").css('display', 'none');
 	$("#background_color." + item).css('display', '');
 	
@@ -1756,6 +1786,60 @@ function set_image(type, idElement, image) {
 	});
 }
 
+function setBarsGraph(id_data, values) {
+	var url_hack_metaconsole = '';
+	if (is_metaconsole()) {
+		url_hack_metaconsole = '../../';
+	}
+
+	width_percentile = values['width_percentile'];
+
+	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: "module", value: values['module']});
+	parameter.push ({name: "id_element", value: id_data});
+	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_percentile'] == "0") {
+					$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/barras-no.png');
+				}
+				else {
+					$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/barras-no.png');
+					$("#" + id_data + " img").css('width', width_percentile + 'px');
+					$("#" + id_data + " img").css('height', width_percentile + 'px');
+				}
+			}
+			else {
+				$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/barras.png');
+				
+				if (values['width_percentile'] == "0") {
+					// Image size
+				}
+				else{
+					$("#" + id_data + " img").css('width', width_percentile+'px');
+					$("#" + id_data + " img").css('height', width_percentile+'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 setModuleGraph(id_data) {
 	var parameter = Array();
 
@@ -2141,6 +2225,53 @@ function setEventsBar(id_data, values) {
 	});
 }
 
+function setDonutsGraph (id_data, values) {
+	var url_hack_metaconsole = '';
+	if (is_metaconsole()) {
+		url_hack_metaconsole = '../../';
+	}
+
+	width_percentile = values['width_percentile'];
+
+	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']});
+	parameter.push ({name: "id_element", value: id_data});
+	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") {
+					$("#" + 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/wrong_donut_graph.png');
+					$("#" + id_data + " img").css('width', width_percentile + 'px');
+					$("#" + id_data + " img").css('height', width_percentile + 'px');
+				}
+			}
+			else {
+				$("#" + 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_percentile').val()+'px');
+					$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
+				}
+			}
+		}
+	});
+}
+
 function setPercentileBubble(id_data, values) {
 	metaconsole = $("input[name='metaconsole']").val();
 
@@ -2499,6 +2630,16 @@ function createItem(type, values, id_data) {
 
 			setEventsBar(id_data, values);
 			break;
+		case 'donut_graph':
+			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;">' +
+							'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
+					'</div>'
+					);
+
+			setDonutsGraph(id_data, values);
+			break;
 		case 'percentile_bar':
 		case 'percentile_item':
 			var sizeStyle = '';
@@ -2678,6 +2819,42 @@ function createItem(type, values, id_data) {
 			
 			setModuleGraph(id_data);
 			break;
+		case 'bars_graph':
+			sizeStyle = '';
+			imageSize = '';
+
+			if(values['label_position'] == 'up'){
+				item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + 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 module_graph" style="text-align: left; position: absolute; ' + 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'] == 'left'){
+				item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+						'<img style="float:right" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
+						'<table style="float:left;height:'+values['height_module_graph']+'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'] == 'right'){
+				item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+						'<img style="float:left" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
+						'<table style="float:right;height:'+values['height_module_graph']+'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>'
+				);				
+			}
+
+			
+			setBarsGraph(id_data, values);
+			break;
 		case 'simple_value':
 			sizeStyle = '';
 			imageSize = '';
@@ -2897,7 +3074,9 @@ function updateDB_visual(type, idElement , values, event, top, left) {
 		case 'label':
 		case 'icon':
 		case 'module_graph':
+		case 'bars_graph':
 		case 'auto_sla_graph':
+		case 'donut_graph':
 			if (type == 'simple_value') {
 				setModuleValue(idElement,
 					values.process_simple_value,
@@ -3309,6 +3488,15 @@ function eventsItems(drag) {
 				activeToolboxButton('delete_item', true);
 				activeToolboxButton('show_grid', false);
 			}
+			if ($(divParent).hasClass('donut_graph')) {
+				creationItem = null;
+				selectedItem = 'donut_graph';
+				idItem = $(divParent).attr('id');
+				activeToolboxButton('copy_item', true);
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+				activeToolboxButton('show_grid', false);
+			}
 			if ($(divParent).hasClass('group_item')) {
 				creationItem = null;
 				selectedItem = 'group_item';
@@ -3336,6 +3524,15 @@ function eventsItems(drag) {
 				activeToolboxButton('delete_item', true);
 				activeToolboxButton('show_grid', false);
 			}
+			if ($(divParent).hasClass('bars_graph')) {
+				creationItem = null;
+				selectedItem = 'bars_graph';
+				idItem = $(divParent).attr('id');
+				activeToolboxButton('copy_item', true);
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+				activeToolboxButton('show_grid', false);
+			}
 			if ($(divParent).hasClass('simple_value')) {
 				creationItem = null;
 				selectedItem = 'simple_value';
@@ -3509,6 +3706,9 @@ function eventsItems(drag) {
 			if ($(event.target).hasClass('auto_sla_graph')) {
 				selectedItem = 'auto_sla_graph';
 			}
+			if ($(event.target).hasClass('donut_graph')) {
+				selectedItem = 'donut_graph';
+			}
 			if ($(event.target).hasClass('group_item')) {
 				selectedItem = 'group_item';
 			}
@@ -3518,6 +3718,9 @@ function eventsItems(drag) {
 			if ($(event.target).hasClass('module_graph')) {
 				selectedItem = 'module_graph';
 			}
+			if ($(event.target).hasClass('bars_graph')) {
+				selectedItem = 'bars_graph';
+			}
 			if ($(event.target).hasClass('simple_value')) {
 				selectedItem = 'simple_value';
 			}
@@ -3821,10 +4024,18 @@ function click_button_toolbox(id) {
 			toolbuttonActive = creationItem = 'module_graph';
 			toggle_item_palette();
 			break;
+		case 'bars_graph':
+			toolbuttonActive = creationItem = 'bars_graph';
+			toggle_item_palette();
+			break;
 		case 'auto_sla_graph':
 			toolbuttonActive = creationItem = 'auto_sla_graph';
 			toggle_item_palette();
 			break;
+		case 'donut_graph':
+			toolbuttonActive = creationItem = 'donut_graph';
+			toggle_item_palette();
+			break;
 		case 'simple_value':
 			toolbuttonActive = creationItem = 'simple_value';
 			toggle_item_palette();
@@ -3876,12 +4087,14 @@ function click_button_toolbox(id) {
 				activeToolboxButton('static_graph', false);
 				activeToolboxButton('percentile_item', false);
 				activeToolboxButton('module_graph', false);
+				activeToolboxButton('bars_graph', false);
 				activeToolboxButton('simple_value', false);
 				activeToolboxButton('label', false);
 				activeToolboxButton('icon', false);
 				activeToolboxButton('service', false);
 				activeToolboxButton('group_item', false);
 				activeToolboxButton('auto_sla_graph', false);
+				activeToolboxButton('donut_graph', false);
 				activeToolboxButton('copy_item', false);
 				activeToolboxButton('edit_item', false);
 				activeToolboxButton('delete_item', false);
@@ -3907,11 +4120,13 @@ function click_button_toolbox(id) {
 				activeToolboxButton('static_graph', true);
 				activeToolboxButton('percentile_item', true);
 				activeToolboxButton('module_graph', true);
+				activeToolboxButton('bars_graph', true);
 				activeToolboxButton('simple_value', true);
 				activeToolboxButton('label', true);
 				activeToolboxButton('icon', true);
 				activeToolboxButton('group_item', true);
 				activeToolboxButton('auto_sla_graph', true);
+				activeToolboxButton('donut_graph', true);
 			}
 			break;
 		case 'save_visualmap':

pandora_console/include/graphs/functions_d3.php

@@ -384,4 +384,28 @@ function progress_circular_bar_interior ($id, $percentile, $width, $height, $col
 	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>";
+
+	return $output;
+}
+
 ?>

pandora_console/include/graphs/pandora.d3.js

@@ -1962,4 +1962,120 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
 			setTimeout(loops, 30);
 		}
 	})();
+}
+
+function print_donut_graph (recipient, width, height, module_data) {
+	var svg = d3.select(recipient)
+		.append("svg")
+			.attr("width", width)
+			.attr("height", height)
+		.append("g");
+
+	svg.append("g")
+		.attr("class", "slices");
+
+	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)
+		.innerRadius(radius * 0.4);
+
+	var key = function(d){ return d.data.label; };
+
+	var pie = d3.layout.pie()
+		.sort(null)
+		.value(function(d) {
+			return parseFloat(d.percent);
+		});
+
+	jQuery.each(module_data, function (key, m_d) {
+		svg.append("g")
+			.append("text")
+				.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")")
+				.text(m_d.tag_name)
+				.style("font-family", "Verdana")
+				.style("font-size", text_size + "px");
+		
+		increment_y -= increment_y_padding;
+	});
+
+	function donutData (){
+		return module_data.map(function(m_data){
+			return { label: m_data.tag_name, percent: m_data.percent, color : m_data.color}
+		});
+	}
+
+	print_phases(donutData());
+
+	function print_phases(data) {
+		var slice = svg.select(".slices").selectAll("path.slice")
+			.data(pie(data), key);
+
+		slice.enter()
+			.insert("path")
+			.style("fill", function(d) {
+					return d.data.color;
+			})
+			.attr("class", "slice")
+			.attr("transform", "translate(" + width / 2 + "," + (height - radius) + ")");
+
+		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();
+	}
 }