refs #3332 Transitions:

* tooltip on title showing share of all pageviews and date range
* metrics with value 0 are greyed out in the center box
* adjusted dimensions for wider popover
* re-clicking the current menu item reloads the page again
* transitions is available on entry and exit pages as well

git-svn-id: http://dev.piwik.org/svn/trunk@7050 59fd770c-687e-43c8-a1e3-f5a4ff64c105

4 files changed, 57 insertions, 21 deletions

diff --git a/plugins/Transitions/API.php b/plugins/Transitions/API.php
index 1e11063b19..ceb0438514 100644
--- a/plugins/Transitions/API.php
+++ b/plugins/Transitions/API.php
@@ -38,7 +38,10 @@ class Piwik_Transitions_API
 		
 		$pageUrl = Piwik_Common::unsanitizeInputValue($pageUrl);
 		
-		$report = array();
+		$report = array(
+			'generalText' => '',
+		);
+		
 		$this->addMainPageMetricsToReport($report, $pageUrl, $idSite, $period, $date, $segment);
 		$this->addLiveTransitionsDataToReport($report, $pageUrl, $idSite, $period, $date, $segment, $limitBeforeGrouping);
 		
@@ -56,6 +59,17 @@ class Piwik_Transitions_API
 			}
 		}
 		
+		// add general text
+		$allPageviews = Piwik_Actions_API::getInstance()->get($idSite, $period, $date, $segment, 'nb_pageviews');
+		$allPageviewsInt = intval($allPageviews->getFirstRow()->getColumn('nb_pageviews'));
+		$pageviews = $report['pageMetrics']['pageviews'];
+		$pageviewsShare = round($pageviews / $allPageviewsInt, 1).'%';
+		
+		$prettyDate = Piwik_Period_Day::advancedFactory($period, $date)->getLocalizedShortString();
+		
+		$report['generalText'] = htmlentities(Piwik_Translate('Transitions_ShareOfAllPageviews', array($pageviews, $pageviewsShare)))
+				. '<br /><i>' . htmlentities(Piwik_Translate('General_DateRange').' '.$prettyDate) . '</i>';
+		
 		return $report;
 	}
 
diff --git a/plugins/Transitions/Controller.php b/plugins/Transitions/Controller.php
index 1a32b9ef9b..61a85908fa 100644
--- a/plugins/Transitions/Controller.php
+++ b/plugins/Transitions/Controller.php
@@ -51,7 +51,7 @@ class Piwik_Transitions_Controller extends Piwik_Controller
 	 * (object Piwik_Transitions_Translations)
 	 */
 	private static $jsTranslations = array(
-		'XOfY' => 'Transitions_XOfY',
+		'XOfY' => 'Transitions_XOutOfYVisits',
 		'XOfAllPageviews' => 'Transitions_XOfAllPageviews'
 	);
 
diff --git a/plugins/Transitions/templates/transitions.css b/plugins/Transitions/templates/transitions.css
index 50a9d2cd1e..b49d3aee9b 100644
--- a/plugins/Transitions/templates/transitions.css
+++ b/plugins/Transitions/templates/transitions.css
@@ -4,6 +4,7 @@
 	z-index: 1500;
 	height: 550px;
 	text-align: left;
+	margin-left: 7px;
 }
 
 #Transitions_Canvas_Background {
@@ -29,7 +30,7 @@
 }
 
 #Transitions_CenterBox {
-	margin: 60px 0 0 320px;
+	margin: 60px 0 0 345px;
 	width: 208px;
 	height: 344px;
 	background: #f7f7f7;
@@ -85,7 +86,7 @@
 }
 
 #Transitions_Loops {
-	margin: 435px 0 0 320px;
+	margin: 435px 0 0 346px;
 	width: 208px;
 	text-align: center;
 	line-height: 25px;
@@ -116,6 +117,10 @@ span.Transitions_Metric {
 	cursor: default;
 }
 
