Added new feature. Added font and fotn size in custom graph. Ticket #3316.

This commit is contained in:
Daniel Maya 2016-09-08 15:44:36 +02:00
parent d70e3bd52b
commit 203689a5c1
6 changed files with 187 additions and 46 deletions

View File

@ -179,7 +179,7 @@ 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);
$homedir,$font,$font_size);
}
else {
$graph = array();
@ -263,7 +263,9 @@ function area_graph($flash_chart, $chart_data, $width, $height, $color,
$backgroundColor,
$dashboard,
$vconsole,
$agent_module_id);
$agent_module_id,
$font,
$font_size);
}
else {
$graph = array();
@ -316,6 +318,8 @@ function stacked_area_graph($flash_chart, $chart_data, $width, $height,
$legend,
$long_index,
$homeurl,
$font,
$font_size,
$unit,
$water_mark_url,
array(),
@ -378,6 +382,8 @@ function stacked_line_graph($flash_chart, $chart_data, $width, $height,
$legend,
$long_index,
$homeurl,
$font,
$font_size,
$unit,
$water_mark_url,
array(),
@ -524,6 +530,8 @@ function line_graph($flash_chart, $chart_data, $width, $height, $color,
$legend,
$long_index,
$homeurl,
$font,
$font_size,
$unit,
$water_mark_url,
array(),
@ -603,7 +611,7 @@ function hbar_graph($flash_chart, $chart_data, $width, $height,
if ($flash_chart) {
return flot_hcolumn_chart(
$chart_data, $width, $height, $water_mark_url);
$chart_data, $width, $height, $water_mark_url, $font, $font_size);
}
else {
$graph = array();

View File

@ -117,9 +117,10 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
}
}
function pandoraFlotPieCustom(graph_id, values, labels, width,
font_size, water_mark, separator, legend_position, height,
function pandoraFlotPieCustom(graph_id, values, labels, width,
font_size, font, water_mark, separator, legend_position, height,
colors,legend) {
font = font.split("/").pop().split(".").shift();
var labels = labels.split(separator);
var legend = legend.split(separator);
var data = values.split(separator);
@ -189,6 +190,8 @@ function pandoraFlotPieCustom(graph_id, values, labels, width,
legends.each(function () {
//$(this).css('width', $(this).width());
$(this).css('font-size', font_size+'pt');
$(this).removeClass("legendLabel");
$(this).addClass(font);
$(this).text(legend[j]);
j++;
});
@ -259,10 +262,11 @@ function pandoraFlotPieCustom(graph_id, values, labels, width,
}
function pandoraFlotHBars(graph_id, values, labels, water_mark,
maxvalue, water_mark, separator, separator2) {
maxvalue, water_mark, separator, separator2, font, font_size) {
var colors_data = ['#FC4444','#FFA631','#FAD403','#5BB6E5','#F2919D','#80BA27'];
values = values.split(separator2);
font = font.split("/").pop().split(".").shift();
var datas = new Array();
for (i = 0; i < values.length; i++) {
var serie = values[i].split(separator);
@ -309,7 +313,7 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
yaxis: {
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelFontFamily: font+'Font',
axisLabelPadding: 3,
ticks: yFormatter,
tickSize: 1,
@ -465,7 +469,7 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
title = label;
label = shortLabel;
}
format.push([i,'<div title="'+title+'" class="legend_'+i+' legend-tooltip">'
format.push([i,'<div style=font-size:'+font_size+'pt title="'+title+'" class="'+font+'">'
+ label
+ '</div>']);
}
@ -543,10 +547,11 @@ 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) {
function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors, water_mark, maxvalue, water_mark, separator, separator2, font, font_size ) {
values = values.split(separator2);
legend = legend.split(separator);
font = font.split("/").pop().split(".").shift();
labels_long = labels_long.length > 0 ? labels_long.split(separator) : 0;
colors = colors.length > 0 ? colors.split(separator) : [];
var colors_data = colors.length > 0
@ -591,7 +596,7 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
xaxis: {
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 7,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelFontFamily: font+'Font',
axisLabelPadding: 0,
ticks: xFormatter,
labelWidth: 130,
@ -599,7 +604,7 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
yaxis: {
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 7,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelFontFamily: font+'Font',
axisLabelPadding: 100,
autoscaleMargin: 0.02,
tickFormatter: function (v, axis) {
@ -695,7 +700,7 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
label = shortLabel;
}
format.push([i,
'<div class="legend_'+i+' legend-tooltip" title="'+title+'" style="word-break: break-word; max-width: 110px;">'
'<div class="'+font+'" title="'+title+'" style="word-break: break-word; max-width: 110px;font-size:'+font_size+'pt">'
+ label
+ '</div>']);
}
@ -842,7 +847,7 @@ function pandoraFlotSlicebar(graph_id, values, datacolor, labels, legend, acumul
function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
colors, type, serie_types, water_mark, width, max_x, homeurl, unit,
font_size, menu, events, event_ids, legend_events, alerts,
font_size, font, menu, events, event_ids, legend_events, alerts,
alert_ids, legend_alerts, yellow_threshold, red_threshold,
force_integer, separator, separator2,
yellow_up, red_up, yellow_inverse, red_inverse,
@ -850,6 +855,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
var threshold = true;
var thresholded = false;
font = font.split("/").pop().split(".").shift();
values = values.split(separator2);
serie_types = serie_types.split(separator);
@ -1740,6 +1746,9 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
$('#legend_' + graph_id + ' .legendLabel')
.eq(i).css('color','#000');
$('#legend_' + graph_id + ' .legendLabel')
.eq(i).css('font-family',font+'Font');
i++;
}
}
@ -1843,17 +1852,17 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
if (labels[v] == undefined) {
return '';
}
return '<div style=font-size:'+font_size+'pt>'+labels[v]+'</div>';
return '<div class='+font+' style=font-size:'+font_size+'pt>'+labels[v]+'</div>';
}
function yFormatter(v, axis) {
var formatted = number_format(v,force_integer,unit);
return '<div style=font-size:'+font_size+'pt>'+formatted+'</div>';
return '<div class='+font+' style=font-size:'+font_size+'pt>'+formatted+'</div>';
}
function lFormatter(v, item) {
return '<div style=color:#000;font-size:'+font_size+'pt>'+v+'</div>';
return '<div class='+font+' style=color:#000;font-size:'+font_size+'pt>'+v+'</div>';
// Prepared to turn series with a checkbox
//return '<div style=color:#000;font-size:'+font_size+'pt><input type="checkbox" id="' + graph_id + '_' + item.id +'" checked="checked" class="check_serie_'+graph_id+'">'+v+'</div>';
}

View File

@ -150,8 +150,9 @@ function d3_bullet_chart($chart_data, $width, $height, $color, $legend,
$output .= include_javascript_d3(true);
$id_bullet = uniqid();
$output .=
$font = array_shift(explode(".",array_pop(explode("/",$font))));
$output .=
'<div id="bullet_graph_' . $id_bullet . '" class="bullet" style="overflow: hidden; width: '.$width.'px; margin-left: auto; margin-right: auto;"></div>
<style>
@ -175,8 +176,8 @@ function d3_bullet_chart($chart_data, $width, $height, $color, $legend,
.bullet .measure.s1 { fill: steelblue; }
.bullet .title { font-size: 7pt; font-weight: bold; text-align:left; }
.bullet .subtitle { fill: #999; font-size: 7pt;}
.bullet g text { font-size: 7pt;}
.bullet g text { font-size:'.$font_size.'pt;}
</style>
<script src="'. $config['homeurl'] . 'include/graphs/bullet.js"></script>
<script language="javascript" type="text/javascript">
@ -229,7 +230,7 @@ function d3_bullet_chart($chart_data, $width, $height, $color, $legend,
.attr("transform", "translate(-10, 15)");
title.append("text")
.attr("class", "title")
.attr("class", "'.$font.'")
.text(function(d) { return d.title; });
title.append("text")
@ -272,7 +273,7 @@ function d3_gauges($chart_data, $width, $height, $color, $legend,
$output .= "<script language=\"javascript\" type=\"text/javascript\">
var data = $data;
createGauges(data, '$width', '$height','$font_size','$no_data_image');
createGauges(data, '$width', '$height','$font_size','$no_data_image','$font');
</script>";
return $output;

View File

@ -92,7 +92,7 @@ function include_javascript_dependencies_flot_graph($return = false) {
////////// AREA GRAPHS ////////
///////////////////////////////
function flot_area_stacked_graph($chart_data, $width, $height, $color,
$legend, $long_index, $homeurl = '', $unit = '', $water_mark = '',
$legend, $long_index, $homeurl = '', $font = '', $font_size = 7,$unit = '', $water_mark = '',
$serie_types = array(), $chart_extra_data = array(),
$yellow_threshold = 0, $red_threshold = 0, $adapt_key= '',
$force_integer = false, $series_suffix_str = '', $menu = true,
@ -104,7 +104,7 @@ function flot_area_stacked_graph($chart_data, $width, $height, $color,
$legend, $long_index, $homeurl, $unit, 'area_stacked',
$water_mark, $serie_types, $chart_extra_data, $yellow_threshold,
$red_threshold, $adapt_key, $force_integer, $series_suffix_str,
$menu, $background_color, $dashboard, $vconsole, $agent_module_id);
$menu, $background_color, $dashboard, $vconsole, $agent_module_id, $font,$font_size);
}
function flot_area_simple_graph($chart_data, $width, $height, $color,
@ -112,19 +112,19 @@ function flot_area_simple_graph($chart_data, $width, $height, $color,
$serie_types = array(), $chart_extra_data = array(),
$yellow_threshold = 0, $red_threshold = 0, $adapt_key= '',
$force_integer = false, $series_suffix_str = '', $menu = true,
$background_color = 'white', $dashboard = false, $vconsole = false, $agent_module_id = 0) {
$background_color = 'white', $dashboard = false, $vconsole = false, $agent_module_id = 0, $font = '',$font_size = 7) {
global $config;
return flot_area_graph($chart_data, $width, $height, $color,
$legend, $long_index, $homeurl, $unit, 'area_simple',
$water_mark, $serie_types, $chart_extra_data, $yellow_threshold,
$red_threshold, $adapt_key, $force_integer, $series_suffix_str,
$menu, $background_color, $dashboard, $vconsole, $agent_module_id);
$menu, $background_color, $dashboard, $vconsole, $agent_module_id,$font,$font_size);
}
function flot_line_stacked_graph($chart_data, $width, $height, $color,
$legend, $long_index, $homeurl = '', $unit = '', $water_mark = '',
$legend, $long_index, $homeurl = '',$font = '', $font_size = 7, $unit = '', $water_mark = '',
$serie_types = array(), $chart_extra_data = array(),
$yellow_threshold = 0, $red_threshold = 0, $adapt_key= '',
$force_integer = false, $series_suffix_str = '', $menu = true,
@ -136,11 +136,11 @@ function flot_line_stacked_graph($chart_data, $width, $height, $color,
$legend, $long_index, $homeurl, $unit, 'line_stacked',
$water_mark, $serie_types, $chart_extra_data, $yellow_threshold,
$red_threshold, $adapt_key, $force_integer, $series_suffix_str,
$menu, $background_color, $dashboard, $vconsole, $agent_module_id);
$menu, $background_color, $dashboard, $vconsole, $agent_module_id, $font, $font_size);
}
function flot_line_simple_graph($chart_data, $width, $height, $color,
$legend, $long_index, $homeurl = '', $unit = '', $water_mark = '',
$legend, $long_index, $homeurl = '', $font = '', $font_size = 7,$unit = '', $water_mark = '',
$serie_types = array(), $chart_extra_data = array(),
$yellow_threshold = 0, $red_threshold = 0, $adapt_key= '',
$force_integer = false, $series_suffix_str = '', $menu = true,
@ -152,22 +152,20 @@ function flot_line_simple_graph($chart_data, $width, $height, $color,
$legend, $long_index, $homeurl, $unit, 'line_simple',
$water_mark, $serie_types, $chart_extra_data, $yellow_threshold,
$red_threshold, $adapt_key, $force_integer, $series_suffix_str,
$menu, $background_color, $dashboard, $vconsole);
$menu, $background_color, $dashboard, $vconsole, $agent_module_id, $font, $font_size);
}
function flot_area_graph($chart_data, $width, $height, $color, $legend,
$long_index, $homeurl, $unit, $type, $water_mark, $serie_types,
$chart_extra_data, $yellow_threshold, $red_threshold, $adapt_key,
$force_integer, $series_suffix_str = '', $menu = true,
$background_color = 'white', $dashboard = false, $vconsole = false, $agent_module_id = 0) {
$background_color = 'white', $dashboard = false, $vconsole = false, $agent_module_id = 0,$font = '',$font_size = 7) {
global $config;
include_javascript_dependencies_flot_graph();
$font_size = '7';
$menu = (int)$menu;
// Get a unique identifier to graph
@ -432,6 +430,7 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend,
"'" . $homeurl . "', \n" .
"'$unit', \n" .
"$font_size, \n" .
"'$font', \n" .
"$menu, \n" .
"'$events', \n" .
"'$event_ids', \n" .
@ -573,7 +572,7 @@ function flot_custom_pie_chart ($flash_charts, $graph_values,
$return .= "<script type='text/javascript'>";
$return .= "pandoraFlotPieCustom('$graph_id', '$values', '$labels',
'$width', $font_size, $water_mark,
'$width', $font_size, '$fontpath', $water_mark,
'$separator', '$legend_position', '$height', '$colors','$legend')";
$return .= "</script>";
@ -582,7 +581,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) {
function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark, $font = '', $font_size = 7) {
global $config;
include_javascript_dependencies_flot_graph();
@ -663,8 +662,8 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
$return .= "<script type='text/javascript'>";
$return .= "pandoraFlotHBars('$graph_id', '$values', '$labels',
false, $max, '$water_mark', '$separator', '$separator2')";
false, $max, '$water_mark', '$separator', '$separator2', '$font', $font_size)";
$return .= "</script>";
return $return;

View File

@ -888,7 +888,7 @@ function createGauge(name, etiqueta, value, min, max, min_warning,max_warning,mi
config.redZones = [{ from: min_critical, to: max_critical }];
}
}
gauges = new Gauge(name, config);
gauges = new Gauge(name, config, font);
gauges.render();
gauges.redraw(value);
$(".gauge>text").each(function() {
@ -927,7 +927,7 @@ function createGauge(name, etiqueta, value, min, max, min_warning,max_warning,mi
config = false;
}
function createGauges(data, width, height, font_size, no_data_image)
function createGauges(data, width, height, font_size, no_data_image, font)
{
var nombre,label,minimun_warning,maximun_warning,minimun_critical,maximun_critical,
mininum,maxinum,valor;
@ -981,16 +981,18 @@ function createGauges(data, width, height, font_size, no_data_image)
valor = (-1200);
createGauge(nombre, label, valor, mininum, maxinum,
minimun_warning, maximun_warning, minimun_critical,
maximun_critical, font_size, height);
maximun_critical, font_size, height, font);
}
}
function Gauge(placeholderName, configuration)
function Gauge(placeholderName, configuration, font)
{
var font = font.split("/").pop().split(".").shift();
this.placeholderName = placeholderName;
var self = this; // for internal d3 functions
@ -1067,6 +1069,7 @@ function Gauge(placeholderName, configuration)
.attr("y", this.config.cy / 2 + fontSize / 2)
.attr("dy", fontSize / 2)
.attr("text-anchor", "middle")
.attr("class", font)
.text(this.config.label)
.style("font-size", this.config.font_size+"pt")
.style("fill", "#333")

View File

@ -3321,4 +3321,125 @@ div#vc-controls img.vc-qr {
/* Image open dialog in group events by agents*/
#open_agent_groups {
cursor: pointer;
}
/*Font ttf */
@font-face
{
font-family: 'DejaVuSerif-BoldFont';
src: url('../fonts/DejaVuSerif-Bold.ttf') format('truetype');
}
.DejaVuSerif-Bold{
font-family: DejaVuSerif-BoldFont;
}
@font-face
{
font-family: 'DejaVuSerif-BoldItalicFont';
src: url('../fonts/DejaVuSerif-BoldItalic.ttf') format('truetype');
}
.DejaVuSerif-BoldItalic{
font-family: DejaVuSerif-BoldItalicFont;
}
@font-face
{
font-family: 'DejaVuSerif-ItalicFont';
src: url('../fonts/DejaVuSerif-Italic.ttf') format('truetype');
}
.DejaVuSerif-Italic{
font-family: DejaVuSerif-ItalicFont;
}
@font-face
{
font-family: 'DejaVuSerifFont';
src: url('../fonts/DejaVuSerif.ttf') format('truetype');
}
.DejaVuSerif{
font-family: DejaVuSerifFont;
}
@font-face
{
font-family: 'DejaVuSerifCondensed-BoldFont';
src: url('../fonts/DejaVuSerifCondensed-Bold.ttf') format('truetype');
}
.DejaVuSerifCondensed-Bold{
font-family: DejaVuSerifCondensed-BoldFont;
}
@font-face
{
font-family: 'DejaVuSerifCondensed-BoldItalicFont';
src: url('../fonts/DejaVuSerifCondensed-BoldItalic.ttf') format('truetype');
}
.DejaVuSerifCondensed-BoldItalic{
font-family: DejaVuSerifCondensed-BoldItalicFont;
}
@font-face
{
font-family: 'DejaVuSerifCondensed-ItalicFont';
src: url('../fonts/DejaVuSerifCondensed-Italic.ttf') format('truetype');
}
.DejaVuSerifCondensed-Italic{
font-family: DejaVuSerifCondensed-ItalicFont;
}
@font-face
{
font-family: 'DejaVuSerifCondensedFont';
src: url('../fonts/DejaVuSerifCondensed.ttf') format('truetype');
}
.DejaVuSerifCondensed{
font-family: DejaVuSerifCondensedFont;
}
@font-face
{
font-family: 'FreeSansFont';
src: url('../fonts/FreeSans.ttf') format('truetype');
}
.FreeSans{
font-family: FreeSansFont;
}
@font-face
{
font-family: 'FreeSansBoldFont';
src: url('../fonts/FreeSansBold.ttf') format('truetype');
}
.FreeSansBold{
font-family: FreeSansBoldFont;
}
@font-face
{
font-family: 'smallfontFont';
src: url('../fonts/smallfont.ttf') format('truetype');
}
.smallfont{
font-family: smallfontFont;
}
@font-face
{
font-family: 'unicodeFont';
src: url('../fonts/unicode.ttf') format('truetype');
}
.unicode{
font-family: unicodeFont;
}