Merge branch '2214-Crear-nuevo-tipo-de-custom-graph-thermometer' into 'develop'

New graph thermometer - #2214

See merge request artica/pandorafms!1465

pandora_console/godmode/reporting/graph_builder.main.php

@@ -167,7 +167,8 @@ $stackeds = array(
 	CUSTOM_GRAPH_GAUGE => __('Gauge'),
 	CUSTOM_GRAPH_HBARS => __('Horizontal bars'),
 	CUSTOM_GRAPH_VBARS => __('Vertical bars'),
-	CUSTOM_GRAPH_PIE => __('Pie')
+	CUSTOM_GRAPH_PIE => __('Pie'),
+	CUSTOM_GRAPH_THERMOMETER => __('Thermometer')
 	);
 html_print_select ($stackeds, 'stacked', $stacked);
 

pandora_console/include/constants.php

@@ -444,6 +444,7 @@ define("CUSTOM_GRAPH_LINE",			2);
 define("CUSTOM_GRAPH_STACKED_LINE",	3);
 define("CUSTOM_GRAPH_BULLET_CHART",	4);
 define("CUSTOM_GRAPH_GAUGE",		5);
+define("CUSTOM_GRAPH_THERMOMETER",		10);
 define("CUSTOM_GRAPH_HBARS",		6);
 define("CUSTOM_GRAPH_VBARS",		7);
 define("CUSTOM_GRAPH_PIE",			8);

pandora_console/include/functions_graph.php

@@ -1927,6 +1927,72 @@ function graphic_combined_module (
 					$i++;
 				}
 				break;
