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

@@ -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;
     }
 

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;
     }
 }

library/Icinga/Chart/Graph/Tooltip.php

@@ -66,7 +66,7 @@ class Tooltip
      */
     public function __construct (
         $data = array(),
-        $format = '<b>{title}</b></b><br/> {value} of {sum} {label}'
+        $format = '<b>{title}</b>: {value} {label}'
     ) {
         $this->data = array_merge($this->data, $data);
         $this->defaultFormat = $format;

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;

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

@@ -44,7 +44,6 @@ EOD;
 </noscript>
 EOD;
 
-
     /**
      * @var Url
      */

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' => '<b>{title}:</b> {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('<b>{title}:</b> {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('<b>{title}:</b> {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' => '<b>{title}:</b> {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' => '<b>{title}:</b> {value} {label}'
             )
         );
 

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 });