From f758124531481603b29e70186ef5b42746c27f2b Mon Sep 17 00:00:00 2001 From: daniel Date: Thu, 10 May 2018 08:43:09 +0200 Subject: [PATCH] fixed treshold graph --- .../reporting_builder.item_editor.php | 3 +- pandora_console/include/functions_graph.php | 105 +- .../include/functions_reporting.php | 83 +- .../graphs/flot/jquery.flot.threshold.js | 140 +- .../flot/jquery.flot.threshold.multiple.js | 189 ++ .../include/graphs/flot/pandora.flot.js | 1716 ++++++++--------- .../include/graphs/functions_flot.php | 10 +- .../operation/agentes/stat_win.php | 4 +- 8 files changed, 1201 insertions(+), 1049 deletions(-) create mode 100644 pandora_console/include/graphs/flot/jquery.flot.threshold.multiple.js diff --git a/pandora_console/godmode/reporting/reporting_builder.item_editor.php b/pandora_console/godmode/reporting/reporting_builder.item_editor.php index 8018d90243..a2abf23274 100755 --- a/pandora_console/godmode/reporting/reporting_builder.item_editor.php +++ b/pandora_console/godmode/reporting/reporting_builder.item_editor.php @@ -2912,7 +2912,7 @@ function chooseType() { case 'simple_graph': $("#row_time_compare_overlapped").show(); - $("#row_only_avg").show(); + // $("#row_only_avg").show(); $("#row_fullscale").show(); if ($("#checkbox-percentil").prop("checked")) $("#row_percentil").show(); @@ -2923,7 +2923,6 @@ function chooseType() { $("#row_agent").show(); $("#row_module").show(); $("#row_period").show(); - $("#row_show_in_two_columns").show(); $("#row_show_in_landscape").show(); $("#row_time_compare_overlapped").show(); $("#row_historical_db_check").hide(); diff --git a/pandora_console/include/functions_graph.php b/pandora_console/include/functions_graph.php index 6e82a125ba..8906f835e0 100644 --- a/pandora_console/include/functions_graph.php +++ b/pandora_console/include/functions_graph.php @@ -465,6 +465,23 @@ function grafico_modulo_sparse_data( } } +//XXXX que hacer con baseline + /* + // Get baseline data + $baseline_data = array(); + if ($baseline) { + $baseline_data = array (); + if ($baseline == 1) { + $baseline_data = enterprise_hook( + 'reporting_enterprise_get_baseline', + array ($agent_module_id, $period, $width, $height , $title, $unit_name, $date)); + if ($baseline_data === ENTERPRISE_NOT_HOOK) { + $baseline_data = array (); + } + } + } + */ + if ($show_elements_graph['show_events'] || $show_elements_graph['show_alerts'] ) { @@ -504,16 +521,34 @@ function grafico_modulo_sparse_data( } else{ if($show_elements_graph['flag_overlapped']){ - $events_array['data'][$count_events] = array( - ($v['utimestamp'] + $date_array['period'] *1000), - $max * 1.15 - ); + if( ( strstr($v['event_type'], 'going_up') ) || + ( strstr($v['event_type'], 'going_down') ) ){ + $events_array['data'][$count_events] = array( + (($v['utimestamp'] + 1 + $date_array['period']) * 1000), + $max * 1.15 + ); + } + else{ + $events_array['data'][$count_events] = array( + ($v['utimestamp'] + $date_array['period'] *1000), + $max * 1.15 + ); + } } else{ - $events_array['data'][$count_events] = array( - ($v['utimestamp']*1000), - $max * 1.15 - ); + if( ( strstr($v['event_type'], 'going_up') ) || + ( strstr($v['event_type'], 'going_down') ) ){ + $events_array['data'][$count_events] = array( + (($v['utimestamp'] + 1) *1000), + $max * 1.15 + ); + } + else{ + $events_array['data'][$count_events] = array( + ($v['utimestamp']*1000), + $max * 1.15 + ); + } } $count_events++; } @@ -574,6 +609,7 @@ function grafico_modulo_sparse_data( ); $array_events_alerts[$series_suffix] = $events; + } function grafico_modulo_sparse ($agent_module_id, $period, $show_events, @@ -770,11 +806,6 @@ function grafico_modulo_sparse ($agent_module_id, $period, $show_events, $data_module_graph['series_suffix'] = $series_suffix; - - -html_debug_print($color); - - // Check available data if ($show_elements_graph['compare'] === 'separated') { if (!empty($array_data)) { @@ -1124,14 +1155,12 @@ html_debug_print($from_interface); $show_elements_graph['return_data'] = true; //dont use $show_elements_graph['id_widget'] = $id_widget_dashboard; $show_elements_graph['labels'] = $labels; - $show_elements_graph['stacked'] = $stacked; + $show_elements_graph['stacked'] = $stacked; $format_graph = array(); - $format_graph['width'] = $width; + $format_graph['width'] = $width . "px"; $format_graph['height'] = $height; -//XXXX - $format_graph['type_graph'] = $type_graph; //dont use - + $format_graph['type_graph'] = ''; //dont use $format_graph['unit_name'] = $unit_name; $format_graph['unit'] = ''; //dont use $format_graph['title'] = $title; @@ -1615,7 +1644,7 @@ html_debug_print($from_interface); $module_name_list[$i] .= " (x". format_numeric ($weight_list[$i], 1).")"; } */ - $temp = array(); + // $temp = array(); @@ -1853,6 +1882,8 @@ html_debug_print($from_interface); } } + $graph_values = $temp; + switch ($stacked) { default: case CUSTOM_GRAPH_STACKED_LINE: @@ -4060,11 +4091,12 @@ function graph_netflow_host_traffic ($data, $unit, $width = 700, $height = 700) function graphic_module_events ($id_module, $width, $height, $period = 0, $homeurl = '', $zoom = 0, $adapt_key = '', $date = false, $stat_win = false) { global $config; global $graphic_type; - + $data = array (); - +$width = 90; +$height = 100; $resolution = $config['graph_res'] * ($period * 2 / $width); // Number of "slices" we want in graph - + $interval = (int) ($period / $resolution); if ($date === false) { $date = get_system_time (); @@ -4073,7 +4105,7 @@ function graphic_module_events ($id_module, $width, $height, $period = 0, $homeu $periodtime = floor ($period / $interval); $time = array (); $data = array (); - + // Set the title and time format if ($period <= SECONDS_6HOURS) { $time_format = 'H:i:s'; @@ -4093,7 +4125,7 @@ function graphic_module_events ($id_module, $width, $height, $period = 0, $homeu else { $time_format = "Y M d H\h"; } - + $legend = array(); $cont = 0; for ($i = 0; $i < $interval; $i++) { @@ -4105,10 +4137,10 @@ function graphic_module_events ($id_module, $width, $height, $period = 0, $homeu else { $name = $bottom; } - + $top = $datelimit + ($periodtime * ($i + 1)); - - $events = db_get_all_rows_filter ('tevento', + + $events = db_get_all_rows_filter ('tevento', array ('id_agentmodule' => $id_module, 'utimestamp > '.$bottom, 'utimestamp < '.$top), @@ -4120,7 +4152,6 @@ function graphic_module_events ($id_module, $width, $height, $period = 0, $homeu if (empty($event['utimestamp'])) { continue; } - switch($event['event_type']) { case 'going_down_normal': case 'going_up_normal': @@ -4144,9 +4175,9 @@ function graphic_module_events ($id_module, $width, $height, $period = 0, $homeu } } } - + $data[$cont]['utimestamp'] = $periodtime; - + if (!empty($events)) { switch ($status) { case 'warning': @@ -4167,11 +4198,11 @@ function graphic_module_events ($id_module, $width, $height, $period = 0, $homeu $data[$cont]['data'] = 1; } $current_timestamp = $bottom; - - $legend[] = date($time_format, $current_timestamp); + + $legend[] = date($time_format, $current_timestamp); $cont++; } - + $pixels_between_xdata = 25; $max_xdata_display = round($width / $pixels_between_xdata); $ndata = count($data); @@ -4181,14 +4212,14 @@ function graphic_module_events ($id_module, $width, $height, $period = 0, $homeu else { $xdata_display = $max_xdata_display; } - + $step = round($ndata/$xdata_display); - + $colors = array(1 => '#38B800', 2 => '#FFFF00', 3 => '#FF0000', 4 => '#C3C3C3'); - + // Draw slicebar graph if ($config['flash_charts']) { - echo flot_slicesbar_graph($data, $period, $width, 15, $legend, $colors, $config['fontpath'], $config['round_corner'], $homeurl, '', $adapt_key, $stat_win); + echo flot_slicesbar_graph($data, $period, $width, 50, $legend, $colors, $config['fontpath'], $config['round_corner'], $homeurl, '', $adapt_key, $stat_win); } else { echo slicesbar_graph($data, $period, $width, 15, $colors, $config['fontpath'], $config['round_corner'], $homeurl); diff --git a/pandora_console/include/functions_reporting.php b/pandora_console/include/functions_reporting.php index 65e3b876bc..0314649410 100755 --- a/pandora_console/include/functions_reporting.php +++ b/pandora_console/include/functions_reporting.php @@ -1199,11 +1199,7 @@ function reporting_event_top_n($report, $content, $type = 'dinamic', ui_print_truncate_text($agent_name[$i], $truncate_size, false, true, false, "...") . ' - ' . ui_print_truncate_text($module_name[$i], $truncate_size, false, true, false, "..."); - - - - //Dirty hack, maybe I am going to apply a job in Apple - //https://www.imperialviolet.org/2014/02/22/applebug.html + $item_name_key_pie = $item_name; $exist_key = true; while ($exist_key) { @@ -1255,11 +1251,7 @@ function reporting_event_top_n($report, $content, $type = 'dinamic', ' - ' . ui_print_truncate_text($module_name[$i], $truncate_size, false, true, false, "..."); - - - - //Dirty hack, maybe I am going to apply a job in Apple - //https://www.imperialviolet.org/2014/02/22/applebug.html + $item_name_key_pie = $item_name; $exist_key = true; while ($exist_key) { @@ -3485,7 +3477,7 @@ function reporting_netflow($report, $content, $type, function reporting_simple_baseline_graph($report, $content, $type = 'dinamic', $force_width_chart = null, $force_height_chart = null) { - + global $config; if ($config['metaconsole']) { @@ -3603,8 +3595,7 @@ function reporting_prediction_date($report, $content) { function reporting_projection_graph($report, $content, $type = 'dinamic', $force_width_chart = null, $force_height_chart = null) { -html_debug_print('esta en esta'); - + global $config; if ($config['metaconsole']) { @@ -3820,7 +3811,7 @@ function reporting_agent_configuration($report, $content) { function reporting_value($report, $content, $type,$pdf) { global $config; - + $return = array(); switch ($type) { case 'max': @@ -6395,7 +6386,7 @@ function reporting_general($report, $content) { function reporting_custom_graph($report, $content, $type = 'dinamic', $force_width_chart = null, $force_height_chart = null, $type_report = "custom_graph") { - html_debug_print('esta en esta 2'); + global $config; require_once ($config["homedir"] . '/include/functions_graph.php'); @@ -6541,36 +6532,28 @@ function reporting_custom_graph($report, $content, $type = 'dinamic', function reporting_simple_graph($report, $content, $type = 'dinamic', $force_width_chart = null, $force_height_chart = null) { - + global $config; - - + if ($config['metaconsole']) { $id_meta = metaconsole_get_id_server($content["server_name"]); - - + $server = metaconsole_get_connection_by_id ($id_meta); metaconsole_connect($server); } - - + $return = array(); $return['type'] = 'simple_graph'; - + if (empty($content['name'])) { $content['name'] = __('Simple graph'); } - - - + $module_name = io_safe_output( modules_get_agentmodule_name($content['id_agent_module'])); $agent_name = io_safe_output( modules_get_agentmodule_agent_alias ($content['id_agent_module'])); - - - - + $return['title'] = $content['name']; $return['subtitle'] = $agent_name . " - " . $module_name; $return['agent_name'] = $agent_name; @@ -6580,10 +6563,10 @@ function reporting_simple_graph($report, $content, $type = 'dinamic', $report, $content); $label = (isset($content['style']['label'])) ? $content['style']['label'] : ''; - if ($label != '') { - $label = reporting_label_macro($content, $label); - } - + if ($label != '') { + $label = reporting_label_macro($content, $label); + } + $only_avg = true; // Due to database compatibility problems, the 'only_avg' value // is stored into the json contained into the 'style' column. @@ -6594,31 +6577,29 @@ function reporting_simple_graph($report, $content, $type = 'dinamic', if (isset($content['style']['fullscale'])) { $fullscale = (bool) $content['style']['fullscale']; } - + $moduletype_name = modules_get_moduletype_name( modules_get_agentmodule_type( $content['id_agent_module'])); - + $return['chart'] = ''; + // Get chart - reporting_set_conf_charts($width, $height, $only_image, $type, - $content, $ttl); - + reporting_set_conf_charts($width, $height, $only_image, $type, $content, $ttl); + if (!empty($force_width_chart)) { $width = $force_width_chart; } - + if (!empty($force_height_chart)) { $height = $force_height_chart; } - + switch ($type) { case 'dinamic': case 'static': if (preg_match ("/string/", $moduletype_name)) { - $urlImage = ui_get_full_url(false, false, false, false); - $return['chart'] = grafico_modulo_string( $content['id_agent_module'], $content['period'], @@ -6635,7 +6616,7 @@ function reporting_simple_graph($report, $content, $type = 'dinamic', $urlImage, "", $ttl); - + } else { // HACK it is saved in show_graph field. @@ -6643,13 +6624,13 @@ function reporting_simple_graph($report, $content, $type = 'dinamic', if ($content['show_graph']) { $time_compare_overlapped = 'overlapped'; } - + $return['chart'] = grafico_modulo_sparse( $content['id_agent_module'], $content['period'], false, - $width, - $height, + '90%', + 400, $label, '', false, @@ -6681,18 +6662,18 @@ function reporting_simple_graph($report, $content, $type = 'dinamic', $content['id_agent_module'], $content['period'], $report["datetime"]); - + foreach ($data as $d) { $return['chart'][$d['utimestamp']] = $d['data']; } - + break; } - + if ($config['metaconsole']) { metaconsole_restore_db(); } - + return reporting_check_structure_content($return); } diff --git a/pandora_console/include/graphs/flot/jquery.flot.threshold.js b/pandora_console/include/graphs/flot/jquery.flot.threshold.js index 8c99c401d8..5167b6421f 100644 --- a/pandora_console/include/graphs/flot/jquery.flot.threshold.js +++ b/pandora_console/include/graphs/flot/jquery.flot.threshold.js @@ -1,56 +1,52 @@ /* Flot plugin for thresholding data. - Copyright (c) 2007-2014 IOLA and Ole Laursen. Licensed under the MIT license. - The plugin supports these options: - - series: { - threshold: { - below: number - color: colorspec - } - } - + series: { + threshold: { + below: number, + above: mumber, + color: colorspec + } + } It can also be applied to a single series, like this: - - $.plot( $("#placeholder"), [{ - data: [ ... ], - threshold: { ... } - }]) - + $.plot( $("#placeholder"), [{ + data: [ ... ], + threshold: { ... } + }]) An array can be passed for multiple thresholding, like this: - - threshold: [{ - below: number1 - color: color1 - },{ - below: number2 - color: color2 - }] - + threshold: [{ + below: number1, + color: color1 + },{ + above: number2, + color: color2 + }] These multiple threshold objects can be passed in any order since they are sorted by the processing function. - The data points below "below" are drawn with the specified color. This makes it easy to mark points below 0, e.g. for budget data. - Internally, the plugin works by splitting the data into two series, above and below the threshold. The extra series below the threshold will have its label cleared and the special "originSeries" attribute set to the original series. You may need to check for this in hover events. - */ -(function ($) { +(function($) { var options = { series: { threshold: null } // or { below: number, color: color spec} }; - + function init(plot) { - function thresholdData(plot, s, datapoints, below, color) { - var ps = datapoints.pointsize, i, x, y, p, prevp, - thresholded = $.extend({}, s); // note: shallow copy + function thresholdData(plot, s, datapoints, below, above, color) { + + var origpoints = datapoints.points, + ps = datapoints.pointsize, + addCrossingPoints = s.lines.show, + thresholded = $.extend({}, s), // note: shallow copy + threspoints = [], + newpoints = [], + prevp, i, x, y, p, m; thresholded.datapoints = { points: [], pointsize: ps, format: datapoints.format }; thresholded.label = null; @@ -58,85 +54,101 @@ You may need to check for this in hover events. thresholded.threshold = null; thresholded.originSeries = s; thresholded.data = []; - - var origpoints = datapoints.points, - addCrossingPoints = s.lines.show; - - var threspoints = []; - var newpoints = []; - var m; for (i = 0; i < origpoints.length; i += ps) { x = origpoints[i]; y = origpoints[i + 1]; prevp = p; - if (y < below) + if (y < below || y > above) { p = threspoints; - else + } else { p = newpoints; + } - if (addCrossingPoints && prevp != p && x != null - && i > 0 && origpoints[i - ps] != null) { + if (addCrossingPoints && prevp !== p && x != null && i > 0 && origpoints[i - ps] != null) { var interx = x + (below - y) * (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]); prevp.push(interx); prevp.push(below); - for (m = 2; m < ps; ++m) + for (m = 2; m < ps; ++m) { prevp.push(origpoints[i + m]); - + } + p.push(null); // start new segment p.push(null); - for (m = 2; m < ps; ++m) + for (m = 2; m < ps; ++m) { p.push(origpoints[i + m]); + } p.push(interx); p.push(below); - for (m = 2; m < ps; ++m) + for (m = 2; m < ps; ++m) { p.push(origpoints[i + m]); + } } p.push(x); p.push(y); - for (m = 2; m < ps; ++m) + for (m = 2; m < ps; ++m) { p.push(origpoints[i + m]); + } } datapoints.points = newpoints; thresholded.datapoints.points = threspoints; - + if (thresholded.datapoints.points.length > 0) { var origIndex = $.inArray(s, plot.getData()); // Insert newly-generated series right after original one (to prevent it from becoming top-most) plot.getData().splice(origIndex + 1, 0, thresholded); } - + // FIXME: there are probably some edge cases left in bars } - + function processThresholds(plot, s, datapoints) { - if (!s.threshold) + if (!s.threshold) { return; - + } + if (s.threshold instanceof Array) { s.threshold.sort(function(a, b) { return a.below - b.below; }); - + $(s.threshold).each(function(i, th) { - thresholdData(plot, s, datapoints, th.below, th.color); + thresholdData(plot, s, datapoints, th.below, th.above, th.color); }); - } - else { - thresholdData(plot, s, datapoints, s.threshold.below, s.threshold.color); + } else { + thresholdData(plot, s, datapoints, s.threshold.below, s.threshold.above, s.threshold.color); } } - + plot.hooks.processDatapoints.push(processThresholds); + + function processThresholdsLegend(ctx, canvas, s) { + if (!s.threshold) { + return; + } + + var color = s.threshold.color ? s.threshold.color : "black"; + + $(".legendLabel").each(function() { + if ($(this).text() === s.label) + { + var legend = $(this).prev().find("div > div"); + legend.css("border-right-color", color); + legend.css("border-bottom-color", color); + } + }); + } + + plot.hooks.drawSeries.push(processThresholdsLegend); } - + $.plot.plugins.push({ init: init, options: options, - name: 'threshold', - version: '1.2' + name: "threshold", + version: "1.3" }); -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/pandora_console/include/graphs/flot/jquery.flot.threshold.multiple.js b/pandora_console/include/graphs/flot/jquery.flot.threshold.multiple.js new file mode 100644 index 0000000000..627eba3e4d --- /dev/null +++ b/pandora_console/include/graphs/flot/jquery.flot.threshold.multiple.js @@ -0,0 +1,189 @@ +/* +Flot plugin for specifying range of thresolds on data. +Controlled through the option "constraints" in a specific series + +usage - + $.plot($("#placeholder"), [{ data: [ ... ], constraints: [constraint1, constraint2]},{data:[...],constraints:[...]}]) + + where constraint1 = { + threshold: 2, + color: "rgb(0,0,0)", + evaluate : function(y,threshold){ return y < threshold; } + } + threshold -> y-limit on the plot. + evaluate -> the function which defines the limit.This function defines wheteher y < threshold or y > threshold. + color -> the color with which to plot portion of the graph which satisfies the limit condition. + + + +Internally, the plugin works by splitting the data into different series, one for each constraint. + +*/ +(function($){ + + + function init(plot){ + + function plotWithMultipleThresholds(plot,s,datapoints){ + if(s.data && s.data.length > 0 && s.constraints && s.constraints.length>0){ + var series = new Graph(s.data,s.constraints).getPlotData(); + for(var i=0;i= 0 ; i--) { + var constraint = this._constraints[i]; + if(null != constraint.threshold){ + var set = new Resolve(this._dataset).using(constraint.threshold, constraint.evaluate); + this._plotData.push( { + data : set, + color : constraint.color + }); + } + } + return this._plotData; + }; + + function Resolve(originalPonits) { + this._originalPoints = originalPonits; + this._data = []; + this._getPointOnThreshold = _getPointOnThreshold; + this.using = using ; + + function using(threshold, evaluate) { + var count = 0; + for ( var i = 0; i < this._originalPoints.length; i++) { + var currentPoint = this._originalPoints[i]; + if (evaluate(currentPoint[1],threshold)) { + if (i > 0 + && (this._data.length == 0 || this._data[count - 1] == null)) { + this._data[count++] = this._getPointOnThreshold(threshold,this._originalPoints[i - 1], currentPoint); + } + this._data[count++] = currentPoint; + } else { + if (this._data.length > 0 && this._data[count - 1] != null) { + this._data[count++] = this._getPointOnThreshold(threshold,this._originalPoints[i - 1], currentPoint); + this._data[count++] = null; + this._data[count++] = null; + } + } + } + return this._data; + } + + function _getPointOnThreshold(threshold, prevP, currP) { + var currentX = currP[0]; + var currentY = currP[1]; + + var prevX = prevP[0]; + var prevY = prevP[1]; + + var slope = (threshold - currentY) + / (prevY - currentY); + var xOnConstraintLine = slope * (prevX - currentX) + currentX; + + return [ xOnConstraintLine, threshold ]; + } + } + + function _getSortedConstraints(originalpoints,constraints){ + + var dataRange = _findMaxAndMin(originalpoints); + + if(undefined == dataRange)return []; + + var max = dataRange.max; + var min = dataRange.min; + var thresholdRanges = []; + var sortedConstraints = []; + for(var i = 0; i < constraints.length ; i++){ + var constraint = constraints[i]; + var range = 0; + if(constraint.evaluate(min,constraint.threshold)){ + range = Math.abs(constraint.threshold - min); + }else{ + range = Math.abs(max - constraint.threshold); + } + thresholdRanges.push({constraint:constraint,range:range}); + } + QuickSort(thresholdRanges,function(obj1,obj2){ return obj1.range < obj2.range;}); + for(var i=thresholdRanges.length-1;i>=0;i--){ + sortedConstraints[i] = thresholdRanges[i].constraint; + } + return sortedConstraints; + } + + function _findMaxAndMin(dataset){ + if(undefined == dataset)return undefined; + var arr = []; + for( var i=0;i left){ + var pivotIndex = Math.floor(( left + right )/2); + var pivotNewIndex = partition(array,left,right,pivotIndex,comparator); + sort(array, left, pivotNewIndex - 1,comparator); + sort(array, pivotNewIndex + 1, right,comparator); + + } + } + + function partition(array,left,right,pivotIndex,comparator){ + var pivot = array[pivotIndex]; + swap(array,pivotIndex,right); + var storeIndex = left; + for( var i= left ; i < right ; i++){ + if(comparator(array[i] , pivot)){ + swap(array,i,storeIndex); + storeIndex = storeIndex + 1; + } + } + swap(array,storeIndex,right); + + return storeIndex; + } + + function swap(array,index1,index2){ + var temp = array[index1]; + array[index1] = array[index2]; + array[index2] = temp; + } + } + + + plot.hooks.processRawData.push(plotWithMultipleThresholds); + } + +$.plot.plugins.push({ + init: init, + name: 'multiple.threshold', + version: '1.0' + }); +})(jQuery); + + diff --git a/pandora_console/include/graphs/flot/pandora.flot.js b/pandora_console/include/graphs/flot/pandora.flot.js index 19e63923e5..88df07cd3b 100644 --- a/pandora_console/include/graphs/flot/pandora.flot.js +++ b/pandora_console/include/graphs/flot/pandora.flot.js @@ -693,7 +693,7 @@ function pandoraFlotSlicebar(graph_id, values, datacolor, labels, legend, acumul if (full_legend != false) { full_legend = full_legend.split(separator); } - + // Check possible adapt_keys on classes check_adaptions(graph_id); @@ -806,7 +806,7 @@ function pandoraFlotSlicebar(graph_id, values, datacolor, labels, legend, acumul var to = legend[item.seriesIndex+1]; //current date var dateObj = new Date(); - + if (full_legend != "") { newdate = full_legend[item.seriesIndex]; newdate2 = full_legend[item.seriesIndex+1]; @@ -817,11 +817,11 @@ function pandoraFlotSlicebar(graph_id, values, datacolor, labels, legend, acumul var year = dateObj.getUTCFullYear(); newdate = year + "/" + month + "/" + day; } - + if(!to){ to= '23:59'; } - + if (full_legend != "") { if (newdate2 == undefined) { window.location='index.php?sec=eventos&sec2=operation/events/events&id_agent='+id_agent+'&date_from='+newdate+'&time_from='+from+'&status=-1'; @@ -855,274 +855,6 @@ function pandoraFlotSlicebar(graph_id, values, datacolor, labels, legend, acumul } } -/* -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) { - menu_height = $('#menu_'+graph_id).height(); - } - - 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(); -} - - - -function set_watermark(graph_id, plot, watermark_src) { -console.log('entra setmark'); - var img = new Image(); - img.src = watermark_src; - var context = plot.getCanvas().getContext('2d'); - - // Once it's loaded draw the image on the canvas. - img.addEventListener('load', function () { - //~ // Now resize the image: x, y, w, h. - - var down_ticks_height = 0; - if ($('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height') != undefined) { - down_ticks_height = $('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height').split('px')[0]; - } - - var left_pos = parseInt(context.canvas.width - 3) - $('#watermark_image_'+graph_id)[0].width; - var top_pos = 6; - //var top_pos = parseInt(context.canvas.height - down_ticks_height - 10) - $('#watermark_image_'+graph_id)[0].height; - //var left_pos = 380; - context.drawImage(this, left_pos, top_pos); - - }, false); -} - -function get_event_details (event_ids) { - table = ''; - if (typeof(event_ids) != "undefined") { - var inputs = []; - var table; - inputs.push ("get_events_details=1"); - inputs.push ("event_ids="+event_ids); - inputs.push ("page=include/ajax/events"); - - // Autologin - if ($('#hidden-loginhash').val() != undefined) { - inputs.push ("loginhash=" + $('#hidden-loginhash').val()); - inputs.push ("loginhash_data=" + $('#hidden-loginhash_data').val()); - inputs.push ("loginhash_user=" + $('#hidden-loginhash_user').val()); - } - - jQuery.ajax ({ - data: inputs.join ("&"), - type: 'GET', - url: action="../../ajax.php", - timeout: 10000, - dataType: 'html', - async: false, - success: function (data) { - table = data; - //forced_title_callback(); - } - }); - } - - return table; -} - -function adjust_left_width_canvas(adapter_id, adapted_id) { - var adapter_left_margin = $('#'+adapter_id+' .yAxis .tickLabel').width(); - var adapted_pix = $('#'+adapted_id).width(); - - var new_adapted_width = adapted_pix - adapter_left_margin; - - $('#'+adapted_id).width(new_adapted_width); - $('#'+adapted_id).css('margin-left', adapter_left_margin); -} - -function check_adaptions(graph_id) { - var classes = $('#'+graph_id).attr('class').split(' '); - - $.each(classes, function(i,v) { - // If has a class starting with adapted, we adapt it - if (v.split('_')[0] == 'adapted') { - var adapter_id = $('.adapter_'+v.split('_')[1]).attr('id'); - adjust_left_width_canvas(adapter_id, graph_id); - } - }); -} - -function number_format(number, force_integer, unit, short_data) { - if (force_integer) { - if (Math.round(number) != number) { - return ''; - } - } - else { - short_data ++; - decimals = pad(1, short_data, 0); - number = Math.round(number * decimals) / decimals; - } - - var shorts = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"]; - var pos = 0; - while (1) { - if (number >= 1000) { //as long as the number can be divided by 1000 - pos++; //Position in array starting with 0 - number = number / 1000; - } - else if (number <= -1000) { - pos++; - number = number / 1000; - } - else { - break; - } - } - return number + ' ' + shorts[pos] + unit; -} - -function pad(input, length, padding) { - var str = input + ""; - return (length <= str.length) ? str : pad(str+padding, length, padding); -} - -// Recalculate the threshold data depends on warning and critical -function axis_thresholded (threshold_data, y_min, y_max, red_threshold, extremes, red_up) { - - var y = { - min: 0, - max: 0 - }; - - // Default values - var yaxis_resize = { - up: null, - normal_up: 0, - normal_down: 0, - down: null - }; - - // Resize the y axis to display all intervals - $.each(threshold_data, function() { - if (/_up/.test(this.id)){ - yaxis_resize['up'] = this.data[0][1]; - } - if (/_down/.test(this.id)){ - if (/critical/.test(this.id)) { - yaxis_resize['down'] = red_threshold; - } else { - yaxis_resize['down'] = extremes[this.id]; - } - } - if (/_normal/.test(this.id)){ - var end; - if (/critical/.test(this.id)) { - end = red_up; - } else { - end = extremes[this.id + '_2']; - } - if (yaxis_resize['normal_up'] < end) yaxis_resize['normal_up'] = end; - if (yaxis_resize['normal_down'] > this.data[0][1]) yaxis_resize['normal_down'] = this.data[0][1]; - } - }); - - // If you need to display a up or a down bar, display 10% of data height - var margin_up_or_down = (y_max - y_min)*0.10; - - // Calculate the new axis - y['max'] = yaxis_resize['normal_up'] > y_max ? yaxis_resize['normal_up'] : y_max; - y['min'] = yaxis_resize['normal_down'] > y_min ? yaxis_resize['normal_down'] : y_min; - if (yaxis_resize['up'] !== null) { - y['max'] = (yaxis_resize['up'] + margin_up_or_down) < y_max - ? y_max - : yaxis_resize['up'] + margin_up_or_down; - } - if (yaxis_resize['down'] !== null) { - y['min'] = (yaxis_resize['down'] - margin_up_or_down) < y_min - ? yaxis_resize['up'] + margin_up_or_down - : y_min; - } - return y; -} - -function add_threshold (data_base, threshold_data, y_min, y_max, - red_threshold, extremes, red_up) { - - var datas = new Array (); - $.each(data_base, function() { - // Prepared to turning series - //if(showed[this.id.split('_')[1]]) { - datas.push(this); - //} - }); - - // Resize the threshold data - $.each(threshold_data, function() { - if (/_up/.test(this.id)){ - this.bars.barWidth = y_max - this.data[0][1]; - } - if (/_down/.test(this.id)){ - var end; - if (/critical/.test(this.id)) { - end = red_threshold; - } else { - end = extremes[this.id]; - } - this.bars.barWidth = end - y_min; - this.data[0][1] = y_min; - } - if (/_normal/.test(this.id)){ - var end; - if (/critical/.test(this.id)) { - end = red_up; - } else { - end = extremes[this.id + '_2']; - } - if (this.data[0][1] < y_min) { - this.bars.barWidth = end - y_min; - this.data[0][1] = y_min; - end = this.bars.barWidth + this.data[0][1]; - } - if (end > y_max) { - this.bars.barWidth = y_max - this.data[0][1]; - } - } - datas.push(this); - }); - return datas; -} - -function reduceText (text, maxLength) { - if (text.length <= maxLength) return text - var firstSlideEnd = parseInt((maxLength - 3) / 2); - var str_cut = text.substr(0, firstSlideEnd); - return str_cut + '...' + text.substr(-firstSlideEnd - 3); -} -*/ function pandoraFlotArea( graph_id, values, legend, agent_module_id, series_type, watermark, date_array, @@ -1131,7 +863,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; @@ -1142,9 +874,14 @@ function pandoraFlotArea( var vconsole = show_elements_graph.vconsole; var dashboard = show_elements_graph.dashboard; var menu = show_elements_graph.menu; + var min_x = date_array['start_date'] *1000; var max_x = date_array['final_date'] *1000; var type = show_elements_graph.stacked; + if(typeof type === 'undefined' || type == ''){ + type = format_graph.type_graph; + } + //for threshold var threshold = true; var thresholded = false; @@ -1155,6 +892,9 @@ function pandoraFlotArea( var yellow_inverse = parseInt (data_module_graph.w_inv); var red_inverse = parseInt (data_module_graph.c_inv); + //XXXXX + var markins_graph = true; + //XXXX ver que hay que hacer var labels_long = ''; var min_check = 0; @@ -1162,7 +902,587 @@ function pandoraFlotArea( var legend_events = null; var legend_alerts = null; + + // If threshold and up are the same, that critical or warning is disabled + if (yellow_threshold == yellow_up){ + yellow_inverse = false; + } + + if (red_threshold == red_up){ + red_inverse = false; + } + + //Array with points to be painted + var threshold_data = new Array(); + //Array with some interesting points + var extremes = new Array (); + + var yellow_only_min = ((yellow_up == 0) && (yellow_threshold != 0)); + var red_only_min = ((red_up == 0) && (red_threshold != 0)); + + //color + var normalw = '#efe'; + var warningw = '#ffe'; + var criticalw = '#fee'; + var normal = '#0f0'; + var warning = 'yellow'; + var critical = 'red'; + + if (threshold) { + // Warning interval. Change extremes depends on critical interval + if (yellow_inverse && red_inverse) { + if (red_only_min && yellow_only_min) { + // C: |-------- | + // W: |········==== | + if (yellow_threshold > red_threshold) { + threshold_data.push({ + id: 'warning_normal_fdown', + data: [[max_x, red_threshold]], + label: null, + color: warning, + bars: { + show: true, + align: "left", + barWidth: yellow_threshold - red_threshold, + lineWidth: 0, + horizontal: true, + fillColor: { + colors: [ + { + opacity: 0.1 + }, + { + opacity: 0.1 + } + ] + } + }, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + + extremes['warning_normal_fdown_1'] = red_threshold; + extremes['warning_normal_fdown_2'] = yellow_threshold; + } + } else if (!red_only_min && yellow_only_min) { + // C: |-------- ------| + // W: |········===· | + if (yellow_threshold > red_up) { + yellow_threshold = red_up; + } + if (yellow_threshold > red_threshold) { + threshold_data.push({ + id: 'warning_normal_fdown', + data: [[max_x, red_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fdown_1'] = red_threshold; + extremes['warning_normal_fdown_2'] = yellow_threshold; + } + } else if (red_only_min && !yellow_only_min) { + // C: |------- | + // W: |·······==== ===| + if (red_threshold < yellow_threshold) { + threshold_data.push({ + id: 'warning_normal_fdown', + data: [[max_x, red_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fdown_1'] = red_threshold; + extremes['warning_normal_fdown_2'] = yellow_threshold; + } + + if (yellow_up < red_threshold) { + yellow_up = red_threshold; + } + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_up', + data: [[max_x, yellow_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_up'] = yellow_up; + } else { + if (yellow_threshold > red_threshold) { + // C: |-------- ------| + // W: |········===· ···| + if (yellow_threshold > red_up) { + yellow_threshold = red_up; + } + threshold_data.push({ + id: 'warning_normal_fdown', + data: [[max_x, red_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fdown_1'] = red_threshold; + extremes['warning_normal_fdown_2'] = yellow_threshold; + } + if (yellow_up < red_up) { + // C: |-------- ---| + // W: |····· ·======···| + if (yellow_up < red_threshold) { + yellow_up = red_up; + } + threshold_data.push({ + id: 'warning_normal_fup', + data: [[max_x, yellow_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: red_up - yellow_up, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fup_1'] = red_up; + extremes['warning_normal_fup_2'] = yellow_up; + } + // If warning is under critical completely do not paint anything yellow + // C: |-------- -----| + // W: |···· ···| + } + } else if (yellow_inverse && !red_inverse) { + if (red_only_min && yellow_only_min) { + // C: | -----| + // W: |============··· | + if (yellow_threshold > red_threshold) { + yellow_threshold = red_threshold; + } + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_down', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_down'] = yellow_threshold; + + } else if (!red_only_min && yellow_only_min) { + // C: | ---- | + // W: |======····=== | + + if (yellow_threshold > red_up) { + threshold_data.push({ + id: 'warning_normal_fdown', + data: [[max_x, red_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: yellow_threshold - red_up, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fdown_1'] = red_up; + extremes['warning_normal_fdown_2'] = yellow_threshold; + } + + if (yellow_threshold > red_threshold) { + yellow_threshold = red_threshold; + } + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_down', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_down'] = yellow_threshold; + + } else if (red_only_min && !yellow_only_min) { + if (yellow_threshold < red_threshold) { + // C: | -----| + // W: |======= ===·····| + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_down', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_down'] = yellow_threshold; + + if (red_threshold > yellow_up) { + threshold_data.push({ + id: 'warning_normal_fup', + data: [[max_x, yellow_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: red_threshold - yellow_up, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fup_1'] = yellow_up; + extremes['warning_normal_fup_2'] = red_threshold; + } + } else { + // C: | ------------| + // W: |=====·· ········| + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_down', + data: [[max_x, red_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_down'] = red_threshold; + } + } else { + if (yellow_threshold > red_up) { + // C: | ----- | + // W: |====·····=== ===| + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_down', + data: [[max_x, red_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_down'] = red_threshold; + + threshold_data.push({ + id: 'warning_normal_fdown', + data: [[max_x, red_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: yellow_threshold - red_up, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fdown_1'] = red_up; + extremes['warning_normal_fdown_2'] = yellow_threshold; + + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_up', + data: [[max_x, yellow_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_up'] = yellow_up; + } else if (red_threshold > yellow_up){ + // C: | ----- | + // W: |=== ===·····==| + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_down', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_down'] = yellow_threshold; + + threshold_data.push({ + id: 'warning_normal_fup', + data: [[max_x, yellow_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: red_threshold - yellow_up, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fup_1'] = yellow_up; + extremes['warning_normal_fup_2'] = red_threshold; + + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_up', + data: [[max_x, red_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_up'] = red_up; + } else { + // C: | -------- | + // W: |==· ···=======| + if (yellow_threshold > red_threshold) { + yellow_threshold = red_threshold; + } + if (yellow_up < red_up) { + yellow_up = red_up; + } + + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_down', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_down'] = yellow_threshold; + + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_up', + data: [[max_x, yellow_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_up'] = yellow_up; + } + } + } else if (!yellow_inverse && red_inverse) { + if (yellow_only_min && red_only_min) { + // C: |----- | + // W: | ··============| + if (yellow_threshold < red_threshold) { + yellow_threshold = red_threshold; + } + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_up', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_up'] = yellow_threshold; + } else if (!yellow_only_min && red_only_min) { + // C: |----- | + // W: | ··======== | + if (yellow_threshold < red_threshold) { + yellow_threshold = red_threshold; + } + if (yellow_up > red_threshold) { + threshold_data.push({ + id: 'warning_normal', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_1'] = yellow_threshold; + extremes['warning_normal_2'] = yellow_up; + } + } else if (yellow_only_min && !red_only_min) { + // C: |----- ------| + // W: | ··======······| + if (yellow_threshold < red_threshold) { + yellow_threshold = red_threshold; + } + if (yellow_threshold < red_up) { + threshold_data.push({ + id: 'warning_normal', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: (red_up - yellow_threshold), lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_1'] = yellow_threshold; + extremes['warning_normal_2'] = red_up; + } + // If warning is under critical completely do not paint anything yellow + // C: |-------- -----| + // W: | ···| + } else { + if (red_up > yellow_threshold && red_threshold < yellow_up) { + // C: |----- ------| + // W: | ··======· | + if (yellow_threshold < red_threshold) { + yellow_threshold = red_threshold; + } + if (yellow_up > red_up) { + yellow_up = red_up; + } + + threshold_data.push({ + id: 'warning_normal', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_1'] = yellow_threshold; + extremes['warning_normal_2'] = yellow_up; + } + } + } + // If warning is under critical completely do not paint anything yellow + // C: |-------- -----| or // C: |-------- -----| + // W: | ···· | // W: | ·· | + else { + if (red_only_min && yellow_only_min) { + if (yellow_threshold < red_threshold) { + // C: | ---------| + // W: | =====·········| + threshold_data.push({ + id: 'warning_normal', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: (red_threshold - yellow_threshold), lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_1'] = yellow_threshold; + extremes['warning_normal_2'] = red_threshold; + } + } else if (red_only_min && !yellow_only_min) { + // C: | ---------| + // W: | =====··· | + if (yellow_up > red_threshold) { + yellow_up = red_threshold; + } + if (yellow_threshold < red_threshold) { + threshold_data.push({ + id: 'warning_normal', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_1'] = yellow_threshold; + extremes['warning_normal_2'] = yellow_up; + } + } else if (!red_only_min && yellow_only_min) { + // C: | ------- | + // W: | ==·······=====| + if (yellow_threshold < red_threshold) { + threshold_data.push({ + id: 'warning_normal_fdown', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: red_threshold - yellow_threshold, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fdown_1'] = yellow_threshold; + extremes['warning_normal_fdown_2'] = red_threshold; + } + + if (yellow_threshold < red_up) { + yellow_threshold = red_up; + } + + threshold_data.push({ // barWidth will be correct on draw time + id: 'warning_up', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_up'] = yellow_threshold; + + } else { + if (red_threshold > yellow_threshold && red_up < yellow_up ) { + // C: | ------ | + // W: | ==······==== | + threshold_data.push({ + id: 'warning_normal_fdown', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: red_threshold - yellow_threshold, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fdown_1'] = yellow_threshold; + extremes['warning_normal_fdown_2'] = red_threshold; + + threshold_data.push({ + id: 'warning_normal_fup', + data: [[max_x, red_up]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: yellow_up - red_up, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_fup_1'] = red_up; + extremes['warning_normal_fup_2'] = yellow_up; + } else if (red_threshold < yellow_threshold && red_up > yellow_up) { + // If warning is under critical completely do not paint anything yellow + // C: | -------- | + // W: | ···· | + } else { + // C: | -------- | or // C: | ------ | + // W: | ==·· | // W: | ···==== | + if ((yellow_up > red_threshold) && (yellow_up < red_up)) { + yellow_up = red_threshold; + } + if ((yellow_threshold < red_up) && (yellow_threshold > red_threshold)) { + yellow_threshold = red_up; + } + threshold_data.push({ + id: 'warning_normal', + data: [[max_x, yellow_threshold]], + label: null, + color: warning, + bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 255, 198, 0)' + }); + extremes['warning_normal_1'] = yellow_threshold; + extremes['warning_normal_2'] = yellow_up; + } + } + } + + // Critical interval + if (red_inverse) { + if (!red_only_min) { + threshold_data.push({ // barWidth will be correct on draw time + id: 'critical_up', + data: [[max_x, red_up]], + label: null, + color: critical, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 236, 234, 0)' + }); + extremes['critical_normal_1'] = red_threshold; + extremes['critical_normal_2'] = red_up; + } + threshold_data.push({ // barWidth will be correct on draw time + id: 'critical_down', + data: [[max_x, red_threshold]], + label: null, + color: critical, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 236, 234, 0)' + }); + extremes['critical_normal_3'] = red_threshold; + extremes['critical_normal_4'] = red_threshold; + } else { + if (red_up == 0 && red_threshold != 0) { + threshold_data.push({ // barWidth will be correct on draw time + id: 'critical_up', + data: [[max_x, red_threshold]], + label: null, + color: critical, + bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 236, 234, 0)' + }); + extremes['critical_normal_1'] = red_threshold; + extremes['critical_normal_2'] = red_up; + } else { + threshold_data.push({ + id: 'critical_normal', + data: [[max_x, red_threshold]], + label: null, + color: critical, + bars: {show: true, align: "left", barWidth: (red_up - red_threshold), lineWidth: 0, horizontal: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.1 } ] }}, + highlightColor: 'rgba(254, 236, 234, 0)' + }); + extremes['critical_normal_1'] = red_threshold; + extremes['critical_normal_2'] = red_up; + } + } + } + switch (type) { + case 'line': case 2: stacked = null; filled_s = false; @@ -1172,13 +1492,14 @@ function pandoraFlotArea( filled_s = false; break; default: + case 'area': case 0: stacked = null; - filled_s = 0.2; + filled_s = 0.3; break; case 1: stacked = 'stack'; - filled_s = 0.2; + filled_s = 0.3; break; } @@ -1230,12 +1551,13 @@ function pandoraFlotArea( case 'boolean': line_show = true; points_show = false; - filled = false; + filled = filled_s; steps_chart = true; radius = false; fill_points = fill_color; break; } + data_base.push({ id: 'serie_' + i, data: value.data, @@ -1249,537 +1571,15 @@ function pandoraFlotArea( }, points: { show: points_show, - radius: radius, + radius: 3, fillColor: fill_points } }); + i++; } }); - // If threshold and up are the same, that critical or warning is disabled - if (yellow_threshold == yellow_up){ - yellow_inverse = false; - } - - if (red_threshold == red_up){ - red_inverse = false; - } - - //Array with points to be painted - var threshold_data = new Array(); - //Array with some interesting points - var extremes = new Array (); - - var yellow_only_min = ((yellow_up == 0) && (yellow_threshold != 0)); - var red_only_min = ((red_up == 0) && (red_threshold != 0)); - - //color - var normalw = '#efe'; - var warningw = '#ffe'; - var criticalw = '#fee'; - var normal = '#0f0'; - var warning = '#ff0'; - var critical = '#f00'; - - if (threshold) { - // Warning interval. Change extremes depends on critical interval - if (yellow_inverse && red_inverse) { - if (red_only_min && yellow_only_min) { - // C: |-------- | - // W: |········==== | - - if (yellow_threshold > red_threshold) { - threshold_data.push({ - id: 'warning_normal_fdown', - data: [[max_x, red_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fdown_1'] = red_threshold; - extremes['warning_normal_fdown_2'] = yellow_threshold; - } - } else if (!red_only_min && yellow_only_min) { - // C: |-------- ------| - // W: |········===· | - - if (yellow_threshold > red_up) { - yellow_threshold = red_up; - } - if (yellow_threshold > red_threshold) { - threshold_data.push({ - id: 'warning_normal_fdown', - data: [[max_x, red_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fdown_1'] = red_threshold; - extremes['warning_normal_fdown_2'] = yellow_threshold; - } - } else if (red_only_min && !yellow_only_min) { - // C: |------- | - // W: |·······==== ===| - if (red_threshold < yellow_threshold) { - threshold_data.push({ - id: 'warning_normal_fdown', - data: [[max_x, red_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fdown_1'] = red_threshold; - extremes['warning_normal_fdown_2'] = yellow_threshold; - } - - if (yellow_up < red_threshold) { - yellow_up = red_threshold; - } - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_up', - data: [[max_x, yellow_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_up'] = yellow_up; - - } else { - if (yellow_threshold > red_threshold) { - // C: |-------- ------| - // W: |········===· ···| - if (yellow_threshold > red_up) { - yellow_threshold = red_up; - } - threshold_data.push({ - id: 'warning_normal_fdown', - data: [[max_x, red_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fdown_1'] = red_threshold; - extremes['warning_normal_fdown_2'] = yellow_threshold; - } - if (yellow_up < red_up) { - // C: |-------- ---| - // W: |····· ·======···| - if (yellow_up < red_threshold) { - yellow_up = red_up; - } - threshold_data.push({ - id: 'warning_normal_fup', - data: [[max_x, yellow_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: red_up - yellow_up, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fup_1'] = red_up; - extremes['warning_normal_fup_2'] = yellow_up; - } - // If warning is under critical completely do not paint anything yellow - // C: |-------- -----| - // W: |···· ···| - } - } else if (yellow_inverse && !red_inverse) { - if (red_only_min && yellow_only_min) { - // C: | -----| - // W: |============··· | - if (yellow_threshold > red_threshold) { - yellow_threshold = red_threshold; - } - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_down', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_down'] = yellow_threshold; - - } else if (!red_only_min && yellow_only_min) { - // C: | ---- | - // W: |======····=== | - - if (yellow_threshold > red_up) { - threshold_data.push({ - id: 'warning_normal_fdown', - data: [[max_x, red_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: yellow_threshold - red_up, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fdown_1'] = red_up; - extremes['warning_normal_fdown_2'] = yellow_threshold; - } - - if (yellow_threshold > red_threshold) { - yellow_threshold = red_threshold; - } - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_down', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_down'] = yellow_threshold; - - } else if (red_only_min && !yellow_only_min) { - if (yellow_threshold < red_threshold) { - // C: | -----| - // W: |======= ===·····| - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_down', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_down'] = yellow_threshold; - - if (red_threshold > yellow_up) { - threshold_data.push({ - id: 'warning_normal_fup', - data: [[max_x, yellow_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: red_threshold - yellow_up, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fup_1'] = yellow_up; - extremes['warning_normal_fup_2'] = red_threshold; - } - } else { - // C: | ------------| - // W: |=====·· ········| - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_down', - data: [[max_x, red_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_down'] = red_threshold; - } - } else { - if (yellow_threshold > red_up) { - // C: | ----- | - // W: |====·····=== ===| - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_down', - data: [[max_x, red_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_down'] = red_threshold; - - threshold_data.push({ - id: 'warning_normal_fdown', - data: [[max_x, red_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: yellow_threshold - red_up, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fdown_1'] = red_up; - extremes['warning_normal_fdown_2'] = yellow_threshold; - - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_up', - data: [[max_x, yellow_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_up'] = yellow_up; - } else if (red_threshold > yellow_up){ - // C: | ----- | - // W: |=== ===·····==| - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_down', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_down'] = yellow_threshold; - - threshold_data.push({ - id: 'warning_normal_fup', - data: [[max_x, yellow_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: red_threshold - yellow_up, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fup_1'] = yellow_up; - extremes['warning_normal_fup_2'] = red_threshold; - - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_up', - data: [[max_x, red_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_up'] = red_up; - } else { - // C: | -------- | - // W: |==· ···=======| - if (yellow_threshold > red_threshold) { - yellow_threshold = red_threshold; - } - if (yellow_up < red_up) { - yellow_up = red_up; - } - - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_down', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_down'] = yellow_threshold; - - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_up', - data: [[max_x, yellow_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_up'] = yellow_up; - } - } - } else if (!yellow_inverse && red_inverse) { - if (yellow_only_min && red_only_min) { - // C: |----- | - // W: | ··============| - if (yellow_threshold < red_threshold) { - yellow_threshold = red_threshold; - } - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_up', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_up'] = yellow_threshold; - - } else if (!yellow_only_min && red_only_min) { - // C: |----- | - // W: | ··======== | - if (yellow_threshold < red_threshold) { - yellow_threshold = red_threshold; - } - if (yellow_up > red_threshold) { - threshold_data.push({ - id: 'warning_normal', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_1'] = yellow_threshold; - extremes['warning_normal_2'] = yellow_up; - } - } else if (yellow_only_min && !red_only_min) { - // C: |----- ------| - // W: | ··======······| - if (yellow_threshold < red_threshold) { - yellow_threshold = red_threshold; - } - if (yellow_threshold < red_up) { - threshold_data.push({ - id: 'warning_normal', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: (red_up - yellow_threshold), lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_1'] = yellow_threshold; - extremes['warning_normal_2'] = red_up; - } - // If warning is under critical completely do not paint anything yellow - // C: |-------- -----| - // W: | ···| - } else { - if (red_up > yellow_threshold && red_threshold < yellow_up) { - // C: |----- ------| - // W: | ··======· | - if (yellow_threshold < red_threshold) { - yellow_threshold = red_threshold; - } - if (yellow_up > red_up) { - yellow_up = red_up; - } - - threshold_data.push({ - id: 'warning_normal', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_1'] = yellow_threshold; - extremes['warning_normal_2'] = yellow_up; - } - } - } - // If warning is under critical completely do not paint anything yellow - // C: |-------- -----| or // C: |-------- -----| - // W: | ···· | // W: | ·· | - else { - if (red_only_min && yellow_only_min) { - if (yellow_threshold < red_threshold) { - // C: | ---------| - // W: | =====·········| - threshold_data.push({ - id: 'warning_normal', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: (red_threshold - yellow_threshold), lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_1'] = yellow_threshold; - extremes['warning_normal_2'] = red_threshold; - } - } else if (red_only_min && !yellow_only_min) { - // C: | ---------| - // W: | =====··· | - if (yellow_up > red_threshold) { - yellow_up = red_threshold; - } - if (yellow_threshold < red_threshold) { - threshold_data.push({ - id: 'warning_normal', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_1'] = yellow_threshold; - extremes['warning_normal_2'] = yellow_up; - } - } else if (!red_only_min && yellow_only_min) { - // C: | ------- | - // W: | ==·······=====| - - if (yellow_threshold < red_threshold) { - threshold_data.push({ - id: 'warning_normal_fdown', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: red_threshold - yellow_threshold, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fdown_1'] = yellow_threshold; - extremes['warning_normal_fdown_2'] = red_threshold; - } - - if (yellow_threshold < red_up) { - yellow_threshold = red_up; - } - - threshold_data.push({ // barWidth will be correct on draw time - id: 'warning_up', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - extremes['warning_up'] = yellow_threshold; - - } else { - if (red_threshold > yellow_threshold && red_up < yellow_up ) { - // C: | ------ | - // W: | ==······==== | - threshold_data.push({ - id: 'warning_normal_fdown', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: red_threshold - yellow_threshold, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fdown_1'] = yellow_threshold; - extremes['warning_normal_fdown_2'] = red_threshold; - - threshold_data.push({ - id: 'warning_normal_fup', - data: [[max_x, red_up]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: yellow_up - red_up, lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_fup_1'] = red_up; - extremes['warning_normal_fup_2'] = yellow_up; - } else if (red_threshold < yellow_threshold && red_up > yellow_up) { - // If warning is under critical completely do not paint anything yellow - // C: | -------- | - // W: | ···· | - } else { - // C: | -------- | or // C: | ------ | - // W: | ==·· | // W: | ···==== | - if ((yellow_up > red_threshold) && (yellow_up < red_up)) { - yellow_up = red_threshold; - } - if ((yellow_threshold < red_up) && (yellow_threshold > red_threshold)) { - yellow_threshold = red_up; - } - threshold_data.push({ - id: 'warning_normal', - data: [[max_x, yellow_threshold]], - label: null, - color: warning, - bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true} - }); - extremes['warning_normal_1'] = yellow_threshold; - extremes['warning_normal_2'] = yellow_up; - } - } - } - // Critical interval - if (red_inverse) { - if (!red_only_min) { - threshold_data.push({ // barWidth will be correct on draw time - id: 'critical_up', - data: [[max_x, red_up]], - label: null, - color: critical, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - } - threshold_data.push({ // barWidth will be correct on draw time - id: 'critical_down', - data: [[max_x, red_threshold]], - label: null, - color: critical, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - } else { - if (red_up == 0 && red_threshold != 0) { - threshold_data.push({ // barWidth will be correct on draw time - id: 'critical_up', - data: [[max_x, red_threshold]], - label: null, - color: critical, - bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true} - }); - } else { - threshold_data.push({ - id: 'critical_normal', - data: [[max_x, red_threshold]], - label: null, - color: critical, - bars: {show: true, align: "left", barWidth: (red_up - red_threshold), lineWidth: 0, horizontal: true} - }); - } - } - - } - // The first execution, the graph data is the base data datas = data_base; font_size = 8; @@ -1794,7 +1594,8 @@ function pandoraFlotArea( shadowSize: 0.1 }, crosshair: { - mode: 'xy' + mode: 'xy', + color: 'grey' }, selection: { mode: 'xy', @@ -1811,7 +1612,8 @@ function pandoraFlotArea( borderWidth:1, borderColor: '#C1C1C1', tickColor: background_color, - color: legend_color + color: legend_color, + autoHighlight: true }, xaxes: [{ axisLabelFontSizePixels: font_size, @@ -1946,69 +1748,92 @@ function pandoraFlotArea( } } - 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'] - }], - 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 - } - })); - if (thresholded) { - var zoom_data_threshold = new Array (); + data_base_treshold = add_threshold ( + data_base, + threshold_data, + ranges.yaxis.from, + ranges.yaxis.to, + red_threshold, + extremes, + red_up, + markins_graph + ); - var y_recal = axis_thresholded(threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max, - red_threshold, extremes, red_up); - - plot = $.plot($('#' + graph_id), data_base, - $.extend(true, {}, options, { - yaxis: { - max: y_recal.max, - min: y_recal.min - }, - xaxis: { - min: plot.getAxes().xaxis.min, - max: plot.getAxes().xaxis.max - } + plot = $.plot($('#' + graph_id), data_base_treshold, + $.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'] + }], + 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 + } + })); + } + else{ + 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'] + }], + 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 + } })); - - 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(); } $('#menu_cancelzoom_' + graph_id) .attr('src', homeurl + '/images/zoom_cross_grey.png'); - currentRanges = ranges; + // currentRanges = ranges; // don't fire event on the overview to prevent eternal loop overview.setSelection(ranges, true); }); @@ -2158,7 +1983,7 @@ function pandoraFlotArea( $('#' + graph_id).bind("plotclick", function (event, pos, item) { plot.unhighlight(); - if(item && item.series.label != '' && + if(item && item.series.label != '' && item.series.label != null && ( (item.series.label.search("alert") >= 0) || (item.series.label.search("event") >= 0) ) ){ @@ -2196,7 +2021,8 @@ function pandoraFlotArea( $.each(events_array, function (i, v) { $.each(v, function (index, value) { - if((value.utimestamp) == item.datapoint[0]/1000){ + if(value.utimestamp == item.datapoint[0]/1000 || + value.utimestamp == (item.datapoint[0]/1000) - 1){ events_data = value; } }); @@ -2327,14 +2153,16 @@ function pandoraFlotArea( if (thresholded) { $.each(data_base, function() { - // Prepared to turning series - //if(showed[this.id.split('_')[1]]) { datas.push(this); - //} }); + + delete data_base[0].threshold; + plot = $.plot($('#' + graph_id), data_base, $.extend(true, {}, options, { - yaxis: {max: max_draw}, + yaxis: { + max: max_draw + }, xaxis: { min: plot.getAxes().xaxis.min, max: plot.getAxes().xaxis.max @@ -2344,36 +2172,51 @@ function pandoraFlotArea( } else { var max_draw = plot.getAxes().yaxis.datamax; - // Recalculate the y axis - var y_recal = axis_thresholded(threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max, - red_threshold, extremes, red_up); - plot = $.plot($('#' + graph_id), data_base, + if(!thresholded){ + // Recalculate the y axis + var y_recal = axis_thresholded( + threshold_data, + plot.getAxes().yaxis.min, + plot.getAxes().yaxis.max, + red_threshold, extremes, + red_up + ); + } + else{ + var y_recal = plot.getAxes().yaxis.max + } + + datas_treshold = add_threshold ( + data_base, + threshold_data, + plot.getAxes().yaxis.min, + plot.getAxes().yaxis.max, + red_threshold, + extremes, + red_up, + markins_graph + ); + + plot = $.plot($('#' + graph_id), datas_treshold, $.extend(true, {}, options, { yaxis: { max: y_recal.max, - min: y_recal.min }, xaxis: { - //mode:"time", - //min: plot.getAxes().xaxis.min, - //max: plot.getAxes().xaxis.max + min: plot.getAxes().xaxis.min, + max: plot.getAxes().xaxis.max } })); - datas = add_threshold (data_base, threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max, - red_threshold, extremes, red_up); - thresholded = true; } - plot.setData(datas); - plot.draw(); - //~ plot.setSelection(currentRanges); }); $('#menu_cancelzoom_' + graph_id).click(function() { // cancel the zooming + delete data_base[0].threshold; plot = $.plot($('#' + graph_id), data_base, $.extend(true, {}, options, { legend: { show: true } @@ -2494,7 +2337,6 @@ function get_event_details (event_ids) { //XXXXXXXXXX //Ajusta la grafica pequenña con el desplazamiento del eje y - function adjust_left_width_canvas(adapter_id, adapted_id) { var adapter_left_margin = $('#'+adapter_id+' .yAxis .tickLabel').width(); var adapted_pix = $('#'+adapted_id).width(); @@ -2506,7 +2348,6 @@ function adjust_left_width_canvas(adapter_id, adapted_id) { //XXXXXXXXXXX //Ajusta el ancho de la grafica pequeña con respecto a la grande - 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()); @@ -2551,14 +2392,15 @@ function number_format(number, force_integer, unit, short_data) { break; } } - + return number + ' ' + shorts[pos] + unit; } -function pad(input, length, padding) { +function pad(input, length, padding) { var str = input + ""; return (length <= str.length) ? str : pad(str+padding, length, padding); } + // Recalculate the threshold data depends on warning and critical function axis_thresholded (threshold_data, y_min, y_max, red_threshold, extremes, red_up) { var y = { @@ -2617,23 +2459,41 @@ function axis_thresholded (threshold_data, y_min, y_max, red_threshold, extremes return y; } +//add treshold function add_threshold (data_base, threshold_data, y_min, y_max, - red_threshold, extremes, red_up) { - + red_threshold, extremes, red_up, markins_graph) { var datas = new Array (); $.each(data_base, function() { - // Prepared to turning series - //if(showed[this.id.split('_')[1]]) { - datas.push(this); - //} + datas.push(this); }); + var threshold_array = []; + // Resize the threshold data - $.each(threshold_data, function() { + $.each(threshold_data, function(index, value) { + threshold_array[index] = []; + if (/_up/.test(this.id)){ this.bars.barWidth = y_max - this.data[0][1]; + + if (/critical/.test(this.id)){ + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = y_max; + threshold_array[index]['color'] = "red"; + } + else{ + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = y_max; + threshold_array[index]['color'] = "yellow"; + } + + if(y_min > this.data[0][1]){ + this.bars.barWidth = this.bars.barWidth - (y_min - this.data[0][1]); + this.data[0][1] = y_min; + } } + if (/_down/.test(this.id)){ var end; if (/critical/.test(this.id)) { @@ -2641,28 +2501,104 @@ function add_threshold (data_base, threshold_data, y_min, y_max, } else { end = extremes[this.id]; } + this.bars.barWidth = end - y_min; this.data[0][1] = y_min; + + if (/critical/.test(this.id)){ + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = this.bars.barWidth; + threshold_array[index]['color'] = "red"; + } + else{ + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = this.bars.barWidth; + threshold_array[index]['color'] = "yellow"; + } } + if (/_normal/.test(this.id)){ var end; if (/critical/.test(this.id)) { end = red_up; + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = end; + threshold_array[index]['color'] = "red"; } else { - end = extremes[this.id + '_2']; + end = extremes[this.id + '_1']; + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = end; + threshold_array[index]['color'] = "yellow"; } + + if (this.data[0][1] < y_min) { this.bars.barWidth = end - y_min; this.data[0][1] = y_min; end = this.bars.barWidth + this.data[0][1]; + + if (/critical/.test(this.id)){ + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = this.data[0][1] + this.bars.barWidth; + threshold_array[index]['color'] = "red"; + } + else{ + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = this.data[0][1] + this.bars.barWidth; + threshold_array[index]['color'] = "yellow"; + } + } + if (end > y_max) { this.bars.barWidth = y_max - this.data[0][1]; + + if (/critical/.test(this.id)){ + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = this.data[0][1] + this.bars.barWidth; + threshold_array[index]['color'] = "red"; + } + else{ + threshold_array[index]['min'] = this.data[0][1]; + threshold_array[index]['max'] = this.data[0][1] + this.bars.barWidth; + threshold_array[index]['color'] = "yellow"; + } + } } - datas.push(this); + + if(markins_graph && this.bars.barWidth > 0){ + datas.push(this); + } }); + var extreme_treshold_array = []; + var i = 0; + var flag = true; +console.log(threshold_array); + $.each(threshold_array, function(index, value) { + flag = true; + extreme_treshold_array[i] = { + 'below': value['max'], + 'color': value['color'], + } + i++; + $.each(threshold_array, function(i, v) { + if(value['min'] == v['max']){ + return flag = false; + } + }); + if(flag){ + extreme_treshold_array[i] = { + 'below': value['min'], + 'color': datas[0].color, + } + i++; + } + }); + + datas[0].threshold = extreme_treshold_array; + return datas; } diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php index 0723a71ad0..c246a45768 100644 --- a/pandora_console/include/graphs/functions_flot.php +++ b/pandora_console/include/graphs/functions_flot.php @@ -52,6 +52,8 @@ function include_javascript_dependencies_flot_graph($return = false) { ui_get_full_url($metaconsole_hack . '/include/graphs/flot/jquery.flot.resize.min.js') .'"> +