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

Merge branch '549-errores-en-dashboard-moviles' into 'develop' 

Fixed styles of diferents graphs in dashboards when active mobile version.

See merge request !306
This commit is contained in:
vgilc 2017-04-18 16:01:01 +02:00
parent 61e328afa7 f2b0d28d63
commit 0d65afda8e
2 changed files with 100 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -142,7 +142,15 @@ function pandoraFlotPieCustom(graph_id, values, labels, width,
} }
var label_conf; var label_conf;
var show_legend = true;
if((width <= 450)) {
show_legend = false;
label_conf = {
show: false
};
}
else {
label_conf = { label_conf = {
show: true, show: true,
radius: 0.75, radius: 0.75,
@ -157,7 +165,7 @@ function pandoraFlotPieCustom(graph_id, values, labels, width,
} }
}; };
var show_legend = true; }
var conf_pie = { var conf_pie = {
series: { series: {
@ -176,6 +184,9 @@ function pandoraFlotPieCustom(graph_id, values, labels, width,
clickable: true clickable: true
} }
}; };
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
conf_pie.series.pie.label = {show: false};
}
var plot = $.plot($('#'+graph_id), data, conf_pie); var plot = $.plot($('#'+graph_id), data, conf_pie);
if (no_data == data.length) { if (no_data == data.length) {
@ -205,11 +216,11 @@ function pandoraFlotPieCustom(graph_id, values, labels, width,
var pielegends = $('#'+graph_id+' .pieLabelBackground'); var pielegends = $('#'+graph_id+' .pieLabelBackground');
pielegends.each(function () { pielegends.each(function () {
$(this).css('transform', "rotate(-35deg)"); $(this).css('transform', "rotate(-35deg)").css('color', 'black');
}); });
var labelpielegends = $('#'+graph_id+' .pieLabel'); var labelpielegends = $('#'+graph_id+' .pieLabel');
labelpielegends.each(function () { labelpielegends.each(function () {
$(this).css('transform', "rotate(-35deg)"); $(this).css('transform', "rotate(-35deg)").css('color', 'black');
}); });
// Events // Events
@ -309,13 +320,17 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
borderWidth: 1, borderWidth: 1,
backgroundColor: { colors: ["#FFF", "#FFF"] } backgroundColor: { colors: ["#FFF", "#FFF"] }
}, },
xaxis: {
axisLabelUseCanvas: true,
axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font',
tickFormatter: xFormatter,
},
yaxis: { yaxis: {
axisLabelUseCanvas: true, axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12, axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font', axisLabelFontFamily: font+'Font',
axisLabelPadding: 3,
ticks: yFormatter, ticks: yFormatter,
tickSize: 1,
color: '', color: '',
}, },
legend: { legend: {
@ -339,49 +354,27 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
$('#' + graph_id).HUseTooltip(); $('#' + graph_id).HUseTooltip();
$('#' + graph_id).css("margin-left","auto"); $('#' + graph_id).css("margin-left","auto");
$('#' + graph_id).css("margin-right","auto"); $('#' + graph_id).css("margin-right","auto");
$('#' + graph_id).find('div.legend-tooltip').tooltip({ track: true }); //~ $('#' + graph_id).find('div.legend-tooltip').tooltip({ track: true });
// Adjust the top of yaxis tick to set it in the middle of the bars
//yAxisHeight = $('#' + graph_id + ' .yAxis .tickLabel')
//.css('height').split('px')[0];
//~ i = 0; function yFormatter(v, axis) {
//~ $('#' + graph_id + ' .yAxis .tickLabel').each(function() { format = new Array();
//~ $(this).css('display','none'); for (i = 0; i < labels_total.length; i++) {
//~ $(this).addClass("legend_"+i); var label = labels_total[i][1];
//~ i++; var shortLabel = reduceText(label, 25);
//~ }); var title = '';
if (label !== shortLabel) {
$('#' + graph_id + ' .xAxis .tickLabel').each(function() { title = label;
/* label = shortLabel;
tickTop = $(this).css('top').split('px')[0]; }
tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight / 2) - 3); format.push([i,'<div style="font-size:'+font_size+'pt !important; word-break:keep-all; max-width: 150px;" title="'+title+'" class="'+font+'">'
$(this).css('top', tickNewTop + 'px'); + label
+ '</div>']);
valuesNewTop = parseInt(parseInt(tickTop) - (yAxisHeight)); }
return format;
$('#value_' + i + '_' + graph_id)
.css('top',parseInt(plot.offset().top) + parseInt(valuesNewTop));
pixelPerValue = parseInt(plot.width()) / maxvalue;
inCanvasValuePos = parseInt(pixelPerValue *
($('#value_' + i + '_' + graph_id).html()));
label_width = ($('#value_' + i + '_' + graph_id)
.css('width').split('px')[0] - 3);
label_left_offset = plot.offset().left + inCanvasValuePos + 5; //Label located on right side of bar + 5 pixels
//If label fit into the bar just recalculate left position to fit on right side of bar
if (inCanvasValuePos > label_width) {
label_left_offset = plot.offset().left + inCanvasValuePos
- $('#value_' + i + '_' + graph_id).css('width').split('px')[0] - 3;
} }
$('#value_' + i + '_' + graph_id) function xFormatter(v, axis) {
.css('left', label_left_offset); label = parseFloat(v);
i++;
*/
label = parseFloat($(this).text());
text = label.toLocaleString(); text = label.toLocaleString();
if ( label >= 1000000) if ( label >= 1000000)
text = text.substring(0,4) + "M"; text = text.substring(0,4) + "M";
@ -390,88 +383,7 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
else if (label >= 1000) else if (label >= 1000)
text = text.substring(0,2) + "K"; text = text.substring(0,2) + "K";
$(this).text(text); return '<div style="font-size:'+font_size+'pt !important;">'+text+'</div>';
});
/*
// When resize the window, adjust the values
$('#' + graph_id).parent().resize(function () {
i = 0;
pixelPerValue = parseInt(plot.width()) / maxvalue;
$('#' + graph_id + ' .yAxis .tickLabel').each(function() {
inCanvasValuePos = parseInt(pixelPerValue *
($('#value_' + i + '_' + graph_id).html()));
label_width = ($('#value_' + i + '_' + graph_id)
.css('width').split('px')[0] - 3);
label_left_offset = plot.offset().left + inCanvasValuePos + 5; //Label located on right side of bar + 5 pixels
//If label fit into the bar just recalculate left position to fit on right side of bar
if (inCanvasValuePos > label_width) {
label_left_offset = plot.offset().left + inCanvasValuePos
- $('#value_' + i + '_' + graph_id)
.css('width').split('px')[0] - 3;
}
$('#value_' + i + '_' + graph_id)
.css('left', label_left_offset);
i++;
});
});
// Format functions
function xFormatter(v, axis) {
if (labels[v] != undefined) {
return labels[v];
}
else {
return '';
}
}
function yFormatter(v, axis) {
return v;
}
// Events
$('#' + graph_id).bind('plothover', function (event, pos, item) {
$('.values_' + graph_id).css('font-weight', '');
if (item != null) {
index = item.dataIndex;
$('#value_' + index + '_' + graph_id)
.css('font-weight', 'bold');
}
});
if (water_mark) {
set_watermark(graph_id, plot,
$('#watermark_image_' + graph_id).attr('src'));
}
if (maxvalue == 0) {
// Fixed the position for the graphs with all values in
// bars is 0.
$(".values_" + graph_id).css("left", (plot.offset().left + 5) + "px");
}
* */
function yFormatter(v, axis) {
format = new Array();
for (i = 0; i < labels_total.length; i++) {
var label = labels_total[i][1];
var shortLabel = reduceText(label, 30);
var title = '';
if (label !== shortLabel) {
title = label;
label = shortLabel;
}
format.push([i,'<div style=font-size:'+font_size+'pt title="'+title+'" class="'+font+'">'
+ label
+ '</div>']);
}
return format;
} }
if (water_mark) { if (water_mark) {
@ -600,20 +512,30 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
}, },
xaxis: { xaxis: {
axisLabelUseCanvas: true, axisLabelUseCanvas: true,
axisLabelFontSizePixels: 7, axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font', axisLabelFontFamily: font+'Font',
axisLabelPadding: 0, axisLabelPadding: 0,
ticks: xFormatter, ticks: xFormatter,
labelWidth: 130, labelWidth: 130,
labelHeight: 50,
}, },
yaxis: { yaxis: {
axisLabelUseCanvas: true, axisLabelUseCanvas: true,
axisLabelFontSizePixels: 7, axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font', axisLabelFontFamily: font+'Font',
axisLabelPadding: 100, axisLabelPadding: 100,
autoscaleMargin: 0.02, autoscaleMargin: 0.02,
tickFormatter: function (v, axis) { tickFormatter: function (v, axis) {
return v ; label = parseFloat(v);
text = label.toLocaleString();
if ( label >= 1000000)
text = text.substring(0,4) + "M";
else if (label >= 100000)
text = text.substring(0,3) + "K";
else if (label >= 1000)
text = text.substring(0,2) + "K";
return '<div style="font-size:'+font_size+'pt !important;">'+text+'</div>';
} }
}, },
legend: { legend: {
@ -630,82 +552,43 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
} }
}; };
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
options.xaxis.labelWidth = 100;
var plot = $.plot($('#'+graph_id),datas, options ); var plot = $.plot($('#'+graph_id),datas, options );
$('#' + graph_id).VUseTooltip(); $('#' + graph_id).VUseTooltip();
$('#' + graph_id).css("margin-left","auto"); $('#' + graph_id).css("margin-left","auto");
$('#' + graph_id).css("margin-right","auto"); $('#' + graph_id).css("margin-right","auto");
$('#' + graph_id).find('div.legend-tooltip').tooltip({ track: true }); //~ $('#' + graph_id).find('div.legend-tooltip').tooltip({ track: true });
// Adjust the top of yaxis tick to set it in the middle of the bars
//yAxisHeight = $('#'+graph_id+' .yAxis .tickLabel').css('height').split('px')[0];
//plot.getPlaceholder().onload = function(){pruebas};
//~ i = 0;
//~ $('#'+graph_id+' .xAxis .tickLabel').each(function() {
//~ $(this).css('display','none');
//~ $(this).addClass("legend_"+i);
//~ i++;
//~ tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3);
//~ $(this).css('top', tickNewTop+'px');
//~
//~ valuesNewTop = parseInt(parseInt(tickTop) - (yAxisHeight));
//~
//~ $('#value_'+i+'_'+graph_id).css('top',parseInt(plot.offset().top) + parseInt(valuesNewTop));
//~
//~ pixelPerValue = parseInt(plot.width()) / maxvalue;
//~
//~ inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
//~
//~ $('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
//~ });
// When resize the window, adjust the values
//~ $('#'+graph_id).parent().resize(function () {
//~ i = 0;
//~ pixelPerValue = parseInt(plot.width()) / maxvalue;
//~
//~ $('#'+graph_id+' .yAxis .tickLabel').each(function() {
//~ inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
//~
//~ $('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
//~ i++;
//~ });
//~ });
$('#'+graph_id+' .yAxis .tickLabel').each(function() {
label = parseFloat($(this).text());
text = label.toLocaleString();
if ( label >= 1000000)
text = text.substring(0,4) + "M";
else if (label >= 100000)
text = text.substring(0,3) + "K";
else if (label >= 1000)
text = text.substring(0,2) + "K";
$(this).text(text);
});
$('#'+graph_id+' .xAxis .tickLabel') $('#'+graph_id+' .xAxis .tickLabel')
.css('transform', 'rotate(-45deg)') .css('transform', 'rotate(-45deg)')
.css('max-width','100px')
.find('div') .find('div')
.css('position', 'relative') .css('position', 'relative')
.css('top', '+10px') .css('top', '+10px')
.css('left', '-30px');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
$('#'+graph_id+' .xAxis .tickLabel')
.find('div')
.css('top', '+0px')
.css('left', '-20px'); .css('left', '-20px');
// Format functions // Format functions
function xFormatter(v, axis) { function xFormatter(v, axis) {
var format = new Array(); var format = new Array();
for (i = 0; i < labels_total.length; i++) { for (i = 0; i < labels_total.length; i++) {
var label = labels_total[i][1]; var label = labels_total[i][1];
var shortLabel = reduceText(label, 35); var shortLabel = reduceText(label, 28);
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
shortLabel = reduceText(label, 18);
var title = ''; var title = '';
if (label !== shortLabel) { if (label !== shortLabel) {
title = label; title = label;
label = shortLabel; label = shortLabel;
} }
format.push([i, format.push([i,
'<div class="'+font+'" title="'+title+'" style="word-break: break-word; max-width: 110px;font-size:'+font_size+'pt">' '<div class="'+font+'" title="'+title+'" style="word-break: normal; max-width: 100px;font-size:'+font_size+'pt !important;">'
+ label + label
+ '</div>']); + '</div>']);
} }
@ -713,22 +596,13 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
} }
function yFormatter(v, axis) { function yFormatter(v, axis) {
return v; return '<div class="'+font+'" style="font-size:'+font_size+'pt !important;">'+v+'</div>';
} }
function lFormatter(v, axis) { function lFormatter(v, axis) {
return '<div style=color:>'+v+'</div>'; return '<div style="font-size:'+font_size+'pt !important;">'+v+'</div>';
} }
// Events
//~ $('#'+graph_id).bind('plothover', function (event, pos, item) {
//~ $('.values_'+graph_id).css('font-weight', '');
//~ if(item != null) {
//~ index = item.dataIndex;
//~ $('#value_'+index+'_'+graph_id).css('font-weight', 'bold');
//~ }
//~ });
if (water_mark) { if (water_mark) {
set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src')); set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
} }
@ -1887,18 +1761,18 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
if (labels[v] == undefined) { if (labels[v] == undefined) {
return ''; return '';
} }
return '<div class='+font+' style=font-size:'+font_size+'pt>'+labels[v]+'</div>'; return '<div class='+font+' style="font-size:'+font_size+'pt !important;">'+labels[v]+'</div>';
} }
function yFormatter(v, axis) { function yFormatter(v, axis) {
axis.datamin = 0; axis.datamin = 0;
var formatted = number_format(v,force_integer,unit); var formatted = number_format(v,force_integer,unit);
return '<div class='+font+' style=font-size:'+font_size+'pt>'+formatted+'</div>'; return '<div class='+font+' style="font-size:'+font_size+'pt !important;">'+formatted+'</div>';
} }
function lFormatter(v, item) { function lFormatter(v, item) {
return '<div style=font-size:'+font_size+'pt>'+v+'</div>'; return '<div style="font-size:'+font_size+'pt !important;">'+v+'</div>';
// Prepared to turn series with a checkbox // Prepared to turn series with a checkbox
//return '<div style=color:;font-size:'+font_size+'pt><input type="checkbox" id="' + graph_id + '_' + item.id +'" checked="checked" class="check_serie_'+graph_id+'">'+v+'</div>'; //return '<div style=color:;font-size:'+font_size+'pt><input type="checkbox" id="' + graph_id + '_' + item.id +'" checked="checked" class="check_serie_'+graph_id+'">'+v+'</div>';
} }
@ -2011,7 +1885,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
$('#legend_'+graph_id).css('margin-bottom', '10px'); $('#legend_'+graph_id).css('margin-bottom', '10px');
parent_height = parseInt( parent_height = parseInt(
$('#menu_'+graph_id).parent().css('height').split('px')[0]); $('#menu_'+graph_id).parent().css('height').split('px')[0]);
adjust_menu(graph_id, plot, parent_height); adjust_menu(graph_id, plot, parent_height, width);
} }
if (!dashboard) { if (!dashboard) {
@ -2071,6 +1945,7 @@ function set_watermark(graph_id, plot, watermark_src) {
if ($('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height') != undefined) { if ($('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height') != undefined) {
down_ticks_height = $('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height').split('px')[0]; 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 left_pos = parseInt(context.canvas.width - 3) - $('#watermark_image_'+graph_id)[0].width;
var top_pos = 6; var top_pos = 6;
//var top_pos = parseInt(context.canvas.height - down_ticks_height - 10) - $('#watermark_image_'+graph_id)[0].height; //var top_pos = parseInt(context.canvas.height - down_ticks_height - 10) - $('#watermark_image_'+graph_id)[0].height;
@ -2270,5 +2145,6 @@ function add_threshold (data_base, threshold_data, y_min, y_max,
function reduceText (text, maxLength) { function reduceText (text, maxLength) {
if (text.length <= maxLength) return text if (text.length <= maxLength) return text
var firstSlideEnd = parseInt((maxLength - 3) / 2); var firstSlideEnd = parseInt((maxLength - 3) / 2);
return text.substr(0, firstSlideEnd) + '...' + text.substr(-firstSlideEnd - 3); var str_cut = text.substr(0, firstSlideEnd);
return str_cut + '...' + text.substr(-firstSlideEnd - 3);
} }

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

@ -205,7 +205,7 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend,
// Parent layer // Parent layer
$return = "<div class='parent_graph' style='width: " . $width . "px; " . $background_style . "'>"; $return = "<div class='parent_graph' style='width: " . $width . "px; " . $background_style . "'>";
// Set some containers to legend, graph, timestamp tooltip, etc. // Set some containers to legend, graph, timestamp tooltip, etc.
$return .= "<p id='legend_$graph_id' class='legend_graph' style='font-size:".$font_size."pt'></p>"; $return .= "<p id='legend_$graph_id' class='legend_graph' style='font-size:$font_size"."pt !important;'></p>";
if (!empty($threshold_data)) { if (!empty($threshold_data)) {
$yellow_up = $threshold_data['yellow_up']; $yellow_up = $threshold_data['yellow_up'];
@ -241,7 +241,7 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend,
$nbuttons++; $nbuttons++;
} }
$menu_width = 25 * $nbuttons + 15; $menu_width = 25 * $nbuttons + 15;
if ( $dashboard == false AND $vconsole == false) { if ( if ( $dashboard == false AND $vconsole == false) {) {
$return .= "<div id='menu_$graph_id' class='menu_graph' " . $return .= "<div id='menu_$graph_id' class='menu_graph' " .
"style='display: none; " . "style='display: none; " .
"text-align: center; " . "text-align: center; " .