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:
parent
c17cd2df34
commit
a2baf4217b
|
@ -40,7 +40,6 @@ use \Icinga\Chart\SVGRenderer;
|
|||
*/
|
||||
abstract class Chart implements Drawable
|
||||
{
|
||||
|
||||
/**
|
||||
* SVG renderer that handles
|
||||
*
|
||||
|
|
|
@ -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());
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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
|
@ -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();
|
Loading…
Reference in New Issue