refs #3332 Transitions:

 * clicking the group name in the center opens the group
 * fixing percentage of all pageviews
 * when all groups on the left are available, draw them a bit more compact in order to fit into the popover
 * showing previously removed error message again in a real error case
 * removing forgotten debug output

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

2 files changed, 47 insertions, 18 deletions

diff --git a/plugins/Transitions/API.php b/plugins/Transitions/API.php
index f876dd11ea..507f259d5c 100644
--- a/plugins/Transitions/API.php
+++ b/plugins/Transitions/API.php
@@ -63,7 +63,7 @@ class Piwik_Transitions_API
 		$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).'%';
+		$pageviewsShare = round($pageviews / $allPageviewsInt * 100, 1).'%';
 		
 		$prettyDate = Piwik_Period_Day::advancedFactory($period, $date)->getLocalizedShortString();
 		
@@ -148,6 +148,11 @@ class Piwik_Transitions_API
 		$transitionsArchiving = new Piwik_Transitions;
 		
 		$data = $transitionsArchiving->queryInternalReferrers($idaction, $archiveProcessing, $limitBeforeGrouping);
+		
+		if ($data['pageviews'] == 0) {
+			throw new Exception('NoDataForUrl');
+		}
+		
 		$report['previousPages'] = &$data['previousPages'];
 		$report['pageMetrics']['loops'] = $data['loops'];
 		$report['pageMetrics']['pageviews'] = $data['pageviews'];
@@ -207,8 +212,6 @@ class Piwik_Transitions_API
 		// idactions get mapped to one row in the actions report. in this case, the numbers
 		// are higher. we compensate for that here.
 		if (isset($report['pageMetrics']['exits'])) {
-			$report['pageMetrics']['exitsBefore'] = $report['pageMetrics']['exits'];
-			
 			$followingActions = $transitionsArchiving->getTotalTransitionsToFollowingActions();
 			$report['pageMetrics']['exits'] = min($report['pageMetrics']['exits'],
 					$report['pageMetrics']['pageviews'] - $followingActions);
diff --git a/plugins/Transitions/templates/transitions.js b/plugins/Transitions/templates/transitions.js
index 5b88a7f9b9..facfae3e9e 100644
--- a/plugins/Transitions/templates/transitions.js
+++ b/plugins/Transitions/templates/transitions.js
@@ -112,6 +112,11 @@ Piwik_Transitions.prototype.showPopover = function() {
 		});
 
 		self.model.loadData(self.link, function() {
+			if (self.model.searchEnginesNbTransitions > 0 && self.model.websitesNbTransitions > 0
+					+ self.model.campaignsNbTransitions > 0) {
+				self.canvas.narrowMode();
+			}
+			
 			self.render();
 			Piwik_Popover.showPreparedContent();
 		});
