tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Always display tooltips in all charts 

Make information about data types available to colorblind, when hovering
over the displayed data set

fixes #8364
This commit is contained in:
Matthias Jentsch 2015-02-18 12:55:33 +01:00
parent 28dfbe7e55
commit 2992bf3445
7 changed files with 78 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
library/Icinga/Chart/Graph/BarGraph.php
View File

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

54
library/Icinga/Chart/Graph/LineGraph.php
View File

@ -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);
foreach ($this->dataset as $x => $point) {
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));
}
// 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;
}
}

2
library/Icinga/Chart/Graph/Tooltip.php
View File

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

7
library/Icinga/Chart/GridChart.php
View File

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

1
library/Icinga/Web/Widget/Chart/InlinePie.php
View File

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

15
modules/monitoring/application/controllers/AlertsummaryController.php
View File

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

2
public/js/icinga/behavior/tooltip.js
View File

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