From 64a2acd12eb84f6d62d577b7a49b637efa11a418 Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Thu, 18 Dec 2014 16:44:55 +0100 Subject: [PATCH] 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 --- library/Icinga/Web/Widget/Chart/InlinePie.php | 210 +++++------------- .../controllers/MultiController.php | 2 +- .../controllers/ServicesController.php | 3 +- .../application/views/helpers/Perfdata.php | 14 +- public/css/icinga/widgets.less | 12 + public/js/icinga/behavior/sparkline.js | 51 ++--- 6 files changed, 107 insertions(+), 185 deletions(-) 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); }); };