diff options
Diffstat (limited to 'plugins/CoreHome/angularjs/comparisons/comparisons.component.js')
-rw-r--r-- | plugins/CoreHome/angularjs/comparisons/comparisons.component.js | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.component.js b/plugins/CoreHome/angularjs/comparisons/comparisons.component.js new file mode 100644 index 0000000000..d4bdbdee8a --- /dev/null +++ b/plugins/CoreHome/angularjs/comparisons/comparisons.component.js @@ -0,0 +1,149 @@ +/*! + * Piwik - free/libre analytics platform + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +(function () { + angular.module('piwikApp').component('piwikComparisons', { + templateUrl: 'plugins/CoreHome/angularjs/comparisons/comparisons.component.html?cb=' + piwik.cacheBuster, + bindings: { + // empty + }, + controller: ComparisonsController + }); + + ComparisonsController.$inject = ['piwikComparisonsService', '$rootScope', 'piwikApi', '$element', 'piwikUrl']; + + function ComparisonsController(comparisonsService, $rootScope, piwikApi, $element, piwikUrl) { + var vm = this; + var comparisonTooltips = null; + + vm.comparisonsService = comparisonsService; + vm.$onInit = $onInit; + vm.$onDestroy = $onDestroy; + vm.comparisonHasSegment = comparisonHasSegment; + vm.getComparisonPeriodType = getComparisonPeriodType; + vm.getComparisonTooltip = getComparisonTooltip; + + function $onInit() { + $rootScope.$on('piwikComparisonsChanged', onComparisonsChanged); + + onComparisonsChanged(); + + setUpTooltips(); + } + + function $onDestroy() { + try { + $element.tooltip('destroy'); + } catch (e) { + // ignore + } + } + + function setUpTooltips() { + $element.tooltip({ + track: true, + content: function() { + var title = $(this).attr('title'); + return piwikHelper.escape(title.replace(/\n/g, '<br />')); + }, + show: {delay: 200, duration: 200}, + hide: false + }); + } + + function comparisonHasSegment(comparison) { + return typeof comparison.params.segment !== 'undefined'; + } + + function getComparisonPeriodType(comparison) { + var period = comparison.params.period; + if (period === 'range') { + return _pk_translate('CoreHome_PeriodRange'); + } + var periodStr = _pk_translate('Intl_Period' + period.substring(0, 1).toUpperCase() + period.substring(1)); + return periodStr.substring(0, 1).toUpperCase() + periodStr.substring(1); + } + + function getComparisonTooltip(segmentComparison, periodComparison) { + if (!comparisonTooltips + || !Object.keys(comparisonTooltips).length + ) { + return undefined; + } + + return comparisonTooltips[periodComparison.index][segmentComparison.index]; + } + + function onComparisonsChanged() { + comparisonTooltips = null; + + if (!vm.comparisonsService.isComparing()) { + return; + } + + var periodComparisons = comparisonsService.getPeriodComparisons(); + var segmentComparisons = comparisonsService.getSegmentComparisons(); + piwikApi.fetch({ + method: 'API.getProcessedReport', + apiModule: 'VisitsSummary', + apiAction: 'get', + compare: '1', + compareSegments: piwikUrl.getSearchParam('compareSegments'), + comparePeriods: piwikUrl.getSearchParam('comparePeriods'), + compareDates: piwikUrl.getSearchParam('compareDates'), + format_metrics: '1', + }).then(function (report) { + comparisonTooltips = {}; + periodComparisons.forEach(function (periodComp) { + comparisonTooltips[periodComp.index] = {}; + + segmentComparisons.forEach(function (segmentComp) { + comparisonTooltips[periodComp.index][segmentComp.index] = generateComparisonTooltip(report, periodComp, segmentComp); + }); + }); + }); + } + + function generateComparisonTooltip(visitsSummary, periodComp, segmentComp) { + if (!visitsSummary.reportData.comparisons) { // sanity check + return ''; + } + + var firstRowIndex = comparisonsService.getComparisonSeriesIndex(periodComp.index, 0); + + var firstRow = visitsSummary.reportData.comparisons[firstRowIndex]; + + var comparisonRowIndex = comparisonsService.getComparisonSeriesIndex(periodComp.index, segmentComp.index); + var comparisonRow = visitsSummary.reportData.comparisons[comparisonRowIndex]; + + var firstPeriodRow = visitsSummary.reportData.comparisons[segmentComp.index]; + + var tooltip = '<div class="comparison-card-tooltip">'; + + var visitsPercent = ((comparisonRow.nb_visits / firstRow.nb_visits) * 100).toFixed(2) + '%'; + + tooltip += _pk_translate('General_ComparisonCardTooltip1', [ + "'" + comparisonRow.compareSegmentPretty + "'", + comparisonRow.comparePeriodPretty, + visitsPercent, + comparisonRow.nb_visits, + firstRow.nb_visits + ]); + if (periodComp.index > 0) { + tooltip += '<br/><br/>'; + tooltip += _pk_translate('General_ComparisonCardTooltip2', [ + comparisonRow.nb_visits_change, + firstPeriodRow.compareSegmentPretty, + firstPeriodRow.comparePeriodPretty + ]); + } + + tooltip += '</div>'; + return tooltip; + } + } +})(); |