Render <title> tags for line and bar charts instead of tipsy titles

This commit is contained in:
Johannes Meyer 2019-07-16 11:26:52 +02:00
parent a80219071c
commit eac3a106ad
3 changed files with 11 additions and 27 deletions

View File

@ -142,7 +142,6 @@ class BarGraph extends Styleable implements Drawable
// draw actual bar // draw actual bar
$bar = $this->drawSingleBar($point, $this->fill, $this->strokeWidth)->toSvg($ctx); $bar = $this->drawSingleBar($point, $this->fill, $this->strokeWidth)->toSvg($ctx);
$bar->setAttribute('class', 'chart-data');
if (isset($this->tooltips[$x])) { if (isset($this->tooltips[$x])) {
$data = array( $data = array(
'label' => isset($this->graphs[$this->order]['label']) ? 'label' => isset($this->graphs[$this->order]['label']) ?
@ -152,14 +151,9 @@ class BarGraph extends Styleable implements Drawable
); );
$format = isset($this->graphs[$this->order]['tooltip']) $format = isset($this->graphs[$this->order]['tooltip'])
? $this->graphs[$this->order]['tooltip'] : null; ? $this->graphs[$this->order]['tooltip'] : null;
$bar->setAttribute( $title = $ctx->getDocument()->createElement('title');
'title', $title->textContent = $this->tooltips[$x]->renderNoHtml($this->order, $data, $format);
$this->tooltips[$x]->renderNoHtml($this->order, $data, $format) $bar->appendChild($title);
);
$bar->setAttribute(
'data-title-rich',
$this->tooltips[$x]->render($this->order, $data, $format)
);
} }
$group->appendChild($bar); $group->appendChild($bar);
} }

View File

@ -170,11 +170,10 @@ class LineGraph extends Styleable implements Drawable
} }
// Draw invisible circle for tooltip hovering // Draw invisible circle for tooltip hovering
if (isset($this->tooltips[$x])) {
$invisible = new Circle($point[0], $point[1], 20); $invisible = new Circle($point[0], $point[1], 20);
$invisible->setFill($this->strokeColor); $invisible->setFill($this->strokeColor);
$invisible->setAdditionalStyle('opacity: 0.0;'); $invisible->setAdditionalStyle('opacity: 0.0;');
$invisible->setAttribute('class', 'chart-data');
if (isset($this->tooltips[$x])) {
$data = array( $data = array(
'label' => isset($this->graphs[$this->order]['label']) ? 'label' => isset($this->graphs[$this->order]['label']) ?
strtolower($this->graphs[$this->order]['label']) : '', strtolower($this->graphs[$this->order]['label']) : '',
@ -183,16 +182,12 @@ class LineGraph extends Styleable implements Drawable
); );
$format = isset($this->graphs[$this->order]['tooltip']) $format = isset($this->graphs[$this->order]['tooltip'])
? $this->graphs[$this->order]['tooltip'] : null; ? $this->graphs[$this->order]['tooltip'] : null;
$invisible->setAttribute( $title = $ctx->getDocument()->createElement('title');
'title', $title->textContent = $this->tooltips[$x]->renderNoHtml($this->order, $data, $format);
$this->tooltips[$x]->renderNoHtml($this->order, $data, $format) $invisibleRendered = $invisible->toSvg($ctx);
); $invisibleRendered->appendChild($title);
$invisible->setAttribute( $group->appendChild($invisibleRendered);
'data-title-rich',
$this->tooltips[$x]->render($this->order, $data, $format)
);
} }
$group->appendChild($invisible->toSvg($ctx));
} }
return $group; return $group;

View File

@ -316,11 +316,6 @@ ul.tree li a.error:hover {
color: @color-critical; color: @color-critical;
} }
/* Add hover effect to chart data */
.chart-data:hover {
opacity: 0.85;
}
/* charts should grow as much as possible but never beyond the current viewport's size */ /* charts should grow as much as possible but never beyond the current viewport's size */
.svg-container-responsive { .svg-container-responsive {
padding: 1.5em; padding: 1.5em;