From 2992bf3445a817f8ddf2b2f61b3e64fa614a4764 Mon Sep 17 00:00:00 2001 From: Matthias Jentsch Date: Wed, 18 Feb 2015 12:55:33 +0100 Subject: [PATCH] Always display tooltips in all charts Make information about data types available to colorblind, when hovering over the displayed data set fixes #8364 --- library/Icinga/Chart/Graph/BarGraph.php | 6 ++ library/Icinga/Chart/Graph/LineGraph.php | 62 ++++++++++++++++--- library/Icinga/Chart/Graph/Tooltip.php | 2 +- library/Icinga/Chart/GridChart.php | 7 ++- library/Icinga/Web/Widget/Chart/InlinePie.php | 1 - .../controllers/AlertsummaryController.php | 15 +++-- public/js/icinga/behavior/tooltip.js | 2 +- 7 files changed, 78 insertions(+), 17 deletions(-) diff --git a/library/Icinga/Chart/Graph/BarGraph.php b/library/Icinga/Chart/Graph/BarGraph.php index 2d20f8f22..dacc12878 100644 --- a/library/Icinga/Chart/Graph/BarGraph.php +++ b/library/Icinga/Chart/Graph/BarGraph.php @@ -65,7 +65,13 @@ class BarGraph extends Styleable implements Drawable ) { $this->order = $order; $this->dataSet = $dataSet; + $this->tooltips = $tooltips; + foreach ($this->tooltips as $value) { + $ts[] = $value; + } + $this->tooltips = $ts; + $this->graphs = $graphs; } diff --git a/library/Icinga/Chart/Graph/LineGraph.php b/library/Icinga/Chart/Graph/LineGraph.php index 630223968..7b831d625 100644 --- a/library/Icinga/Chart/Graph/LineGraph.php +++ b/library/Icinga/Chart/Graph/LineGraph.php @@ -38,6 +38,13 @@ class LineGraph extends Styleable implements Drawable */ private $isDiscrete = false; + /** + * The tooltips + * + * @var + */ + private $tooltips; + /** * The default stroke width * @var int @@ -56,10 +63,22 @@ class LineGraph extends Styleable implements Drawable * * @param array $dataset An array of [x, y] arrays to display */ - public function __construct(array $dataset) - { + public function __construct( + array $dataset, + array &$graphs, + $order, + array $tooltips = null + ) { usort($dataset, array($this, 'sortByX')); $this->dataset = $dataset; + $this->graphs = $graphs; + + $this->tooltips = $tooltips; + foreach ($this->tooltips as $value) { + $ts[] = $value; + } + $this->tooltips = $ts; + $this->order = $order; } /** @@ -142,14 +161,41 @@ class LineGraph extends Styleable implements Drawable $path->setAdditionalStyle('clip-path: url(#clip);'); $path->setId($this->id); $group = $path->toSvg($ctx); - if ($this->showDataPoints === true) { - foreach ($this->dataset as $point) { - $dot = new Circle($point[0], $point[1], $this->dotWith); - $dot->setFill($this->strokeColor); - $group->appendChild($dot->toSvg($ctx)); + foreach ($this->dataset as $x => $point) { + + if ($this->showDataPoints === true) { + $dot = new Circle($point[0], $point[1], $this->dotWith); + $dot->setFill($this->strokeColor); + $group->appendChild($dot->toSvg($ctx)); + } + + // Draw invisible circle for tooltip hovering + $invisible = new Circle($point[0], $point[1], 20); + $invisible->setFill($this->strokeColor); + $invisible->setAdditionalStyle('opacity: 0.0;'); + $invisible->setAttribute('class', 'chart-data'); + if (isset($this->tooltips[$x])) { + $data = array( + 'label' => isset($this->graphs[$this->order]['label']) ? + strtolower($this->graphs[$this->order]['label']) : '', + 'color' => isset($this->graphs[$this->order]['color']) ? + strtolower($this->graphs[$this->order]['color']) : '#fff' + ); + $format = isset($this->graphs[$this->order]['tooltip']) + ? $this->graphs[$this->order]['tooltip'] : null; + $invisible->setAttribute( + 'title', + $this->tooltips[$x]->renderNoHtml($this->order, $data, $format) + ); + $invisible->setAttribute( + 'data-title-rich', + $this->tooltips[$x]->render($this->order, $data, $format) + ); + } + $group->appendChild($invisible->toSvg($ctx)); } - } + return $group; } } diff --git a/library/Icinga/Chart/Graph/Tooltip.php b/library/Icinga/Chart/Graph/Tooltip.php index 5fa5c3608..8b2efa613 100644 --- a/library/Icinga/Chart/Graph/Tooltip.php +++ b/library/Icinga/Chart/Graph/Tooltip.php @@ -66,7 +66,7 @@ class Tooltip */ public function __construct ( $data = array(), - $format = '{title}
{value} of {sum} {label}' + $format = '{title}: {value} {label}' ) { $this->data = array_merge($this->data, $data); $this->defaultFormat = $format; diff --git a/library/Icinga/Chart/GridChart.php b/library/Icinga/Chart/GridChart.php index 20ebb969e..9f867ac66 100644 --- a/library/Icinga/Chart/GridChart.php +++ b/library/Icinga/Chart/GridChart.php @@ -402,7 +402,12 @@ class GridChart extends Chart ); break; case self::TYPE_LINE: - $graphObj = new LineGraph($axis->transform($graph['data'])); + $graphObj = new LineGraph( + $axis->transform($graph['data']), + $graphs, + $dataset, + $this->tooltips + ); break; default: continue; diff --git a/library/Icinga/Web/Widget/Chart/InlinePie.php b/library/Icinga/Web/Widget/Chart/InlinePie.php index 341322714..0bddc906d 100644 --- a/library/Icinga/Web/Widget/Chart/InlinePie.php +++ b/library/Icinga/Web/Widget/Chart/InlinePie.php @@ -44,7 +44,6 @@ EOD; EOD; - /** * @var Url */ diff --git a/modules/monitoring/application/controllers/AlertsummaryController.php b/modules/monitoring/application/controllers/AlertsummaryController.php index 252a67091..cd2626472 100644 --- a/modules/monitoring/application/controllers/AlertsummaryController.php +++ b/modules/monitoring/application/controllers/AlertsummaryController.php @@ -446,7 +446,8 @@ class Monitoring_AlertsummaryController extends Controller 'label' => $this->translate('Notifications'), 'color' => '#07C0D9', 'data' => $notifications, - 'showPoints' => true + 'showPoints' => true, + 'tooltip' => '{title}: {value} {label}' ) ); @@ -455,7 +456,8 @@ class Monitoring_AlertsummaryController extends Controller 'label' => $this->translate('Avg (min)'), 'color' => '#ffaa44', 'data' => $dAvg, - 'showPoints' => true + 'showPoints' => true, + 'tooltip' => t('{title}: {value}m min. reaction time') ) ); @@ -464,7 +466,8 @@ class Monitoring_AlertsummaryController extends Controller 'label' => $this->translate('Max (min)'), 'color' => '#ff5566', 'data' => $dMax, - 'showPoints' => true + 'showPoints' => true, + 'tooltip' => t('{title}: {value}m max. reaction time') ) ); @@ -493,7 +496,8 @@ class Monitoring_AlertsummaryController extends Controller 'label' => $this->translate('Notifications'), 'color' => '#07C0D9', 'data' => $this->notificationData, - 'showPoints' => true + 'showPoints' => true, + 'tooltip' => '{title}: {value} {label}' ) ); @@ -502,7 +506,8 @@ class Monitoring_AlertsummaryController extends Controller 'label' => $this->translate('Defects'), 'color' => '#ff5566', 'data' => $this->problemData, - 'showPoints' => true + 'showPoints' => true, + 'tooltip' => '{title}: {value} {label}' ) ); diff --git a/public/js/icinga/behavior/tooltip.js b/public/js/icinga/behavior/tooltip.js index b08b1f3c1..c9a64257f 100644 --- a/public/js/icinga/behavior/tooltip.js +++ b/public/js/icinga/behavior/tooltip.js @@ -27,7 +27,7 @@ var $el = $(this); $el.attr('title', $el.data('title-rich') || $el.attr('title')); }); - $('svg rect.chart-data[title]', el).tipsy({ gravity: 'se', html: true }); + $('svg .chart-data', el).tipsy({ gravity: 'se', html: true }); $('.historycolorgrid a[title]', el).tipsy({ gravity: 's', offset: 2 }); $('img.icon[title]', el).tipsy({ gravity: $.fn.tipsy.autoNS, offset: 2 }); $('[title]', el).tipsy({ gravity: $.fn.tipsy.autoNS, delayIn: 500 });