+				case CUSTOM_GRAPH_THERMOMETER:
+					$datelimit = $date - $period;
+					$i = 0;
+					foreach ($module_list as $module_item) {
+						$automatic_custom_graph_meta = false;
+						if ($config['metaconsole']) {
+							// Automatic custom graph from the report template in metaconsole
+							if (is_array($module_list[$i])) {
+								$server = metaconsole_get_connection_by_id ($module_item['server']);
+								metaconsole_connect($server);
+								$automatic_custom_graph_meta = true;
+							}
+						}
+						
+						if ($automatic_custom_graph_meta)
+							$module = $module_item['module'];
+						else
+							$module = $module_item;
+						
+						$temp[$module] = modules_get_agentmodule($module);
+						$query_last_value = sprintf('
+							SELECT datos
+							FROM tagente_datos
+							WHERE id_agente_modulo = %d
+								AND utimestamp < %d
+								ORDER BY utimestamp DESC',
+							$module, $date);
+						$temp_data = db_get_value_sql($query_last_value);
+						if ( $temp_data ) {
+							if (is_numeric($temp_data))
+								$value = $temp_data;
+							else
+								$value = count($value);
+						}
+						else {
+							$value = false;
+						}
+						$temp[$module]['label'] = ($labels[$module] != '') ? $labels[$module] : $temp[$module]['nombre'];
+						
+						$temp[$module]['value'] = $value;
+						$temp[$module]['label'] = ui_print_truncate_text($temp[$module]['label'],"module_small",false,true,false,"..");
+						
+						if ($temp[$module]['unit'] == '%') {
+							$temp[$module]['min'] =	0;
+							$temp[$module]['max'] = 100;
+						}
+						else {
+							$min = $temp[$module]['min'];
+							if ($temp[$module]['max'] == 0)
+								$max = reporting_get_agentmodule_data_max($module,$period,$date);
+							else
+								$max = $temp[$module]['max'];
+							$temp[$module]['min'] = ($min == 0 ) ? 0 : $min;
+							$temp[$module]['max'] = ($max == 0 ) ? 100 : $max;
+						}
+						$temp[$module]['gauge'] = uniqid('gauge_');
+						
+						if ($config['metaconsole']) {
+							// Automatic custom graph from the report template in metaconsole
+							if (is_array($module_list[0])) {
+								metaconsole_restore_db();
+							}
+						}
+						$i++;
+					}
+					break;
 			default:
 				if (!is_null($percentil) && $percentil) {
 					foreach ($graph_values as $graph_group => $point) {
@@ -2403,6 +2469,13 @@ function graphic_combined_module (
 				"", "", $water_mark, $config['fontpath'], $fixed_font_size,
 				"", $ttl, $homeurl, $background_color);
 			break;
+		case CUSTOM_GRAPH_THERMOMETER:
+				return stacked_thermometers($flash_charts, $graph_values,
+					$width, $height, $color, $module_name_list, $long_index,
+					ui_get_full_url("images/image_problem_area_small.png", false, false, false),
+					"", "", $water_mark, $config['fontpath'], $fixed_font_size,
+					"", $ttl, $homeurl, $background_color);
+				break;			
 		case CUSTOM_GRAPH_HBARS:
 			return hbar_graph($flash_charts, $graph_values,
 				$width, $height, $color, $module_name_list, $long_index,

pandora_console/include/graphs/fgraph.php

@@ -531,6 +531,33 @@ function stacked_gauge($flash_chart, $chart_data, $width, $height,
 			);
 }
 
+function stacked_thermometers($flash_chart, $chart_data, $width, $height,
+	$color, $legend, $long_index, $no_data_image, $xaxisname = "",
+	$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
+	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') {
+	
+	include_once('functions_d3.php');
+	
+	setup_watermark($water_mark, $water_mark_file, $water_mark_url);
+	
+	if (empty($chart_data)) {
+		return '<img src="' . $no_data_image . '" />';
+	}
+	
+	return d3_thermometers(
+			$chart_data,
+			$width,
+			$height,
+			$color,
+			$legend,
+			$homeurl,
+			$unit,
+			$font,
+			$font_size + 2,
+			$no_data_image
+			);
+}
+
 function line_graph($flash_chart, $chart_data, $width, $height, $color,
 	$legend, $long_index, $no_data_image, $xaxisname = "",
 	$yaxisname = "", $water_mark = "", $font = '', $font_size = '',

pandora_console/include/graphs/functions_d3.php

@@ -285,6 +285,31 @@ function d3_gauges($chart_data, $width, $height, $color, $legend,
 	return $output;
 }
 
+function d3_thermometers($chart_data, $width, $height, $color, $legend,
+				$homeurl, $unit, $font, $font_size, $no_data_image) {
+	global $config;
+	
+	foreach ($chart_data as $key => $value) {
+		$chart_data[$key]['agent_name'] = agents_get_alias($chart_data[$key]['id_agente']);
+		$chart_data[$key]['label'] = io_safe_output($chart_data[$key]['label']);
+	}
+	
+	if (is_array($chart_data))
+		$data = json_encode($chart_data);
+	$output = include_javascript_d3(true);
+	
+	$count = 0;
+	
+	$output .= "<div id='thermometers_div' style='float:left; overflow: hidden; margin-left: 10px;'></div>";
+	
+	$output .= "<script language=\"javascript\" type=\"text/javascript\">
+					var data = $data;
+					createthermometers(data, '$width', '$height','$font_size','$no_data_image','$font');
+				</script>";
+
+	return $output;
+}
+
 function ux_console_phases_donut ($phases, $id, $return = false) {
 	global $config;
 
@@ -638,7 +663,6 @@ function print_clock_digital_1 ($time_format, $timezone, $clock_animation,$width
 				    </g>
 				  </g>
 				</svg>
-				
 				';
 				
 				

pandora_console/include/graphs/pandora.d3.js

@@ -1061,6 +1061,228 @@ function createGauges(data, width, height, font_size, no_data_image, font) {
 	
 }
 
+function createthermometers(data, width, height, font_size, no_data_image, font) {
+	
+for (var variable in data) {
+	module_data = data[variable];
+}
+
+// var svg = d3.select('.databox,.filters td')
+
+var svg = d3.select('#thermometers_div')
+		.append("svg")
+			.attr("width", 250)
+			.attr("height", 400);
+	
+	
+var rect = svg.append("rect")
+		.attr("x", 50)
+		.attr("y", 50)
+		.attr("width", 150)
+		.attr("height", 330)
+		.attr("fill", "black")
+		.attr("stroke-width", 5)
+		.attr("stroke", "rgb(37,133,177)")
+		.attr("rx", "10")
+		.attr("ry", "10")
+		.attr("fill", "rgb(235,235,235)");
+		
+		var circle = svg.append("circle")
+				.attr("cx", 130)
+				.attr("cy", 280)
+				.attr("r", 12)
+				.attr("height", 300)
+				.attr("fill", "rgb(74,185,197)");
+				
+		var progress_back = svg.append('rect')
+			.attr('fill', 'rgb(51,51,53)')
+			.attr('height', 200)
+			.attr('width', 12)
+			.attr('x', 123)
+			.attr('y', 70);
+			
+			
+			
+var defs = svg.append("defs");
+
+var gradient = defs.append("linearGradient")
+   .attr("id", "svgGradient")
+   .attr("x1", "0%")
+   .attr("x2", "0%")
+   .attr("y1", "100%")
+   .attr("y2", "0%");
+	 
+gradient.append("stop")
+   .attr('class', 'start')
+   .attr("offset", "0%")
+   .attr("stop-color", "rgb(74,185,197)");
+
+	 if(parseFloat(module_data.value) >= parseFloat(module_data.min_warning) && parseFloat(module_data.value) < parseFloat(module_data.min_critical)){
+	 		gradient.append("stop")
+	 		   .attr('class', 'end')
+	 		   .attr("offset", "100%")
+	 		   .attr("stop-color", "yellow");
+	 	}
+	 	else if((module_data.min_critical != 0 && module_data.max_critical != 0) && parseFloat(module_data.value) >= parseFloat(module_data.min_critical) && (parseFloat(module_data.value) <= parseFloat(module_data.max_critical) || parseFloat(module_data.max_critical) == 0)){
+	 		gradient.append("stop")
+	 		   .attr('class', 'end')
+	 		   .attr("offset", "100%")
+	 		   .attr("stop-color", "red");
+	 	}
+	 	else{
+	 		gradient.append("stop")
+	 			 .attr('class', 'end')
+	 			 .attr("offset", "100%")
+	 			 .attr("stop-color", "rgb(130,185,46)");
+	 	}
+
+		var progress_front = svg.append('rect')
+			.attr('fill', 'red')
+			.attr('height', 0)
+			.attr('width', 12)
+			.attr('x', 123)
+			.attr('y', 270)
+			.attr("fill", "url(#svgGradient)");
+			
+			if(module_data.value.toString().indexOf('.') != -1){
+				if(Math.trunc(module_data.value).toString().length > 1){
+						module_data.value = Math.trunc(module_data.value);
+				}
+				else {
+						module_data.value = parseFloat(module_data.value).toFixed(2);
+				}
+			}
+		
+			if(module_data.value >= 1000){
+				module_data.value_label = Math.trunc(module_data.value/1000);
+				var text = svg.append("text")
+						.attr("x", 100)
+						.attr("y", 320)
+						.style("font-size", "1.5em")
+						.text(module_data.value_label+"k"+" ["+module_data.unit+"]");
+			}
+			else{
+				var text = svg.append("text")
+						.attr("x", 100)
+						.attr("y", 320)
+						.style("font-size", "1.5em")
+						.text(module_data.value+" ["+module_data.unit+"]");
+			}
+			
+			
+			agent_text = module_data.agent_name;
+			
+			if(agent_text.length > 12){
+				agent_text = agent_text.substring(0, 10)+"...";
+			}
+			
+			var text = svg.append("text")
+					.attr("x", 65)
+					.attr("y", 370)
+					.style("font-size", "1.5em")
+					.text(agent_text);
+					
+					
+			label_text = module_data.label;
+					
+			if(label_text.length > 12){
+				label_text = label_text.substring(0, 10)+"...";
+			}
+			
+			var text = svg.append("text")
+					.attr("x", 65)
+					.attr("y", 350)
+					.style("font-size", "1.5em")
+					.text(label_text);
+					
+			var temp_sum = module_data.max-module_data.min;
+			var div_sum = (temp_sum/10);
+			var max_temp = module_data.max;
+			var min_temp = module_data.min;
+			var y = 75;
+			
+			var count = 0;
+			
+			var startPercent = 0;
+			var endPercent = module_data.value * 200 / max_temp;
+			
+			var step = endPercent / 20;
+			
+			while (max_temp >= min_temp) {
+								
+				if(count != 9){
+						if(max_temp.toString().indexOf('.') != -1){
+							if(Math.trunc(max_temp).toString().length > 1){
+									max_temp = Math.trunc(max_temp);
+							}
+							else {
+									max_temp = parseFloat(max_temp).toFixed(2);
+							}
+						}
+					
+						if(max_temp >= 1000){
+							max_temp_label = Math.trunc(max_temp/1000);
+							var text = svg.append("text")
+									.attr("x", 160)
+									.attr("y", y)
+									.style("font-size", "1.2em")
+									.text(max_temp_label+'k');
+						}
+						else{
+							var text = svg.append("text")
+									.attr("x", 160)
+									.attr("y", y)
+									.style("font-size", "1.2em")
+									.text(max_temp);
+						}
+						
+						var line = svg.append("line")
+								.attr("x1", 142)
+								.attr("y1", y-4)
+								.attr("x2", 153)
+								.attr("y2", y-4)
+								.attr("stroke", "black")
+								.style("font-size", "1.2em")
+								.text(max_temp);
+						
+						y += 20;
+				
+				max_temp = max_temp-div_sum;
+			}
+			if(count==10){
+				max_temp = module_data.min;
+			}
+			
+			count++;
+			}
+			
+			
+			
+			function updateProgress(bar_progress) {
+				var bar_progress = Number(bar_progress);
+				progress_front.attr('height', (bar_progress));
+				progress_front.attr('y', (270-bar_progress));
+			}
+
+			var bar_progress = startPercent;
+
+			(function loops() {
+				updateProgress(bar_progress);
+
+				if (bar_progress < endPercent) {
+					bar_progress += step;
+					setTimeout(loops, 30);
+				}
+				else{					
+					delete data[module_data['id_agente_modulo']];
+					if(Object.keys(data).length > 0){
+						createthermometers(data, width, height, font_size, no_data_image, font)
+					}
+				}
+			})();
+			
+}
+
 
 function Gauge(placeholderName, configuration, font)
 {

pandora_console/operation/reporting/graph_viewer.php

@@ -124,6 +124,12 @@ if ($view_graph) {
 		$height = $graph["height"];
 	}
 	
+	if ($stacked == CUSTOM_GRAPH_THERMOMETER ){
+		// Use the defined graph height, that's why
+		// the user can setup graph height.
+		$height = $graph["height"];
+	}
+	
 	$name = $graph["name"];
 	if (($graph["private"]==1) && ($graph["id_user"] != $id_user)) {
 		db_pandora_audit("ACL Violation",
@@ -235,6 +241,7 @@ if ($view_graph) {
 	$stackeds[CUSTOM_GRAPH_HBARS] = __('Horizontal Bars');
 	$stackeds[CUSTOM_GRAPH_VBARS] = __('Vertical Bars');
 	$stackeds[CUSTOM_GRAPH_PIE] = __('Pie');
+	$stackeds[CUSTOM_GRAPH_THERMOMETER] = __('Thermometer');
 	html_print_select ($stackeds, 'stacked', $stacked , '', '', -1, false, false);
 	echo "</td>";