tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixed error graphs

This commit is contained in:
daniel 2018-02-23 14:31:00 +01:00
parent f69fb8a5f9
commit 688acb8a4b
4 changed files with 263 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
pandora_console/include/functions.php
View File

@ -2919,225 +2919,53 @@ function legend_graph_array(
$series_suffix_str, $series_suffix_str,
$format_graph, $format_graph,
$show_elements_graph, $show_elements_graph,
$percentil_value){ $percentil_value,
$data_module_graph){
global $config;
global $legend;
$unit = $format_graph['unit']; $unit = $format_graph['unit'];
if ($show_elements_graph['show_events']) { $legend['sum'.$series_suffix] =
$legend['event'.$series_suffix_str] = __('Events').$series_suffix_str; $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']) { if($show_elements_graph['show_events']){
$legend['alert'.$series_suffix] = __('Alerts').$series_suffix_str; $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; return $legend;
} }
?> ?>

11
pandora_console/include/functions_graph.php
View File

@ -844,13 +844,14 @@ function grafico_modulo_sparse_data_new(
} }
} }
$legend = legend_graph_array( legend_graph_array(
$max, $min, $avg, $max, $min, $avg,
$series_suffix, $series_suffix,
$series_suffix_str, $str_series_suffix,
$format_graph, $format_graph,
$show_elements_graph, $show_elements_graph,
$percentil_value $percentil_value,
$data_module_graph
); );
$series_type['event'.$series_suffix] = 'points'; $series_type['event'.$series_suffix] = 'points';
@ -862,8 +863,7 @@ function grafico_modulo_sparse_data_new(
else{ else{
$series_type['sum'.$series_suffix] = 'area'; $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, 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 (); graphic_error ();
} }
// Data iterator // Data iterator
$data_i = 0; $data_i = 0;

435
pandora_console/include/graphs/flot/pandora.flot.js
View File

@ -869,7 +869,6 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
yellow_up, red_up, yellow_inverse, red_inverse, yellow_up, red_up, yellow_inverse, red_inverse,
series_suffix_str, dashboard, vconsole, xaxisname,background_color,legend_color, series_suffix_str, dashboard, vconsole, xaxisname,background_color,legend_color,
short_data) { short_data) {
console.log(legend_events);
var threshold = true; var threshold = true;
var thresholded = false; var thresholded = false;
@ -2121,23 +2120,26 @@ console.log(legend_events);
} }
function adjust_menu(graph_id, plot, parent_height, width) { function adjust_menu(graph_id, plot, parent_height, width) {
/*
if ($('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width') != undefined) { if ($('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width') != undefined) {
left_ticks_width = $('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width').split('px')[0]; left_ticks_width = $('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width').split('px')[0];
} }
else { else {
left_ticks_width = 0; left_ticks_width = 0;
} }
*/
var parent_height_new = 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]); 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') { if ($('#overview_'+graph_id).css('display') == 'none') {
overview_height = 0; overview_height = 0;
} }
else { else {
overview_height = parseInt($('#overview_'+graph_id).css('height').split('px')[0]) + parseInt($('#overview_'+graph_id).css('margin-top').split('px')[0]); 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'; var menu_height = '25';
if ($('#menu_'+graph_id).height() != undefined && $('#menu_'+graph_id).height() > 20) { 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) { 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()); $('#overview_'+graph_id).css('margin-left', $('#'+graph_id+' .yAxis .tickLabel').width());
} }
@ -2387,19 +2389,18 @@ function pandoraFlotAreaNew(
format_graph, force_integer, series_suffix_str, format_graph, force_integer, series_suffix_str,
background_color, legend_color, short_data background_color, legend_color, short_data
) { ) {
console.log(series_suffix_str); console.log(legend);
console.log('asdasdasdas'); //diferents vars
//vars var unit = format_graph.unit ? format_graph.unit : '';
var unit = format_graph.unit ? format_graph.unit : ''; var homeurl = format_graph.homeurl;
var homeurl = format_graph.homeurl; var font_size = format_graph.font_size;
var font_size = format_graph.font_size; var font = format_graph.font;
var font = format_graph.font; var width = format_graph.width;
var width = format_graph.width; var height = format_graph.height;
var height = format_graph.height; var vconsole = show_elements_graph.vconsole;
var vconsole = show_elements_graph.vconsole; var dashboard = show_elements_graph.dashboard;
var dashboard = show_elements_graph.dashboard; var menu = show_elements_graph.menu;
var menu = show_elements_graph.menu; var max_x = date_array['final_date'] *1000;
var max_x = date_array['final_date'] *1000;
//for threshold //for threshold
var threshold = true; var threshold = true;
@ -2408,70 +2409,73 @@ function pandoraFlotAreaNew(
var red_threshold = parseFloat (data_module_graph.c_min); var red_threshold = parseFloat (data_module_graph.c_min);
var yellow_up = parseFloat (data_module_graph.w_max); var yellow_up = parseFloat (data_module_graph.w_max);
var red_up = parseFloat (data_module_graph.c_max); var red_up = parseFloat (data_module_graph.c_max);
var yellow_inverse = parseInt(data_module_graph.w_inv); var yellow_inverse = parseInt (data_module_graph.w_inv);
var red_inverse = parseInt(data_module_graph.c_inv); var red_inverse = parseInt (data_module_graph.c_inv);
//XXXX //XXXX ver que hay que hacer
var type = 'area_simple'; var type = 'area_simple';
var xaxisname = 'xaxisname'; //var xaxisname = 'xaxisname';
var labels_long = '';
var min_check = 0; var labels_long = '';
var water_mark = ''; var min_check = 0;
var water_mark = '';
var legend_events = null; var legend_events = null;
var legend_alerts = null; var legend_alerts = null;
switch (type) { switch (type) {
case 'line_simple': case 'line_simple':
stacked = null; stacked = null;
filled = false; filled = false;
break; break;
case 'line_stacked': case 'line_stacked':
stacked = 'stack'; stacked = 'stack';
filled = false; filled = false;
break; break;
case 'area_simple': case 'area_simple':
stacked = null; stacked = null;
filled = true; filled = true;
break; break;
case 'area_stacked': case 'area_stacked':
stacked = 'stack'; stacked = 'stack';
filled = true; filled = true;
break; break;
} }
var datas = new Array(); var datas = new Array();
var data_base = new Array(); var data_base = new Array();
var data2 = new Array();
i=0;
var lineWidth = $('#hidden-line_width_graph').val() || 1; var lineWidth = $('#hidden-line_width_graph').val() || 1;
i=0;
$.each(values, function (index, value) { $.each(values, function (index, value) {
if (typeof value.data !== "undefined") { if (typeof value.data !== "undefined") {
switch (series_type[index]) { switch (series_type[index]) {
case 'area': case 'area':
line_show = true; line_show = true;
points_show = false; // XXX - false points_show = false; // XXX - false
filled = 0.2; filled = 0.2;
steps_chart = false; steps_chart = false;
break; break;
case 'percentil':
case 'line': case 'line':
default: default:
line_show = true; line_show = true;
points_show = false; points_show = false;
filled = false; filled = false;
steps_chart = false; steps_chart = false;
break; break;
case 'points': case 'points':
line_show = false; line_show = false;
points_show = true; points_show = true;
filled = false; filled = false;
steps_chart = false steps_chart = false
break; break;
case 'unknown': case 'unknown':
case 'boolean': case 'boolean':
line_show = true; line_show = true;
points_show = false; points_show = false;
filled = true; filled = true;
steps_chart = true; steps_chart = true;
break; break;
} }
@ -2491,7 +2495,7 @@ function pandoraFlotAreaNew(
i++; i++;
} }
}); });
console.log(series_suffix_str);
// If threshold and up are the same, that critical or warning is disabled // If threshold and up are the same, that critical or warning is disabled
if (yellow_threshold == yellow_up){ if (yellow_threshold == yellow_up){
yellow_inverse = false; yellow_inverse = false;
@ -2510,12 +2514,12 @@ function pandoraFlotAreaNew(
var red_only_min = ((red_up == 0) && (red_threshold != 0)); var red_only_min = ((red_up == 0) && (red_threshold != 0));
//color //color
var normalw = '#efe'; var normalw = '#efe';
var warningw = '#ffe'; var warningw = '#ffe';
var criticalw = '#fee'; var criticalw = '#fee';
var normal = '#0f0'; var normal = '#0f0';
var warning = '#ff0'; var warning = '#ff0';
var critical = '#f00'; var critical = '#f00';
if (threshold) { if (threshold) {
// Warning interval. Change extremes depends on critical interval // Warning interval. Change extremes depends on critical interval
@ -3022,18 +3026,19 @@ function pandoraFlotAreaNew(
var count_data = datas[0].data.length; var count_data = datas[0].data.length;
var min_tick_pixels = 80; var min_tick_pixels = 80;
if (unit != "") {
xaxisname = xaxisname + " (" + unit + ")"
}
var maxticks = date_array['period'] / 3600 /6; var maxticks = date_array['period'] / 3600 /6;
var options = { var options = {
series: { series: {
stack: stacked, stack: stacked,
shadowSize: 0.1 shadowSize: 0.1
}, },
crosshair: { mode: 'xy' }, crosshair: {
selection: { mode: 'x', color: '#777' }, mode: 'xy'
},
selection: {
mode: 'x',
color: '#777'
},
export: { export: {
export_data: true, export_data: true,
labels_long: labels_long, labels_long: labels_long,
@ -3062,7 +3067,6 @@ function pandoraFlotAreaNew(
position: 'left', position: 'left',
font: font, font: font,
reserveSpace: true, reserveSpace: true,
}], }],
legend: { legend: {
position: 'se', position: 'se',
@ -3077,7 +3081,11 @@ function pandoraFlotAreaNew(
options.selection = false; 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); var plot = $.plot($('#' + graph_id), datas, options);
// Re-calculate the graph height with the legend height // Re-calculate the graph height with the legend height
@ -3114,20 +3122,39 @@ function pandoraFlotAreaNew(
var overview = $.plot($('#overview_'+graph_id),datas, { var overview = $.plot($('#overview_'+graph_id),datas, {
series: { series: {
stack: stacked, stack: stacked,
lines: { show: true, lineWidth: 1 }, lines: {
show: true,
lineWidth: 1
},
shadowSize: 0 shadowSize: 0
}, },
grid: { borderWidth: 1, hoverable: true, autoHighlight: false}, grid: {
xaxis: { }, borderWidth: 1,
xaxes: [ { borderColor: '#C1C1C1',
tickFormatter: xFormatter, hoverable: true,
minTickSize: steps, autoHighlight: false
color: '' },
} ], xaxes: [ {
yaxis: {ticks: [], autoscaleMargin: 0.1 }, axisLabelFontSizePixels: font_size,
selection: {mode: 'x', color: '#777' }, mode: "time",
legend: {show: false}, tickFormatter: xFormatter,
crosshair: {mode: 'x'} 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 // Connection between plot and miniplot
@ -3139,53 +3166,35 @@ function pandoraFlotAreaNew(
} }
dataInSelection = ranges.xaxis.to - ranges.xaxis.from; 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; var maxticks_zoom = dataInSelection / 3600000 / 6;
flag_caca = 0; if(maxticks_zoom < 0.001){
if(maxticks_zoom < 0.005){
flag_caca = 1;
maxticks_zoom = dataInSelection / 60000 / 6; maxticks_zoom = dataInSelection / 60000 / 6;
if(maxticks_zoom < 0.005){ if(maxticks_zoom < 0.001){
maxticks_zoom = 1; maxticks_zoom = 0;
} }
} }
console.log(maxticks_zoom); plot = $.plot($('#' + graph_id), data_base,
if(flag_caca == 0){ $.extend(true, {}, options, {
plot = $.plot($('#' + graph_id), data_base, grid: {
$.extend(true, {}, options, { borderWidth: 1,
grid: { borderWidth: 1, hoverable: true, autoHighlight: false}, hoverable: true,
xaxis: { min: ranges.xaxis.from, autoHighlight: true
max: ranges.xaxis.to },
}, xaxis: {
xaxes: [ { min: ranges.xaxis.from,
mode: "time", max: ranges.xaxis.to
tickFormatter: xFormatter, },
tickSize: [maxticks_zoom, 'hour'] xaxes: [{
} ], mode: "time",
legend: { show: true } tickFormatter: xFormatter,
})); tickSize: [maxticks_zoom, 'hour']
} }],
else{ legend: {
plot = $.plot($('#' + graph_id), data_base, show: true
$.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 }
}));
}
if (thresholded) { if (thresholded) {
var zoom_data_threshold = new Array (); var zoom_data_threshold = new Array ();
@ -3204,8 +3213,10 @@ function pandoraFlotAreaNew(
max: plot.getAxes().xaxis.max max: plot.getAxes().xaxis.max
} }
})); }));
zoom_data_threshold = add_threshold (data_base, threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max, zoom_data_threshold = add_threshold (data_base, threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max,
red_threshold, extremes, red_up); red_threshold, extremes, red_up);
plot.setData(zoom_data_threshold); plot.setData(zoom_data_threshold);
plot.draw(); plot.draw();
} }
@ -3224,47 +3235,79 @@ function pandoraFlotAreaNew(
plot.setSelection(ranges); plot.setSelection(ranges);
}); });
var legends = $('#legend_' + graph_id + ' .legendLabel');
var updateLegendTimeout = null; var updateLegendTimeout = null;
var latestPosition = null; var latestPosition = null;
var currentPlot = null; var currentPlot = null;
var currentRanges = null; var currentRanges = null;
// Update legend with the data of the plot in the mouse position // Update legend with the data of the plot in the mouse position
function updateLegend() { function updateLegend() {
console.log(currentPlot);
updateLegendTimeout = null; updateLegendTimeout = null;
var pos = latestPosition; var pos = latestPosition;
var axes = currentPlot.getAxes(); var axes = currentPlot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) { pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
return; 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; var i = 0;
for (k = 0; k < dataset.length; k++) { for (k = 0; k < dataset.length; k++) {
// k is the real series counter // k is the real series counter
// i is the series counter without thresholds // i is the series counter without thresholds
var series = dataset[k]; var series = dataset[k];
if (series.label == null) { if (series.label == null) {
continue; continue;
} }
// find the nearest points, x-wise // 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) { if (series.data[j][0] > pos.x) {
break; break;
} }
if(series.data[j]){
var x = series.data[j][0]; if(series.data[j]){
var y = series.data[j][1]; var y = series.data[j][1];
}
} }
var how_bigger = ""; var how_bigger = "";
if (y > 1000000) { if (y > 1000000) {
@ -3284,57 +3327,18 @@ function pandoraFlotAreaNew(
y = y / 1000; y = y / 1000;
} }
if (currentRanges == null || (currentRanges.xaxis.from < j && j < currentRanges.xaxis.to)) { var label_aux = legend[series.label] + series_suffix_str;
$('#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;
// The graphs of points type and unknown graphs will dont be updated // The graphs of points type and unknown graphs will dont be updated
if (series_type[dataset[k]["label"]] != 'points' &&
serie_types = new Array(); series_type[dataset[k]["label"]] != 'unknown' &&
if (serie_types[i] != 'points' && series.label != $('#hidden-unknown_text').val()) { series_type[dataset[k]["label"]] != 'percentil'
) {
$('#legend_' + graph_id + ' .legendLabel') $('#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') $('#legend_' + graph_id + ' .legendLabel')
@ -3345,20 +3349,30 @@ function pandoraFlotAreaNew(
$('#legend_' + graph_id + ' .legendLabel') $('#legend_' + graph_id + ' .legendLabel')
.eq(i).css('font-family',font+'Font'); .eq(i).css('font-family',font+'Font');
i++; i++;
} }
} }
// Events // 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) { $('#' + graph_id).bind('plothover', function (event, pos, item) {
overview.setCrosshair({ x: pos.x, y: 0 }); overview.setCrosshair({ x: pos.x, y: 0 });
currentPlot = plot; currentPlot = plot;
latestPosition = pos; latestPosition = pos;
console.log('entra 2');
if (!updateLegendTimeout) { if (!updateLegendTimeout) {
updateLegendTimeout = setTimeout(updateLegend, 50); updateLegendTimeout = setTimeout(updateLegend, 50);
} }
}); });
$('#' + graph_id).bind("plotclick", function (event, pos, item) { $('#' + graph_id).bind("plotclick", function (event, pos, item) {
@ -3415,13 +3429,13 @@ function pandoraFlotAreaNew(
$('#'+graph_id).bind('mouseout',resetInteractivity); $('#'+graph_id).bind('mouseout',resetInteractivity);
$('#overview_'+graph_id).bind('mouseout',resetInteractivity); $('#overview_'+graph_id).bind('mouseout',resetInteractivity);
//~ // Reset interactivity styles // Reset interactivity styles
function resetInteractivity() { function resetInteractivity() {
$('#timestamp_'+graph_id).hide(); $('#timestamp_'+graph_id).hide();
dataset = plot.getData(); dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) { for (i = 0; i < dataset.length; ++i) {
var series = dataset[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') $('#legend_' + graph_id + ' .legendLabel')
.eq(i).html(label_aux); .eq(i).html(label_aux);
} }
@ -3431,56 +3445,23 @@ function pandoraFlotAreaNew(
// Format functions // Format functions
function xFormatter(v, axis) { 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 d = new Date(v);
var result_date_format = 0; 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 result_date_format = (d.getDate() <10?'0':'') + d.getDate() + " " +
var monthNames = [ monthNames[d.getMonth()] + " " +
"Jan", "Feb", "Mar", d.getFullYear() + "\n" +
"Apr", "May", "Jun", (d.getHours()<10?'0':'') + d.getHours() + ":" +
"Jul", "Aug", "Sep", (d.getMinutes()<10?'0':'') + d.getMinutes() + ":" +
"Oct", "Nov", "Dec" (d.getSeconds()<10?'0':'') + d.getSeconds();
];
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 = '';
return '<div class='+font+' style="font-size:'+font_size+'pt; margin-top:15px;">'+result_date_format+'</div>'; return '<div class='+font+' style="font-size:'+font_size+'pt; margin-top:15px;">'+result_date_format+'</div>';
} }
@ -3492,15 +3473,12 @@ function pandoraFlotAreaNew(
else { else {
var formatted = v; var formatted = v;
} }
return '<div class='+font+' style="font-size:'+font_size+'pt;">'+formatted+'</div>'; return '<div class='+font+' style="font-size:'+font_size+'pt;">'+formatted+'</div>';
} }
function lFormatter(v, item) { function lFormatter(v, item) {
console.log(v); console.log(v);
return '<div style="font-size:'+font_size+'pt;">'+v+'</div>'; return '<div style="font-size:'+font_size+'pt;">'+legend[v]+'</div>';
// Prepared to turn series with a checkbox
//return '<div style=color:;font-size:'+font_size+'pt><input type="checkbox" id="' + graph_id + '_' + item.id +'" checked="checked" class="check_serie_'+graph_id+'">'+v+'</div>';
} }
if (menu) { if (menu) {
@ -3609,10 +3587,9 @@ function pandoraFlotAreaNew(
// Estimated height of 24 (works fine with this data in all browsers) // Estimated height of 24 (works fine with this data in all browsers)
menu_height = 24; menu_height = 24;
var legend_margin_bottom = parseInt( 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'); $('#legend_'+graph_id).css('margin-bottom', '10px');
parent_height = parseInt( parent_height = parseInt($('#menu_'+graph_id).parent().css('height').split('px')[0]);
$('#menu_'+graph_id).parent().css('height').split('px')[0]);
adjust_menu(graph_id, plot, parent_height, width); adjust_menu(graph_id, plot, parent_height, width);
} }

12
pandora_console/include/graphs/functions_flot.php
View File

@ -187,7 +187,7 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend,
global $config; global $config;
include_javascript_dependencies_flot_graph(); include_javascript_dependencies_flot_graph();
$menu = (int)$menu; $menu = (int)$menu;
// Get a unique identifier to graph // Get a unique identifier to graph
$graph_id = uniqid('graph_'); $graph_id = uniqid('graph_');
@ -666,13 +666,15 @@ function flot_area_graph_new (
else { else {
$format_graph['height'] = 1; $format_graph['height'] = 1;
} }
if (!$vconsole)
if (!$vconsole){
$return .= "<div id='overview_$graph_id' $return .= "<div id='overview_$graph_id'
class='overview_graph' class='overview_graph'
style=' display: none; margin-left:0px; style=' display: none; margin-left:0px;
margin-top:20px; margin-bottom:50px; margin-top:20px; margin-bottom:50px;
width: ".$format_graph['width']."px; width: ".$format_graph['width']."px;
height: ".$format_graph['height'] ."px;'></div>"; height: ".$format_graph['height'] ."px;'></div>";
}
//XXXXTODO //XXXXTODO
$water_mark = ''; $water_mark = '';
if ($water_mark != '') { if ($water_mark != '') {
@ -765,6 +767,12 @@ function flot_area_graph_new (
return $return; return $return;
} }
function menu_graph( function menu_graph(
$yellow_threshold, $red_threshold, $yellow_threshold, $red_threshold,
$yellow_up, $red_up, $yellow_inverse, $yellow_up, $red_up, $yellow_inverse,