From ff371ed0149a4933d42390fcdff16fa929a72f0c Mon Sep 17 00:00:00 2001 From: BeezyT Date: Thu, 27 Sep 2012 10:58:56 +0000 Subject: refs #3332 Transitions performance tuning * load total number of pageviews only once and from JS => archiving is never launched from Transitions API * load markup only once => when clicking a different URL, only the new data is loaded * load markup and data in parallel git-svn-id: http://dev.piwik.org/svn/trunk@7073 59fd770c-687e-43c8-a1e3-f5a4ff64c105 --- plugins/Transitions/API.php | 13 +-- plugins/Transitions/Controller.php | 6 +- plugins/Transitions/templates/transitions.js | 154 ++++++++++++++++++--------- 3 files changed, 111 insertions(+), 62 deletions(-) (limited to 'plugins/Transitions') diff --git a/plugins/Transitions/API.php b/plugins/Transitions/API.php index ae91d82ec0..c05ab7e058 100644 --- a/plugins/Transitions/API.php +++ b/plugins/Transitions/API.php @@ -39,7 +39,7 @@ class Piwik_Transitions_API $pageUrl = Piwik_Common::unsanitizeInputValue($pageUrl); $report = array( - 'generalText' => '', + 'date' => Piwik_Period_Day::advancedFactory($period, $date)->getLocalizedShortString() ); $this->addLiveTransitionsDataToReport($report, $pageUrl, $idSite, $period, $date, $segment, $limitBeforeGrouping); @@ -58,17 +58,6 @@ 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 * 100, 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 b913eb73df..f30b019db1 100644 --- a/plugins/Transitions/Controller.php +++ b/plugins/Transitions/Controller.php @@ -55,9 +55,11 @@ class Piwik_Transitions_Controller extends Piwik_Controller 'XOfAllPageviews' => 'Transitions_XOfAllPageviews', 'NoDataForUrl' => 'Transitions_NoDataForUrl', 'NoDataForUrlDetails' => 'Transitions_NoDataForUrlDetails', - 'NoDataForUrlBack' => 'Transitions_ErrorBack' + 'NoDataForUrlBack' => 'Transitions_ErrorBack', + 'ShareOfAllPageviews' => 'Transitions_ShareOfAllPageviews', + 'DateRange' => 'General_DateRange' ); - + public static function getTranslation($key) { return Piwik_Translate(self::$metricTranslations[$key]); diff --git a/plugins/Transitions/templates/transitions.js b/plugins/Transitions/templates/transitions.js index 94ae29a1f7..163b4916e9 100644 --- a/plugins/Transitions/templates/transitions.js +++ b/plugins/Transitions/templates/transitions.js @@ -91,41 +91,74 @@ Piwik_Transitions.prototype.reset = function(link) { /** Open the popover */ Piwik_Transitions.prototype.showPopover = function() { var self = this; - + this.popover = Piwik_Popover.showLoading('Transitions', self.link, 550); - // load the popover HTML - this.ajax.callTransitionsController('renderPopover', function(html) { - Piwik_Popover.prepareContent(html); - - 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, 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)); + var bothLoaded = function() { + self.preparePopover(); + self.model.htmlLoaded(); - title.click(function() { - self.openExternalUrl(self.link); - }).css('cursor', 'pointer'); + if (self.model.searchEnginesNbTransitions > 0 && self.model.websitesNbTransitions > 0 + + self.model.campaignsNbTransitions > 0) { + self.canvas.narrowMode(); + } - 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() { - if (self.model.searchEnginesNbTransitions > 0 && self.model.websitesNbTransitions > 0 - + self.model.campaignsNbTransitions > 0) { - self.canvas.narrowMode(); + self.render(); + Piwik_Popover.showPreparedContent(); + }; + + // load the popover HTML (only done once) + var callbackForHtml = false; + if (typeof Piwik_Transitions.popoverHtml == 'undefined') { + this.ajax.callTransitionsController('renderPopover', function(html) { + Piwik_Transitions.popoverHtml = html; + if (callbackForHtml !== false) { + callbackForHtml(); } - - self.render(); - Piwik_Popover.showPreparedContent(); }); + } + + // load the data + self.model.loadData(self.link, function() { + if (typeof Piwik_Transitions.popoverHtml == 'undefined') { + // html not there yet + callbackForHtml = bothLoaded; + } else { + // html already loaded + bothLoaded(); + } + }); +}; + +/** Prepare the popover with the basic DOM to add data later. */ +Piwik_Transitions.prototype.preparePopover = function() { + Piwik_Popover.prepareContent(Piwik_Transitions.popoverHtml); + + var self = this; + 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, 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() { + var totalNbPageviews = self.model.getTotalNbPageviews(); + if (totalNbPageviews > 0) { + var share = Math.round(self.model.pageviews / totalNbPageviews * 1000) / 10; + var text = Piwik_Transitions_Translations.ShareOfAllPageviews; + text = text.replace(/%s/, self.model.pageviews).replace(/%s/, share + '%'); + text += '
' + Piwik_Transitions_Translations.DateRange + ' ' + self.model.date + ''; + Piwik_Tooltip.show(text, 'Transitions_Tooltip_Small'); + } + }, function() { + Piwik_Tooltip.hide(); }); }; @@ -991,6 +1024,25 @@ function Piwik_Transitions_Model(ajax) { this.ajax = ajax; } +Piwik_Transitions_Model.prototype.htmlLoaded = function() { + this.groupTitles = { + previousPages: Piwik_Transitions_Translations.fromPreviousPages, + followingPages: Piwik_Transitions_Translations.toFollowingPages, + outlinks: Piwik_Transitions_Translations.outlinks, + downloads: Piwik_Transitions_Translations.downloads + }; + + this.shareInGroupTexts = { + previousPages: Piwik_Transitions_Translations.fromPreviousPagesInline, + followingPages: Piwik_Transitions_Translations.toFollowingPagesInline, + searchEngines: Piwik_Transitions_Translations.fromSearchEnginesInline, + websites: Piwik_Transitions_Translations.fromWebsitesInline, + campaigns: Piwik_Transitions_Translations.fromCampaignsInline, + outlinks: Piwik_Transitions_Translations.outlinksInline, + downloads: Piwik_Transitions_Translations.downloadsInline + }; +}; + Piwik_Transitions_Model.prototype.loadData = function(link, callback) { var self = this; @@ -1021,31 +1073,14 @@ 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, - outlinks: Piwik_Transitions_Translations.outlinks, - downloads: Piwik_Transitions_Translations.downloads - }; - - this.shareInGroupTexts = { - previousPages: Piwik_Transitions_Translations.fromPreviousPagesInline, - followingPages: Piwik_Transitions_Translations.toFollowingPagesInline, - searchEngines: Piwik_Transitions_Translations.fromSearchEnginesInline, - websites: Piwik_Transitions_Translations.fromWebsitesInline, - campaigns: Piwik_Transitions_Translations.fromCampaignsInline, - outlinks: Piwik_Transitions_Translations.outlinksInline, - downloads: Piwik_Transitions_Translations.downloadsInline - }; + this.date = ''; this.ajax.callApi('Transitions.getFullReport', { pageUrl: link, expanded: 1 }, function(report) { - self.generalText = report.generalText; + self.date = report.date; // load page metrics self.pageviews = report.pageMetrics.pageviews; @@ -1077,6 +1112,13 @@ Piwik_Transitions_Model.prototype.loadData = function(link, callback) { self.loadAndSumReport(report, 'downloads'); self.loadAndSumReport(report, 'outlinks'); + if (typeof Piwik_Transitions_Model.totalNbPageviews == 'undefined') { + Piwik_Transitions_Model.totalNbPageviews = false; + self.ajax.loadTotalNbPageviews(function(nbPageviews) { + Piwik_Transitions_Model.totalNbPageviews = nbPageviews; + }); + } + callback(); }); }; @@ -1091,6 +1133,13 @@ Piwik_Transitions_Model.prototype.loadAndSumReport = function(apiData, reportNam } }; +Piwik_Transitions_Model.prototype.getTotalNbPageviews = function() { + if (typeof Piwik_Transitions_Model.totalNbPageviews == 'undefined') { + return false; + } + return Piwik_Transitions_Model.totalNbPageviews; +}; + Piwik_Transitions_Model.prototype.getGroupTitle = function(groupName) { if (typeof this.groupTitles[groupName] != 'undefined') { return this.groupTitles[groupName]; @@ -1148,6 +1197,15 @@ Piwik_Transitions_Model.prototype.roundPercentage = function(value) { function Piwik_Transitions_Ajax() { } +Piwik_Transitions_Ajax.prototype.loadTotalNbPageviews = function(callback) { + this.callApi('Actions.get', { + columns: 'nb_pageviews' + }, function(response) { + var value = typeof response.value != 'undefined' ? response.value : false; + callback(value); + }); +}; + Piwik_Transitions_Ajax.prototype.callTransitionsController = function(action, callback) { piwikHelper.queueAjaxRequest($.post('index.php', { module: 'Transitions', -- cgit v1.2.3