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

Do not display labels for single data sets in perfdata piecharts 

Display generic chart titles for the whole piechart that only contain title and percentage and don't style perfdata piecharts using HTML properties.

refs #7077
refs #6200
refs #7304
This commit is contained in:
Matthias Jentsch 2014-12-18 16:44:55 +01:00
parent f513e7959e
commit 64a2acd12e
6 changed files with 107 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
library/Icinga/Web/Widget/Chart/InlinePie.php
View File

@ -34,30 +34,20 @@ class InlinePie extends AbstractWidget
* @var string
*/
private $template =<<<'EOD'
<span
class="sparkline"
sparkTitle="{title}"
sparkWidth="{width}"
sparkHeight="{height}"
sparkBorderWidth="{borderWidth}"
sparkBorderColor="{borderColor}"
sparkTooltipChartTitle="{title}"
style="{style}"
labels="{labels}"
formatted="{formatted}"
hideEmptyLabel={hideEmptyLabel}
values="{data}"
tooltipFormat="{tooltipFormat}"
sparkSliceColors="[{colors}]"
sparkType="pie"></span>
<noscript>
<img class="inlinepie"
title="{title}" src="{url}" style="position: relative; top: 10px; width: {width}px; height: {height}px; {style}"
data-icinga-colors="{colors}" data-icinga-values="{data}"
/>
</noscript>
<span sparkType="pie" class="sparkline" {title} {disableTooltips} {size}
sparkSliceColors="[{colors}]" labels="{labels}" formatted="{formatted}" values="{data}"
tooltipFormat="{tooltipFormat}">
</span>
{noscript}
EOD;
private $noscript =<<<'EOD'
<noscript>
<img class="inlinepie {class}" {title} src="{url}" data-icinga-colors="{colors}" data-icinga-values="{data}"/>
</noscript>
EOD;
/**
* @var Url
*/
@ -70,34 +60,6 @@ EOD;
*/
private $colors = array('#44bb77', '#ffaa44', '#ff5566', '#ddccdd');
/**
* The width of the rendered chart
*
* @var int The value in px
*/
private $width = 16;
/**
* The height of the rendered chart
*
* @var int The value in px
*/
private $height = 16;
/**
* PieChart border width
*
* @var float
*/
private $borderWidth = 1;
/**
* The color of the border
*
* @var string
*/
private $borderColor = '#fff';
/**
* The title of the chart
*
@ -106,11 +68,9 @@ EOD;
private $title;
/**
* The style for the HtmlElement
*
* @var string
* @var
*/
private $style = '';
private $size;
/**
* The data displayed by the pie-chart
@ -126,19 +86,17 @@ EOD;
*/
private $labels = array();
/**
* If the tooltip for the "empty" area should be hidden
*
* @var bool
*/
private $hideEmptyLabel = false;
/**
* The format string used to display tooltips
*
* @var string
*/
private $tooltipFormat = '<b>{{title}}</b></br> {{label}}: {{formatted}} ({{percent}}%)';
private $tooltipFormat = '<b>{{title}}</b></br> {{label}} {{formatted}} ({{percent}}%)';
/**
* @var string
*/
private $disableTooltips = '';
/**
* The number format used to render numeric values in tooltips
@ -147,19 +105,6 @@ EOD;
*/
private $format = self::NUMBER_FORMAT_NONE;
/**
* Set if the tooltip for the empty area should be hidden
*
* @param bool $hide Whether to hide the empty area
*
* @return $this
*/
public function setHideEmptyLabel($hide = true)
{
$this->hideEmptyLabel = $hide;
return $this;
}
/**
* Set the data to be displayed.
*
@ -174,6 +119,27 @@ EOD;
return $this;
}
/**
* Set the size of the inline pie
*
* @param int $size Sets both, the height and width
*
* @return $this
*/
public function setSize($size = null)
{
$this->size = $size;
return $this;
}
/**
* Do not display the NoScript fallback html
*/
public function disableNoScript()
{
$this->noscript = '';
}
/**
* The labels to be displayed in the pie-chart
*
@ -186,7 +152,7 @@ EOD;
if (is_array($label)) {
$this->url->setParam('labels', implode(',', array_keys($label)));
} elseif ($label != null) {
$labelArr = array($label, $label, $label, '');
$labelArr = array($label, $label, $label, $label);
$this->url->setParam('labels', implode(',', $labelArr));
$label = $labelArr;
} else {
@ -250,69 +216,6 @@ EOD;
return $this;
}
/**
* Set the height
*
* @param $height
*
* @return $this
*/
public function setHeight($height)
{
$this->height = $height;
return $this;
}
/**
* Set the border width of the pie chart
*
* @param float $width Width in px
*
* @return $this
*/
public function setBorderWidth($width)
{
$this->borderWidth = $width;
return $this;
}
/**
* Set the color of the pie chart border
*
* @param string $col The color string
*
* @return $this
*/
public function setBorderColor($col)
{
$this->borderColor = $col;
}
/**
* Set the width
*
* @param $width
*
* @return $this
*/
public function setWidth($width)
{
$this->width = $width;
return $this;
}
/**
* Set the styling of the created HtmlElement
*
* @param string $style
*
* @return $this
*/
public function setStyle($style)
{
$this->style = $style;
}
/**
* Set the title of the displayed Data
*
@ -322,10 +225,20 @@ EOD;
*/
public function setTitle($title)
{
$this->title = $title;
$this->title = 'title="' . htmlspecialchars($title) . '"';
return $this;
}
/**
* Whether to display tooltips for the InlinePie
*
* @param bool $val
*/
public function setDisableTooltip($val = true)
{
$this->disableTooltips = $val !== true ? '' : 'sparkDisableTooltips="true"';
}
/**
* Create a new InlinePie
*
@ -335,7 +248,7 @@ EOD;
*/
public function __construct(array $data, $title, $colors = null)
{
$this->title = $title;
$this->setTitle($title);
$this->url = Url::fromPath('svg/chart.php');
if (array_key_exists('data', $data)) {
$this->data = $data['data'];
@ -386,7 +299,7 @@ EOD;
));
try {
$png = $pie->toPng($this->width, $this->height);
$png = $pie->toPng($this->size, $this->size);
return '<img class="inlinepie" src="data:image/png;base64,' . base64_encode($png) . '" />';
} catch (IcingaException $_) {
return '';
@ -394,17 +307,15 @@ EOD;
}
$template = $this->template;
// TODO: Check whether we are XHR and don't send
$template = str_replace('{noscript}', $this->noscript, $template);
$template = str_replace('{url}', $this->url, $template);
// style
$template = str_replace('{width}', $this->width, $template);
$template = str_replace('{height}', $this->height, $template);
$template = str_replace('{title}', htmlspecialchars($this->title), $template);
$template = str_replace('{style}', $this->style, $template);
$template = str_replace('{size}',
isset($this->size) ? 'sparkWidth="' . $this->size . '" sparkHeight="' . $this->size . '" ' : '', $template);
$template = str_replace('{title}', $this->title, $template);
$template = str_replace('{colors}', implode(',', $this->colors), $template);
$template = str_replace('{borderWidth}', $this->borderWidth, $template);
$template = str_replace('{borderColor}', $this->borderColor, $template);
$template = str_replace('{hideEmptyLabel}', $this->hideEmptyLabel ? 'true' : 'false', $template);
// Locale-ignorant string cast. Please. Do. NOT. Remove. This. Again.
// Problem is that implode respects locales when casting floats. This means
@ -423,6 +334,7 @@ EOD;
$template = str_replace('{formatted}', htmlspecialchars(implode('|', $formatted)), $template);
$template = str_replace('{labels}', htmlspecialchars($this->createLabelString()), $template);
$template = str_replace('{tooltipFormat}', $this->tooltipFormat, $template);
$template = str_replace('{disableTooltips}', $this->disableTooltips, $template);
return $template;
}

