Fix layout of GridChart

Introduce diagonal layout for x-axis, use bigger fonts and set the bar-rendering
to use a bigger default-width

fixes #5672

config/dashboard/dashboard.ini

@@ -1,14 +1,14 @@
 [Landing]
 title = "Landing page"
 [Landing.Hostgroups]
-url = "monitoring/chart/hostgroup?height=280&width=500"
+url = "monitoring/chart/hostgroup?height=400&width=500"
 height = "280"
 width = "500"
 height = ""
 width = ""
 
 [Landing.Servicegroups]
-url = "monitoring/chart/servicegroup?height=280&width=500"
+url = "monitoring/chart/servicegroup?height=360&width=450"
 height = "280"
 width = "500"
 height = ""

library/Icinga/Chart/Axis.php

@@ -49,6 +49,16 @@ use \Icinga\Chart\Unit\LinearUnit;
  */
 class Axis implements Drawable
 {
+    /**
+     * Draw the label text horizontally
+     */
+    const LABEL_ROTATE_HORIZONTAL = 'normal';
+
+    /**
+     * Draw the label text diagonally
+     */
+    const LABEL_ROTATE_DIAGONAL = 'diagonal';
+
     /**
      * Whether to draw the horizontal lines for the background grid
      *
@@ -91,6 +101,26 @@ class Axis implements Drawable
      */
     private $yUnit = null;
 
+    /**
+     * If the displayed labels should be aligned horizontally or diagonally
+     */
+    private $labelRotationStyle = self::LABEL_ROTATE_DIAGONAL;
+
+    /**
+     * Set the label rotation style for the horizontal axis
+     *
+     * <ul>
+     *   <li><b>LABEL_ROTATE_HORIZONTAL</b>: Labels will be displayed horizontally </li>
+     *   <li><b>LABEL_ROTATE_DIAGONAL</b>: Labels will be rotated by 45° </li>
+     * </ul>
+     *
+     * @param $style    The rotation mode
+     */
+    public function setHorizontalLabelRotationStyle($style)
+    {
+        $this->labelRotationStyle = $style;
+    }
+
     /**
      * Inform the axis about an added dataset
      *
@@ -163,21 +193,32 @@ class Axis implements Drawable
         $shift = 0;
 
         foreach ($this->xUnit as $label => $pos) {
+            if ($this->labelRotationStyle === self::LABEL_ROTATE_HORIZONTAL) {
                 // If the  last label would overlap this label we shift the y axis a bit
                 if ($lastLabelEnd > $pos) {
                     $shift = ($shift + 5) % 10;
                 } else {
                     $shift = 0;
                 }
+            }
 
             $tick = new Line($pos, 100, $pos, 102);
             $group->appendChild($tick->toSvg($ctx));
 
-            $labelField = new Text($pos + 0.5, 105 + $shift, $label);
+            $labelField = new Text($pos + 0.5, ($this->xLabel ? 107 : 105) + $shift, $label);
+            if ($this->labelRotationStyle === self::LABEL_ROTATE_HORIZONTAL) {
                 $labelField->setAlignment(Text::ALIGN_MIDDLE)
                     ->setFontSize('1.8em');
+            } else {
+                $labelField->setFontSize('2.5em');
+            }
 
-            $group->appendChild($labelField->toSvg($ctx));
+            $labelField = $labelField->toSvg($ctx);
+
+            if ($this->labelRotationStyle === self::LABEL_ROTATE_DIAGONAL) {
+                $labelField = $this->rotate($ctx, $labelField, 45);
+            }
+            $group->appendChild($labelField);
 
             if ($this->drawYGrid) {
                 $bgLine = new Line($pos, 0, $pos, 100);
@@ -185,18 +226,47 @@ class Axis implements Drawable
                     ->setStrokeColor('#232');
                 $group->appendChild($bgLine->toSvg($ctx));
             }
-            $lastLabelEnd = $pos + strlen($label);
+            $lastLabelEnd = $pos + strlen($label) * 1.2;
         }
 
         // render the label for this axis
         if ($this->xLabel) {
-            $axisLabel = new Text(50, 115, $this->xLabel);
+            $axisLabel = new Text(50, 104, $this->xLabel);
             $axisLabel->setFontSize('2em')
+                ->setFontWeight('bold')
                 ->setAlignment(Text::ALIGN_MIDDLE);
             $group->appendChild($axisLabel->toSvg($ctx));
         }
     }
 
+    /**
+     * Rotate the given element.
+     *
+     * @param RenderContext $ctx        The rendering context
+     * @param DOMElement    $el         The element to rotate
+     * @param               $degrees    The rotation degrees
+     *
+     * @return DOMElement
+     */
+    private function rotate(RenderContext $ctx, DOMElement $el, $degrees)
+    {
+        // Create a box containing the rotated element relative to the original text position
+        $container = $ctx->getDocument()->createElement('g');
+        $x = $el->getAttribute('x');
+        $y = $el->getAttribute('y');
+        $container->setAttribute('transform', 'translate(' . $x . ',' . $y . ')');
+        $el->removeAttribute('x');
+        $el->removeAttribute('y');
+
+        // Create a rotated box containing the text
+        $rotate = $ctx->getDocument()->createElement('g');
+        $rotate->setAttribute('transform', 'rotate(' . $degrees . ')');
+        $rotate->appendChild($el);
+
+        $container->appendChild($rotate);
+        return $container;
+    }
+
     /**
      * Render the vertical axis
      *
@@ -228,9 +298,10 @@ class Axis implements Drawable
         }
 
         if ($this->yLabel) {
-            $axisLabel = new Text(-10, 50, $this->yLabel);
+            $axisLabel = new Text(-8, 50, $this->yLabel);
             $axisLabel->setFontSize('2em')
                 ->setAdditionalStyle(Text::ORIENTATION_VERTICAL)
+                ->setFontWeight('bold')
                 ->setAlignment(Text::ALIGN_MIDDLE);
 
             $group->appendChild($axisLabel->toSvg($ctx));

library/Icinga/Chart/Graph/BarGraph.php

@@ -41,6 +41,13 @@ use \Icinga\Chart\Render\RenderContext;
  */
 class BarGraph extends Styleable implements Drawable
 {
+    /**
+     * The width of the bars.
+     *
+     * @var int
+     */
+    private $barWidth = 4;
+
     /**
      * The dataset to use for this bar graph
      *
@@ -87,7 +94,7 @@ class BarGraph extends Styleable implements Drawable
         $group = $doc->createElement('g');
         $idx = 0;
         foreach ($this->dataSet as $point) {
-            $rect = new Rect($point[0]-1, $point[1], 2, 100- $point[1]);
+            $rect = new Rect($point[0]-1, $point[1], $this->barWidth, 100- $point[1]);
             $rect->setFill($this->fill);
             $rect->setStrokeWidth($this->strokeWidth);
             $rect->setStrokeColor('black');

library/Icinga/Chart/GridChart.php

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

library/Icinga/Chart/Legend.php

@@ -87,7 +87,7 @@ class Legend implements Drawable
      */
     public function toSvg(RenderContext $ctx)
     {
-        $outer = new Canvas('legend', new LayoutBox(0, 90, 100, 100));
+        $outer = new Canvas('legend', new LayoutBox(0, 0, 100, 100));
         $outer->getLayout()->setPadding(2, 2, 2, 2);
         $nrOfColumns = 4;
 

library/Icinga/Chart/Primitive/Text.php

@@ -92,6 +92,13 @@ class Text extends Styleable implements Drawable
      */
     private $fontSize = '1.5em';
 
+    /**
+     * The weight of the font
+     *
+     * @var string
+     */
+    private $fontWeight = 'normal';
+
     /**
      * The default fill color
      *
@@ -106,6 +113,11 @@ class Text extends Styleable implements Drawable
      */
     private $alignment = self::ALIGN_START;
 
+    /**
+     * Set the font-stretch property of the text
+     */
+    private $fontStretch = 'ultra-condensed';
+
     /**
      * Construct a new text drawable
      *
@@ -148,6 +160,19 @@ class Text extends Styleable implements Drawable
         return $this;
     }
 
+    /**
+     * Set the weight of the current font
+     *
+     * @param string $weight    The weight of the string
+     *
+     * @return self             Fluid interface
+     */
+    public function setFontWeight($weight)
+    {
+        $this->fontWeight = $weight;
+        return $this;
+    }
+
     /**
      * Create the SVG representation from this Drawable
      *
@@ -164,8 +189,10 @@ class Text extends Styleable implements Drawable
             'style',
             $this->getStyle()
             . ';font-size:' . $this->fontSize
-            . '; font-family: Verdana, serif;'
+            . '; font-family: Verdana, serif'
-            . 'font-weight: normal; font-style: normal;'
+            . ';font-weight: ' . $this->fontWeight
+            . ';font-stretch: ' . $this->fontStretch
+            . '; font-style: normal;'
             .  'text-anchor: ' . $this->alignment
         );
 

modules/monitoring/application/controllers/ChartController.php

@@ -190,29 +190,29 @@ class Monitoring_ChartController extends ActionController
             $unknownBars[] = array($servicegroup->servicegroup, $servicegroup->services_unknown_unhandled);
         }
         $this->view->chart = new GridChart();
-        $this->view->chart->setAxisLabel("X axis label", "Y axis label")
+        $this->view->chart->setAxisLabel('', 'Services')
             ->setXAxis(new \Icinga\Chart\Unit\StaticAxis());
         $this->view->chart->drawBars(
             array(
-                'label' => 'Services ok',
+                'label' => 'Ok',
                 'color' => '#00ff00',
                 'stack' => 'stack1',
                 'data'  => $okBars
             ),
             array(
-                'label' => 'Services warning',
+                'label' => 'Warning',
-                'color' => '#ffff00',
+                'color' => 'ffff00',
                 'stack' => 'stack1',
                 'data'  => $warningBars
             ),
             array(
-                'label' => 'Services critical',
+                'label' => 'Critical',
                 'color' => '#ff0000',
                 'stack' => 'stack1',
                 'data'  => $critBars
             ),
             array(
-                'label' => 'Services unknown',
+                'label' => 'Unknown',
                 'color' => '#E066FF',
                 'stack' => 'stack1',
                 'data'  => $unknownBars
@@ -231,23 +231,23 @@ class Monitoring_ChartController extends ActionController
             $unreachableBars[] = array($hostgroup->hostgroup, $hostgroup->hosts_unreachable_unhandled);
         }
         $this->view->chart = new GridChart();
-        $this->view->chart->setAxisLabel("X axis label", "Y axis label")
+        $this->view->chart->setAxisLabel('', 'Hosts')
             ->setXAxis(new \Icinga\Chart\Unit\StaticAxis());
         $this->view->chart->drawBars(
             array(
-                'label' => 'Hosts up',
+                'label' => 'Up',
                 'color' => '#00ff00',
                 'stack' => 'stack1',
                 'data'  => $upBars
             ),
             array(
-                'label' => 'Hosts down',
+                'label' => 'Down',
                 'color' => '#ff0000',
                 'stack' => 'stack1',
                 'data'  => $downBars
             ),
             array(
-                'label' => 'Hosts unreachable',
+                'label' => 'Unreachable',
                 'color' => '#E066FF',
                 'stack' => 'stack1',
                 'data'  => $unreachableBars