From 88d70905188470376ca7c7c8e6016ef0e296989f Mon Sep 17 00:00:00 2001 From: BeezyT Date: Mon, 24 Sep 2012 09:58:23 +0000 Subject: 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 --- plugins/Transitions/API.php | 16 +++++++++- plugins/Transitions/Controller.php | 2 +- plugins/Transitions/templates/transitions.css | 17 +++++++---- plugins/Transitions/templates/transitions.js | 43 +++++++++++++++++++-------- 4 files changed, 57 insertions(+), 21 deletions(-) (limited to 'plugins/Transitions') 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))) + . '
' . htmlentities(Piwik_Translate('General_DateRange').' '.$prettyDate) . ''; + 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; -- cgit v1.2.3