2
modules/monitoring/application/controllers/MultiController.php
View File

@ -221,7 +221,7 @@ class Monitoring_MultiController extends Controller
private function createPie($states, $colors, $title)
{
$chart = new InlinePie(array_values($states), $title, $colors);
$chart->setLabel(array_keys($states))->setHeight(100)->setWidth(100);
$chart->setLabel(array_keys($states))->setSize(100);
$chart->setTitle($title);
return $chart;
}

3
modules/monitoring/application/controllers/ServicesController.php
View File

@ -160,8 +160,7 @@ class Monitoring_ServicesController extends Controller
$chart = new InlinePie(array_values($states), $title, $colors);
return $chart
->setLabel(array_map('strtoupper', array_keys($states)))
->setHeight(100)
->setWidth(100)
->setSize(100)
->setTitle($title);
}

14
modules/monitoring/application/views/helpers/Perfdata.php
View File

@ -84,21 +84,19 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
protected function createInlinePie(Perfdata $perfdata)
{
$pieChart = new InlinePie($this->calculatePieChartData($perfdata), $perfdata->getLabel());
$pieChart->setLabel(htmlspecialchars($perfdata->getLabel()));
$pieChart->setHideEmptyLabel();
$pieChart = new InlinePie($this->calculatePieChartData($perfdata),
$perfdata->getLabel() . ' ' . (int)$perfdata->getPercentage() . '%');
$pieChart->setDisableTooltip();
if (Zend_Controller_Front::getInstance()->getRequest()->isXmlHttpRequest()) {
$pieChart->disableNoScript();
}
//$pieChart->setHeight(32)->setWidth(32);
if ($perfdata->isBytes()) {
$pieChart->setTooltipFormat('{{label}}: {{formatted}} ({{percent}}%)');
$pieChart->setNumberFormat(InlinePie::NUMBER_FORMAT_BYTES);
} else if ($perfdata->isSeconds()) {
$pieChart->setTooltipFormat('{{label}}: {{formatted}} ({{percent}}%)');
$pieChart->setNumberFormat(InlinePie::NUMBER_FORMAT_TIME);
} else {
$pieChart->setTooltipFormat('{{label}}: {{formatted}}%');
$pieChart->setNumberFormat(InlinePie::NUMBER_FORMAT_RATIO);
$pieChart->setHideEmptyLabel();
}
return $pieChart;
}

