From 3fbd9adc3867e18cf2c50e7d73c3c1d060ee4081 Mon Sep 17 00:00:00 2001
From: daniel <daniel.barbero@artica.es>
Date: Tue, 24 Apr 2018 13:19:24 +0200
Subject: [PATCH] fixed graph

---
 pandora_console/include/functions_graph.php   |   7 +-
 pandora_console/include/graphs/fgraph.php     |  26 ++--
 .../include/graphs/flot/pandora.flot.js       | 121 +++++++++---------
 .../include/graphs/functions_flot.php         |  17 +--
 pandora_console/include/styles/pandora.css    |   3 +-
 pandora_console/mobile/include/style/main.css |   4 -
 .../operation/agentes/stat_win.php            |  22 ++--
 7 files changed, 94 insertions(+), 106 deletions(-)

diff --git a/pandora_console/include/functions_graph.php b/pandora_console/include/functions_graph.php
index 3a534f15de..74e8e52886 100644
--- a/pandora_console/include/functions_graph.php
+++ b/pandora_console/include/functions_graph.php
@@ -679,13 +679,14 @@ function grafico_modulo_sparse ($agent_module_id, $period, $show_events,
 
 	// ATTENTION: The min size is in constants.php
 	// It's not the same minsize for all graphs, but we are choosed a prudent minsize for all
+	/*
 	if ($height <= CHART_DEFAULT_HEIGHT) {
 		$height = CHART_DEFAULT_HEIGHT;
 	}
 	if ($width < CHART_DEFAULT_WIDTH) {
 		$width = CHART_DEFAULT_WIDTH;
 	}
-
+	*/
 	$format_graph = array();
 	$format_graph['width']      = $width;
 	$format_graph['height']     = $height;
@@ -2367,10 +2368,6 @@ function fullscale_data_combined($module_list, $period, $date, $flash_charts, $p
 		foreach ($data_uncompress as $key_data => $value_data) {
 			foreach ($value_data['data'] as $k => $v) {
 				$real_date = $v['utimestamp'];
-<<<<<<< HEAD
-
-=======
->>>>>>> origin/develop
 				if(!isset($v['datos'])){
 					$v['datos'] = $previous_data;
 				}
diff --git a/pandora_console/include/graphs/fgraph.php b/pandora_console/include/graphs/fgraph.php
index 347aeb37d1..6feb3f700b 100644
--- a/pandora_console/include/graphs/fgraph.php
+++ b/pandora_console/include/graphs/fgraph.php
@@ -251,20 +251,20 @@ function area_graph(
 		//XXXXX
 		//Corregir este problema
 		$graph = array();
-		$graph['data'] = $chart_data;
-		$graph['width'] = $width;
-		$graph['height'] = $height;
-		$graph['color'] = $color;
-		$graph['legend'] = $legend;
-		$graph['xaxisname'] = $xaxisname;
-		$graph['yaxisname'] = $yaxisname;
-		$graph['water_mark'] = $water_mark_file;
-		$graph['font'] = $font;
-		$graph['font_size'] = $font_size;
+		$graph['data']            = $chart_data;
+		$graph['width']           = $width;
+		$graph['height']          = $height;
+		$graph['color']           = $color;
+		$graph['legend']          = $legend;
+		$graph['xaxisname']       = $xaxisname;
+		$graph['yaxisname']       = $yaxisname;
+		$graph['water_mark']      = $water_mark_file;
+		$graph['font']            = $font;
+		$graph['font_size']       = $font_size;
 		$graph['backgroundColor'] = $backgroundColor;
-		$graph['unit'] = $unit;
-		$graph['series_type'] = $series_type;
-		$graph['percentil'] = $percentil_values;
+		$graph['unit']            = $unit;
+		$graph['series_type']     = $series_type;
+		$graph['percentil']       = $percentil_values;
 
 		$id_graph = serialize_in_temp($graph, null, $ttl);
 		// Warning: This string is used in the function "api_get_module_graph" from 'functions_api.php' with the regec patern "/<img src='(.+)'>/"
diff --git a/pandora_console/include/graphs/flot/pandora.flot.js b/pandora_console/include/graphs/flot/pandora.flot.js
index 6f1c069158..60f7547dcd 100644
--- a/pandora_console/include/graphs/flot/pandora.flot.js
+++ b/pandora_console/include/graphs/flot/pandora.flot.js
@@ -959,12 +959,6 @@ function adjust_left_width_canvas(adapter_id, adapted_id) {
 	$('#'+adapted_id).css('margin-left', adapter_left_margin);
 }
 
-
-function update_left_width_canvas(graph_id) {
-	$('#overview_'+graph_id).width($('#'+graph_id).width());
-	$('#overview_'+graph_id).css('margin-left', $('#'+graph_id+' .yAxis .tickLabel').width());
-}
-
 function check_adaptions(graph_id) {
 	var classes = $('#'+graph_id).attr('class').split(' ');
 
@@ -1132,6 +1126,7 @@ function pandoraFlotArea(
 	background_color, legend_color, short_data,
 	events_array
 ) {
+	console.log(format_graph.font_size);
 	//diferents vars
 	var unit      = format_graph.unit ? format_graph.unit : '';
 	var homeurl   = format_graph.homeurl;
@@ -1156,8 +1151,6 @@ function pandoraFlotArea(
 
 	//XXXX ver que hay que hacer
 	var type          = 'area_simple';
-	//var xaxisname     = 'xaxisname';
-
 	var labels_long   = '';
 	var min_check     = 0;
 	var water_mark    = '';
@@ -1784,7 +1777,7 @@ function pandoraFlotArea(
 
 	// The first execution, the graph data is the base data
 	datas = data_base;
-
+	font_size = 8;
 	// minTickSize
 	var count_data = datas[0].data.length;
 	var min_tick_pixels = 80;
@@ -1799,7 +1792,7 @@ function pandoraFlotArea(
 				mode: 'xy'
 			},
 			selection: {
-				mode: 'x',
+				mode: 'xy',
 				color: '#777'
 			},
 			export: {
@@ -1885,38 +1878,48 @@ function pandoraFlotArea(
 		var overview = $.plot($('#overview_'+graph_id),datas, {
 			series: {
 				stack: stacked,
-				lines: {
-					show: true,
-					lineWidth: 1
-				},
-				shadowSize: 0
+				shadowSize: 0.1
+			},
+			crosshair: {
+				mode: 'xy'
+			},
+			selection: {
+				mode: 'xy',
+				color: '#777'
+			},
+			export: {
+				export_data: true,
+				labels_long: labels_long,
+				homeurl: homeurl
 			},
 			grid: {
-				borderWidth: 1,
-				borderColor: '#C1C1C1',
 				hoverable: true,
-				autoHighlight: false
+				clickable: true,
+				borderWidth:1,
+				borderColor: '#C1C1C1',
+				tickColor: background_color,
+				color: legend_color
 			},
-			xaxes: [ {
+			xaxes: [{
 				axisLabelFontSizePixels: font_size,
 				mode: "time",
 				tickFormatter: xFormatter,
 				tickSize: [maxticks, 'hour'],
-				labelWidth: 70,
-			} ],
-			yaxis: {
-				ticks: [],
-				autoscaleMargin: 0.1
-			},
-			selection: {
-				mode: 'x',
-				color: '#777'
-			},
+				labelWidth: 70
+			}],
+			yaxes: [{
+				tickFormatter: yFormatter,
+				color: '',
+				alignTicksWithAxis: 1,
+				labelWidth: 30,
+				position: 'left',
+				font: font,
+				reserveSpace: true,
+			}],
 			legend: {
-				show: false
-			},
-			crosshair: {
-				mode: 'x'
+				position: 'se',
+				container: $('#legend_' + graph_id),
+				labelFormatter: lFormatter
 			}
 		});
 	}
@@ -1954,6 +1957,19 @@ function pandoraFlotArea(
 					tickFormatter: xFormatter,
 					tickSize: [maxticks_zoom, 'hour']
 				}],
+				yaxis:{
+					min: ranges.yaxis.from,
+					max: ranges.yaxis.to
+				},
+				yaxes: [{
+					tickFormatter: yFormatter,
+					color: '',
+					alignTicksWithAxis: 1,
+					labelWidth: 30,
+					position: 'left',
+					font: font,
+					reserveSpace: true,
+				}],
 				legend: {
 					show: true
 				}
@@ -2121,7 +2137,6 @@ function pandoraFlotArea(
 		plot.setCrosshair({ x: pos.x, y: 0 });
 		currentPlot = plot;
 		latestPosition = pos;
-
 		if (!updateLegendTimeout) {
 			updateLegendTimeout = setTimeout(updateLegend, 50);
 		}
@@ -2285,31 +2300,20 @@ function pandoraFlotArea(
 	if (menu) {
 		var parent_height;
 		$('#menu_overview_' + graph_id).click(function() {
-			$('#overview_' + graph_id).toggle();
+			if($('#overview_' + graph_id).css('visibility') == 'visible'){
+				$('#overview_' + graph_id).css('visibility', 'hidden');
+			}
+			else{
+				$('#overview_' + graph_id).css('visibility', 'visible');
+			}
 		});
 
-		//~ $('#menu_export_csv_' + graph_id).click(function() {
-			//~ exportData({ type: 'csv' });
-		//~ });
-
 		$("#menu_export_csv_"+graph_id)
 			.click(function (event) {
 				event.preventDefault();
 				plot.exportDataCSV();
 		});
 
-		//Not a correct call
-		//~ $('#menu_export_json_' + graph_id).click(function() {
-			//~ exportData({ type: 'json' });
-		//~ });
-
-		//This is a correct call to export data in json
-		//~ $("#menu_export_json_"+graph_id)
-			//~ .click(function (event) {
-				//~ event.preventDefault();
-				//~ plot.exportDataJSON();
-		//~ });
-
 		$('#menu_threshold_' + graph_id).click(function() {
 			datas = new Array();
 
@@ -2408,12 +2412,6 @@ function adjust_menu(graph_id, plot, parent_height, width) {
 	var parent_height_new = 0;
 
 	var legend_height = parseInt($('#legend_'+graph_id).css('height').split('px')[0]) + parseInt($('#legend_'+graph_id).css('margin-top').split('px')[0]);
-	if ($('#overview_'+graph_id).css('display') == 'none') {
-		overview_height = 0;
-	}
-	else {
-		overview_height = parseInt($('#overview_'+graph_id).css('height').split('px')[0]) + parseInt($('#overview_'+graph_id).css('margin-top').split('px')[0]);
-	}
 
 	var menu_height = '25';
 
@@ -2422,13 +2420,9 @@ function adjust_menu(graph_id, plot, parent_height, width) {
 	}
 
 	offset = $('#' + graph_id)[0].offsetTop;
-	
+
 	$('#menu_' + graph_id).css('top', ((offset) + 'px'));
 
-	//$('#legend_' + graph_id).css('width',plot.width());
-
-	//~ $('#menu_' + graph_id).css('left', $('#'+graph_id)[0].offsetWidth);
-	
 	$('#menu_' + graph_id).show();
 }
 
@@ -2498,9 +2492,8 @@ function adjust_left_width_canvas(adapter_id, adapted_id) {
 	$('#'+adapted_id).css('margin-left', adapter_left_margin);
 }
 
-
 function update_left_width_canvas(graph_id) {
-	$('#overview_'+graph_id).width($('#'+graph_id).width() - 30);
+	$('#overview_'+graph_id).width($('#'+graph_id).width());
 	$('#overview_'+graph_id).css('margin-left', $('#'+graph_id+' .yAxis .tickLabel').width());
 }
 
diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php
index 8a00b5ee69..edc782f654 100644
--- a/pandora_console/include/graphs/functions_flot.php
+++ b/pandora_console/include/graphs/functions_flot.php
@@ -205,7 +205,7 @@ function flot_area_graph (
 	}
 
 	// Parent layer
-	$return = "<div class='parent_graph' style='width: " . ($format_graph['width']) . "px; " . $background_style . "'>";
+	$return = "<div class='parent_graph' style='width: " . ($format_graph['width']) . "; " . $background_style . "'>";
 	// Set some containers to legend, graph, timestamp tooltip, etc.
 	$return .= "<p id='legend_$graph_id' class='legend_graph' style='font-size:" . $format_graph['font_size'] ."pt !important;'></p>";
 
@@ -260,13 +260,14 @@ function flot_area_graph (
 	}
 
 	if (!$vconsole){
-		$return .= "<div 	id='overview_$graph_id'
-							class='overview_graph'
-							style='	display: none; margin-left:0px;
-									margin-top:20px; margin-bottom:50px;
-									width: ".$format_graph['width']."px;
-									height: ".$format_graph['height'] ."px;'></div>";
+		$return .= "<div id='overview_$graph_id'
+						class='overview_graph'
+						style='	 margin:0px; margin-top:30px; margin-bottom:50px;
+							visibility:hidden;
+							width: ".$format_graph['width'].";
+							height: 200px;'></div>";
 	}
+
 	//XXXXTODO
 	$water_mark = '';
 	if ($water_mark != '') {
@@ -377,7 +378,7 @@ function menu_graph(
 		$return .= "<div id='geneal_menu_$graph_id' class='menu_graph' style='
 						width: 30px;
 						height: 250px;
-						left: " . $width . "px;
+						left: 100%;
 						position: absolute;
 						top: 0px;
 						background-color: white;'>";
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 9b39270e66..f9a2539827 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -4628,8 +4628,9 @@ form ul.form_flex li ul li{
 	border: 0px;
 }
 
+/*
 .tickLabel {
     white-space: nowrap;
     line-height: 1.05em!important;
 }
-
+*/
diff --git a/pandora_console/mobile/include/style/main.css b/pandora_console/mobile/include/style/main.css
index 09f1cf373e..67cd549c76 100755
--- a/pandora_console/mobile/include/style/main.css
+++ b/pandora_console/mobile/include/style/main.css
@@ -316,10 +316,6 @@ div.graph {
 	margin: 0 auto;
 }
 
-.tickLabels * {
-	font-size: 10px !important;
-}
-
 table.alternate tr:nth-child(odd) td, table.alternate tr:nth-child(odd) th{
 	background-color: #ffffff;
 }
diff --git a/pandora_console/operation/agentes/stat_win.php b/pandora_console/operation/agentes/stat_win.php
index 75a8f3c899..c56f855d6e 100644
--- a/pandora_console/operation/agentes/stat_win.php
+++ b/pandora_console/operation/agentes/stat_win.php
@@ -90,7 +90,6 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
 			}
 		?>
 		<script type='text/javascript'>
-			<!--
 			window.onload = function() {
 				// Hack to repeat the init process to period select
 				var periodSelectId = $('[name="period"]').attr('class');
@@ -105,15 +104,7 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
 				else {
 					$("#hidden-show_other").val(0);
 				}
-				// 
-				// if ($('#hidden-avg_only_sent').is(":checked") == true) {
-				// 	$("#hidden-avg_only_sent").val(1);
-				// }
-				// else {
-				// 	$("#hidden-avg_only_sent").val(0);
-				// }
 			}
-			//-->
 		</script>
 	</head>
 	<body bgcolor="#ffffff" style='background:#ffffff;'>
@@ -163,8 +154,14 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
 
 		$period = get_parameter ("period");
 		$id = get_parameter ("id", 0);
+		
+//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+		/*
 		$width = get_parameter ("width", STATWIN_DEFAULT_CHART_WIDTH);
 		$height = get_parameter ("height", STATWIN_DEFAULT_CHART_HEIGHT);
+		*/
+	
+
 		$label = get_parameter ("label", "");
 		$label_graph = base64_decode(get_parameter ("label", ""));
 		$start_date = get_parameter ("start_date", date("Y/m/d"));
@@ -189,7 +186,7 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
 			}
 			elseif($config['full_scale_option'] == 2){
 				if($graph_type == 'boolean'){
-					$fullscale = 1;	
+					$fullscale = 1;
 				}else{
 					$fullscale = 0;
 				}
@@ -229,12 +226,14 @@ $alias = db_get_value ("alias","tagente","id_agente",$id_agent);
 		$unit = db_get_value('unit', 'tagente_modulo', 'id_agente_modulo', $id);
 
 		// log4x doesnt support flash yet
-		//
 		if ($config['flash_charts'] == 1)
 			echo '<div style="margin-left: 65px; padding-top: 10px;">';
 		else
 			echo '<div style="margin-left: 20px; padding-top: 10px;">';
 
+		$width  = '90%';
+		$height = '450';
+
 		switch ($graph_type) {
 			case 'boolean':
 			case 'sparse':
@@ -488,6 +487,7 @@ ui_include_time_picker(true);
 		var show_overview = false;
 		var height_window;
 		var width_window;
+
 		$(window).ready(function() {
 			height_window = window.innerHeight;
 			width_window = window.innerWidth;