Add php script to render dynamic svgs of inline charts

Add a php script to render dynamic SVGs as a fallback and add a widget to draw
inline charts.

refs #5679
This commit is contained in:
Matthias Jentsch 2014-02-19 18:29:59 +01:00
parent c17cd2df34
commit a2baf4217b
9 changed files with 287 additions and 8 deletions

View File

@ -40,7 +40,6 @@ use \Icinga\Chart\SVGRenderer;
*/
abstract class Chart implements Drawable
{
/**
* SVG renderer that handles
*

View File

@ -254,7 +254,7 @@ class GridChart extends Chart
*/
protected function init()
{
$this->renderer = new SVGRenderer(13, 10);
$this->renderer = new SVGRenderer(100, 100);
$this->setAxis(Axis::createLinearAxis());
}

View File

@ -76,6 +76,46 @@ class PieChart extends Chart
*/
private $noCaption = false;
/**
* Scaling level of the rendered svgs width in percent.
*
* @var float
*/
private $width = 100;
/**
* Scaling level of the rendered svgs height in percent.
*
* @var int
*/
private $height = 100;
/**
* Set the size of the rendered pie-chart svg.
*
* @param $width int The width in percent.
*
* @return self Fluent interface
*/
public function setWidth($width)
{
$this->width = $width;
return $this;
}
/**
* Set the size of the rendered pie-chart svg.
*
* @param $height int The height in percent.
*
* @return self Fluent interface
*/
public function setHeight($height)
{
$this->height = $height;
return $this;
}
/**
* Test if the given pies have the correct format
*
@ -96,7 +136,7 @@ class PieChart extends Chart
*/
protected function build()
{
$this->renderer = new SVGRenderer(($this->type === self::STACKED) ? 1 : count($this->pies), 1);
$this->renderer = new SVGRenderer(($this->type === self::STACKED) ? $this->width : count($this->pies)*$this->width, $this->width);
foreach ($this->pies as &$pie) {
$this->normalizeDataSet($pie);
}

View File

@ -80,7 +80,6 @@ class SVGRenderer
*/
private $height = 100;
/**
* Create the root document and the SVG root node
*/
@ -96,10 +95,8 @@ class SVGRenderer
$this->document = $implementation->createDocument(null, null, $docType);
$this->svg = $this->createOuterBox();
$this->document->appendChild($this->svg);
}
/**
* Create the outer SVG box containing the root svg element and namespace and return it
*
@ -111,8 +108,8 @@ class SVGRenderer
$svg = $this->document->createElement('svg');
$svg->setAttribute('xmlns', 'http://www.w3.org/2000/svg');
$svg->setATtribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
$svg->setAttribute("width", "100%");
$svg->setAttribute("height", "100%");
$svg->setAttribute('width', $this->width . '%');
$svg->setAttribute('height', $this->width . '%');
$svg->setAttribute(
'viewBox',
sprintf(

View File

@ -0,0 +1,126 @@
<?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\Widget;
use Icinga\Web\Url;
use \Zend_View_Abstract;
class PieChart implements Widget {
/**
* 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 \Icinga\Web\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
*
* @param \Zend_View_Abstract $view
* @return string
*/
public function render(Zend_View_Abstract $view)
{
$template = $this->template;
$template = preg_replace('{{url}}', $this->url->getAbsoluteUrl(), $template);
$template = preg_replace('{{width}}', $this->width, $template);
$template = preg_replace('{{height}}', $this->height, $template);
return $template;
}
}

View File

@ -36,6 +36,7 @@ use Icinga\Web\Hook;
use Icinga\Web\Widget\Tabextension\DashboardAction;
use Icinga\Web\Widget\Tabextension\OutputFormat;
use Icinga\Web\Widget\Tabs;
use Icinga\Web\Widget\Chart\PieChart;
use Icinga\Module\Monitoring\Backend;
use Icinga\Web\Widget\SortBox;
use Icinga\Web\Widget\FilterBox;
@ -171,6 +172,8 @@ class Monitoring_ListController extends MonitoringController
'host_last_check' => 'Last Host Check'
));
$this->view->piechart =
new PieChart(array(1,3,4,2));
}
/**

View File

@ -1,5 +1,6 @@
<?php
$viewHelper = $this->getHelper('MonitoringState');
$j = 1;
?>
<div class="row">
<div class="pull-left">
@ -137,6 +138,19 @@ $viewHelper = $this->getHelper('MonitoringState');
<?= $this->escape(substr(strip_tags($service->service_output), 0, 10000)); ?>
</div>
</td>
<td>
<?php
$piechart->setData(array($j, 2*$j,4,5));
echo $piechart->render($this);
$piechart->setData(array($j + 3,2*$j,4,2));
echo $piechart->render($this);
$piechart->setData(array($j + 7,2*$j,4,3));
echo $piechart->render($this);
$piechart->setColors(array('#111111', '#546345', '#434211', '#312312'));
$j++;
?>
</td>
</tr>
<?php endforeach; ?>
</tbody>

File diff suppressed because one or more lines are too long

95
public/svg/chart.php Normal file
View File

@ -0,0 +1,95 @@
<?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}}}
use Icinga\Chart\PieChart;
use Icinga\Application\Loader;
/*
* Use only autoloader and do not bootstrap EmbeddedWeb to improve performance
* of svg rendering
*/
require_once dirname(__FILE__) . '/../../library/Icinga/Application/Loader.php';
$loader = new Loader();
$loader->registerNamespace('Icinga', dirname(__FILE__) . '/../../library/Icinga');
$loader->register();
// TODO: move functionality into separate class
function sanitizeStringArray(array $arr)
{
$sanitized = array();
foreach ($arr as $key => $value) {
$sanitized[$key] = htmlspecialchars($value);
}
return $sanitized;
}
if (!array_key_exists('data', $_GET)) {
die;
}
header('Content-Type: image/svg+xml');
$data = explode(',', $_GET['data']);
foreach ($data as $key => $value) {
$data[$key] = (int)$value;
}
$labels = array();
for ($i = 0; $i < sizeof($data); $i++) {
$labels[] = '';
}
if (array_key_exists('colors', $_GET)) {
$colors = sanitizeStringArray(explode(',', $_GET['colors']));
} else {
$colors = array(
'#00FF00', // OK
'#FFFF00', // Warning
'#FF0000', // Critical
'#E066FF' // Unreachable
);
while (sizeof($colors) < sizeof($data)) {
$colors[] = '#FEFEFE';
}
}
$width = 15;
if (array_key_exists('width', $_GET)) {
$width = (int)$_GET['width'];
}
$height = 15;
if (array_key_exists('height', $_GET)) {
$height = (int)$_GET['height'];
}
$pie = new PieChart();
$pie->drawPie(array(
'data' => $data, 'colors' => $colors, 'labels' => $labels
));
$pie->setWidth($width)->setHeight($height);
echo $pie->render();