Merge branch 'bugfix/piechart-labels-stick-out-7022'

fixes #7022

library/Icinga/Chart/Inline/PieChart.php

@@ -18,11 +18,11 @@ class PieChart extends Inline
     public function render($output = true)
     {
         $pie = new PieChartRenderer();
+        $pie->alignTopLeft();
         $pie->disableLegend();
         $pie->drawPie(array(
             'data' => $this->data, 'colors' => $this->colors, 'labels' => $this->labels
         ));
-        $pie->setWidth($this->width)->setHeight($this->height);
         if ($output) {
             echo $pie->render();
         } else {

library/Icinga/Chart/PieChart.php

@@ -16,7 +16,7 @@ use Icinga\Chart\Render\LayoutBox;
 /**
  * Graphing component for rendering Pie Charts.
  *
- * See the graphs.md documentation for futher information about how to use this component
+ * See the graphs.md documentation for further information about how to use this component
  */
 class PieChart extends Chart
 {
@@ -51,46 +51,6 @@ 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
      *
@@ -111,10 +71,7 @@ class PieChart extends Chart
      */
     protected function build()
     {
-        $this->renderer = new SVGRenderer(
+        $this->renderer = new SVGRenderer(($this->type === self::STACKED) ? 1 : count($this->pies), 1);
-            $this->type === self::STACKED ? $this->width : count($this->pies) * $this->width,
-            $this->width
-        );
         foreach ($this->pies as &$pie) {
             $this->normalizeDataSet($pie);
         }
@@ -165,11 +122,16 @@ class PieChart extends Chart
      */
     public function toSvg(RenderContext $ctx)
     {
-        $outerBox = new Canvas('outerGraph', new LayoutBox(0, 0, 100, 100));
-        $innerBox = new Canvas('graph', new LayoutBox(0, 0, 100, 100));
         $labelBox = $ctx->getDocument()->createElement('g');
         if (!$this->noCaption) {
+            // Scale SVG to make room for captions
+            $outerBox = new Canvas('outerGraph', new LayoutBox(33, -5, 40, 40));
+            $innerBox = new Canvas('graph', new LayoutBox(0, 0, 100, 100));
             $innerBox->getLayout()->setPadding(10, 10, 10, 10);
+        } else {
+            $outerBox = new Canvas('outerGraph', new LayoutBox(1.5, -10, 124, 124));
+            $innerBox = new Canvas('graph', new LayoutBox(0, 0, 100, 100));
+            $innerBox->getLayout()->setPadding(0, 0, 0, 0);
         }
         $this->createContentClipBox($innerBox);
         $this->renderPies($innerBox, $labelBox);
@@ -337,3 +299,4 @@ class PieChart extends Chart
         $clipBox->addElement($rect);
     }
 }
+

library/Icinga/Chart/Primitive/PieSlice.php

@@ -32,7 +32,7 @@ class PieSlice extends Animatable implements Drawable
      *
      * @var float
      */
-    private $endRadian= 0;
+    private $endRadian = 0;
 
     /**
      * The x position of the pie slice's center
@@ -159,7 +159,7 @@ class PieSlice extends Animatable implements Drawable
         // Draw the handle
         $path = new Path(array($midX, $midY));
 
-        $midX += ($addOffset + $r/1.8) * ($midRadius > M_PI ? -1 : 1);
+        $midX += ($addOffset + $r/3) * ($midRadius > M_PI ? -1 : 1);
         $path->append(array($midX, $midY))->toAbsolute();
 
         $midX += intval($r/2 * sin(M_PI/9)) * ($midRadius > M_PI ? -1 : 1);
@@ -176,7 +176,7 @@ class PieSlice extends Animatable implements Drawable
 
         // Draw the text box
         $text = new Text($rel[0]+1.5, $rel[1], $this->caption);
-        $text->setFontSize('2.5em');
+        $text->setFontSize('5em');
         $text->setAlignment(($midRadius > M_PI ? Text::ALIGN_END : Text::ALIGN_START));
 
         $group->appendChild($path->toSvg($ctx));

library/Icinga/Chart/Render/RenderContext.php

@@ -132,7 +132,7 @@ class RenderContext
      * @param   int $x  The relative x coordinate
      * @param   int $y  The relative y coordinate
      *
-     * @return  array   An x,y tupel containing absolute coordinates
+     * @return  array   An x,y tuple containing absolute coordinates
      * @see     RenderContext::toRelative
      */
     public function toAbsolute($x, $y)

library/Icinga/Chart/Render/Rotator.php

@@ -1,10 +1,7 @@
 <?php
-/**
+// {{{ICINGA_LICENSE_HEADER}}}
- * Created by PhpStorm.
+// {{{ICINGA_LICENSE_HEADER}}}
- * User: mjentsch
+
- * Date: 22.07.14
- * Time: 10:17
- */
 
 namespace Icinga\Chart\Render;
 

library/Icinga/Chart/SVGRenderer.php

@@ -127,8 +127,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', $this->width . '%');
+        $svg->setAttribute('width', '100%');
-        $svg->setAttribute('height', $this->height . '%');
+        $svg->setAttribute('height', '100%');
         $svg->setAttribute(
             'viewBox',
             sprintf(

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

@@ -50,7 +50,7 @@ class InlinePie extends AbstractWidget
         sparkType="pie"></span>
     <noscript>
     <img class="inlinepie"
-        title="{title}" src="{url}" style="width: {width}px; height: {height}px; {style}"
+        title="{title}" src="{url}" style="position: relative; top: 10px; width: {width}px; height: {height}px; {style}"
         data-icinga-colors="{colors}" data-icinga-values="{data}"
     />
     </noscript>

modules/monitoring/application/controllers/ChartController.php

@@ -22,6 +22,11 @@ use Icinga\Chart\Unit\StaticAxis;
 
 class Monitoring_ChartController extends Controller
 {
+    public function init()
+    {
+        $this->view->compact = $this->_request->getParam('view') === 'compact';
+    }
+
     public function testAction()
     {
         $this->chart = new GridChart();
@@ -98,7 +103,7 @@ class Monitoring_ChartController extends Controller
         $this->view->height = intval($this->getParam('height', 500));
         $this->view->width = intval($this->getParam('width', 500));
         if (count($query) === 1) {
-            $this->drawGroupPie($query[0]);
+            $this->drawHostGroupPie($query[0]);
         } else {
             $this->drawHostGroupChart($query);
         }
@@ -123,8 +128,12 @@ class Monitoring_ChartController extends Controller
         $this->view->height = intval($this->getParam('height', 500));
         $this->view->width = intval($this->getParam('width', 500));
 
-        $this->drawServiceGroupChart($query);
 
+        if (count($query) === 1) {
+            $this->drawServiceGroupPie($query[0]);
+        } else {
+            $this->drawServiceGroupChart($query);
+        }
     }
 
     private function drawServiceGroupChart($query)
@@ -219,30 +228,11 @@ class Monitoring_ChartController extends Controller
         );
     }
 
-    private function drawGroupPie($query)
+    private function drawServiceGroupPie($query)
     {
         $this->view->chart = new PieChart();
         $this->view->chart->alignTopLeft();
-        if (isset($query->hosts_up)) {
+        $this->view->chart->drawPie(array(
-            $this->view->chart->drawPie(array(
-                'data' => array(
-                    (int) $query->hosts_up,
-                    (int) $query->hosts_down_handled,
-                    (int) $query->hosts_down_unhandled,
-                    (int) $query->hosts_unreachable_handled,
-                    (int) $query->hosts_unreachable_unhandled,
-                    (int) $query->hosts_pending
-                ),
-                'colors' => array('#44bb77', '#ff4444', '#ff0000', '#E066FF', '#f099FF', '#fefefe'),
-                'labels'=> array(
-                    (int) $query->hosts_up . ' Up Hosts',
-                    (int) $query->hosts_down_handled . t(' Down Hosts (Handled)'),
-                    (int) $query->hosts_down_unhandled . t(' Down Hosts (Unhandled)'),
-                    (int) $query->hosts_unreachable_handled . t(' Unreachable Hosts (Handled)'),
-                    (int) $query->hosts_unreachable_unhandled . t(' Unreachable Hosts (Unhandled)'),
-                    (int) $query->hosts_pending . t(' Pending Hosts')
-                )
-            ), array(
             'data' => array(
                 (int) $query->services_ok,
                 (int) $query->services_warning_unhandled,
@@ -263,8 +253,54 @@ class Monitoring_ChartController extends Controller
                 $query->services_unknown_handled . t(' Unreachable Services (Handled)'),
                 $query->services_unknown_unhandled . t(' Unreachable Services (Unhandled)'),
                 $query->services_pending . t(' Pending Services')
-              )
+            )
+        ));
+    }
+
+    private function drawHostGroupPie($query)
+    {
+        $this->view->chart = new PieChart();
+        $this->view->chart->alignTopLeft();
+        $this->view->chart->drawPie(array(
+            'data' => array(
+                (int) $query->hosts_up,
+                (int) $query->hosts_down_handled,
+                (int) $query->hosts_down_unhandled,
+                (int) $query->hosts_unreachable_handled,
+                (int) $query->hosts_unreachable_unhandled,
+                (int) $query->hosts_pending
+            ),
+            'colors' => array('#44bb77', '#ff4444', '#ff0000', '#E066FF', '#f099FF', '#fefefe'),
+            'labels'=> array(
+                (int) $query->hosts_up . ' Up Hosts',
+                (int) $query->hosts_down_handled . t(' Down Hosts (Handled)'),
+                (int) $query->hosts_down_unhandled . t(' Down Hosts (Unhandled)'),
+                (int) $query->hosts_unreachable_handled . t(' Unreachable Hosts (Handled)'),
+                (int) $query->hosts_unreachable_unhandled . t(' Unreachable Hosts (Unhandled)'),
+                (int) $query->hosts_pending . t(' Pending Hosts')
+            )
+        ), array(
+            'data' => array(
+                (int) $query->services_ok,
+                (int) $query->services_warning_unhandled,
+                (int) $query->services_warning_handled,
+                (int) $query->services_critical_unhandled,
+                (int) $query->services_critical_handled,
+                (int) $query->services_unknown_unhandled,
+                (int) $query->services_unknown_handled,
+                (int) $query->services_pending
+            ),
+            'colors' => array('#44bb77', '#ff4444', '#ff0000', '#ffff00', '#ffff33', '#E066FF', '#f099FF', '#fefefe'),
+            'labels'=> array(
+                $query->services_ok . ' Up Services',
+                $query->services_warning_handled . t(' Warning Services (Handled)'),
+                $query->services_warning_unhandled . t(' Warning Services (Unhandled)'),
+                $query->services_critical_handled . t(' Down Services (Handled)'),
+                $query->services_critical_unhandled . t(' Down Services (Unhandled)'),
+                $query->services_unknown_handled . t(' Unreachable Services (Handled)'),
+                $query->services_unknown_unhandled . t(' Unreachable Services (Unhandled)'),
+                $query->services_pending . t(' Pending Services')
+            )
         ));
-        }
     }
 }

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

@@ -34,7 +34,7 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
                     // TODO: Should we trust sprintf-style placeholders in perfdata titles?
                     $pieChart->setTooltipFormat('{{label}}: {{formatted}} ({{percent}}%)');
                 }
-                $pieChart->setStyle('margin: 0.2em 0.5em 0.2em 0.5em;');
+                // $pieChart->setStyle('margin: 0.2em 0.5em 0.2em 0.5em;');
                 $table[] = '<tr><th>' . $pieChart->render()
                     . htmlspecialchars($perfdata->getLabel())
                     . '</th><td> '

modules/monitoring/application/views/scripts/chart/hostgroup.phtml

@@ -1,6 +1,9 @@
 
-<div class="chart">
+<?php if (! $this->compact) { ?>
-<?=
+    <div class="svg-container-responsive">
-$chart->render();
+        <?= $chart->render(); ?>
-?>
+        <?= isset($chart2) ? $chart2->render() : ''; ?>
-</div>
+    </div>
+<?php } else { ?>
+    <?= $chart->render(); ?>
+<?php } ?>

modules/monitoring/application/views/scripts/chart/servicegroup.phtml

@@ -1,6 +1,8 @@
 
-<div class="chart">
+<?php if (! $this->compact) { ?>
-<?=
+    <div class="svg-container-responsive">
-$chart->render();
+        <?= $chart->render(); ?>
-?>
+    </div>
-</div>
+<?php } else { ?>
+    <?= $chart->render(); ?>
+<?php } ?>

public/css/icinga/widgets.less

@@ -88,7 +88,7 @@ ul.tree li {
 }
 
 ul.tree li .handle {
-  background-image: url('../img/tree/tree-minus.gif'); 
+  background-image: url('../img/tree/tree-minus.gif');
   background-repeat: no-repeat;
   display: inline-block;
   position: absolute;
@@ -101,7 +101,7 @@ ul.tree li .handle {
 }
 
 ul.tree li.collapsed > .handle {
-  background-image: url('../img/tree/tree-plus.gif'); 
+  background-image: url('../img/tree/tree-plus.gif');
 }
 
 ul.tree li.collapsed > ul {
@@ -110,7 +110,7 @@ ul.tree li.collapsed > ul {
 
 ul.tree li::before, ul.tree li::after {
   content: '';
-  position: absolute; 
+  position: absolute;
   right: auto;
   left: -0.2em;
   border-color: #aaa;
@@ -122,7 +122,7 @@ ul.tree li::before, ul.tree li::after {
 ul.tree li::before {
   border-left-width: 1px;
   top: 0;
-  width: 1em; 
+  width: 1em;
   height: 100%;
   bottom: 1em;
 }
@@ -175,6 +175,7 @@ ul.tree li a.error:hover {
 }
 
 /* charts should grow as much as possible but never beyond the current viewport's size */
-div.chart {
+.svg-container-responsive {
-  height: 90vh;
+  padding: 1.5em;
+  height: 80vh;
 }