@@ -150,7 +155,8 @@ Piwik_Transitions.prototype.renderGroups = function(groups, openGroup, side, onl
 		var groupName = groups[i];
 		if (groupName == openGroup) {
 			if (i != 0) {
-				this.canvas.addBoxSpacing(13, side);
+				var spacing = this.canvas.isNarrowMode() ? 7 : 13;
+				this.canvas.addBoxSpacing(spacing, side);
 			}
 			this.renderOpenGroup(groupName, side, onlyBg);
 		} else {
@@ -185,7 +191,7 @@ Piwik_Transitions.prototype.renderCenterBox = function() {
 			box.find('.Transitions_Pageviews'), this.model.pageviews);
 
 	var self = this;
-	var showMetric = function(cssClass, modelProperty, highlightCurveOnSide) {
+	var showMetric = function(cssClass, modelProperty, highlightCurveOnSide, groupCanBeExpanded) {
 		var el = box.find('.Transitions_' + cssClass);
 		Piwik_Transitions_Util.replacePlaceholderInHtml(el, self.model[modelProperty]);
 		
@@ -202,27 +208,32 @@ Piwik_Transitions.prototype.renderCenterBox = function() {
 		} else {
 			self.addTooltipShowingPercentageOfAllPageviews(el, modelProperty);
 			var groupName = cssClass.charAt(0).toLowerCase() + cssClass.substr(1);
-			if (groupName != 'bounces') {
+			if (highlightCurveOnSide !== false) {
 				el.hover(function() {
 					self.highlightGroup(groupName, highlightCurveOnSide);
 				}, function() {
 					self.unHighlightGroup(groupName, highlightCurveOnSide);
 				});
 			}
+			if (groupCanBeExpanded) {
+				el.click(function() {
+					self.openGroup(highlightCurveOnSide, groupName);
+				}).css('cursor', 'pointer');
+			}
 		}
 	};
 
-	showMetric('DirectEntries', 'directEntries', 'left');
-	showMetric('PreviousPages', 'previousPagesNbTransitions', 'left');
-	showMetric('SearchEngines', 'searchEnginesNbTransitions', 'left');
-	showMetric('Websites', 'websitesNbTransitions', 'left');
-	showMetric('Campaigns', 'campaignsNbTransitions', 'left');
+	showMetric('DirectEntries', 'directEntries', 'left', false);
+	showMetric('PreviousPages', 'previousPagesNbTransitions', 'left', true);
+	showMetric('SearchEngines', 'searchEnginesNbTransitions', 'left', true);
+	showMetric('Websites', 'websitesNbTransitions', 'left', true);
+	showMetric('Campaigns', 'campaignsNbTransitions', 'left', true);
 
-	showMetric('FollowingPages', 'followingPagesNbTransitions', 'right');
-	showMetric('Outlinks', 'outlinksNbTransitions', 'right');
-	showMetric('Downloads', 'downloadsNbTransitions', 'right');
-	showMetric('Exits', 'exits', 'right');
-	showMetric('Bounces', 'bounces', false);
+	showMetric('FollowingPages', 'followingPagesNbTransitions', 'right', true);
+	showMetric('Outlinks', 'outlinksNbTransitions', 'right', true);
+	showMetric('Downloads', 'downloadsNbTransitions', 'right', true);
+	showMetric('Exits', 'exits', 'right', false);
+	showMetric('Bounces', 'bounces', false, false);
 
 	box.find('.Transitions_CenterBoxMetrics').show();
 };
@@ -428,7 +439,8 @@ Piwik_Transitions.prototype.renderOpenGroup = function(groupName, side, onlyBg)
 		bgCanvas: true
 	});
 	
-	this.canvas.addBoxSpacing(15, side);
+	var spacing = this.canvas.isNarrowMode() ? 8 : 15;
+	this.canvas.addBoxSpacing(spacing, side);
 };
 
 /** Render a closed group without detailed data, only one box for the sum */
@@ -569,7 +581,7 @@ function Piwik_Transitions_Canvas(canvasDom, canvasBgDom, width, height) {
 	this.leftCurvePositionY = this.originalCurvePositionY = 110;
 	this.rightBoxPositionY = this.originalBoxPositionY;
 	this.rightCurvePositionY = this.originalCurvePositionY;
-
+	
 	/** Width of the rectangular box */
 	this.boxWidth = 175;
 	/** Height of the rectangular box */
@@ -600,6 +612,20 @@ function Piwik_Transitions_Canvas(canvasDom, canvasBgDom, width, height) {
 }
 
 /**
+ * Activate narrow mode: draw groups a bit more compact in order to save space
+ * for more than 3 referrer groups.
+ */
+Piwik_Transitions_Canvas.prototype.narrowMode = function() {
+	this.smallBoxHeight = 30;
+	this.boxSpacing = 5;
+	this.narrowMode = true;
+};
+
+Piwik_Transitions_Canvas.prototype.isNarrowMode = function() {
+	return typeof this.narrowMode != 'undefined';
+};
+
+/**
  * Helper to create horizontal gradients
  * @param	position	left|right
  */