diff --git a/library/Icinga/Chart/Inline/Inline.php b/library/Icinga/Chart/Inline/Inline.php index 33b1141bd..b31693b66 100644 --- a/library/Icinga/Chart/Inline/Inline.php +++ b/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)) { diff --git a/library/Icinga/Chart/Inline/PieChart.php b/library/Icinga/Chart/Inline/PieChart.php index 62faa7e55..687e28f08 100644 --- a/library/Icinga/Chart/Inline/PieChart.php +++ b/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 )); diff --git a/library/Icinga/Web/Widget/Chart/InlinePie.php b/library/Icinga/Web/Widget/Chart/InlinePie.php new file mode 100644 index 000000000..61405e0a0 --- /dev/null +++ b/library/Icinga/Web/Widget/Chart/InlinePie.php @@ -0,0 +1,230 @@ + + * @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2 + * @author Icinga Development Team + * + */ +// {{{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' + +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; + } +} + diff --git a/library/Icinga/Web/Widget/Chart/PieChart.php b/library/Icinga/Web/Widget/Chart/PieChart.php deleted file mode 100644 index 28fc2e71e..000000000 --- a/library/Icinga/Web/Widget/Chart/PieChart.php +++ /dev/null @@ -1,123 +0,0 @@ - - * @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2 - * @author Icinga Development Team - * - */ -// {{{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' - -
- -
-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; - } -} diff --git a/modules/monitoring/application/views/helpers/Perfdata.php b/modules/monitoring/application/views/helpers/Perfdata.php index 4ec24fe41..483ad0453 100644 --- a/modules/monitoring/application/views/helpers/Perfdata.php +++ b/modules/monitoring/application/views/helpers/Perfdata.php @@ -1,6 +1,7 @@ getFormattedValue() /* $val*/) - // . htmlspecialchars($unit) - . '"' . $float . '>' - . implode(',', array($green, $orange, $red, $gray)) - . ''; + $inlinePie->setTitle(htmlspecialchars($name) . ': ' . htmlspecialchars($ps[$name]->getFormattedValue())); + $inlinePie->setStyle('float: right;'); + $result .= $inlinePie->render(); } else { - $table[] = '
' - . implode(',', array($green, $orange, $red, $gray)) - . '
' - . htmlspecialchars($name) - . '' - . htmlspecialchars($ps[$name]->getFormattedValue() /* $val*/) - //. htmlspecialchars($unit) - . ''; + $inlinePie->setTitle(htmlspecialchars($name)); + $inlinePie->setStyle('float: left; margin: 0.2em 0.5em 0.2em 0;'); + $table[] = '' . $inlinePie->render() + . htmlspecialchars($name) + . '' + . htmlspecialchars($ps[$name]->getFormattedValue()) . + ''; } } if ($result == '' && ! $compact) { diff --git a/public/js/icinga/loader.js b/public/js/icinga/loader.js index ec5538936..f7e060ac9 100644 --- a/public/js/icinga/loader.js +++ b/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 = '
' + values + '
'; + $(this).replaceWith(html); + }); + + /* Should we try to fiddle with responses containing full HTML? */ /* if ($('body', $resp).length) {