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

Merge branch '1416-bars-graph-element-in-visual-console-dev' into 'develop' 

Added grid color to bars graph in visual console

See merge request artica/pandorafms!1038
This commit is contained in:
vgilc 2017-11-08 10:06:24 +01:00
parent b461121361 b9b8b37abe
commit ebc209e7eb
9 changed files with 78 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
pandora_console/godmode/reporting/visual_console_builder.editor.js
View File

@ -835,6 +835,7 @@ function readFields() {
values['height_box'] = parseInt(
$("input[name='height_box']").val());
values['border_color'] = $("input[name='border_color']").val();
values['grid_color'] = $("input[name='grid_color']").val();
values['border_width'] = parseInt(
$("input[name='border_width']").val());
values['fill_color'] = $("input[name='fill_color']").val();
@ -1539,6 +1540,11 @@ function loadFieldsFromDB(item) {
$("#border_color_row .ColorPickerDivSample")
.css('background-color', val);
}
if (key == 'grid_color') {
$("input[name='grid_color']").val(val);
$("#grid_color_row .ColorPickerDivSample")
.css('background-color', val);
}
if (key == 'border_width')
$("input[name='border_width']").val(val);
if (key == 'fill_color') {
@ -1783,6 +1789,9 @@ function hiddenFields(item) {
$("#border_color_row").css('display', 'none');
$("#border_color_row." + item).css('display', '');
$("#grid_color_row").css('display', 'none');
$("#grid_color_row." + item).css('display', '');
$("#border_width_row").css('display', 'none');
$("#border_width_row." + item).css('display', '');
@ -1835,6 +1844,7 @@ function cleanFields(item) {
$("input[name='width_box']").val(300);
$("input[name='height_box']").val(180);
$("input[name='border_color']").val('#000000');
$("input[name='grid_color']").val('#000000');
$("input[name='border_width']").val(3);
$("input[name='fill_color']").val('#ffffff');
$("input[name='line_width']").val(3);

8
pandora_console/include/ajax/visual_console_builder.ajax.php
View File

@ -118,6 +118,7 @@ $id_group = (int)get_parameter('id_group', 0);
$id_custom_graph = get_parameter('id_custom_graph', null);
$border_width = (int)get_parameter('border_width', 0);
$border_color = get_parameter('border_color', '');
$grid_color = get_parameter('grid_color', '');
$fill_color = get_parameter('fill_color', '');
$percentile_color = get_parameter('percentile_color', '');
$percentile_label = io_safe_output(get_parameter('percentile_label', ''));
@ -657,6 +658,9 @@ switch ($action) {
if ($background_color !== null) {
$values['image'] = $background_color;
}
if ($grid_color !== null) {
$values['border_color'] = $grid_color;
}
break;
case 'percentile_item':
case 'percentile_bar':
@ -738,6 +742,7 @@ switch ($action) {
case 'bars_graph':
unset($values['image']);
unset($values['type_graph']);
unset($values['border_color']);
break;
case 'box_item':
unset($values['border_width']);
@ -878,7 +883,6 @@ switch ($action) {
$elementFields['percentile_color'] = $elementFields['border_color'];
$elementFields['percentile_label_color'] = $elementFields['fill_color'];
$elementFields['percentile_label'] = $elementFields['label'];
html_debug($elementFields, true);
break;
case 'donut_graph':
$elementFields['width_percentile'] = $elementFields['width'];
@ -891,6 +895,7 @@ switch ($action) {
case 'bars_graph':
$elementFields['width_percentile'] = $elementFields['width'];
$elementFields['bars_graph_type'] = $elementFields['type_graph'];
$elementFields['grid_color'] = $elementFields['border_color'];
break;
case 'box_item':
$elementFields['width_box'] = $elementFields['width'];
@ -1043,6 +1048,7 @@ switch ($action) {
}
$values['type_graph'] = $bars_graph_type;
$values['image'] = $background_color;
$values['border_color'] = $grid_color;
break;
case 'auto_sla_graph':
$values['type'] = AUTO_SLA_GRAPH;

18
pandora_console/include/functions_graph.php
View File

@ -2199,14 +2199,14 @@ function graphic_combined_module ($module_list, $weight_list, $period,
$width, $height, $color, $module_name_list, $long_index,
ui_get_full_url("images/image_problem_area_small.png", false, false, false),
"", "", $water_mark, $config['fontpath'], $fixed_font_size,
"", $ttl, $homeurl, $background_color);
"", $ttl, $homeurl, $background_color, 'black');
break;
case CUSTOM_GRAPH_VBARS:
return vbar_graph($flash_charts, $graph_values,
$width, $height, $color, $module_name_list, $long_index,
ui_get_full_url("images/image_problem_area_small.png", false, false, false),
"", "", $water_mark, $config['fontpath'], $fixed_font_size,
"", $ttl, $homeurl, $background_color, true);
"", $ttl, $homeurl, $background_color, true, false, "black");
break;
case CUSTOM_GRAPH_PIE:
return ring_graph($flash_charts, $graph_values, $width, $height,
@ -2871,7 +2871,9 @@ function grafico_db_agentes_paquetes($width = 380, $height = 300) {
return hbar_graph($config['flash_charts'], $data, $width, $height, array(),
$legend, "", "", true, "", $water_mark,
$config['fontpath'], $config['font_size'], false);
$config['fontpath'], $config['font_size'], false, 1, $config['homeurl'],
'white',
'black');
}
/**
@ -2938,7 +2940,9 @@ function graph_db_agentes_modulos($width, $height) {
$data, $width, $height, array(),
array(), "", "", true, "",
$water_mark,
$config['fontpath'], $config['font_size'], false);
$config['fontpath'], $config['font_size'], false, 1, $config['homeurl'],
'white',
'black');
}
/**
@ -3713,12 +3717,14 @@ function graph_custom_sql_graph ($id, $width, $height,
case 'sql_graph_vbar': // vertical bar
return vbar_graph($flash_charts, $data, $width, $height, array(),
array(), "", "", $homeurl, $water_mark,
$config['fontpath'], $config['font_size'], false, $ttl);
$config['fontpath'], $config['font_size'], false, $ttl, "", "white", false, false, "black");
break;
case 'sql_graph_hbar': // horizontal bar
return hbar_graph($flash_charts, $data, $width, $height, array(),
array(), "", "", true, $homeurl, $water_mark,
$config['fontpath'], $config['font_size'], false, $ttl);
$config['fontpath'], $config['font_size'], false, $ttl,$config['homeurl'],
'white',
'black');
break;
case 'sql_graph_pie': // Pie
return pie3d_graph($flash_charts, $data, $width, $height, __("other"), $homeurl,

4
pandora_console/include/functions_reporting.php
View File

@ -1304,7 +1304,9 @@ function reporting_event_top_n($report, $content, $type = 'dinamic',
$config['font_size'],
true,
$ttl,
$config['homeurl']);
$config['homeurl'],
'white',
'black');
}
$return['resume'] = null;

24
pandora_console/include/functions_visual_map.php
View File

@ -1242,7 +1242,7 @@ function visual_map_print_item($mode = "read", $layoutData,
400, 400, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image']) . '</div>';
"", 0, $config['homeurl'], $layoutData['image'], $layoutData['border_color']) . '</div>';
}
else {
$img = '<div style="float:right;height:'.$himg.'px;">'.
@ -1250,7 +1250,7 @@ function visual_map_print_item($mode = "read", $layoutData,
400, 400, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image'], true) . '</div>';
"", 0, $config['homeurl'], $layoutData['image'], true, false, $layoutData['border_color']) . '</div>';
}
}
elseif($layoutData['label_position']=='right') {
@ -1260,7 +1260,7 @@ function visual_map_print_item($mode = "read", $layoutData,
400, 400, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image']) . '</div>';
"", 0, $config['homeurl'], $layoutData['image'], $layoutData['border_color']) . '</div>';
}
else {
$img = '<div style="float:left;height:'.$himg.'px;">'.
@ -1268,7 +1268,7 @@ function visual_map_print_item($mode = "read", $layoutData,
400, 400, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image'], true) . '</div>';
"", 0, $config['homeurl'], $layoutData['image'], true, false, $layoutData['border_color']) . '</div>';
}
}
else {
@ -1277,14 +1277,14 @@ function visual_map_print_item($mode = "read", $layoutData,
400, 400, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image']);
"", 0, $config['homeurl'], $layoutData['image'], $layoutData['border_color']);
}
else {
$img = vbar_graph(true, $module_data,
400, 400, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image'], true);
"", 0, $config['homeurl'], $layoutData['image'], true, false, $layoutData['border_color']);
}
}
}
@ -1296,7 +1296,7 @@ function visual_map_print_item($mode = "read", $layoutData,
$width, $width, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image']) . '</div>';
"", 0, $config['homeurl'], $layoutData['image'], $layoutData['border_color']) . '</div>';
}
else {
$img = '<div style="float:right;height:'.$himg.'px;">'.
@ -1304,7 +1304,7 @@ function visual_map_print_item($mode = "read", $layoutData,
$width, $width, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image'], true) . '</div>';
"", 0, $config['homeurl'], $layoutData['image'], true, false, $layoutData['border_color']) . '</div>';
}
}
elseif($layoutData['label_position']=='right') {
@ -1314,7 +1314,7 @@ function visual_map_print_item($mode = "read", $layoutData,
$width, $width, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image']) . '</div>';
"", 0, $config['homeurl'], $layoutData['image'], $layoutData['border_color']) . '</div>';
}
else {
$img = '<div style="float:left;height:'.$himg.'px;">'.
@ -1322,7 +1322,7 @@ function visual_map_print_item($mode = "read", $layoutData,
$width, $width, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image'], true) . '</div>';
"", 0, $config['homeurl'], $layoutData['image'], true, false, $layoutData['border_color']) . '</div>';
}
}
else {
@ -1331,14 +1331,14 @@ function visual_map_print_item($mode = "read", $layoutData,
$width, $width, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image']);
"", 0, $config['homeurl'], $layoutData['image'], $layoutData['border_color']);
}
else {
$img = vbar_graph(true, $module_data,
$width, $width, $color, array(), array(),
ui_get_full_url("images/image_problem.opaque.png", false, false, false),
"", "", $water_mark, $config['fontpath'], 6,
"", 0, $config['homeurl'], $layoutData['image'], true);
"", 0, $config['homeurl'], $layoutData['image'], true, false, $layoutData['border_color']);
}
}
}

13
pandora_console/include/functions_visual_map_editor.php
View File

@ -246,6 +246,18 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
'black' => __('Black'),
'transparent' => __('Transparent')),
'background_color', '', '', 0, 'white', true, false, false) . '</td>';
$form_items['grid_color_row'] = array();
$form_items['grid_color_row']['items'] = array('bars_graph');
$form_items['grid_color_row']['html'] =
'<td align="left" valign="top" style="">' .
__('Grid color') .
'</td>' .
'<td align="left" style="">' .
html_print_input_text_extended ('grid_color',
'#000000', 'text-grid_color', '', 7, 7, false,
'', 'class="grid_color"', true) .
'</td>';
$form_items['radio_choice_graph'] = array();
$form_items['radio_choice_graph']['items'] = array(
@ -645,6 +657,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$(".line_color").attachColorPicker();
$(".percentile_color").attachColorPicker();
$(".percentile_label_color").attachColorPicker();
$(".grid_color").attachColorPicker();
$("input[name=radio_choice]").change(function(){
$('#count_items').html(1);

10
pandora_console/include/graphs/fgraph.php
View File

@ -156,7 +156,7 @@ function vbar_graph($flash_chart, $chart_data, $width, $height,
$color, $legend, $long_index, $no_data_image, $xaxisname = "",
$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white',
$from_ux = false, $from_wux = false) {
$from_ux = false, $from_wux = false, $tick_color = 'white') {
setup_watermark($water_mark, $water_mark_file, $water_mark_url);
if (empty($chart_data)) {
@ -166,7 +166,8 @@ function vbar_graph($flash_chart, $chart_data, $width, $height,
if ($flash_chart) {
return flot_vcolumn_chart ($chart_data, $width, $height, $color,
$legend, $long_index, $homeurl, $unit, $water_mark_url,
$homedir,$font,$font_size, $from_ux, $from_wux, $backgroundColor);
$homedir,$font,$font_size, $from_ux, $from_wux, $backgroundColor,
$tick_color);
}
else {
foreach ($chart_data as $key => $value) {
@ -620,7 +621,8 @@ function polar_graph($flash_chart, $chart_data, $width, $height,
function hbar_graph($flash_chart, $chart_data, $width, $height,
$color, $legend, $long_index, $no_data_image, $xaxisname = "",
$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') {
$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white',
$tick_color = "white") {
setup_watermark($water_mark, $water_mark_file, $water_mark_url);
@ -630,7 +632,7 @@ function hbar_graph($flash_chart, $chart_data, $width, $height,
if ($flash_chart) {
return flot_hcolumn_chart(
$chart_data, $width, $height, $water_mark_url, $font, $font_size, $backgroundColor);
$chart_data, $width, $height, $water_mark_url, $font, $font_size, $backgroundColor, $tick_color);
}
else {

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

@ -326,7 +326,8 @@ function pandoraFlotPieCustom(graph_id, values, labels, width,
}
function pandoraFlotHBars(graph_id, values, labels, water_mark,
maxvalue, water_mark, separator, separator2, font, font_size, background_color) {
maxvalue, water_mark, separator, separator2, font, font_size, background_color,
tick_color) {
var colors_data = ['#FC4444','#FFA631','#FAD403','#5BB6E5','#F2919D','#80BA27'];
values = values.split(separator2);
@ -347,8 +348,6 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
};
}
var labels_total=new Array();
labels = labels.split(separator);
i = 0;
@ -372,20 +371,22 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
grid: {
hoverable: true,
borderWidth: 1,
tickColor: tick_color,
backgroundColor: { colors: [background_color, background_color] }
},
xaxis: {
color: tick_color,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font',
tickFormatter: xFormatter,
},
yaxis: {
color: tick_color,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font',
ticks: yFormatter,
color: '',
},
legend: {
show: false
@ -511,7 +512,7 @@ function showTooltip(x, y, color, contents) {
}).appendTo("body").fadeIn(200);
}
function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors, water_mark, maxvalue, water_mark, separator, separator2, font, font_size , from_ux, from_wux, background_color) {
function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors, water_mark, maxvalue, water_mark, separator, separator2, font, font_size , from_ux, from_wux, background_color, tick_color) {
values = values.split(separator2);
legend = legend.split(separator);
font = font.split("/").pop().split(".").shift();
@ -565,6 +566,7 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
}
},
xaxis: {
color:tick_color,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font',
@ -574,6 +576,7 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
labelHeight: 50,
},
yaxis: {
color:tick_color,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font',
@ -602,6 +605,7 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
grid: {
hoverable: true,
borderWidth: 1,
tickColor: tick_color,
backgroundColor: { colors: [background_color, background_color] }
}
};

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

@ -674,7 +674,7 @@ function flot_custom_pie_chart ($flash_charts, $graph_values,
}
// Returns a 3D column chart
function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark, $font = '', $font_size = 7, $background_color = "white") {
function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark, $font = '', $font_size = 7, $background_color = "white", $tick_color = "white") {
global $config;
include_javascript_dependencies_flot_graph();
@ -755,7 +755,7 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark, $font =
$return .= "<script type='text/javascript'>";
$return .= "pandoraFlotHBars('$graph_id', '$values', '$labels',
false, $max, '$water_mark', '$separator', '$separator2', '$font', $font_size, '$background_color')";
false, $max, '$water_mark', '$separator', '$separator2', '$font', $font_size, '$background_color', '$tick_color')";
$return .= "</script>";
@ -763,7 +763,7 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark, $font =
}
// Returns a 3D column chart
function flot_vcolumn_chart ($graph_data, $width, $height, $color, $legend, $long_index, $homeurl, $unit, $water_mark, $homedir, $font, $font_size, $from_ux, $from_wux, $background_color = 'white') {
function flot_vcolumn_chart ($graph_data, $width, $height, $color, $legend, $long_index, $homeurl, $unit, $water_mark, $homedir, $font, $font_size, $from_ux, $from_wux, $background_color = 'white', $tick_color = 'white') {
global $config;
include_javascript_dependencies_flot_graph();
@ -847,14 +847,14 @@ function flot_vcolumn_chart ($graph_data, $width, $height, $color, $legend, $lon
if ($from_ux) {
if($from_wux){
$return .= "pandoraFlotVBars('$graph_id', '$values', '$labels', '$labels', '$legend', '$colors', false, $max, '$water_mark', '$separator', '$separator2','$font',$font_size, true, true, '$background_color')";
$return .= "pandoraFlotVBars('$graph_id', '$values', '$labels', '$labels', '$legend', '$colors', false, $max, '$water_mark', '$separator', '$separator2','$font',$font_size, true, true, '$background_color', '$tick_color')";
}
else{
$return .= "pandoraFlotVBars('$graph_id', '$values', '$labels', '$labels', '$legend', '$colors', false, $max, '$water_mark', '$separator', '$separator2','$font',$font_size, true, false, '$background_color')";
$return .= "pandoraFlotVBars('$graph_id', '$values', '$labels', '$labels', '$legend', '$colors', false, $max, '$water_mark', '$separator', '$separator2','$font',$font_size, true, false, '$background_color', '$tick_color')";
}
}
else {
$return .= "pandoraFlotVBars('$graph_id', '$values', '$labels', '$labels', '$legend', '$colors', false, $max, '$water_mark', '$separator', '$separator2','$font',$font_size, false, false, '$background_color')";
$return .= "pandoraFlotVBars('$graph_id', '$values', '$labels', '$labels', '$legend', '$colors', false, $max, '$water_mark', '$separator', '$separator2','$font',$font_size, false, false, '$background_color', '$tick_color')";
}
$return .= "</script>";