Fix inlinePie borders and SVG sizes

Add white border to inline piecharts in the list, to make them more visible on mouse hovering. Set a default image size for the loaded svg charts.

library/Icinga/Web/Widget/Chart/InlinePie.php

@@ -33,14 +33,14 @@ class InlinePie extends AbstractWidget
      * @var string
      */
     private $template =<<<'EOD'
-<span sparkType="pie" class="sparkline {class}" {title} {size} sparkSliceColors="[{colors}]" values="{data}">
+<span sparkType="pie" class="sparkline {class}" {title} sparkWidth={size} sparkHeight={size} sparkSliceColors="[{colors}]" values="{data}">
 </span>
 {noscript}
 EOD;
 
     private $noscript =<<<'EOD'
 <noscript>
-  <img class="inlinepie {class}" {title} src="{url}" data-icinga-colors="{colors}" data-icinga-values="{data}"/>
+  <img width={size} height={size} class="inlinepie {class}" {title} src="{url}" data-icinga-colors="{colors}" data-icinga-values="{data}"/>
 </noscript>
 EOD;
 
@@ -216,8 +216,7 @@ EOD;
         $template = str_replace('{class}', $this->class, $template);
 
         // style
-        $template = str_replace('{size}',
+        $template = str_replace('{size}', isset($this->size) ? $this->size : 16, $template);
-            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);

modules/monitoring/application/views/helpers/Perfdata.php

@@ -18,11 +18,11 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
      *
      * @return string
      */
-    public function perfdata($perfdataStr, $compact = false, $color = Perfdata::PERFDATA_OK)
+    public function perfdata($perfdataStr, $compact = false, $limit = 0, $color = Perfdata::PERFDATA_OK)
     {
         $pieChartData = PerfdataSet::fromString($perfdataStr)->asArray();
 
-        $result = '';
+        $results = array();
         $table = array(
             '<td><b>' . implode(
                 '</b></td><td><b>',
@@ -32,7 +32,7 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
         foreach ($pieChartData as $perfdata) {
 
             if ($compact && $perfdata->isVisualizable()) {
-                $result .= $perfdata->asInlinePie($color)->render();
+                $results[] = $perfdata->asInlinePie($color)->render();
             } else {
                 $row = '<tr>';
 
@@ -56,8 +56,13 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
             }
         }
 
+        if ($limit > 0) {
+            $table = array_slice ($table, 0, $limit);
+            $results = array_slice ($results, 0, $limit);
+        }
+
         if ($compact) {
-            return $result;
+            return join('', $results);
         } else {
             $pieCharts = empty($table) ? '' : '<table class="perfdata">' . implode("\n", $table) . '</table>';
             return $pieCharts;

modules/monitoring/application/views/scripts/list/services.phtml

@@ -65,7 +65,7 @@ foreach ($services as $service):
       </td>
 
       <td>
-        <?= $this->perfdata($service->service_perfdata, true) ?>
+        <div class="sparkline-box"><?= $this->perfdata($service->service_perfdata, true, 8) ?></div>
 
         <?php if (!$service->service_handled && $service->service_state > 0): ?>
         <?= $this->icon('attention-alt', $this->translate('Unhandled')) ?>

public/css/icinga/widgets.less

@@ -285,6 +285,15 @@ li li .badge {
     background-color: #eee;
 }
 
+.sparkline-box {
+  position: relative;
+  top: -9px;
+}
+
+.dashboard .sparkline-box {
+  top: -3px;
+}
+
 .sparkline {
   width: 12px;
   height: 12px;

public/js/icinga/behavior/navigation.js

@@ -85,8 +85,7 @@
         $menu.data('icinga-url', menuDataUrl);
     };
 
-    Navigation.prototype.setActiveByUrl = function(url)
+    Navigation.prototype.setActiveByUrl = function(url) {
-    {
         this.resetActive();
         this.setActive($('#menu [href="' + url + '"]'));
     }

public/js/icinga/behavior/sparkline.js

@@ -28,10 +28,12 @@
             if ($spark.hasClass('sparkline-perfdata')) {
                 options = {
                     enableTagOptions: true,
-                    width: 12,
+                    width: 16,
-                    height: 12,
+                    height: 16,
                     title: title,
-                    disableTooltips: true
+                    disableTooltips: true,
+                    borderWidth: 1.4,
+                    borderColor: '#FFF'
                 };
                 $spark.sparkline('html', options);
             } else if ($spark.hasClass('sparkline-multi')) {