diff --git a/library/Icinga/Web/Widget/Chart/InlinePie.php b/library/Icinga/Web/Widget/Chart/InlinePie.php index 618d2903b..3acb83f5c 100644 --- a/library/Icinga/Web/Widget/Chart/InlinePie.php +++ b/library/Icinga/Web/Widget/Chart/InlinePie.php @@ -34,30 +34,20 @@ class InlinePie extends AbstractWidget * @var string */ private $template =<<<'EOD' - - + + +{noscript} EOD; + private $noscript =<<<'EOD' + +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 = '{{title}}
{{label}}: {{formatted}} ({{percent}}%)'; + private $tooltipFormat = '{{title}}
{{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 ''; } 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; } diff --git a/modules/monitoring/application/controllers/MultiController.php b/modules/monitoring/application/controllers/MultiController.php index 52d927ffb..6deff2fc3 100644 --- a/modules/monitoring/application/controllers/MultiController.php +++ b/modules/monitoring/application/controllers/MultiController.php @@ -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; } diff --git a/modules/monitoring/application/controllers/ServicesController.php b/modules/monitoring/application/controllers/ServicesController.php index f859f6790..a7b2d0294 100644 --- a/modules/monitoring/application/controllers/ServicesController.php +++ b/modules/monitoring/application/controllers/ServicesController.php @@ -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); } diff --git a/modules/monitoring/application/views/helpers/Perfdata.php b/modules/monitoring/application/views/helpers/Perfdata.php index eb649e77d..6e168c90f 100644 --- a/modules/monitoring/application/views/helpers/Perfdata.php +++ b/modules/monitoring/application/views/helpers/Perfdata.php @@ -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; } diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less index 93625b0dc..87941157c 100644 --- a/public/css/icinga/widgets.less +++ b/public/css/icinga/widgets.less @@ -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; +} \ No newline at end of file diff --git a/public/js/icinga/behavior/sparkline.js b/public/js/icinga/behavior/sparkline.js index 33cc0d34b..1992bae0a 100644 --- a/public/js/icinga/behavior/sparkline.js +++ b/public/js/icinga/behavior/sparkline.js @@ -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); }); };