+.Transitions_Value0 {
+	color: #666;
+}
+
 .Transitions_TitleOfOpenGroup {
 	font-size: 12px;
 	color: #255792;
@@ -124,7 +129,7 @@ span.Transitions_Metric {
 
 .Transitions_BoxTextLeft,
 .Transitions_BoxTextRight {
-	width: 130px;
+	width: 165px;
 	height: 42px;
 	overflow: hidden;
 }
@@ -141,7 +146,7 @@ span.Transitions_Metric {
 
 .Transitions_BoxTextLeft.Transitions_HasBackground {
 	background-position: 0 1px;
-	width: 150px;
+	width: 175px;
 }
 .Transitions_BoxTextLeft.Transitions_HasBackground span {
 	display: block;
@@ -160,8 +165,8 @@ span.Transitions_Metric {
 .Transitions_CurveTextRight {
 	color: #255792;
 	font-weight: bold;
-	width: 28px;
-	text-align: right;
+	width: 34px;
+	text-align: center;
 	cursor: default;
 }
 
diff --git a/plugins/Transitions/templates/transitions.js b/plugins/Transitions/templates/transitions.js
index 845492e44e..4522771150 100644
--- a/plugins/Transitions/templates/transitions.js
+++ b/plugins/Transitions/templates/transitions.js
@@ -45,7 +45,8 @@ DataTable_RowActions_Registry.register({
 	
 	isAvailable: function(dataTableParams, tr) {
 		return dataTableParams.module == 'Actions'
-			&& dataTableParams.action == 'getPageUrls'
+			&& (dataTableParams.action == 'getPageUrls' || dataTableParams.action == 'getEntryPageUrls'
+					|| dataTableParams.action == 'getExitPageUrls')
 			&& tr.find('> td:first > a').size() > 0;
 	}
 
@@ -93,15 +94,22 @@ Piwik_Transitions.prototype.showPopover = function() {
 
 		var canvasDom = self.popover.find('#Transitions_Canvas')[0];
 		var canvasBgDom = self.popover.find('#Transitions_Canvas_Background')[0];
-		self.canvas = new Piwik_Transitions_Canvas(canvasDom, canvasBgDom, 850, 550);
+		self.canvas = new Piwik_Transitions_Canvas(canvasDom, canvasBgDom, 900, 550);
 
 		self.centerBox = self.popover.find('#Transitions_CenterBox');
 
 		var link = Piwik_Transitions_Util.shortenUrl(self.link, true);
 		var title = self.centerBox.find('h2').html(Piwik_Transitions_Util.addBreakpoints(link));
+		
 		title.click(function() {
 			self.openExternalUrl(self.link);
 		}).css('cursor', 'pointer');
+		
+		title.add(self.popover.find('p.Transitions_Pageviews')).hover(function() {
+			Piwik_Tooltip.show(self.model.generalText, 'Transitions_Tooltip_Small');
+		}, function() {
+			Piwik_Tooltip.hide();
+		});
 
 		self.model.loadData(self.link, function() {
 			self.render();
@@ -180,14 +188,19 @@ Piwik_Transitions.prototype.renderCenterBox = function() {
 	var showMetric = function(cssClass, modelProperty, highlightCurveOnSide) {
 		var el = box.find('.Transitions_' + cssClass);
 		Piwik_Transitions_Util.replacePlaceholderInHtml(el, self.model[modelProperty]);
-		self.addTooltipShowingPercentageOfAllPageviews(el, modelProperty);
-		if (highlightCurveOnSide && self.model[modelProperty] > 0) {
+		
+		if (self.model[modelProperty] == 0) {
+			el.addClass('Transitions_Value0');
+		} else {
+			self.addTooltipShowingPercentageOfAllPageviews(el, modelProperty);
 			var groupName = cssClass.charAt(0).toLowerCase() + cssClass.substr(1);
-			el.hover(function() {
-				self.highlightGroup(groupName, highlightCurveOnSide);
-			}, function() {
-				self.unHighlightGroup(groupName, highlightCurveOnSide);
-			});
+			if (groupName != 'bounces') {
+				el.hover(function() {
+					self.highlightGroup(groupName, highlightCurveOnSide);
+				}, function() {
+					self.unHighlightGroup(groupName, highlightCurveOnSide);
+				});
+			}
 		}
 	};
 
@@ -549,13 +562,13 @@ function Piwik_Transitions_Canvas(canvasDom, canvasBgDom, width, height) {
 	this.rightCurvePositionY = this.originalCurvePositionY;
 
 	/** Width of the rectangular box */
-	this.boxWidth = 140;
+	this.boxWidth = 175;
 	/** Height of the rectangular box */
 	this.boxHeight = 53;
 	/** Height of a smaller rectangular box */
 	this.smallBoxHeight = 30;
 	/** Width of the curve that connects the boxes to the center */
-	this.curveWidth = 180;
+	this.curveWidth = 170;
 	/** Line-height of the text */
 	this.lineHeight = 14;
 	/** Spacing between rectangular boxes */
@@ -752,10 +765,10 @@ Piwik_Transitions_Canvas.prototype.renderBox = function(params) {
 	if (params.curveText && !params.onlyBg) {
 		var curveTextLeft, curveTextTop;
 		if (params.side == 'left') {
-			curveTextLeft = this.leftBoxBeginX + this.boxWidth + 12;
+			curveTextLeft = this.leftBoxBeginX + this.boxWidth + 3;
 			curveTextTop = this.leftBoxPositionY + boxHeight / 2 - this.lineHeight / 2;
 		} else {
-			curveTextLeft = this.rightBoxBeginX - 35;
+			curveTextLeft = this.rightBoxBeginX - 37;
 			curveTextTop = this.rightBoxPositionY + boxHeight / 2 - this.lineHeight / 2;
 		}
 		var textDiv = this.renderText(params.curveText, curveTextLeft, curveTextTop,
@@ -979,6 +992,8 @@ Piwik_Transitions_Model.prototype.loadData = function(link, callback) {
 	this.outlinksNbTransitions = 0;
 	this.outlinks = [];
 	
+	this.generalText = '';
+	
 	this.groupTitles = {
 		previousPages: Piwik_Transitions_Translations.fromPreviousPages,
 		followingPages: Piwik_Transitions_Translations.toFollowingPages,
@@ -1001,6 +1016,8 @@ Piwik_Transitions_Model.prototype.loadData = function(link, callback) {
 			expanded: 1
 		},
 		function(report) {
+			self.generalText = report.generalText;
+			
 			// load page metrics
 			self.pageviews = report.pageMetrics.pageviews;
 			self.exits = report.pageMetrics.exits;