From 14127df1dca5d63691da8a7788575874309272b7 Mon Sep 17 00:00:00 2001 From: Alejandro Gallardo Escobar Date: Thu, 26 May 2016 13:47:45 +0200 Subject: [PATCH] Some visual improvements and an option to hide the labels of the pie graphs --- pandora_console/include/graphs/fgraph.php | 14 +++--- .../include/graphs/flot/pandora.flot.js | 44 +++++++------------ .../include/graphs/functions_flot.php | 7 +-- 3 files changed, 28 insertions(+), 37 deletions(-) diff --git a/pandora_console/include/graphs/fgraph.php b/pandora_console/include/graphs/fgraph.php index ea396467d9..2ee160d3b0 100644 --- a/pandora_console/include/graphs/fgraph.php +++ b/pandora_console/include/graphs/fgraph.php @@ -688,26 +688,28 @@ function hbar_graph($flash_chart, $chart_data, $width, $height, function pie3d_graph($flash_chart, $chart_data, $width, $height, $others_str = "other", $homedir = "", $water_mark = "", $font = '', - $font_size = '', $ttl = 1, $legend_position = false, $colors = '') { + $font_size = '', $ttl = 1, $legend_position = false, $colors = '', + $hide_labels = false) { return pie_graph('3d', $flash_chart, $chart_data, $width, $height, $others_str, $homedir, $water_mark, $font, $font_size, $ttl, - $legend_position, $colors); + $legend_position, $colors, $hide_labels); } function pie2d_graph($flash_chart, $chart_data, $width, $height, $others_str = "other", $homedir="", $water_mark = "", $font = '', - $font_size = '', $ttl = 1, $legend_position = false, $colors = '') { + $font_size = '', $ttl = 1, $legend_position = false, $colors = '', + $hide_labels = false) { return pie_graph('2d', $flash_chart, $chart_data, $width, $height, $others_str, $homedir, $water_mark, $font, $font_size, $ttl, - $legend_position, $colors); + $legend_position, $colors, $hide_labels); } function pie_graph($graph_type, $flash_chart, $chart_data, $width, $height, $others_str = "other", $homedir="", $water_mark = "", $font = '', $font_size = '', $ttl = 1, $legend_position = false, - $colors = '') { + $colors = '', $hide_labels = false) { if (empty($chart_data)) { return graph_nodata_image($width, $height, 'pie'); @@ -746,7 +748,7 @@ function pie_graph($graph_type, $flash_chart, $chart_data, $width, if ($flash_chart) { return flot_pie_chart(array_values($chart_data), array_keys($chart_data), $width, $height, $water_mark_url, - $font, $font_size, $legend_position, $colors); + $font, $font_size, $legend_position, $colors, $hide_labels); } else { //TODO SET THE LEGEND POSITION diff --git a/pandora_console/include/graphs/flot/pandora.flot.js b/pandora_console/include/graphs/flot/pandora.flot.js index 6ef1c6d549..ee0232f834 100644 --- a/pandora_console/include/graphs/flot/pandora.flot.js +++ b/pandora_console/include/graphs/flot/pandora.flot.js @@ -3,7 +3,7 @@ */ -function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, water_mark, separator, legend_position, height, colors) { +function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, water_mark, separator, legend_position, height, colors, hide_labels) { var labels = labels.split(separator); var data = values.split(separator); if (colors != '') { @@ -21,7 +21,7 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat var label_conf; - if (width < 400) { + if (width < 400 || hide_labels) { label_conf = { show: false }; @@ -93,10 +93,7 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat var plot = $.plot($('#'+graph_id), data, conf_pie); var legends = $('#'+graph_id+' .legendLabel'); - legends.each(function () { - $(this).css('width', $(this).width()); - $(this).css('font-size', font_size+'pt'); - }); + legends.css('font-size', font_size+'pt'); // Events $('#' + graph_id).bind('plothover', pieHover); @@ -105,22 +102,17 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat $('#' + graph_id).css('margin-left', 'auto'); $('#' + graph_id).css('margin-right', 'auto'); - function pieHover(event, pos, obj) - { - if (!obj) - return; + function pieHover(event, pos, obj) { + if (!obj) return; index = obj.seriesIndex; - legends.css('font-weight', ''); - legends.eq(index).css('font-weight', 'bold'); + legends.css('color', '#3F3F3D'); + legends.eq(index).css('color', '#000000'); } // Reset styles function resetInteractivity() { - legends.each(function () { - // fix the widths so they don't jump around - $(this).css('font-weight', ''); - }); + legends.css('color', '#3F3F3D'); } if (water_mark) { @@ -160,7 +152,7 @@ function pandoraFlotPieCustom(graph_id, values, labels, width, formatter: function(label, series) { return '
' + - label + ':' + series.percent.toFixed(2) + '%
'; + series.percent.toFixed(2) + '%'; }, background: { opacity: 0.5, @@ -229,20 +221,16 @@ function pandoraFlotPieCustom(graph_id, values, labels, width, $('#' + graph_id).css('margin-left', 'auto'); $('#' + graph_id).css('margin-right', 'auto'); - function pieHover(event, pos, obj) - { - if (!obj) - return; + function pieHover(event, pos, obj) { + if (!obj) return; index = obj.seriesIndex; - legends.css('font-weight', ''); - legends.eq(index).css('font-weight', 'bold'); + legends.css('color', '#3F3F3D'); + legends.eq(index).css('color', '#000000'); } - function Clickpie(event, pos, obj) - { - if (!obj) - return; + function Clickpie(event, pos, obj) { + if (!obj) return; percent = parseFloat(obj.series.percent).toFixed(2); valor = parseFloat(obj.series.data[0][1]); @@ -264,7 +252,7 @@ function pandoraFlotPieCustom(graph_id, values, labels, width, function resetInteractivity() { legends.each(function () { // fix the widths so they don't jump around - $(this).css('font-weight', ''); + $(this).css('color', '#3F3F3D'); }); } diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php index f618aba3b9..0c2828fd19 100644 --- a/pandora_console/include/graphs/functions_flot.php +++ b/pandora_console/include/graphs/functions_flot.php @@ -463,7 +463,8 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend, // Prints a FLOT pie chart function flot_pie_chart ($values, $labels, $width, $height, $water_mark, - $font = '', $font_size = 8, $legend_position = '', $colors = '') { + $font = '', $font_size = 8, $legend_position = '', $colors = '', + $hide_labels = false) { include_javascript_dependencies_flot_graph(); @@ -505,8 +506,8 @@ function flot_pie_chart ($values, $labels, $width, $height, $water_mark, $return .= "";