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
2014-02-18 18:35:34 +01:00 · 2014-02-18 18:35:34 +01:00 · c17cd2df34
parent 9647c37516
commit c17cd2df34
7 changed files with 134 additions and 29 deletions
--- a/config/dashboard/dashboard.ini
+++ b/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 = ""
--- a/library/Icinga/Chart/Axis.php
+++ b/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 the  last label would overlap this label we shift the y axis a bit
-            if ($lastLabelEnd > $pos) {
-                $shift = ($shift + 5) % 10;
-            } else {
-                $shift = 0;
+            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->setAlignment(Text::ALIGN_MIDDLE)
-                ->setFontSize('1.8em');
+            $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));
--- a/library/Icinga/Chart/Graph/BarGraph.php
+++ b/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');
--- a/library/Icinga/Chart/GridChart.php
+++ b/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());
    }

--- a/library/Icinga/Chart/Legend.php
+++ b/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;

--- a/library/Icinga/Chart/Primitive/Text.php
+++ b/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-weight: normal; font-style: normal;'
+            . '; font-family: Verdana, serif'
+            . ';font-weight: ' . $this->fontWeight
+            . ';font-stretch: ' . $this->fontStretch
+            . '; font-style: normal;'
            .  'text-anchor: ' . $this->alignment
        );

--- a/modules/monitoring/application/controllers/ChartController.php
+++ b/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',
-                'color' => '#ffff00',
+                'label' => 'Warning',
+                '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