From 688acb8a4b1f3dcc1460253da071598ab2e96984 Mon Sep 17 00:00:00 2001 From: daniel Date: Fri, 23 Feb 2018 14:31:00 +0100 Subject: [PATCH] fixed error graphs --- pandora_console/include/functions.php | 256 ++--------- pandora_console/include/functions_graph.php | 11 +- .../include/graphs/flot/pandora.flot.js | 435 +++++++++--------- .../include/graphs/functions_flot.php | 12 +- 4 files changed, 263 insertions(+), 451 deletions(-) diff --git a/pandora_console/include/functions.php b/pandora_console/include/functions.php index 3b5dc766f0..b2b3d532ac 100644 --- a/pandora_console/include/functions.php +++ b/pandora_console/include/functions.php @@ -2919,225 +2919,53 @@ function legend_graph_array( $series_suffix_str, $format_graph, $show_elements_graph, - $percentil_value){ - + $percentil_value, + $data_module_graph){ + + global $config; + global $legend; $unit = $format_graph['unit']; - if ($show_elements_graph['show_events']) { - $legend['event'.$series_suffix_str] = __('Events').$series_suffix_str; + $legend['sum'.$series_suffix] = + $data_module_graph['module_name'] . ' ' . + __('Min:') . remove_right_zeros( + number_format( + $min, + $config['graph_precision'] + ) + ) . ' ' . + __('Max:') . remove_right_zeros( + number_format( + $max, + $config['graph_precision'] + ) + ) . ' ' . + _('Avg:') . remove_right_zeros( + number_format( + $max, + $config['graph_precision'] + ) + ) . ' ' . $series_suffix_str; + + if($show_elements_graph['show_unknown']){ + $legend['unknown'.$series_suffix] = __('Unknown') . ' ' . $series_suffix_str; } - if ($show_elements_graph['show_alerts']) { - $legend['alert'.$series_suffix] = __('Alerts').$series_suffix_str; + if($show_elements_graph['show_events']){ + $legend['event'.$series_suffix] = __('Events') . ' ' . $series_suffix_str; + } + if($show_elements_graph['show_alerts']){ + $legend['alert'.$series_suffix] = __('Alert') . ' ' . $series_suffix_str; + } + if($show_elements_graph['percentil']){ + $legend['percentil'.$series_suffix] = __('Percentil') . ' Value: ' . + remove_right_zeros( + number_format( + $percentil_value, + $config['graph_precision'] + ) + ) . ' ' . $series_suffix_str; } - if ($show_elements_graph['vconsole']) { - $legend['sum'.$series_suffix] = - __('Last') . ': ' . - remove_right_zeros( - number_format( - $graph_stats['sum']['last'], - $config['graph_precision'] - ) - ) . ($unit ? ' ' . $unit : '') . ' ; '. - __('Avg') . ': ' . - remove_right_zeros( - number_format( - $graph_stats['sum']['avg'], - $config['graph_precision'] - ) - ) . ($unit ? ' ' . $unit : '' - ); - } - else if ( $show_elements_graph['dashboard'] && - !$show_elements_graph['avg_only'] ) { - - $legend['max'.$series_suffix] = - __('Max').$series_suffix_str.': '.__('Avg').': '. - remove_right_zeros( - number_format( - $graph_stats['max']['avg'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Max').': '. - remove_right_zeros( - number_format( - $graph_stats['max']['max'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Min').': '. - remove_right_zeros( - number_format( - $graph_stats['max']['min'], - $config['graph_precision'] - ) - ).' '.$unit; - - $legend['sum'.$series_suffix] = - __('Avg').$series_suffix_str.': '.__('Avg').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['avg'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Max').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['max'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Min').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['min'], - $config['graph_precision'] - ) - ).' '.$unit; - - $legend['min'.$series_suffix] = - __('Min').$series_suffix_str.': '.__('Avg').': '. - remove_right_zeros( - number_format( - $graph_stats['min']['avg'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Max').': '. - remove_right_zeros( - number_format( - $graph_stats['min']['max'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Min').': '. - remove_right_zeros( - number_format( - $graph_stats['min']['min'], - $config['graph_precision'] - ) - ).' '.$unit; - } - else if ($show_elements_graph['dashboard']) { - $legend['sum'.$series_suffix] = - __('Last') . ': ' . - remove_right_zeros( - number_format( - $graph_stats['sum']['last'], - $config['graph_precision'] - ) - ) . ($unit ? ' ' . $unit : '') . ' ; '. - __('Avg') . ': ' . - remove_right_zeros( - number_format( - $graph_stats['sum']['avg'], - $config['graph_precision'] - ) - ) . ($unit ? ' ' . $unit : ''); - } - else if (!$show_elements_graph['avg_only'] && - !$show_elements_graph['fullscale']) { - - $legend['max'.$series_suffix] = - __('Max').$series_suffix_str.': '.__('Avg').': '. - remove_right_zeros( - number_format( - $graph_stats['max']['avg'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Max').': '. - remove_right_zeros( - number_format( - $graph_stats['max']['max'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Min').': '. - remove_right_zeros( - number_format( - $graph_stats['max']['min'], - $config['graph_precision'] - ) - ).' '.$unit; - - $legend['sum'.$series_suffix] = - __('Avg').$series_suffix_str.': '. - __('Avg').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['avg'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Max').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['max'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Min').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['min'], - $config['graph_precision'] - ) - ).' '.$unit; - - $legend['min'.$series_suffix] = - __('Min').$series_suffix_str.': '. - __('Avg').': '. - remove_right_zeros( - number_format( - $graph_stats['min']['avg'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Max').': '. - remove_right_zeros( - number_format( - $graph_stats['min']['max'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Min').': '. - remove_right_zeros( - number_format( - $graph_stats['min']['min'], - $config['graph_precision'] - ) - ).' '.$unit; - } - else if ($show_elements_graph['fullscale']){ - $legend['sum'.$series_suffix] = - __('Data').$series_suffix_str.': '; - } - else { - $legend['sum'.$series_suffix] = - __('Avg').$series_suffix_str.': '. - __('Avg').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['avg'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '. - __('Max').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['max'], - $config['graph_precision'] - ) - ).' '.$unit.' ; '.__('Min').': '. - remove_right_zeros( - number_format( - $graph_stats['sum']['min'], - $config['graph_precision'] - ) - ).' '.$unit; - } - - if ($show_elements_graph['show_unknown']) { - $legend['unknown'.$series_suffix] = - __('Unknown').$series_suffix_str; - } - - if (!is_null($show_elements_graph['percentil']) && - $show_elements_graph['percentil']) { - $legend['percentil'.$series_suffix] = - __('Percentile %dº', $percentil) . $series_suffix_str . " (" . $percentil_value . " " . $unit . ") "; - } return $legend; } ?> diff --git a/pandora_console/include/functions_graph.php b/pandora_console/include/functions_graph.php index c62552f67f..012196c8ad 100644 --- a/pandora_console/include/functions_graph.php +++ b/pandora_console/include/functions_graph.php @@ -844,13 +844,14 @@ function grafico_modulo_sparse_data_new( } } - $legend = legend_graph_array( + legend_graph_array( $max, $min, $avg, $series_suffix, - $series_suffix_str, + $str_series_suffix, $format_graph, $show_elements_graph, - $percentil_value + $percentil_value, + $data_module_graph ); $series_type['event'.$series_suffix] = 'points'; @@ -862,8 +863,7 @@ function grafico_modulo_sparse_data_new( else{ $series_type['sum'.$series_suffix] = 'area'; } - $series_type['percentil' . $series_suffix] = 'line'; - + $series_type['percentil' . $series_suffix] = 'percentil'; } function grafico_modulo_sparse_data ($agent_module_id, $period, $show_events, @@ -1034,7 +1034,6 @@ function grafico_modulo_sparse_data ($agent_module_id, $period, $show_events, graphic_error (); } - // Data iterator $data_i = 0; diff --git a/pandora_console/include/graphs/flot/pandora.flot.js b/pandora_console/include/graphs/flot/pandora.flot.js index 83f459a3ca..968c0d7600 100644 --- a/pandora_console/include/graphs/flot/pandora.flot.js +++ b/pandora_console/include/graphs/flot/pandora.flot.js @@ -869,7 +869,6 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, yellow_up, red_up, yellow_inverse, red_inverse, series_suffix_str, dashboard, vconsole, xaxisname,background_color,legend_color, short_data) { -console.log(legend_events); var threshold = true; var thresholded = false; @@ -2121,23 +2120,26 @@ console.log(legend_events); } function adjust_menu(graph_id, plot, parent_height, width) { + /* if ($('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width') != undefined) { left_ticks_width = $('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width').split('px')[0]; } else { left_ticks_width = 0; } - + */ 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'; if ($('#menu_'+graph_id).height() != undefined && $('#menu_'+graph_id).height() > 20) { @@ -2223,7 +2225,7 @@ function adjust_left_width_canvas(adapter_id, adapted_id) { 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()); } @@ -2387,19 +2389,18 @@ function pandoraFlotAreaNew( format_graph, force_integer, series_suffix_str, background_color, legend_color, short_data ) { - console.log(series_suffix_str); - console.log('asdasdasdas'); - //vars - var unit = format_graph.unit ? format_graph.unit : ''; - var homeurl = format_graph.homeurl; - var font_size = format_graph.font_size; - var font = format_graph.font; - var width = format_graph.width; - var height = format_graph.height; - var vconsole = show_elements_graph.vconsole; - var dashboard = show_elements_graph.dashboard; - var menu = show_elements_graph.menu; - var max_x = date_array['final_date'] *1000; + console.log(legend); + //diferents vars + var unit = format_graph.unit ? format_graph.unit : ''; + var homeurl = format_graph.homeurl; + var font_size = format_graph.font_size; + var font = format_graph.font; + var width = format_graph.width; + var height = format_graph.height; + var vconsole = show_elements_graph.vconsole; + var dashboard = show_elements_graph.dashboard; + var menu = show_elements_graph.menu; + var max_x = date_array['final_date'] *1000; //for threshold var threshold = true; @@ -2408,70 +2409,73 @@ function pandoraFlotAreaNew( var red_threshold = parseFloat (data_module_graph.c_min); var yellow_up = parseFloat (data_module_graph.w_max); var red_up = parseFloat (data_module_graph.c_max); - var yellow_inverse = parseInt(data_module_graph.w_inv); - var red_inverse = parseInt(data_module_graph.c_inv); + var yellow_inverse = parseInt (data_module_graph.w_inv); + var red_inverse = parseInt (data_module_graph.c_inv); - //XXXX - var type = 'area_simple'; - var xaxisname = 'xaxisname'; - var labels_long = ''; - var min_check = 0; - var water_mark = ''; + //XXXX ver que hay que hacer + var type = 'area_simple'; + //var xaxisname = 'xaxisname'; + + var labels_long = ''; + var min_check = 0; + var water_mark = ''; + var legend_events = null; var legend_alerts = null; switch (type) { case 'line_simple': stacked = null; - filled = false; + filled = false; break; case 'line_stacked': stacked = 'stack'; - filled = false; + filled = false; break; case 'area_simple': stacked = null; - filled = true; + filled = true; break; case 'area_stacked': stacked = 'stack'; - filled = true; + filled = true; break; } - var datas = new Array(); + var datas = new Array(); var data_base = new Array(); - var data2 = new Array(); - i=0; var lineWidth = $('#hidden-line_width_graph').val() || 1; + + i=0; $.each(values, function (index, value) { if (typeof value.data !== "undefined") { switch (series_type[index]) { case 'area': - line_show = true; + line_show = true; points_show = false; // XXX - false - filled = 0.2; + filled = 0.2; steps_chart = false; break; + case 'percentil': case 'line': default: - line_show = true; + line_show = true; points_show = false; - filled = false; + filled = false; steps_chart = false; break; case 'points': - line_show = false; + line_show = false; points_show = true; - filled = false; + filled = false; steps_chart = false break; case 'unknown': case 'boolean': - line_show = true; + line_show = true; points_show = false; - filled = true; + filled = true; steps_chart = true; break; } @@ -2491,7 +2495,7 @@ function pandoraFlotAreaNew( i++; } }); - console.log(series_suffix_str); + // If threshold and up are the same, that critical or warning is disabled if (yellow_threshold == yellow_up){ yellow_inverse = false; @@ -2510,12 +2514,12 @@ function pandoraFlotAreaNew( var red_only_min = ((red_up == 0) && (red_threshold != 0)); //color - var normalw = '#efe'; - var warningw = '#ffe'; + var normalw = '#efe'; + var warningw = '#ffe'; var criticalw = '#fee'; - var normal = '#0f0'; - var warning = '#ff0'; - var critical = '#f00'; + var normal = '#0f0'; + var warning = '#ff0'; + var critical = '#f00'; if (threshold) { // Warning interval. Change extremes depends on critical interval @@ -3022,18 +3026,19 @@ function pandoraFlotAreaNew( var count_data = datas[0].data.length; var min_tick_pixels = 80; - if (unit != "") { - xaxisname = xaxisname + " (" + unit + ")" - } - var maxticks = date_array['period'] / 3600 /6; var options = { series: { stack: stacked, shadowSize: 0.1 }, - crosshair: { mode: 'xy' }, - selection: { mode: 'x', color: '#777' }, + crosshair: { + mode: 'xy' + }, + selection: { + mode: 'x', + color: '#777' + }, export: { export_data: true, labels_long: labels_long, @@ -3062,7 +3067,6 @@ function pandoraFlotAreaNew( position: 'left', font: font, reserveSpace: true, - }], legend: { position: 'se', @@ -3077,7 +3081,11 @@ function pandoraFlotAreaNew( options.selection = false; } - var stack = 0, bars = true, lines = false, steps = false; + var stack = 0, + bars = true, + lines = false, + steps = false; + var plot = $.plot($('#' + graph_id), datas, options); // Re-calculate the graph height with the legend height @@ -3114,20 +3122,39 @@ function pandoraFlotAreaNew( var overview = $.plot($('#overview_'+graph_id),datas, { series: { stack: stacked, - lines: { show: true, lineWidth: 1 }, + lines: { + show: true, + lineWidth: 1 + }, shadowSize: 0 }, - grid: { borderWidth: 1, hoverable: true, autoHighlight: false}, - xaxis: { }, - xaxes: [ { - tickFormatter: xFormatter, - minTickSize: steps, - color: '' - } ], - yaxis: {ticks: [], autoscaleMargin: 0.1 }, - selection: {mode: 'x', color: '#777' }, - legend: {show: false}, - crosshair: {mode: 'x'} + grid: { + borderWidth: 1, + borderColor: '#C1C1C1', + hoverable: true, + autoHighlight: false + }, + xaxes: [ { + axisLabelFontSizePixels: font_size, + mode: "time", + tickFormatter: xFormatter, + tickSize: [maxticks, 'hour'], + labelWidth: 70, + } ], + yaxis: { + ticks: [], + autoscaleMargin: 0.1 + }, + selection: { + mode: 'x', + color: '#777' + }, + legend: { + show: false + }, + crosshair: { + mode: 'x' + } }); } // Connection between plot and miniplot @@ -3139,53 +3166,35 @@ function pandoraFlotAreaNew( } dataInSelection = ranges.xaxis.to - ranges.xaxis.from; - //time_format_y = dataInSelection; - dataInPlot = plot.getData()[0].data.length; - factor = dataInSelection / dataInPlot; - - new_steps = parseInt(factor * steps); var maxticks_zoom = dataInSelection / 3600000 / 6; - flag_caca = 0; - if(maxticks_zoom < 0.005){ - flag_caca = 1; + if(maxticks_zoom < 0.001){ maxticks_zoom = dataInSelection / 60000 / 6; - if(maxticks_zoom < 0.005){ - maxticks_zoom = 1; + if(maxticks_zoom < 0.001){ + maxticks_zoom = 0; } } - - console.log(maxticks_zoom); - if(flag_caca == 0){ - plot = $.plot($('#' + graph_id), data_base, - $.extend(true, {}, options, { - grid: { borderWidth: 1, hoverable: true, autoHighlight: false}, - xaxis: { min: ranges.xaxis.from, - max: ranges.xaxis.to - }, - xaxes: [ { - mode: "time", - tickFormatter: xFormatter, - tickSize: [maxticks_zoom, 'hour'] - } ], - legend: { show: true } - })); - } - else{ - plot = $.plot($('#' + graph_id), data_base, - $.extend(true, {}, options, { - grid: { borderWidth: 1, hoverable: true, autoHighlight: false}, - xaxis: { min: ranges.xaxis.from, - max: ranges.xaxis.to - }, - xaxes: [ { - mode: "time", - tickFormatter: xFormatter, - tickSize: [maxticks_zoom, 'minute'] - } ], - legend: { show: true } - })); - } + + plot = $.plot($('#' + graph_id), data_base, + $.extend(true, {}, options, { + grid: { + borderWidth: 1, + hoverable: true, + autoHighlight: true + }, + xaxis: { + min: ranges.xaxis.from, + max: ranges.xaxis.to + }, + xaxes: [{ + mode: "time", + tickFormatter: xFormatter, + tickSize: [maxticks_zoom, 'hour'] + }], + legend: { + show: true + } + })); if (thresholded) { var zoom_data_threshold = new Array (); @@ -3204,8 +3213,10 @@ function pandoraFlotAreaNew( max: plot.getAxes().xaxis.max } })); + zoom_data_threshold = add_threshold (data_base, threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max, red_threshold, extremes, red_up); + plot.setData(zoom_data_threshold); plot.draw(); } @@ -3224,47 +3235,79 @@ function pandoraFlotAreaNew( plot.setSelection(ranges); }); - var legends = $('#legend_' + graph_id + ' .legendLabel'); - var updateLegendTimeout = null; - var latestPosition = null; - var currentPlot = null; - var currentRanges = null; + var latestPosition = null; + var currentPlot = null; + var currentRanges = null; // Update legend with the data of the plot in the mouse position function updateLegend() { + console.log(currentPlot); updateLegendTimeout = null; var pos = latestPosition; - var axes = currentPlot.getAxes(); if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) { return; } - var j, dataset = currentPlot.getData(); + $('#timestamp_'+graph_id).show(); + + var d = new Date(pos.x); + var monthNames = [ + "Jan", "Feb", "Mar", + "Apr", "May", "Jun", + "Jul", "Aug", "Sep", + "Oct", "Nov", "Dec" + ]; + + date_format = (d.getDate() <10?'0':'') + d.getDate() + " " + + monthNames[d.getMonth()] + " " + + d.getFullYear() + "\n" + + (d.getHours()<10?'0':'') + d.getHours() + ":" + + (d.getMinutes()<10?'0':'') + d.getMinutes() + ":" + + (d.getSeconds()<10?'0':'') + d.getSeconds(); + $('#timestamp_'+graph_id).text(date_format); + + var timesize = $('#timestamp_'+graph_id).width(); + + dataset = currentPlot.getData(); + + var timenewpos = dataset[0].xaxis.p2c(pos.x)+$('.yAxis>div').eq(0).width(); + var canvaslimit = $('#'+graph_id).width(); + + + $('#timestamp_'+graph_id).css('top', currentPlot.offset().top - $('#timestamp_'+graph_id).height()*2.5); + + + if (timesize+timenewpos > canvaslimit) { + $('#timestamp_'+graph_id).css('left', timenewpos - timesize); + } + else { + $('#timestamp_'+graph_id).css('left', timenewpos); + } + + var dataset = currentPlot.getData(); var i = 0; - for (k = 0; k < dataset.length; k++) { - // k is the real series counter // i is the series counter without thresholds var series = dataset[k]; if (series.label == null) { continue; } - + // find the nearest points, x-wise - for (j = 0; j < series.data.length; ++j) + for (j = 0; j < series.data.length; ++j){ if (series.data[j][0] > pos.x) { break; } - if(series.data[j]){ - var x = series.data[j][0]; - var y = series.data[j][1]; + + if(series.data[j]){ + var y = series.data[j][1]; + } } - var how_bigger = ""; if (y > 1000000) { @@ -3284,57 +3327,18 @@ function pandoraFlotAreaNew( y = y / 1000; } - if (currentRanges == null || (currentRanges.xaxis.from < j && j < currentRanges.xaxis.to)) { - $('#timestamp_'+graph_id).show(); - // If no legend, the timestamp labels are short and with value - if (legend.length == 0) { - $('#timestamp_'+graph_id).text(labels[j] + ' (' + (short_data ? parseFloat(y).toFixed(2) : parseFloat(y)) + ')'); - } - else { - var d = new Date(x); - - date_format = (d.getDate() <10?'0':'') + d.getDate() + "/" + - (d.getMonth()<9?'0':'') + (d.getMonth() + 1) + "/" + - d.getFullYear() + "\n" + - (d.getHours()<10?'0':'') + d.getHours() + ":" + - (d.getMinutes()<10?'0':'') + d.getMinutes() + ":" + - (d.getSeconds()<10?'0':'') + d.getSeconds(); - - $('#timestamp_'+graph_id).text(date_format); - } - //$('#timestamp_'+graph_id).css('top', plot.offset().top-$('#timestamp_'+graph_id).height()*1.5); - - var timesize = $('#timestamp_'+graph_id).width(); - - if (currentRanges != null) { - dataset = plot.getData(); - } - - var timenewpos = dataset[0].xaxis.p2c(pos.x)+$('.yAxis>div').eq(0).width(); - - var canvaslimit = plot.width(); - - if (timesize+timenewpos > canvaslimit) { - $('#timestamp_'+graph_id).css('left', timenewpos - timesize); - $('#timestamp_'+graph_id).css('top', 50); - } - else { - $('#timestamp_'+graph_id).css('left', timenewpos); - $('#timestamp_'+graph_id).css('top', 50); - } - } - else { - $('#timestamp_'+graph_id).hide(); - } - - var label_aux = series.label + series_suffix_str; + var label_aux = legend[series.label] + series_suffix_str; // The graphs of points type and unknown graphs will dont be updated - - serie_types = new Array(); - if (serie_types[i] != 'points' && series.label != $('#hidden-unknown_text').val()) { + if (series_type[dataset[k]["label"]] != 'points' && + series_type[dataset[k]["label"]] != 'unknown' && + series_type[dataset[k]["label"]] != 'percentil' + ) { $('#legend_' + graph_id + ' .legendLabel') - .eq(i).html(label_aux + '= ' + (short_data ? parseFloat(y).toFixed(2) : parseFloat(y)) + how_bigger + ' ' + unit); + .eq(i).html(label_aux + ' value = ' + + (short_data ? parseFloat(y).toFixed(2) : parseFloat(y)) + + how_bigger + ' ' + unit + ); } $('#legend_' + graph_id + ' .legendLabel') @@ -3345,20 +3349,30 @@ function pandoraFlotAreaNew( $('#legend_' + graph_id + ' .legendLabel') .eq(i).css('font-family',font+'Font'); - + i++; } } // Events + $('#overview_' + graph_id).bind('plothover', function (event, pos, item) { + plot.setCrosshair({ x: pos.x, y: 0 }); + currentPlot = plot; + latestPosition = pos; + console.log('entra'); + if (!updateLegendTimeout) { + updateLegendTimeout = setTimeout(updateLegend, 50); + } + }); + $('#' + graph_id).bind('plothover', function (event, pos, item) { overview.setCrosshair({ x: pos.x, y: 0 }); currentPlot = plot; latestPosition = pos; + console.log('entra 2'); if (!updateLegendTimeout) { updateLegendTimeout = setTimeout(updateLegend, 50); } - }); $('#' + graph_id).bind("plotclick", function (event, pos, item) { @@ -3415,13 +3429,13 @@ function pandoraFlotAreaNew( $('#'+graph_id).bind('mouseout',resetInteractivity); $('#overview_'+graph_id).bind('mouseout',resetInteractivity); - //~ // Reset interactivity styles + // Reset interactivity styles function resetInteractivity() { $('#timestamp_'+graph_id).hide(); dataset = plot.getData(); for (i = 0; i < dataset.length; ++i) { var series = dataset[i]; - var label_aux = series.label + series_suffix_str; + var label_aux = legend[series.label] + ' ' + series_suffix_str; $('#legend_' + graph_id + ' .legendLabel') .eq(i).html(label_aux); } @@ -3431,56 +3445,23 @@ function pandoraFlotAreaNew( // Format functions function xFormatter(v, axis) { - //XXX - /* - if ($period <= SECONDS_6HOURS) { - $time_format = 'H:i:s'; - } - elseif ($period < SECONDS_1DAY) { - $time_format = 'H:i'; - } - elseif ($period < SECONDS_15DAYS) { - $time_format = "M \nd H:i"; - } - elseif ($period < SECONDS_1MONTH) { - $time_format = "M \nd H\h"; - } - elseif ($period < SECONDS_6MONTHS) { - $time_format = "M \nd H\h"; - } - else { - $time_format = "Y M \nd H\h"; - } - */ - var d = new Date(v); var result_date_format = 0; + + var monthNames = [ + "Jan", "Feb", "Mar", + "Apr", "May", "Jun", + "Jul", "Aug", "Sep", + "Oct", "Nov", "Dec" + ]; - // if(time_format_y > 86400000){ //DAY - var monthNames = [ - "Jan", "Feb", "Mar", - "Apr", "May", "Jun", - "Jul", "Aug", "Sep", - "Oct", "Nov", "Dec" - ]; - - result_date_format = - (d.getDate() <10?'0':'') + d.getDate() + " " + - //(d.getMonth()<9?'0':'') + (d.getMonth() + 1) + "/" + - monthNames[d.getMonth()] + " " + - d.getFullYear() + "\n" + - (d.getHours()<10?'0':'') + d.getHours() + ":" + - (d.getMinutes()<10?'0':'') + d.getMinutes() + ":" + - (d.getSeconds()<10?'0':'') + d.getSeconds(); //+ ":" + d.getMilliseconds(); - /* } - else{ - result_date_format = - d.getHours() + ":" + - d.getMinutes() + ":" + - d.getSeconds(); //+ ":" + d.getMilliseconds(); - } - */ - //extra_css = ''; + result_date_format = (d.getDate() <10?'0':'') + d.getDate() + " " + + monthNames[d.getMonth()] + " " + + d.getFullYear() + "\n" + + (d.getHours()<10?'0':'') + d.getHours() + ":" + + (d.getMinutes()<10?'0':'') + d.getMinutes() + ":" + + (d.getSeconds()<10?'0':'') + d.getSeconds(); + return '
'+result_date_format+'
'; } @@ -3492,15 +3473,12 @@ function pandoraFlotAreaNew( else { var formatted = v; } - return '
'+formatted+'
'; } function lFormatter(v, item) { console.log(v); - return '
'+v+'
'; - // Prepared to turn series with a checkbox - //return '
'+v+'
'; + return '
'+legend[v]+'
'; } if (menu) { @@ -3609,10 +3587,9 @@ function pandoraFlotAreaNew( // Estimated height of 24 (works fine with this data in all browsers) menu_height = 24; var legend_margin_bottom = parseInt( - $('#legend_'+graph_id).css('margin-bottom').split('px')[0]); + $('#legend_'+graph_id).css('margin-bottom').split('px')[0]); $('#legend_'+graph_id).css('margin-bottom', '10px'); - parent_height = parseInt( - $('#menu_'+graph_id).parent().css('height').split('px')[0]); + parent_height = parseInt($('#menu_'+graph_id).parent().css('height').split('px')[0]); adjust_menu(graph_id, plot, parent_height, width); } diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php index 38e5f5ff4a..5356dd57b3 100644 --- a/pandora_console/include/graphs/functions_flot.php +++ b/pandora_console/include/graphs/functions_flot.php @@ -187,7 +187,7 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend, global $config; include_javascript_dependencies_flot_graph(); - + $menu = (int)$menu; // Get a unique identifier to graph $graph_id = uniqid('graph_'); @@ -666,13 +666,15 @@ function flot_area_graph_new ( else { $format_graph['height'] = 1; } - if (!$vconsole) + + if (!$vconsole){ $return .= "
"; + } //XXXXTODO $water_mark = ''; if ($water_mark != '') { @@ -765,6 +767,12 @@ function flot_area_graph_new ( return $return; } + + + + + + function menu_graph( $yellow_threshold, $red_threshold, $yellow_up, $red_up, $yellow_inverse,