diff --git a/config/dashboard/dashboard.ini b/config/dashboard/dashboard.ini index 86af19fe6..a76744836 100644 --- 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 = "" diff --git a/library/Icinga/Chart/Axis.php b/library/Icinga/Chart/Axis.php index 07e5a5a9a..264179ed6 100644 --- 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 + * + * + * + * @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)); diff --git a/library/Icinga/Chart/Graph/BarGraph.php b/library/Icinga/Chart/Graph/BarGraph.php index 39f8315b0..c29d13326 100644 --- 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'); diff --git a/library/Icinga/Chart/GridChart.php b/library/Icinga/Chart/GridChart.php index fd2d51992..959f9ea0f 100644 --- 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()); } diff --git a/library/Icinga/Chart/Legend.php b/library/Icinga/Chart/Legend.php index 8c46464d1..a14648928 100644 --- 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; diff --git a/library/Icinga/Chart/Primitive/Text.php b/library/Icinga/Chart/Primitive/Text.php index 0ea82fce8..e77cab391 100644 --- 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 ); diff --git a/modules/monitoring/application/controllers/ChartController.php b/modules/monitoring/application/controllers/ChartController.php index 867365f32..590097ca3 100644 --- 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