12
public/css/icinga/widgets.less
View File

@ -285,3 +285,15 @@ li li .badge {
.widgetFilter li.active {
background-color: #eee;
}
.sparkline {
width: 12px;
height: 12px;
}
.inlinepie {
width: 12px;
height: 12px;
position: relative;
top: 10px;
}

51
public/js/icinga/behavior/sparkline.js
View File

@ -21,31 +21,32 @@
var $spark = $(element);
var labels = $spark.attr('labels').split('|');
var formatted = $spark.attr('formatted').split('|');
var tooltipChartTitle = $spark.attr('sparkTooltipChartTitle') || '';
var format = $spark.attr('tooltipformat');
var hideEmpty = $spark.attr('hideEmptyLabel') === 'true';
$spark.sparkline(
'html',
{
enableTagOptions: true,
tooltipFormatter: function (sparkline, options, fields) {
var out = format;
if (hideEmpty && fields.offset === 3) {
return '';
}
var replace = {
title: tooltipChartTitle,
label: labels[fields.offset] ? labels[fields.offset] : fields.offset,
formatted: formatted[fields.offset] ? formatted[fields.offset] : '',
value: fields.value,
percent: Math.round(fields.percent * 100) / 100
};
$.each(replace, function(key, value) {
out = out.replace('{{' + key + '}}', value);
});
return out;
}
});
var title = $spark.attr('title');
var format = $spark.attr('tooltipFormat');
if ($spark.attr('labels')) {
$spark.removeAttr('original-title');
}
var options = {
enableTagOptions: true,
width: $spark.attr('sparkWidth') || 12,
height: $spark.attr('sparkHeight') || 12,
tooltipFormatter: function (sparkline, options, fields) {
var out = format;
var replace = {
title: title,
label: labels[fields.offset] ? labels[fields.offset] : fields.offset,
formatted: formatted[fields.offset] ? formatted[fields.offset] : '',
value: fields.value,
percent: Math.round(fields.percent * 100) / 100
};
$.each(replace, function(key, value) {
out = out.replace('{{' + key + '}}', value);
});
return out;
}
};
$spark.sparkline('html', options);
});
};