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

@@ -34,30 +34,20 @@ class InlinePie extends AbstractWidget
      * @var string
      */
     private $template =<<<'EOD'
-    <span
+<span sparkType="pie" class="sparkline" {title} {disableTooltips} {size}
-        class="sparkline"
+    sparkSliceColors="[{colors}]" labels="{labels}" formatted="{formatted}" values="{data}"
-        sparkTitle="{title}"
+    tooltipFormat="{tooltipFormat}">
-        sparkWidth="{width}"
+</span>
-        sparkHeight="{height}"
+{noscript}
-        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>
 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
-     *
-     * @var string
      */
-    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('{size}',
-        $template = str_replace('{height}', $this->height, $template);
+            isset($this->size) ? 'sparkWidth="' . $this->size . '" sparkHeight="' . $this->size . '" ' : '', $template);
-        $template = str_replace('{title}', htmlspecialchars($this->title), $template);
+        $template = str_replace('{title}', $this->title, $template);
-        $template = str_replace('{style}', $this->style, $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;
     }
 

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;
     }

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)
+            ->setSize(100)
-            ->setWidth(100)
             ->setTitle($title);
     }
 

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 = new InlinePie($this->calculatePieChartData($perfdata),
-        $pieChart->setLabel(htmlspecialchars($perfdata->getLabel()));
+            $perfdata->getLabel() . ' ' . (int)$perfdata->getPercentage() . '%');
-        $pieChart->setHideEmptyLabel();
+        $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;
     }

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;
+}

public/js/icinga/behavior/sparkline.js

@@ -21,20 +21,20 @@
             var $spark            = $(element);
             var labels            = $spark.attr('labels').split('|');
             var formatted         = $spark.attr('formatted').split('|');
-            var tooltipChartTitle = $spark.attr('sparkTooltipChartTitle') || '';
+            var title             = $spark.attr('title');
-            var format            = $spark.attr('tooltipformat');
+            var format            = $spark.attr('tooltipFormat');
-            var hideEmpty         = $spark.attr('hideEmptyLabel') === 'true';
+
-            $spark.sparkline(
+            if ($spark.attr('labels')) {
-                'html',
+                $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;
-                        if (hideEmpty && fields.offset === 3) {
-                            return '';
-                        }
                     var replace   = {
-                            title:     tooltipChartTitle,
+                        title:     title,
                         label:     labels[fields.offset] ? labels[fields.offset] : fields.offset,
                         formatted: formatted[fields.offset] ? formatted[fields.offset] : '',
                         value:     fields.value,
@@ -45,7 +45,8 @@
                     });
                     return out;
                 }
-            });
+            };
+            $spark.sparkline('html', options);
         });
     };