Include SVG piecharts in perfData helpers

When no JavaScript is available, SVG piecharts will be shown instead of the
jQuery sparklines.

fixes #5865

library/Icinga/Chart/Inline/Inline.php

@@ -105,7 +105,7 @@ class Inline {
             $this->labels[] = '';
         }
 
-        if (array_key_exists('this->colors', $_GET)) {
+        if (array_key_exists('colors', $_GET)) {
             $this->colors = $this->sanitizeStringArray(explode(',', $_GET['colors']));
         }
         while (sizeof($this->colors) < sizeof($this->data)) {

library/Icinga/Chart/Inline/PieChart.php

@@ -39,6 +39,7 @@ class PieChart extends Inline {
     public function render()
     {
         $pie = new PieChartRenderer();
+        $pie->disableLegend();
         $pie->drawPie(array(
             'data' => $this->data, 'colors' => $this->colors, 'labels' => $this->labels
         ));

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

@@ -0,0 +1,230 @@
+<?php
+// {{{ICINGA_LICENSE_HEADER}}}
+/**
+ * This file is part of Icinga Web 2.
+ *
+ * Icinga Web 2 - Head for multiple monitoring backends.
+ * Copyright (C) 2013 Icinga Development Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * @copyright  2013 Icinga Development Team <info@icinga.org>
+ * @license    http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
+ * @author     Icinga Development Team <info@icinga.org>
+ *
+ */
+// {{{ICINGA_LICENSE_HEADER}}}
+
+namespace Icinga\Web\Widget\Chart;
+
+use Icinga\Web\Widget\AbstractWidget;
+use Icinga\Web\Url;
+
+/**
+ * A SVG-PieChart intended to be displayed as a small icon next to labels, to offer a better visualization of the
+ * shown data
+ *
+ * NOTE: When InlinePies are shown in a dynamically loaded view, like the side-bar or in the dashboard, the SVGs will
+ * be replaced with a jQuery-Sparkline to save resources @see loader.js
+ *
+ * @package Icinga\Web\Widget\Chart
+ */
+class InlinePie extends AbstractWidget
+{
+    /**
+     * The template string used for rendering this widget
+     *
+     * @var string
+     */
+    private $template =<<<'EOD'
+    <img
+        class='inlinepie'
+        title="{title}" src="{url}" style="width: {width}px; height: {height}px; {style}"
+        data-icinga-colors="{colors}" data-icinga-values="{data}"
+    ></img>
+EOD;
+
+    /**
+     * @var Url
+     */
+    private $url;
+
+    /**
+     * The colors used to display the slices of this pie-chart.
+     *
+     * @var array
+     */
+    private $colors = array('44bb77', 'ffaa44', 'ff5566', 'ddccdd');
+
+    /**
+     * The width of the rendered chart
+     *
+     * @var int The value in percent
+     */
+    private $width = 30;
+
+    /**
+     * The height of the rendered chart
+     *
+     * @var int The value in perecent
+     */
+    private $height = 30;
+
+    /**
+     * The title of the chart
+     *
+     * @var string
+     */
+    private $title = '';
+
+    /**
+     * The style for the HtmlElement
+     *
+     * @var string
+     */
+    private $style = '';
+
+    /**
+     * The data displayed by the pie-chart
+     *
+     * @var
+     */
+    private $data;
+
+    /**
+     * Set the data to be displayed.
+     *
+     * @param $data array
+     */
+    public function setData(array $data)
+    {
+        $this->data = $data;
+        $this->url->setParam('data', implode(',', $data));
+    }
+
+    /**
+     * The labels to be displayed in the pie-chart
+     *
+     * @param null $labels
+     */
+    public function setLabels($labels = null)
+    {
+        $this->url->setParam('labels', implode(',', $labels));
+    }
+
+    /**
+     * Set the colors used by the slices of the pie chart.
+     *
+     * @param array $colors
+     */
+    public function setColors(array $colors = null)
+    {
+        $this->colors = $colors;
+        if (isset($colors)) {
+            $this->url->setParam('colors', implode(',', $colors));
+        } else {
+            $this->url->setParam('colors', null);
+        }
+    }
+
+    /**
+     * @param $height
+     *
+     * @return $this
+     */
+    public function setHeight($height)
+    {
+        $this->height = $height;
+        return $this;
+    }
+
+    /**
+     * @param $width
+     *
+     * @return $this
+     */
+    public function setWidth($width)
+    {
+        $this->width = $width;
+        return $this;
+    }
+
+    /**
+     * Set the styling of the created HtmlElement
+     *
+     * @param $style
+     */
+    public function setStyle($style)
+    {
+        $this->style = $style;
+    }
+
+    /**
+     * Set the title of the created HtmlElement
+     *
+     * @param $title
+     */
+    public function setTitle($title)
+    {
+        $this->title = $title;
+    }
+
+    /**
+     * Create a new InlinePie
+     *
+     * @param array $data   The data displayed by the slices
+     * @param array $colors The colors displayed by the slices
+     */
+    public function __construct(array $data, array $colors = null)
+    {
+        $this->url = Url::fromPath('svg/chart.php');
+        if (array_key_exists('data', $data)) {
+            $this->data = $data['data'];
+            if (array_key_exists('labels', $data)) {
+                $this->labels = $data['labels'];
+            }
+            if (array_key_exists('colors', $data)) {
+                $this->colors = $data['colors'];
+            }
+        } else {
+            $this->setData($data);
+        }
+        if (isset($colors)) {
+            $this->setColors($colors);
+        } else {
+            $this->setColors($this->colors);
+        }
+    }
+
+    /**
+     * Renders this widget via the given view and returns the
+     * HTML as a string
+     *
+     * @return string
+     */
+    public function render()
+    {
+        $template = $this->template;
+        $template = preg_replace('{{url}}', $this->url, $template);
+        $template = preg_replace('{{width}}', $this->width, $template);
+        $template = preg_replace('{{height}}', $this->height, $template);
+        $template = preg_replace('{{title}}', $this->title, $template);
+        $template = preg_replace('{{style}}', $this->style, $template);
+        $template = preg_replace('{{data}}', implode(',', $this->data), $template);
+        $template = preg_replace('{{colors}}', implode(',', $this->colors), $template);
+        return $template;
+    }
+}
+

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

@@ -1,123 +0,0 @@
-<?php
-// {{{ICINGA_LICENSE_HEADER}}}
-/**
- * This file is part of Icinga Web 2.
- *
- * Icinga Web 2 - Head for multiple monitoring backends.
- * Copyright (C) 2013 Icinga Development Team
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; either version 2
- * of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- *
- * @copyright  2013 Icinga Development Team <info@icinga.org>
- * @license    http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
- * @author     Icinga Development Team <info@icinga.org>
- *
- */
-// {{{ICINGA_LICENSE_HEADER}}}
-
-namespace Icinga\Web\Widget\Chart;
-
-use Icinga\Web\Widget\AbstractWidget;
-use Icinga\Web\Url;
-
-class PieChart extends AbstractWidget
-{
-     /**
-     * The template string used for rendering this widget
-     *
-     * @var string
-     */
-    private $template =<<<'EOD'
-
-    <div data-icinga-component="app/piechart">
-        <img class='inlinepie' src="{url}" width={width} height={height}> </img>
-    </div>
-EOD;
-
-    /**
-     * @var Url
-     */
-    private $url;
-
-    /**
-     * The width of the rendered chart
-     *
-     * @var int The value in percent
-     */
-    private $width = 25;
-
-    /**
-     * The height of the rendered chart
-     *
-     * @var int The value in perecent
-     */
-    private $height = 25;
-
-    public function setData($data)
-    {
-        $this->url->setParam('data', implode(',', $data));
-    }
-
-    public function setLabels($labels = null)
-    {
-        $this->url->setParam('labels', implode(',', $labels));
-    }
-
-    public function setColors($colors = null)
-    {
-        $this->url->setParam('colors', implode(',', $colors));
-    }
-
-    public function setHeight($height)
-    {
-        $this->height = $height;
-    }
-
-    public function setWidth($width)
-    {
-        $this->width = $width;
-    }
-
-    public function __construct(array $data)
-    {
-        $this->url = Url::fromPath('svg/piechart.svg');
-        if (array_key_exists('data', $data)) {
-            $this->data = $data['data'];
-            if (array_key_exists('labels', $data)) {
-                $this->labels = $data['labels'];
-            }
-            if (array_key_exists('colors', $data)) {
-                $this->colors = $data['colors'];
-            }
-        } else {
-            $this->setData($data);
-        }
-    }
-
-    /**
-     * Renders this widget via the given view and returns the
-     * HTML as a string
-     *
-     * @return string
-     */
-    public function render()
-    {
-        $template = $this->template;
-        $template = preg_replace('{{url}}', $this->url, $template);
-        $template = preg_replace('{{width}}', $this->width, $template);
-        $template = preg_replace('{{height}}', $this->height, $template);
-        return $template;
-    }
-}

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

@@ -1,6 +1,7 @@
 <?php
 
 use Icinga\Module\Monitoring\Plugin\PerfdataSet;
+use Icinga\Web\Widget\Chart\InlinePie;
 
 class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
 {
@@ -11,7 +12,7 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
             return '';
         }
         if ($float) {
-            $float = ' style="float: ' . $float . '"';
+            $float = ' float: ' . $float . ';';
         } else {
             $float = '';
         }
@@ -61,21 +62,19 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
             if ($val < $warn) $green = $val;
             elseif ($val < $crit) $orange = $val;
             else $red = $val;
+            $inlinePie = new InlinePie(array($green, $orange, $red, $gray));
             if ($compact) {
-                $result .= '<div class="inlinepie" title="' . htmlspecialchars($name) . ': ' .  htmlspecialchars($ps[$name]->getFormattedValue() /* $val*/)
+                $inlinePie->setTitle(htmlspecialchars($name) . ': ' . htmlspecialchars($ps[$name]->getFormattedValue()));
-                     // . htmlspecialchars($unit)
+                $inlinePie->setStyle('float: right;');
-                     . '"' . $float . '>'
+                $result .= $inlinePie->render();
-                     . implode(',', array($green, $orange, $red, $gray))
-                     . '</div>';
             } else {
-                $table[] = '<tr><th><div class="inlinepie" title="' . htmlspecialchars($name) . '" style="float: left; margin: 0.2em 0.5em 0.2em 0;">'
+                $inlinePie->setTitle(htmlspecialchars($name));
-                     . implode(',', array($green, $orange, $red, $gray))
+                $inlinePie->setStyle('float: left; margin: 0.2em 0.5em 0.2em 0;');
-                     . '</div>'
+                $table[] = '<tr><th>' . $inlinePie->render()
                     . htmlspecialchars($name)
                     . '</th><td>'
-                     . htmlspecialchars($ps[$name]->getFormattedValue() /* $val*/)
+                    . htmlspecialchars($ps[$name]->getFormattedValue()) .
-                     //. htmlspecialchars($unit)
+                    '</td></tr>';
-                     . '</td></tr>';
             }
         }
         if ($result == '' && ! $compact) {

public/js/icinga/loader.js

@@ -370,6 +370,19 @@
                 }
             }
 
+
+            /*
+             * Replace SVG piecharts with jQuery-Sparkline
+             */
+            $('.inlinepie', $resp).each(function(){
+                var   title = $(this).attr('title'),
+                    style = $(this).attr('style'),
+                    values = $(this).data('icinga-values');
+                var html = '<div class="inlinepie" style="' + style + '" title="' + title + '">' + values + '</div>';
+                $(this).replaceWith(html);
+            });
+
+
             /* Should we try to fiddle with responses containing full HTML? */
             /*
             if ($('body', $resp).length) {