[Vue] migrate comparisons service + component (#18193)

* migrating RateFeature and ReviewLinks + adding AjaxHelper.fetch utility method (all untested)

* get ratefeature component to work, modify matomodialog component to use v-model, add event parameters to createAngularAdapter, allow translate to use variadic args or one string array + rebuild

* remove ratefeature angularjs files

* rebuild + make vue mapping property optional in createANgularJsAdapter

* migrate enrichedheadline and get to work

* fix test

* fix translate

* fix another translate issue & migrate contentblock directive

* fix anchor links, not including the "/" causes angularjs to fail (also on 4.x-dev)

* update expected screenshots

* fix ui test

* fix some test failures

* fix nested transclude issue

* remove content block files

* fix icon spacing that occurs due to angularjs inserting empty comments in between nodes while vue 3 does not

* update some screenshots

* update screenshot (actually fixes an alignment issue)

* update screenshot

* first pass at converting comparisons service/component

* get new code to build and load without error in the UI

* debugging

* getting basic functionaltiy to work

* fix UI test failure + URL encoding/angularjs issue causing back button to not work

* using ref in setup() is not needed to access this.$refs

* Convert comparisons service angularjs tests to comparison store typescript tests.

* built vue files

* rewrite URL handling to use computed properties in a URL store + do the same for other dependent data in the comparison store to allow vues to subscribe to the properties for changes to global state

* fix some tests

* some more fixes

* more fixes + disallow modifications to MatomoUrl state

* get angularjs unit tests to pass + fix a couple more issues

* another fix

* fix bad merge

* self review + fixes

* remove old fix as it may not be needed anymore

* empty string is not a valid date + do not report invalid date exception just rethrow

* update screenshots and try to fix random failure

* use jquery $destroy event instead of scope one since the scope one is broadcasted

* update expected screenshot

6 files changed, 5 insertions, 1136 deletions

diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.component.html b/plugins/CoreHome/angularjs/comparisons/comparisons.component.html
deleted file mode 100644
index b706ecc5d7..0000000000
--- a/plugins/CoreHome/angularjs/comparisons/comparisons.component.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<div ng-if="$ctrl.comparisonsService.isComparing()">
-    <h3>{{ 'General_Comparisons'|translate }}</h3>
-
-    <div class="comparison card" ng-repeat="comparison in $ctrl.comparisonsService.getSegmentComparisons() track by $index">
-        <div class="comparison-type">{{ 'General_Segment'|translate }}</div>
-
-        <div class="title" title="{{ comparison.title }}&lt;br/&gt;{{ comparison.params.segment|urldecode }}">
-            <a href="{{ $ctrl.getUrlToSegment(comparison.params.segment) }}" target="_blank">
-            {{ comparison.title }}
-        </a>
-        </div>
-
-        <div class="comparison-period"
-             ng-repeat="periodComparison in $ctrl.comparisonsService.getPeriodComparisons() track by $index"
-             title="{{ $ctrl.getComparisonTooltip(comparison, periodComparison) }}"
-        >
-            <span class="comparison-dot" ng-style="{'background-color': $ctrl.comparisonsService.getSeriesColor(comparison, periodComparison)}"></span>
-            <span class="comparison-period-label">{{ periodComparison.title }} ({{ $ctrl.getComparisonPeriodType(periodComparison) }})</span>
-        </div>
-
-        <a class="remove-button" ng-click="$ctrl.comparisonsService.removeSegmentComparison($index)" ng-if="$ctrl.comparisonsService.getSegmentComparisons().length > 1">
-            <span class="icon icon-close" title="{{ 'General_ClickToRemoveComp'|translate }}"></span>
-        </a>
-    </div>
-
-    <div class="loadingPiwik" style="display:none;">
-        <img src="plugins/Morpheus/images/loading-blue.gif" alt="{{ 'General_LoadingData'|translate }}" />
-        {{ 'General_LoadingData'|translate }}
-    </div>
-</div>
diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.component.js b/plugins/CoreHome/angularjs/comparisons/comparisons.component.js
deleted file mode 100644
index e858b7edbf..0000000000
--- a/plugins/CoreHome/angularjs/comparisons/comparisons.component.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.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;
-        vm.getUrlToSegment = getUrlToSegment;
-
-        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;
-        }
-
-        function getUrlToSegment(segment) {
-            var hash = window.location.hash;
-            hash = broadcast.updateParamValue('comparePeriods[]=', hash);
-            hash = broadcast.updateParamValue('compareDates[]=', hash);
-            hash = broadcast.updateParamValue('compareSegments[]=', hash);
-            hash = broadcast.updateParamValue('segment=' + encodeURIComponent(segment), hash);
-            return window.location.search + hash;
-        }
-    }
-})();
diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.component.less b/plugins/CoreHome/angularjs/comparisons/comparisons.component.less
deleted file mode 100644
index d390695fd6..0000000000
--- a/plugins/CoreHome/angularjs/comparisons/comparisons.component.less
+++ /dev/null
@@ -1,78 +0,0 @@
-piwik-comparisons {
-  h3 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .comparison {
-    display: inline-block;
-    min-width: 164px;
-    margin-right: 16px;
-    padding: 14px;
-    background-color: white;
-    margin-bottom: 16px;
-    position: relative;
-  }
-
-  .comparison-type {
-    font-weight: bold;
-    text-transform: uppercase;
-    font-size: .7em;
-    color: #999;
-  }
-
-  .remove-button {
-    font-size: .6em;
-    color: #666;
-    position: absolute;
-    right: 12px;
-    top: 12px;
-  }
-
-  .title {
-    font-size: 1.1rem;
-    margin-top: 4px;
-    margin-bottom: 12px;
-
-    overflow-x: hidden;
-    max-width: 250px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    a {
-      color: #333;
-    }
-  }
-
-  .comparison-period {
-    margin-top: 4px;
-
-    > span {
-      display: inline-block;
-    }
-
-    .comparison-dot {
-      width: 1em;
-      height: 1em;
-      display: inline-block;
-      border-radius: .5em;
-    }
-
-    .comparison-period-label {
-      position: relative;
-      top: -3px;
-      margin-left: 2px;
-      display: inline-block;
-      font-size: .85rem;
-      font-style: italic;
-    }
-  }
-}
-
-.comparison-card-tooltip {
-  p {
-    font-size: 1.1em;
-    line-height: 1.3em;
-    color: #fff;
-  }
-}
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.service.js b/plugins/CoreHome/angularjs/comparisons/comparisons.service.js
deleted file mode 100644
index 1ca05570e1..0000000000
--- a/plugins/CoreHome/angularjs/comparisons/comparisons.service.js
+++ /dev/null
@@ -1,354 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-(function () {
-    angular.module('piwikApp.service').factory('piwikComparisonsService', ComparisonFactory);
-
-    ComparisonFactory.$inject = ['$location', '$rootScope', 'piwikPeriods', 'piwikApi', 'piwikUrl'];
-
-    function ComparisonFactory($location, $rootScope, piwikPeriods, piwikApi, piwikUrl) {
-        var segmentComparisons = [];
-        var periodComparisons = [];
-        var comparisonsDisabledFor = [];
-        var isEnabled = null;
-
-        var SERIES_COLOR_COUNT = 8;
-        var SERIES_SHADE_COUNT = 3;
-
-        var colors = getAllSeriesColors();
-
-        $rootScope.$on('$locationChangeSuccess', updateComparisonsFromQueryParams);
-        $rootScope.$on('piwikSegmentationInited', updateComparisonsFromQueryParams);
-
-        if (!piwikHelper.isAngularRenderingThePage()) { // if we're, eg, widgetized
-            updateComparisonsFromQueryParams();
-        }
-
-        loadComparisonsDisabledFor();
-
-        return {
-            getComparisons: getComparisons,
-            removeSegmentComparison: removeSegmentComparison,
-            addSegmentComparison: addSegmentComparison,
-            isComparisonEnabled: isComparisonEnabled,
-            getSegmentComparisons: getSegmentComparisons,
-            getPeriodComparisons: getPeriodComparisons,
-            getSeriesColor: getSeriesColor,
-            getAllComparisonSeries: getAllComparisonSeries,
-            isComparing: isComparing,
-            isComparingPeriods: isComparingPeriods,
-            getIndividualComparisonRowIndices: getIndividualComparisonRowIndices,
-            getComparisonSeriesIndex: getComparisonSeriesIndex,
-            getSeriesColorName: getSeriesColorName
-        };
-
-        function getComparisons() {
-            return getSegmentComparisons().concat(getPeriodComparisons());
-        }
-
-        function isComparing() {
-            return isComparisonEnabled() && (segmentComparisons.length > 1 || periodComparisons.length > 1); // first two are for selected segment/period
-        }
-
-        function isComparingPeriods() {
-            return getPeriodComparisons().length > 1; // first is currently selected period
-        }
-
-        function getSegmentComparisons() {
-            if (!isComparisonEnabled()) {
-                return [];
-            }
-
-            return segmentComparisons;
-        }
-
-        function getPeriodComparisons() {
-            if (!isComparisonEnabled()) {
-                return [];
-            }
-
-            return periodComparisons;
-        }
-
-        function getSeriesColor(segmentComparison, periodComparison, metricIndex) {
-            metricIndex = metricIndex || 0;
-
-            var seriesIndex = getComparisonSeriesIndex(periodComparison.index, segmentComparison.index) % SERIES_COLOR_COUNT;
-            if (metricIndex === 0) {
-                return colors['series' + seriesIndex];
-            } else {
-                var shadeIndex = metricIndex % SERIES_SHADE_COUNT;
-                return colors['series' + seriesIndex + '-shade' + shadeIndex];
-            }
-        }
-
-        function getSeriesColorName(seriesIndex, metricIndex) {
-            var colorName = 'series' + (seriesIndex % SERIES_COLOR_COUNT);
-            if (metricIndex > 0) {
-                colorName += '-shade' + (metricIndex % SERIES_SHADE_COUNT);
-            }
-            return colorName;
-        }
-
-        function isComparisonEnabled() {
-            return isEnabled;
-        }
-
-        function getIndividualComparisonRowIndices(seriesIndex) {
-            var segmentCount = getSegmentComparisons().length;
-            var segmentIndex = seriesIndex % segmentCount;
-            var periodIndex = Math.floor(seriesIndex / segmentCount);
-
-            return {
-                segmentIndex: segmentIndex,
-                periodIndex: periodIndex,
-            };
-        }
-
-        function getComparisonSeriesIndex(periodIndex, segmentIndex) {
-            var segmentCount = getSegmentComparisons().length;
-            return periodIndex * segmentCount + segmentIndex;
-        }
-
-        function getAllComparisonSeries() {
-            var seriesInfo = [];
-
-            var seriesIndex = 0;
-            getPeriodComparisons().forEach(function (periodComp) {
-                getSegmentComparisons().forEach(function (segmentComp) {
-                    seriesInfo.push({
-                        index: seriesIndex,
-                        params: $.extend({}, segmentComp.params, periodComp.params),
-                        color: colors['series' + seriesIndex],
-                    });
-                    ++seriesIndex;
-                });
-            });
-            return seriesInfo;
-        }
-
-        function removeSegmentComparison(index) {
-            if (!isComparisonEnabled()) {
-                throw new Error('Comparison disabled.');
-            }
-
-            var newComparisons = [].concat(segmentComparisons);
-            newComparisons.splice(index, 1);
-
-            var extraParams = {};
-            if (index === 0) {
-                extraParams.segment = newComparisons[0].params.segment;
-            }
-
-            updateQueryParamsFromComparisons(newComparisons, periodComparisons, extraParams);
-        }
-
-        function addSegmentComparison(params) {
-            if (!isComparisonEnabled()) {
-                throw new Error('Comparison disabled.');
-            }
-
-            var newComparisons = segmentComparisons.concat([{ params: params }]);
-            updateQueryParamsFromComparisons(newComparisons, periodComparisons);
-        }
-
-        function updateQueryParamsFromComparisons(segmentComparisons, periodComparisons, extraParams) {
-            extraParams = extraParams || {};
-
-            // get unique segments/periods/dates from new Comparisons
-            var compareSegments = {};
-            var comparePeriodDatePairs = {};
-
-            var firstSegment = false;
-            var firstPeriod = false;
-
-            segmentComparisons.forEach(function (comparison) {
-                if (firstSegment) {
-                    compareSegments[comparison.params.segment] = true;
-                } else {
-                    firstSegment = true;
-                }
-            });
-
-            periodComparisons.forEach(function (comparison) {
-                if (firstPeriod) {
-                    comparePeriodDatePairs[comparison.params.period + '|' + comparison.params.date] = true;
-                } else {
-                    firstPeriod = true;
-                }
-            });
-
-            var comparePeriods = [];
-            var compareDates = [];
-            Object.keys(comparePeriodDatePairs).forEach(function (pair) {
-                var parts = pair.split('|');
-                comparePeriods.push(parts[0]);
-                compareDates.push(parts[1]);
-            });
-
-            var compareParams = {
-                compareSegments: Object.keys(compareSegments),
-                comparePeriods: comparePeriods,
-                compareDates: compareDates,
-            };
-
-            // change the page w/ these new param values
-            if (piwik.helper.isAngularRenderingThePage()) {
-                var search = $location.search();
-                var newSearch = $.extend({}, search, compareParams, extraParams);
-
-                delete newSearch['compareSegments[]'];
-                delete newSearch['comparePeriods[]'];
-                delete newSearch['compareDates[]'];
-
-                if (JSON.stringify(newSearch) !== JSON.stringify(search)) {
-                    $location.search($.param(newSearch));
-                }
-
-                return;
-            }
-
-            var paramsToRemove = [];
-            ['compareSegments', 'comparePeriods', 'compareDates'].forEach(function (name) {
-                if (!compareParams[name].length) {
-                    paramsToRemove.push(name);
-                }
-            });
-
-            // angular is not rendering the page (ie, we are in the embedded dashboard) or we need to change the segment
-            var url = $.param($.extend({}, extraParams)).replace(/%5B%5D/g, '[]');
-            var strHash = $.param($.extend({}, compareParams)).replace(/%5B%5D/g, '[]');
-
-            broadcast.propagateNewPage(url, undefined, strHash, paramsToRemove);
-        }
-
-        function updateComparisonsFromQueryParams() {
-            var title;
-            var availableSegments = [];
-            try {
-                availableSegments = $('.segmentEditorPanel').data('uiControlObject').impl.availableSegments || [];
-            } catch (e) {
-                // segment editor is not initialized yet
-            }
-
-            var compareSegments = piwikUrl.getSearchParam('compareSegments') || [];
-            compareSegments = compareSegments instanceof Array ? compareSegments : [compareSegments];
-
-            var comparePeriods = piwikUrl.getSearchParam('comparePeriods') || [];
-            comparePeriods = comparePeriods instanceof Array ? comparePeriods : [comparePeriods];
-
-            var compareDates = piwikUrl.getSearchParam('compareDates') || [];
-            compareDates = compareDates instanceof Array ? compareDates : [compareDates];
-
-            // add base comparisons
-            compareSegments.unshift(piwikUrl.getSearchParam('segment'));
-            comparePeriods.unshift(piwikUrl.getSearchParam('period'));
-            compareDates.unshift(piwikUrl.getSearchParam('date'));
-
-            var newSegmentComparisons = [];
-            compareSegments.forEach(function (segment, idx) {
-                var storedSegment = null;
-
-                availableSegments.forEach(function (s) {
-                    if (s.definition === segment
-                        || s.definition === decodeURIComponent(segment)
-                        || decodeURIComponent(s.definition) === segment
-                    ) {
-                        storedSegment = s;
-                    }
-                });
-
-                var segmentTitle = storedSegment ? storedSegment.name : _pk_translate('General_Unknown');
-                if (segment.trim() === '') {
-                    segmentTitle = _pk_translate('SegmentEditor_DefaultAllVisits');
-                }
-
-                newSegmentComparisons.push({
-                    params: {
-                        segment: segment
-                    },
-                    title: piwikHelper.htmlDecode(segmentTitle),
-                    index: idx
-                });
-            });
-
-            var newPeriodComparisons = [];
-            for (var i = 0; i < Math.min(compareDates.length, comparePeriods.length); ++i) {
-                try {
-                    title = piwikPeriods.parse(comparePeriods[i], compareDates[i]).getPrettyString();
-                } catch (e) {
-                    title = _pk_translate('General_Error');
-                }
-
-                newPeriodComparisons.push({
-                    params: {
-                        date: compareDates[i],
-                        period: comparePeriods[i]
-                    },
-                    title: title,
-                    index: i
-                });
-            }
-
-            checkEnabledForCurrentPage();
-            setComparisons(newSegmentComparisons, newPeriodComparisons);
-        }
-
-        function setComparisons(newSegmentComparisons, newPeriodComparisons) {
-            var oldSegmentComparisons = segmentComparisons;
-            var oldPeriodComparisons = periodComparisons;
-
-            segmentComparisons = newSegmentComparisons;
-            Object.freeze(segmentComparisons);
-
-            periodComparisons = newPeriodComparisons;
-            Object.freeze(periodComparisons);
-
-            if (JSON.stringify(oldPeriodComparisons) !== JSON.stringify(periodComparisons)
-                || JSON.stringify(oldSegmentComparisons) !== JSON.stringify(segmentComparisons)
-            ) {
-                $rootScope.$emit('piwikComparisonsChanged');
-            }
-        }
-
-        function checkEnabledForCurrentPage() {
-            // category/subcategory is not included on top bar pages, so in that case we use module/action
-            var category = piwikUrl.getSearchParam('category') || piwikUrl.getSearchParam('module');
-            var subcategory = piwikUrl.getSearchParam('subcategory') || piwikUrl.getSearchParam('action');
-
-            var id = category + "." + subcategory;
-            isEnabled = comparisonsDisabledFor.indexOf(id) === -1 && comparisonsDisabledFor.indexOf(category + ".*") === -1;
-
-            $('html').toggleClass('comparisonsDisabled', !isEnabled);
-        }
-
-        function loadComparisonsDisabledFor() {
-            piwikApi.fetch({
-                module: 'API',
-                method: 'API.getPagesComparisonsDisabledFor',
-            }).then(function (result) {
-                comparisonsDisabledFor = result;
-                checkEnabledForCurrentPage();
-            });
-        }
-
-        function getAllSeriesColors() {
-            var colorManager = piwik.ColorManager,
-                seriesColorNames = [];
-
-            for (var i = 0; i < SERIES_COLOR_COUNT; ++i) {
-                seriesColorNames.push('series' + i);
-                for (var j = 0; j < SERIES_SHADE_COUNT; ++j) {
-                    seriesColorNames.push('series' + i + '-shade' + j);
-                }
-            }
-
-            return colorManager.getColors('comparison-series-color', seriesColorNames);
-        }
-    }
-
-})();
diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.service.spec.js b/plugins/CoreHome/angularjs/comparisons/comparisons.service.spec.js
deleted file mode 100644
index 76cd614f4b..0000000000
--- a/plugins/CoreHome/angularjs/comparisons/comparisons.service.spec.js
+++ /dev/null
@@ -1,514 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-(function () {
-    describe('piwikComparisonsService', function () {
-        var DISABLED_PAGES = [
-            'MyModule1.disabledPage',
-            'MyModule2.disabledPage2',
-            'MyModule3.*',
-        ];
-        var piwikComparisonsService;
-        var $httpBackend;
-        var $rootScope;
-        var $location;
-        var oldInjectorFn;
-        var $window;
-        var oldWindowHash;
-
-        function setHash(search) {
-          $location.search(search);
-          window.location.hash = '#?' + search;
-        }
-
-        beforeEach(function () {
-          oldWindowHash = window.location.hash;
-        });
-
-        beforeEach(module('piwikApp.service'));
-        beforeEach(module(function($provide) {
-            var loc = {};
-            Object.defineProperty(loc, 'href', {
-                get: function () {
-                    return $location.absUrl();
-                },
-                set: function (v) {
-                    $location.url(v);
-                },
-            });
-            Object.defineProperty(loc, 'search', {
-                get: function () {
-                    return '?' + $location.absUrl().split('?')[1];
-                },
-            });
-
-            $window = {
-                location: loc,
-            };
-            $provide.value('$window', $window);
-        }));
-        beforeEach(inject(function($injector) {
-            oldInjectorFn = angular.element.prototype.injector;
-            angular.element.prototype.injector = function () { return $injector; };
-
-            window.piwik.ColorManager = {
-                getColors: function (ns, colors) {
-                    var result = {};
-                    colors.forEach(function (name) {
-                        result[name] = ns + '.' + name;
-                    });
-                    return result;
-                }
-            };
-
-            piwik_translations = {
-                'SegmentEditor_DefaultAllVisits': 'SegmentEditor_DefaultAllVisits',
-                'Intl_PeriodDay': 'Intl_PeriodDay',
-                'General_Unknown': 'General_Unknown',
-                'General_DateRangeFromTo': 'General_DateRangeFromTo',
-            };
-
-            $rootScope = $injector.get('$rootScope');
-            $location = $injector.get('$location');
-            $window = $injector.get('$window');
-            $httpBackend = $injector.get('$httpBackend');
-        }));
-        beforeEach(inject(function($injector) {
-            $httpBackend.whenPOST(function (url) {
-                return /API\.getPagesComparisonsDisabledFor/.test(url);
-            }).respond(function () {
-                return [200, DISABLED_PAGES];
-            });
-
-            piwikComparisonsService = $injector.get('piwikComparisonsService');
-
-            $httpBackend.flush();
-        }));
-        afterEach(function () {
-            angular.element.prototype.injector = oldInjectorFn;
-        });
-        afterEach (function () {
-            $httpBackend.verifyNoOutstandingExpectation ();
-            $httpBackend.verifyNoOutstandingRequest ();
-        });
-
-        afterEach(function () {
-          window.location.hash = oldWindowHash;
-        });
-
-        describe('#getComparisons()', function () {
-            it('should return all comparisons in URL', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getComparisons()).to.deep.equal([
-                    {
-                        params: {
-                            segment: 'abcdefg',
-                        },
-                        title: 'General_Unknown',
-                        index: 0,
-                    },
-                    {
-                        params: {
-                            segment: 'comparedsegment',
-                        },
-                        title: 'General_Unknown',
-                        index: 1,
-                    },
-                    {
-                        params: {
-                            segment: '',
-                        },
-                        title: 'SegmentEditor_DefaultAllVisits',
-                        index: 2,
-                    },
-                    {
-                        params: {
-                            date: '2018-01-02',
-                            period: 'day'
-                        },
-                        title: '2018-01-02',
-                        index: 0,
-                    },
-                    {
-                        params: {
-                            date: '2018-03-04',
-                            period: 'week'
-                        },
-                        title: 'General_DateRangeFromTo',
-                        index: 1,
-                    },
-                ]);
-            });
-
-            it('should return base params if there are no comparisons', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getComparisons()).to.deep.equal([
-                    {
-                        params: {
-                            segment: 'abcdefg'
-                        },
-                        title: 'General_Unknown',
-                        index: 0,
-                    },
-                    {
-                        params: {
-                            date: '2018-01-02',
-                            period: 'day'
-                        },
-                        title: '2018-01-02',
-                        index: 0,
-                    },
-                ]);
-            });
-
-            it('should return nothing if comparison is not enabled for the page', function () {
-                setHash('category=MyModule1&subcategory=disabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getComparisons()).to.deep.equal([]);
-            });
-        });
-
-        describe('#removeSegmentComparison()', function () {
-            it('should remove an existing segment comparison from the URL', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                piwikComparisonsService.removeSegmentComparison(1);
-
-                expect($location.url()).to.equal('?category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates%5B%5D=2018-03-04&comparePeriods%5B%5D=week&compareSegments%5B%5D=comparedsegment&compareSegments%5B%5D=&updated=1#%3Fcategory=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates%5B%5D=2018-03-04&comparePeriods%5B%5D=week&compareSegments%5B%5D=comparedsegment&compareSegments%5B%5D=');
-            });
-
-            it('should change the base comparison if the first segment is removed', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                piwikComparisonsService.removeSegmentComparison(0);
-
-                expect($location.url()).to.equal('?category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=comparedsegment&compareDates%5B%5D=2018-03-04&comparePeriods%5B%5D=week&compareSegments%5B%5D=comparedsegment&compareSegments%5B%5D=&updated=1#%3Fcategory=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=comparedsegment&compareDates%5B%5D=2018-03-04&comparePeriods%5B%5D=week&compareSegments%5B%5D=comparedsegment&compareSegments%5B%5D=');
-            });
-        });
-
-        describe('#addSegmentComparison()', function () {
-            it('should add a new segment comparison to the URL', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment');
-                $rootScope.$apply();
-
-                piwikComparisonsService.addSegmentComparison({
-                    segment: 'newsegment',
-                });
-
-                expect(piwikComparisonsService.getComparisons()).to.deep.equal([
-                    {"params":{"segment":""},"title":"SegmentEditor_DefaultAllVisits","index":0},
-                    {"params":{"segment":"comparedsegment"},"title":"General_Unknown","index":1},
-                    {"params":{"date":"2018-01-02","period":"day"},"title":"2018-01-02","index":0},
-                    {"params":{"date":"2018-03-04","period":"week"},"title":"General_DateRangeFromTo","index":1},
-                ]);
-            });
-
-            it('should add the all visits segment to the URL', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment');
-                $rootScope.$apply();
-
-                piwikComparisonsService.addSegmentComparison({
-                    segment: '',
-                });
-
-                expect(piwikComparisonsService.getComparisons()).to.deep.equal([
-                    {"params":{"segment":"abcdefg"},"title":"General_Unknown","index":0},
-                    {"params":{"segment":"comparedsegment"},"title":"General_Unknown","index":1},
-                    {"params":{"date":"2018-01-02","period":"day"},"title":"2018-01-02","index":0},
-                    {"params":{"date":"2018-03-04","period":"week"},"title":"General_DateRangeFromTo","index":1}
-                ]);
-            });
-
-            it('should add a new period comparison to the URL', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=&compareSegments[]=comparedsegment');
-                $rootScope.$apply();
-
-                piwikComparisonsService.addSegmentComparison({
-                    period: 'month',
-                    date: '2018-02-03',
-                });
-
-                expect(piwikComparisonsService.getComparisons()).to.deep.equal([
-                    {"params":{"segment":""},"title":"SegmentEditor_DefaultAllVisits","index":0},
-                    {"params":{"segment":"comparedsegment"},"title":"General_Unknown","index":1},
-                    {"params":{"date":"2018-01-02","period":"day"},"title":"2018-01-02","index":0},
-                ]);
-            });
-
-            it('should add another period comparison to the URL if one is already there', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment');
-                $rootScope.$apply();
-
-                piwikComparisonsService.addSegmentComparison({
-                    period: 'year',
-                    date: '2018-02-03',
-                });
-
-                expect(piwikComparisonsService.getComparisons()).to.deep.equal([
-                    {"params":{"segment":""},"title":"SegmentEditor_DefaultAllVisits","index":0},
-                    {"params":{"segment":"comparedsegment"},"title":"General_Unknown","index":1},
-                    {"params":{"date":"2018-01-02","period":"day"},"title":"2018-01-02","index":0},
-                    {"params":{"date":"2018-03-04","period":"week"},"title":"General_DateRangeFromTo","index":1},
-                ]);
-            });
-        });
-
-        describe('#isComparisonEnabled()', function () {
-            it('should return true if comparison is enabled for the page', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparisonEnabled()).to.be.true;
-            });
-
-            it('should return false if comparison is disabled for the page', function () {
-                setHash('category=MyModule2&subcategory=disabledPage2&date=2018-01-02&period=day&segment=&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparisonEnabled()).to.be.false;
-            });
-
-            it('should return false if comparison is disabled for the entire category', function () {
-                setHash('category=MyModule3&subcategory=enabledPage&date=2018-01-02&period=day&segment=&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparisonEnabled()).to.be.false;
-            });
-        });
-
-        describe('#getSegmentComparisons()', function () {
-            it('should return the segment comparisons only', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getSegmentComparisons()).to.be.deep.equal([
-                    {"params":{"segment":"abcdefg"},"title":"General_Unknown","index":0},
-                    {"params":{"segment":"comparedsegment"},"title":"General_Unknown","index":1},
-                    {"params":{"segment":""},"title":"SegmentEditor_DefaultAllVisits","index":2}
-                ]);
-            });
-
-            it('should return nothing if comparison is not enabled', function () {
-                setHash('category=MyModule1&subcategory=disabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getSegmentComparisons()).to.be.deep.equal([]);
-            });
-        });
-
-        describe('#getPeriodComparisons()', function () {
-            it('should return the period comparisons only', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getPeriodComparisons()).to.be.deep.equal([
-                    {
-                        params: {
-                            date: '2018-01-02',
-                            period: 'day',
-                        },
-                        title: '2018-01-02',
-                        index: 0,
-                    },
-                    {
-                        params: {
-                            date: '2018-03-04',
-                            period: 'week',
-                        },
-                        title: 'General_DateRangeFromTo',
-                        index: 1,
-                    },
-                ]);
-            });
-
-            it('should return nothing if comparison is not enabled', function () {
-                setHash('category=MyModule1&subcategory=disabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getPeriodComparisons()).to.be.deep.equal([]);
-            });
-        });
-
-        describe('#getAllComparisonSeries()', function () {
-            it('should return all individual comparison serieses', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getAllComparisonSeries()).to.be.deep.equal([
-                    {
-                        index: 0,
-                        params: {
-                            segment: 'abcdefg',
-                            date: '2018-01-02',
-                            period: 'day',
-                        },
-                        color: 'comparison-series-color.series0',
-                    },
-                    {
-                        "index":1,
-                        "params": {
-                            "segment":"comparedsegment",
-                            "date":"2018-01-02",
-                            "period":"day"
-                        },
-                        color: 'comparison-series-color.series1',
-                    },
-                    {
-                        "index":2,
-                        "params": {
-                            "segment":"",
-                            "date":"2018-01-02",
-                            "period":"day"
-                        },
-                        color: 'comparison-series-color.series2',
-                    },
-                    {
-                        "index":3,
-                        "params": {
-                            "segment":"abcdefg",
-                            "date":"2018-03-04",
-                            "period":"week"
-                        },
-                        color: 'comparison-series-color.series3',
-                    },
-                    {
-                        "index":4,
-                        "params": {
-                            "segment":"comparedsegment",
-                            "date":"2018-03-04",
-                            "period":"week"
-                        },
-                        color: 'comparison-series-color.series4',
-                    },
-                    {
-                        "index":5,
-                        "params": {
-                            "segment":"",
-                            "date":"2018-03-04",
-                            "period":"week"
-                        },
-                        color: 'comparison-series-color.series5',
-                    },
-                ]);
-            });
-
-            it('should return nothing if comparison is not enabled', function () {
-                setHash('category=MyModule1&subcategory=disabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getAllComparisonSeries()).to.be.deep.equal([]);
-            });
-        });
-
-        describe('#isComparing()', function () {
-            it('should return true if there are comparison parameters present', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparing()).to.be.true;
-            });
-
-            it('should return true if there are segment comparisons but no period comparisons', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparing()).to.be.true;
-            });
-
-            it('should return true if there are period comparisons but no segment comparisons', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparing()).to.be.true;
-            });
-
-            it('should return false if there are no comparison parameters present', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparing()).to.be.false;
-
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparing()).to.be.false;
-            });
-
-            it('should return false if comparison is not enabled', function () {
-                setHash('category=MyModule1&subcategory=disabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparing()).to.be.false;
-            });
-        });
-
-        describe('#isComparingPeriods()', function () {
-            it('should return true if there are periods being compared', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparingPeriods()).to.be.true;
-            });
-
-            it('should return false if there are no periods being compared, just segments', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparingPeriods()).to.be.false;
-            });
-
-            it('should return false if there is nothing being compared', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparingPeriods()).to.be.false;
-            });
-
-            it('should return false if comparing is not enabled', function () {
-                setHash('category=MyModule1&subcategory=disabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.isComparingPeriods()).to.be.false;
-            });
-        });
-
-        describe('#getIndividualComparisonRowIndices()', function () {
-            it('should calculate the segment/period index from the given series index', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getIndividualComparisonRowIndices(3)).to.be.deep.equal({
-                    segmentIndex: 0,
-                    periodIndex: 1,
-                });
-
-                expect(piwikComparisonsService.getIndividualComparisonRowIndices(0)).to.be.deep.equal({
-                    segmentIndex: 0,
-                    periodIndex: 0,
-                });
-            });
-        });
-
-        describe('#getComparisonSeriesIndex()', function () {
-            it('should return the comparison series index from the given segment & period indices', function () {
-                setHash('category=MyModule1&subcategory=enabledPage&date=2018-01-02&period=day&segment=abcdefg&compareDates[]=2018-03-04&comparePeriods[]=week&compareSegments[]=comparedsegment&compareSegments[]=');
-                $rootScope.$apply();
-
-                expect(piwikComparisonsService.getComparisonSeriesIndex(1, 1)).to.be.deep.equal(4);
-
-                expect(piwikComparisonsService.getComparisonSeriesIndex(0, 1)).to.be.deep.equal(1);
-            });
-        });
-    });
-})();
diff --git a/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js b/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js
index 5a9f301370..f967a5c90d 100644
--- a/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js
+++ b/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js
@@ -129,7 +129,11 @@
                 params.compareSegments = compareSegments;
             }
 
-            return $.param(params);
+            return $.param(params)
+              // some browsers treat URLs w/ date=a,b differently from date=a%2Cb, causing multiple
+              // entries to show up in the browser history. this has a compounding effect w/ angular.js,
+              // which when the back button is pressed to effectively abort the back navigation.
+              .replace(/%2C/g, ',');
         };
 
         $scope.loadCategory = function (category) {