migrate transition switcher to Vuevue-transition-exporter

12 files changed, 680 insertions, 379 deletions

diff --git a/plugins/CoreVue/types/index.d.ts b/plugins/CoreVue/types/index.d.ts
index 49fd91baa5..f585652beb 100644
--- a/plugins/CoreVue/types/index.d.ts
+++ b/plugins/CoreVue/types/index.d.ts
@@ -183,6 +183,15 @@ declare global {
     formatCurrency(value?: number|string, currency: string): string;
   }
 
+  interface Transitions {
+    reset(actionType: string, actionName: string, overrideParams: string);
+    showPopover(showEmbeddedInReport: boolean): void;
+  }
+
+  interface TransitionsGlobal {
+    new (actionType: string, actionName: string, rowAction: unknown|null, overrideParams: string): Transitions;
+  }
+
   interface Window {
     angular: IAngularStatic;
     globalAjaxQueue: GlobalAjaxQueue;
@@ -197,6 +206,7 @@ declare global {
     $: JQueryStatic;
     Piwik_Popover: PiwikPopoverGlobal;
     NumberFormatter: NumberFormatter;
+    Piwik_Transitions: TransitionsGlobal;
 
     _pk_translate(translationStringId: string, values: string[]): string;
     require(p: string): any;
diff --git a/plugins/Transitions/Transitions.php b/plugins/Transitions/Transitions.php
index aae4211596..f8f1ced194 100644
--- a/plugins/Transitions/Transitions.php
+++ b/plugins/Transitions/Transitions.php
@@ -38,14 +38,12 @@ class Transitions extends \Piwik\Plugin
     public function getStylesheetFiles(&$stylesheets)
     {
         $stylesheets[] = 'plugins/Transitions/stylesheets/transitions.less';
-        $stylesheets[] = 'plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.less';
+        $stylesheets[] = 'plugins/Transitions/vue/src/TransitionExporter/TransitionExporterPopover.less';
     }
 
     public function getJsFiles(&$jsFiles)
     {
         $jsFiles[] = 'plugins/Transitions/javascripts/transitions.js';
-        $jsFiles[] = 'plugins/Transitions/angularjs/transitionswitcher/transitionswitcher.controller.js';
-        $jsFiles[] = 'plugins/Transitions/angularjs/transitionexporter/transitionexporter.directive.js';
     }
 
     public function getClientSideTranslationKeys(&$translationKeys)
@@ -58,6 +56,8 @@ class Transitions extends \Piwik\Plugin
         $translationKeys[] = 'Transitions_Transitions';
         $translationKeys[] = 'CoreHome_ThereIsNoDataForThisReport';
         $translationKeys[] = 'General_Others';
+        $translationKeys[] = 'Actions_ActionType';
+        $translationKeys[] = 'Transitions_TopX';
     }
 
     public function addJsGlobalVariables(&$out)
diff --git a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.directive.js b/plugins/Transitions/angularjs/transitionexporter/transitionexporter.directive.js
deleted file mode 100644
index f26a448d13..0000000000
--- a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.directive.js
+++ /dev/null
@@ -1,83 +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").directive('transitionExporter', transitionExporter);
-    transitionExporter.$inject = ['$document', 'piwik', '$compile', '$timeout', '$location', '$httpParamSerializerJQLike', '$rootScope'];
-
-    function transitionExporter($document, piwik, $compile, $timeout, $location, $httpParamSerializerJQLike, $rootScope) {
-
-        return {
-            restrict: 'A',
-            link: function(scope, element) {
-
-                scope.getExportLink = function() {
-
-                    var exportUrlParams = {
-                        module: 'API'
-                    };
-
-                    exportUrlParams.method = 'Transitions.getTransitionsForAction';
-                    exportUrlParams.actionType = $rootScope.transitionExportParams['actionType'];
-                    exportUrlParams.actionName = $rootScope.transitionExportParams['actionName'];
-
-                    exportUrlParams.idSite = piwik.idSite;
-                    exportUrlParams.period = piwik.period;
-                    exportUrlParams.date = piwik.currentDateString;
-                    exportUrlParams.format = scope.exportFormat;
-                    exportUrlParams.token_auth = piwik.token_auth;
-                    exportUrlParams.force_api_session = 1;
-
-                    var currentUrl = $location.absUrl();
-                    var urlParts = currentUrl.split('/');
-                    urlParts.pop();
-                    var url = urlParts.join('/');
-
-                    return url + '/index.php?' + $httpParamSerializerJQLike(exportUrlParams);
-                }
-
-                $rootScope.$on('Transitions.dataChanged', function (event, params) {
-                    $rootScope.transitionExportParams = params;
-                });
-
-                scope.onExportFormatChange = function (format) {
-                    scope.exportFormat = format;
-                }
-
-                element.on('click', function () {
-
-                    scope.exportFormat = 'JSON';
-                    scope.exportFormatOptions = [
-                        {key: 'JSON', value: 'JSON'},
-                        {key: 'XML', value: 'XML'}
-                    ];
-
-                    if (!$rootScope.transitionExportParams) {
-                        return;
-                    }
-
-                    scope.reportTitle = $rootScope.transitionExportParams['actionName'] + ' ' + _pk_translate('Transitions_Transitions');
-
-                    this.popover = Piwik_Popover.showLoading(_pk_translate('General_Export'), self.actionName, 200);
-
-                    var elem = $document.find('#transitionExport').eq(0);
-                    if (!elem.length) {
-                        elem = angular.element('<span id="transitionExport"></span>');
-                        elem.attr('ng-include', "'plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.html?cb=' + encodeURIComponent(piwik.cacheBuster) + '\'");
-                    }
-
-                    $compile(elem)(scope, function (compiled){
-                        Piwik_Popover.setTitle(_pk_translate('General_Export') + ' ' + piwikHelper.htmlEntities(scope.reportTitle));
-                        Piwik_Popover.setContent(compiled);
-                    });
-
-                });
-            }
-        };
-    }
-})();
diff --git a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.html b/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.html
deleted file mode 100644
index 76f1b74f6f..0000000000
--- a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="transition-export-popover row">
-
-    <div class="col l6">
-        <div class="input-field">
-            <div piwik-field uicontrol="radio" name="exportFormat"
-                 data-title="{{ 'CoreHome_ExportFormat'|translate }}"
-                 ng-change="onExportFormatChange(exportFormat)"
-                 ng-model="exportFormat"
-                 full-width="true"
-                 value="JSON"
-                 options="exportFormatOptions">
-            </div>
-        </div>
-
-    </div>
-
-    <div class="col l12">
-        <a class="btn" ng-attr-href="{{ getExportLink() }}" target="_new" title="{{ 'CoreHome_ExportTooltip'|translate }}">{{ 'General_Export'|translate }}</a>
-    </div>
-
-</div>
\ No newline at end of file
diff --git a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.less b/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.less
deleted file mode 100644
index 54b15e412c..0000000000
--- a/plugins/Transitions/angularjs/transitionexporter/transitionexporter.popover.less
+++ /dev/null
@@ -1,52 +0,0 @@
-.transitions-export-popover {
-
-  [name=format] {
-    .form-group label.fieldRadioTitle {
-      display: block;
-    }
-
-    p.radio {
-      width: 50%;
-      float: left;
-      display: block;
-    }
-  }
-
-  textarea {
-    word-break: break-all;
-    padding: 5px;
-    height: 80px;
-  }
-
-  .toggle-export-url {
-    font-size: 14px;
-    margin-left: 20px;
-  }
-
-  .filter_limit {
-    clear: both;
-    float: none;
-
-    [piwik-field] {
-      width: 50%;
-      float: left;
-    }
-  }
-
-  .showoptions > span {
-    color: @color-blue-piwik;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-
-  .tooltip {
-    color: @color-silver;
-    font-size: 13px;
-    padding: 5px;
-  }
-
-  .tooltip > a {
-      color: @color-blue-piwik;
-      text-decoration: underline;
-  }
-}
\ No newline at end of file
diff --git a/plugins/Transitions/angularjs/transitionswitcher/transitionswitcher.controller.js b/plugins/Transitions/angularjs/transitionswitcher/transitionswitcher.controller.js
deleted file mode 100644
index 4195ba495a..0000000000
--- a/plugins/Transitions/angularjs/transitionswitcher/transitionswitcher.controller.js
+++ /dev/null
@@ -1,155 +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').controller('TransitionSwitcherController', TransitionSwitcherController);
-
-    TransitionSwitcherController.$inject = ['piwikApi', '$filter', '$rootScope'];
-
-    function TransitionSwitcherController(piwikApi, $filter, $rootScope) {
-        var translate = $filter('translate');
-
-        var self = this;
-        this.actionType = 'Actions.getPageUrls';
-        this.actionNameOptions = [];
-        this.actionTypeOptions = [
-            {key: 'Actions.getPageUrls', value: translate('Actions_PageUrls')},
-            {key: 'Actions.getPageTitles', value: translate('Actions_WidgetPageTitles')}
-        ];
-        this.isLoading = false;
-        this.transitions = null;
-        this.actionName = null;
-        this.isEnabled = true;
-        var noDataKey = '_____ignore_____';
-
-        this.detectActionName = function (reports)
-        {
-            var othersLabel = translate('General_Others');
-
-            var label, report;
-            for (var i = 0; i < reports.length; i++) {
-                if (!reports[i]) {
-                    continue;
-                }
-
-                report = reports[i];
-
-                if (report.label === othersLabel) {
-                    continue;
-                }
-
-                var key = null;
-                if (self.isUrlReport()) {
-                    key = report.url
-                } else {
-                    key = report.label;
-                }
-
-                if (key) {
-                    label = report.label + ' (' + translate('Transitions_NumPageviews', report.nb_hits) + ')';
-                    self.actionNameOptions.push({key: key, value: label, url: report.url});
-                    if (!self.actionName) {
-                        self.actionName = key
-                    }
-                }
-            }
-        }
-
-        this.isUrlReport = function()
-        {
-            return this.actionType === 'Actions.getPageUrls';
-        }
-
-        this.fetch = function (type) {
-            this.isLoading = true;
-            this.actionNameOptions = [];
-            this.actionName = null;
-
-            piwikApi.fetch({
-                method: type,
-                flat: 1, filter_limit: 100,
-                filter_sort_order: 'desc',
-                filter_sort_column: 'nb_hits',
-                showColumns: 'label,nb_hits,url'
-            }).then(function (report) {
-                self.isLoading = false;
-                self.actionNameOptions = [];
-                self.actionName = null;
-
-                if (report && report.length) {
-                    self.isEnabled = true;
-                    self.detectActionName(report);
-                    self.onActionNameChange(self.actionName);
-                }
-
-                if (null === self.actionName || self.actionNameOptions.length === 0) {
-                    self.isEnabled = false;
-                    self.actionName = noDataKey;
-                    self.actionNameOptions.push({key: noDataKey, value: translate('CoreHome_ThereIsNoDataForThisReport')});
-                }
-            }, function () {
-                self.isLoading = false;
-                self.isEnabled = false;
-            });
-        }
-
-        this.onActionTypeChange = function (actionName) {
-            this.fetch(actionName);
-        };
-
-        this.onActionNameChange = function (actionName) {
-            if (actionName === null || actionName === noDataKey) {
-                return;
-            }
-
-            var type = 'url';
-            if (!this.isUrlReport()) {
-                type = 'title';
-            }
-            if (!this.transitions) {
-                this.transitions = new Piwik_Transitions(type, actionName, null, '');
-            } else {
-                this.transitions.reset(type, actionName, '');
-            }
-            this.transitions.showPopover(true);
-        };
-
-        $rootScope.$on('Transitions.switchTransitionsUrl', function (event, params) {
-            if (params && params.url) {
-                if (self.isUrlReport()) {
-                    params.url = params.url.replace('https://', '').replace('http://', '');
-                }
-
-                var found = false, option, optionUrl;
-                for (var i = 0; i < self.actionNameOptions.length; i++) {
-                    option = self.actionNameOptions[i];
-                    optionUrl = option.url;
-                    if (optionUrl && self.isUrlReport()) {
-                        optionUrl = String(optionUrl).replace('https://', '').replace('http://', '');
-                    } else {
-                        optionUrl = null;
-                    }
-
-                    if (!found && (option.key === params.url || (params.url === optionUrl && optionUrl))) {
-                        found = true;
-                        self.actionName = option.key;
-                    }
-                }
-                if (!found) {
-                    // we only fetch top 100 in the report... so the entry the user clicked on, might not be in the top 100
-                    var options = angular.copy(self.actionNameOptions); // somehow needed to force angular to render it
-                    options.push({key: params.url, value: params.url});
-                    self.actionNameOptions = options;
-                    self.actionName = params.url;
-                }
-                self.onActionNameChange(self.actionName);
-            }
-        });
-
-        this.fetch(this.actionType);
-    }
-})();
\ No newline at end of file
diff --git a/plugins/Transitions/templates/transitions.twig b/plugins/Transitions/templates/transitions.twig
index 3cb0a6354e..fb5df1f3be 100644
--- a/plugins/Transitions/templates/transitions.twig
+++ b/plugins/Transitions/templates/transitions.twig
@@ -3,66 +3,10 @@
                           help-url="https://matomo.org/docs/transitions/"
                           content-title="{{ 'Transitions_Transitions'|translate|e('html_attr') }}">{% endif %}
 
-<div id="transitions_report" {% if isWidget %}class="widgetBody"{% endif %} ng-controller="TransitionSwitcherController as transitionSwitcher">
-    <div class="row"> 
-        <div class="col s12 m3">
-            <div piwik-field uicontrol="select" name="actionType"
-                 ng-model="transitionSwitcher.actionType"
-                 ng-change="transitionSwitcher.onActionTypeChange(transitionSwitcher.actionType)"
-                 data-title="{{ 'Actions_ActionType'|translate|e('html_attr') }}"
-                 full-width="true"
-                 options='transitionSwitcher.actionTypeOptions'>
-            </div>
-        </div>
-        <div class="col s12 m9">
-            <div piwik-field uicontrol="select" name="actionName"
-                 ng-model="transitionSwitcher.actionName"
-                 ng-change="transitionSwitcher.onActionNameChange(transitionSwitcher.actionName)"
-                 data-title="{{ 'Transitions_TopX'|translate(100)|e('html_attr') }}"
-                 full-width="true"
-                 data-disabled="!transitionSwitcher.isEnabled"
-                 options='transitionSwitcher.actionNameOptions'>
-            </div>
-        </div>
-    </div>
-
-    <div piwik-activity-indicator loading="transitionSwitcher.isLoading"></div>
-
-    <div class="loadingPiwik" ng-show="!transitionSwitcher.isLoading" style="display:none" id="transitions_inline_loading">
-        <img src="plugins/Morpheus/images/loading-blue.gif" alt=""/> <span>{{ 'General_LoadingData'|translate }}</span>
-    </div>
-
-    <div class="popoverContainer" ng-show="!transitionSwitcher.isLoading && transitionSwitcher.isEnabled">
-
-    </div>
-
-    <div id="Transitions_Error_Container" ng-show="!transitionSwitcher.isLoading">
-
-    </div>
-
-    <div class="dataTableWrapper" ng-show="transitionSwitcher.isEnabled">
-        <div class="dataTableFeatures">
-            <div class="dataTableFooterNavigation">
-                <div class="dataTableControls">
-                    <div class="row">
-                        <a class="dataTableAction" href="javascript:;" transition-exporter>
-                            <span class="icon-export"></span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="alert alert-info">
-        {{ 'Transitions_AvailableInOtherReports'|translate }}
-        {{ 'Actions_PageUrls'|translate }}, {{ 'Actions_SubmenuPageTitles'|translate }},
-        {{ 'Actions_SubmenuPagesEntry'|translate }}
-        {{ 'General_And'|translate }}
-        {{ 'Actions_SubmenuPagesExit'|translate }}.
-        {{ 'Transitions_AvailableInOtherReports2'|translate('<span class="icon-transition"></span>')|raw }}
-    </div>
-</div>
+<div
+  vue-entry="Transitions.TransitionSwitcher"
+  is-widget="{{ isWidget|default(null)|json_encode|e('html_attr') }}"
+></div>
 
 {% if not isWidget %}</div>{% endif %}
 
diff --git a/plugins/Transitions/vue/dist/Transitions.umd.js b/plugins/Transitions/vue/dist/Transitions.umd.js
index 1b3462fd48..059899a53c 100644
--- a/plugins/Transitions/vue/dist/Transitions.umd.js
+++ b/plugins/Transitions/vue/dist/Transitions.umd.js
@@ -103,6 +103,13 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__;
 
 /***/ }),
 
+/***/ "42fd":
+/***/ (function(module, exports) {
+
+
+
+/***/ }),
+
 /***/ "8bbf":
 /***/ (function(module, exports) {
 
@@ -126,6 +133,7 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, "TransitionExporter", function() { return /* reexport */ TransitionExporter; });
+__webpack_require__.d(__webpack_exports__, "TransitionSwitcher", function() { return /* reexport */ TransitionSwitcher; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 // This file is imported into lib/wc client bundles.
@@ -276,7 +284,8 @@ var _window = window,
     Piwik_Popover = _window.Piwik_Popover;
 /* harmony default export */ var TransitionExporter = ({
   mounted: function mounted(element) {
-    element.addEventListener('click', function () {
+    element.addEventListener('click', function (e) {
+      e.preventDefault();
       var props = {
         exportFormat: 'JSON',
         exportFormatOptions: [{
@@ -325,6 +334,330 @@ function transitionExporter() {
 }
 
 window.angular.module('piwikApp').directive('transitionExporter', transitionExporter);
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=template&id=2ea01f5d
+
+var TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_1 = {
+  class: "row"
+};
+var TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_2 = {
+  class: "col s12 m3"
+};
+var TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_3 = {
+  class: "col s12 m9"
+};
+var TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_4 = {
+  class: "loadingPiwik",
+  style: {
+    "display": "none"
+  },
+  id: "transitions_inline_loading"
+};
+
+var TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_5 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+  src: "plugins/Morpheus/images/loading-blue.gif",
+  alt: ""
+}, null, -1);
+
+var TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_6 = {
+  class: "popoverContainer"
+};
+var _hoisted_7 = {
+  id: "Transitions_Error_Container"
+};
+var _hoisted_8 = {
+  class: "dataTableWrapper"
+};
+var _hoisted_9 = {
+  class: "dataTableFeatures"
+};
+var _hoisted_10 = {
+  class: "dataTableFooterNavigation"
+};
+var _hoisted_11 = {
+  class: "dataTableControls"
+};
+var _hoisted_12 = {
+  class: "row"
+};
+var _hoisted_13 = {
+  class: "dataTableAction"
+};
+
+var _hoisted_14 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+  class: "icon-export"
+}, null, -1);
+
+var _hoisted_15 = [_hoisted_14];
+var _hoisted_16 = {
+  class: "alert alert-info"
+};
+var _hoisted_17 = ["innerHTML"];
+function TransitionSwitchervue_type_template_id_2ea01f5d_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Field = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("Field");
+
+  var _component_ActivityIndicator = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ActivityIndicator");
+
+  var _directive_transition_exporter = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("transition-exporter");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", {
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])({
+      widgetBody: _ctx.isWidget
+    }),
+    id: "transitions_report"
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "select",
+    name: "actionType",
+    modelValue: _ctx.actionType,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.actionType = $event;
+    }),
+    title: _ctx.translate('Actions_ActionType'),
+    "full-width": true,
+    options: _ctx.actionTypeOptions
+  }, null, 8, ["modelValue", "title", "options"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "select",
+    name: "actionName",
+    modelValue: _ctx.actionName,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.actionName = $event;
+    }),
+    title: _ctx.translate('Transitions_TopX', 100),
+    "full-width": true,
+    disabled: !_ctx.isEnabled,
+    options: _ctx.actionNameOptions
+  }, null, 8, ["modelValue", "title", "disabled", "options"])])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ActivityIndicator, {
+    loading: _ctx.isLoading
+  }, null, 8, ["loading"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_4, [TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_5, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_LoadingData')), 1)], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], !_ctx.isLoading]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", TransitionSwitchervue_type_template_id_2ea01f5d_hoisted_6, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], !_ctx.isLoading && _ctx.isEnabled]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_7, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], !_ctx.isLoading]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_8, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_9, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_10, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_11, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_12, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", _hoisted_13, _hoisted_15, 512), [[_directive_transition_exporter]])])])])])], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.isEnabled]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_16, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Transitions_AvailableInOtherReports')) + " " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Actions_PageUrls')) + ", " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Actions_SubmenuPageTitles')) + ", " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Actions_SubmenuPagesEntry')) + " " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_And')) + " " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Actions_SubmenuPagesExit')) + ". ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    innerHTML: _ctx.availableInOtherReports2
+  }, null, 8, _hoisted_17)])], 2);
+}
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=template&id=2ea01f5d
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=script&lang=ts
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+
+
+
+
+/* harmony default export */ var TransitionSwitchervue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    isWidget: Boolean
+  },
+  components: {
+    Field: external_CorePluginsAdmin_["Field"],
+    ActivityIndicator: external_CoreHome_["ActivityIndicator"]
+  },
+  directives: {
+    TransitionExporter: TransitionExporter
+  },
+  data: function data() {
+    return {
+      actionType: 'Actions.getPageUrls',
+      actionNameOptions: [],
+      actionTypeOptions: [{
+        key: 'Actions.getPageUrls',
+        value: Object(external_CoreHome_["translate"])('Actions_PageUrls')
+      }, {
+        key: 'Actions.getPageTitles',
+        value: Object(external_CoreHome_["translate"])('Actions_WidgetPageTitles')
+      }],
+      isLoading: false,
+      actionName: null,
+      isEnabled: true,
+      noDataKey: '_____ignore_____'
+    };
+  },
+  setup: function setup() {
+    var transitionsInstance = null;
+    var transitionsUrl = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])();
+
+    var onSwitchTransitionsUrl = function onSwitchTransitionsUrl(params) {
+      if (params !== null && params !== void 0 && params.url) {
+        transitionsUrl.value = params.url;
+      }
+    };
+
+    external_CoreHome_["Matomo"].on('Transitions.switchTransitionsUrl', onSwitchTransitionsUrl);
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onMounted"])(function () {
+      external_CoreHome_["Matomo"].off('Transitions.switchTransitionsUrl', onSwitchTransitionsUrl);
+    });
+
+    var createTransitionsInstance = function createTransitionsInstance(type, actionName) {
+      if (!transitionsInstance) {
+        transitionsInstance = new window.Piwik_Transitions(type, actionName, null, '');
+      } else {
+        transitionsInstance.reset(type, actionName, '');
+      }
+    };
+
+    var getTransitionsInstance = function getTransitionsInstance() {
+      return transitionsInstance;
+    };
+
+    return {
+      transitionsUrl: transitionsUrl,
+      createTransitionsInstance: createTransitionsInstance,
+      getTransitionsInstance: getTransitionsInstance
+    };
+  },
+  watch: {
+    transitionsUrl: function transitionsUrl(newValue) {
+      var _this = this;
+
+      var url = newValue;
+
+      if (this.isUrlReport) {
+        url = url.replace('https://', '').replace('http://', '');
+      }
+
+      var found = this.actionNameOptions.find(function (option) {
+        var optionUrl = option.url;
+
+        if (optionUrl && _this.isUrlReport) {
+          optionUrl = String(optionUrl).replace('https://', '').replace('http://', '');
+        } else {
+          optionUrl = undefined;
+        }
+
+        return option.key === url || url === optionUrl && optionUrl;
+      });
+
+      if (found) {
+        this.actionName = found.key;
+      } else {
+        // we only fetch top 100 in the report... so the entry the user clicked on, might not
+        // be in the top 100
+        this.actionNameOptions = [].concat(_toConsumableArray(this.actionNameOptions), [{
+          key: url,
+          value: url
+        }]);
+        this.actionName = url;
+      }
+    },
+    actionName: function actionName(newValue) {
+      if (newValue === null || newValue === this.noDataKey) {
+        return;
+      }
+
+      var type = this.isUrlReport ? 'url' : 'title';
+      this.createTransitionsInstance(type, newValue);
+      this.getTransitionsInstance().showPopover(true);
+    },
+    actionType: function actionType(newValue) {
+      this.fetch(newValue);
+    }
+  },
+  created: function created() {
+    this.fetch(this.actionType);
+  },
+  methods: {
+    detectActionName: function detectActionName(reports) {
+      var _this2 = this;
+
+      var othersLabel = Object(external_CoreHome_["translate"])('General_Others');
+      reports.forEach(function (report) {
+        if (!report) {
+          return;
+        }
+
+        if (report.label === othersLabel) {
+          return;
+        }
+
+        var key = _this2.isUrlReport ? report.url : report.label;
+
+        if (key) {
+          var pageviews = Object(external_CoreHome_["translate"])('Transitions_NumPageviews', report.nb_hits);
+          var label = "".concat(report.label, " (").concat(pageviews, ")");
+
+          _this2.actionNameOptions.push({
+            key: key,
+            value: label,
+            url: report.url
+          });
+
+          if (!_this2.actionName) {
+            _this2.actionName = key;
+          }
+        }
+      });
+    },
+    fetch: function fetch(type) {
+      var _this3 = this;
+
+      this.isLoading = true;
+      this.actionNameOptions = [];
+      this.actionName = null;
+      external_CoreHome_["AjaxHelper"].fetch({
+        method: type,
+        flat: 1,
+        filter_limit: 100,
+        filter_sort_order: 'desc',
+        filter_sort_column: 'nb_hits',
+        showColumns: 'label,nb_hits,url'
+      }).then(function (report) {
+        _this3.isLoading = false;
+        _this3.actionNameOptions = [];
+        _this3.actionName = null;
+
+        if (report !== null && report !== void 0 && report.length) {
+          _this3.isEnabled = true;
+
+          _this3.detectActionName(report);
+        }
+
+        if (_this3.actionName === null || _this3.actionNameOptions.length === 0) {
+          _this3.isEnabled = false;
+          _this3.actionName = _this3.noDataKey;
+
+          _this3.actionNameOptions.push({
+            key: _this3.noDataKey,
+            value: Object(external_CoreHome_["translate"])('CoreHome_ThereIsNoDataForThisReport')
+          });
+        }
+      }).finally(function () {
+        _this3.isLoading = false;
+        _this3.isEnabled = false;
+      });
+    }
+  },
+  computed: {
+    isUrlReport: function isUrlReport() {
+      return this.actionType === 'Actions.getPageUrls';
+    },
+    availableInOtherReports2: function availableInOtherReports2() {
+      return Object(external_CoreHome_["translate"])('Transitions_AvailableInOtherReports2', '<span class="icon-transition"/>');
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=script&lang=ts
+ 
+// EXTERNAL MODULE: ./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue?vue&type=custom&index=0&blockType=todo
+var TransitionSwitchervue_type_custom_index_0_blockType_todo = __webpack_require__("42fd");
+var TransitionSwitchervue_type_custom_index_0_blockType_todo_default = /*#__PURE__*/__webpack_require__.n(TransitionSwitchervue_type_custom_index_0_blockType_todo);
+
+// CONCATENATED MODULE: ./plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue
+
+
+
+TransitionSwitchervue_type_script_lang_ts.render = TransitionSwitchervue_type_template_id_2ea01f5d_render
+/* custom blocks */
+
+if (typeof TransitionSwitchervue_type_custom_index_0_blockType_todo_default.a === 'function') TransitionSwitchervue_type_custom_index_0_blockType_todo_default()(TransitionSwitchervue_type_script_lang_ts)
+
+
+/* harmony default export */ var TransitionSwitcher = (TransitionSwitchervue_type_script_lang_ts);
 // CONCATENATED MODULE: ./plugins/Transitions/vue/src/index.ts
 /*!
  * Matomo - free/libre analytics platform
@@ -334,6 +667,7 @@ window.angular.module('piwikApp').directive('transitionExporter', transitionExpo
  */
 
 
+
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
 
 
diff --git a/plugins/Transitions/vue/dist/Transitions.umd.min.js b/plugins/Transitions/vue/dist/Transitions.umd.min.js
index 266e5087c4..226533f91f 100644
--- a/plugins/Transitions/vue/dist/Transitions.umd.min.js
+++ b/plugins/Transitions/vue/dist/Transitions.umd.min.js
@@ -1,10 +1,10 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["Transitions"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["Transitions"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,o){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="plugins/Transitions/vue/dist/",o(o.s="fae3")}({"19dc":function(t,o){t.exports=e},"8bbf":function(e,o){e.exports=t},a5a2:function(e,t){e.exports=o},fae3:function(e,t,o){"use strict";if(o.r(t),o.d(t,"TransitionExporter",(function(){return w})),"undefined"!==typeof window){var n=window.document.currentScript,r=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(o.p=r[1])}var i=o("19dc"),a=o("8bbf"),u={class:"transition-export-popover row"},c={class:"col l6"},l={class:"input-field"},p={class:"matomo-field"},d={class:"col l12"},s=["href"];function f(e,t,o,n,r,i){var f=Object(a["resolveComponent"])("Field");return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",u,[Object(a["createElementVNode"])("div",c,[Object(a["createElementVNode"])("div",l,[Object(a["createElementVNode"])("div",p,[Object(a["createVNode"])(f,{uicontrol:"radio",name:"exportFormat",title:e.translate("CoreHome_ExportFormat"),"model-value":e.exportFormat,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.exportFormat=t}),"full-width":!0,options:e.exportFormatOptions},null,8,["title","model-value","options"])])])]),Object(a["createElementVNode"])("div",d,[Object(a["createElementVNode"])("a",{class:"btn",href:e.exportLink,target:"_new",title:"translate('CoreHome_ExportTooltip')"},Object(a["toDisplayString"])(e.translate("General_Export")),9,s)])])}var m=o("a5a2"),v=Object(a["ref"])(""),b=Object(a["ref"])(""),x=function(e){v.value=e.actionType,b.value=e.actionName};
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["Transitions"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["Transitions"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/Transitions/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"42fd":function(e,t){},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"TransitionExporter",(function(){return N})),n.d(t,"TransitionSwitcher",(function(){return Q})),"undefined"!==typeof window){var o=window.document.currentScript,i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var r=n("19dc"),a=n("8bbf"),l={class:"transition-export-popover row"},c={class:"col l6"},s={class:"input-field"},u={class:"matomo-field"},d={class:"col l12"},p=["href"];function m(e,t,n,o,i,r){var m=Object(a["resolveComponent"])("Field");return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",l,[Object(a["createElementVNode"])("div",c,[Object(a["createElementVNode"])("div",s,[Object(a["createElementVNode"])("div",u,[Object(a["createVNode"])(m,{uicontrol:"radio",name:"exportFormat",title:e.translate("CoreHome_ExportFormat"),"model-value":e.exportFormat,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.exportFormat=t}),"full-width":!0,options:e.exportFormatOptions},null,8,["title","model-value","options"])])])]),Object(a["createElementVNode"])("div",d,[Object(a["createElementVNode"])("a",{class:"btn",href:e.exportLink,target:"_new",title:"translate('CoreHome_ExportTooltip')"},Object(a["toDisplayString"])(e.translate("General_Export")),9,p)])])}var f=n("a5a2"),b=Object(a["ref"])(""),v=Object(a["ref"])(""),O=function(e){b.value=e.actionType,v.value=e.actionName};
 /*!
  * Matomo - free/libre analytics platform
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */i["Matomo"].on("Transitions.dataChanged",x);var O=Object(a["defineComponent"])({props:{exportFormatOptions:{type:Object,required:!0}},components:{Field:m["Field"]},data:function(){return{exportFormat:"JSON"}},computed:{exportLink:function(){var e={module:"API",method:"Transitions.getTransitionsForAction"};e.actionType=v.value,e.actionName=b.value,e.idSite=i["Matomo"].idSite,e.period=i["Matomo"].period,e.date=i["Matomo"].currentDateString,e.format=this.exportFormat,e.token_auth=i["Matomo"].token_auth,e.force_api_session=1;var t=window.location.href,o=t.split("/");o.pop();var n=o.join("/");return"".concat(n,"/index.php?").concat(i["MatomoUrl"].stringify(e))}}});O.render=f;var j=O,y=window,g=y.Piwik_Popover,w={mounted:function(e){e.addEventListener("click",(function(){var e={exportFormat:"JSON",exportFormatOptions:[{key:"JSON",value:"JSON"},{key:"XML",value:"XML"}]},t=Object(i["createVueApp"])({template:'\n          <popover v-bind="bind"/>',data:function(){return{bind:e}}});t.component("popover",j);var o=document.createElement("div");t.mount(o),g.setTitle("".concat(b.value," ").concat(Object(i["translate"])("Transitions_Transitions"))),g.setContent(o),g.onClose((function(){t.unmount()}))}))}};
+ */r["Matomo"].on("Transitions.dataChanged",O);var h=Object(a["defineComponent"])({props:{exportFormatOptions:{type:Object,required:!0}},components:{Field:f["Field"]},data:function(){return{exportFormat:"JSON"}},computed:{exportLink:function(){var e={module:"API",method:"Transitions.getTransitionsForAction"};e.actionType=b.value,e.actionName=v.value,e.idSite=r["Matomo"].idSite,e.period=r["Matomo"].period,e.date=r["Matomo"].currentDateString,e.format=this.exportFormat,e.token_auth=r["Matomo"].token_auth,e.force_api_session=1;var t=window.location.href,n=t.split("/");n.pop();var o=n.join("/");return"".concat(o,"/index.php?").concat(r["MatomoUrl"].stringify(e))}}});h.render=m;var j=h,y=window,g=y.Piwik_Popover,N={mounted:function(e){e.addEventListener("click",(function(e){e.preventDefault();var t={exportFormat:"JSON",exportFormatOptions:[{key:"JSON",value:"JSON"},{key:"XML",value:"XML"}]},n=Object(r["createVueApp"])({template:'\n          <popover v-bind="bind"/>',data:function(){return{bind:t}}});n.component("popover",j);var o=document.createElement("div");n.mount(o),g.setTitle("".concat(v.value," ").concat(Object(r["translate"])("Transitions_Transitions"))),g.setContent(o),g.onClose((function(){n.unmount()}))}))}};
 /*!
  * Matomo - free/libre analytics platform
  *
@@ -17,5 +17,11 @@
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
-function _(){return{restrict:"A",link:function(e,t){w.mounted(t[0])}}}window.angular.module("piwikApp").directive("transitionExporter",_)}})}));
+function T(){return{restrict:"A",link:function(e,t){N.mounted(t[0])}}}window.angular.module("piwikApp").directive("transitionExporter",T);var _={class:"row"},E={class:"col s12 m3"},w={class:"col s12 m9"},A={class:"loadingPiwik",style:{display:"none"},id:"transitions_inline_loading"},V=Object(a["createElementVNode"])("img",{src:"plugins/Morpheus/images/loading-blue.gif",alt:""},null,-1),x={class:"popoverContainer"},S={id:"Transitions_Error_Container"},P={class:"dataTableWrapper"},C={class:"dataTableFeatures"},k={class:"dataTableFooterNavigation"},D={class:"dataTableControls"},F={class:"row"},M={class:"dataTableAction"},U=Object(a["createElementVNode"])("span",{class:"icon-export"},null,-1),I=[U],L={class:"alert alert-info"},H=["innerHTML"];function R(e,t,n,o,i,r){var l=Object(a["resolveComponent"])("Field"),c=Object(a["resolveComponent"])("ActivityIndicator"),s=Object(a["resolveDirective"])("transition-exporter");return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])({widgetBody:e.isWidget}),id:"transitions_report"},[Object(a["createElementVNode"])("div",_,[Object(a["createElementVNode"])("div",E,[Object(a["createElementVNode"])("div",null,[Object(a["createVNode"])(l,{uicontrol:"select",name:"actionType",modelValue:e.actionType,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.actionType=t}),title:e.translate("Actions_ActionType"),"full-width":!0,options:e.actionTypeOptions},null,8,["modelValue","title","options"])])]),Object(a["createElementVNode"])("div",w,[Object(a["createElementVNode"])("div",null,[Object(a["createVNode"])(l,{uicontrol:"select",name:"actionName",modelValue:e.actionName,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.actionName=t}),title:e.translate("Transitions_TopX",100),"full-width":!0,disabled:!e.isEnabled,options:e.actionNameOptions},null,8,["modelValue","title","disabled","options"])])])]),Object(a["createVNode"])(c,{loading:e.isLoading},null,8,["loading"]),Object(a["withDirectives"])(Object(a["createElementVNode"])("div",A,[V,Object(a["createElementVNode"])("span",null,Object(a["toDisplayString"])(e.translate("General_LoadingData")),1)],512),[[a["vShow"],!e.isLoading]]),Object(a["withDirectives"])(Object(a["createElementVNode"])("div",x,null,512),[[a["vShow"],!e.isLoading&&e.isEnabled]]),Object(a["withDirectives"])(Object(a["createElementVNode"])("div",S,null,512),[[a["vShow"],!e.isLoading]]),Object(a["withDirectives"])(Object(a["createElementVNode"])("div",P,[Object(a["createElementVNode"])("div",C,[Object(a["createElementVNode"])("div",k,[Object(a["createElementVNode"])("div",D,[Object(a["createElementVNode"])("div",F,[Object(a["withDirectives"])(Object(a["createElementVNode"])("a",M,I,512),[[s]])])])])])],512),[[a["vShow"],e.isEnabled]]),Object(a["createElementVNode"])("div",L,[Object(a["createTextVNode"])(Object(a["toDisplayString"])(e.translate("Transitions_AvailableInOtherReports"))+" "+Object(a["toDisplayString"])(e.translate("Actions_PageUrls"))+", "+Object(a["toDisplayString"])(e.translate("Actions_SubmenuPageTitles"))+", "+Object(a["toDisplayString"])(e.translate("Actions_SubmenuPagesEntry"))+" "+Object(a["toDisplayString"])(e.translate("General_And"))+" "+Object(a["toDisplayString"])(e.translate("Actions_SubmenuPagesExit"))+". ",1),Object(a["createElementVNode"])("span",{innerHTML:e.availableInOtherReports2},null,8,H)])],2)}function q(e){return K(e)||J(e)||G(e)||B()}function B(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function G(e,t){if(e){if("string"===typeof e)return W(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?W(e,t):void 0}}function J(e){if("undefined"!==typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function K(e){if(Array.isArray(e))return W(e)}function W(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var X=Object(a["defineComponent"])({props:{isWidget:Boolean},components:{Field:f["Field"],ActivityIndicator:r["ActivityIndicator"]},directives:{TransitionExporter:N},data:function(){return{actionType:"Actions.getPageUrls",actionNameOptions:[],actionTypeOptions:[{key:"Actions.getPageUrls",value:Object(r["translate"])("Actions_PageUrls")},{key:"Actions.getPageTitles",value:Object(r["translate"])("Actions_WidgetPageTitles")}],isLoading:!1,actionName:null,isEnabled:!0,noDataKey:"_____ignore_____"}},setup:function(){var e=null,t=Object(a["ref"])(),n=function(e){null!==e&&void 0!==e&&e.url&&(t.value=e.url)};r["Matomo"].on("Transitions.switchTransitionsUrl",n),Object(a["onMounted"])((function(){r["Matomo"].off("Transitions.switchTransitionsUrl",n)}));var o=function(t,n){e?e.reset(t,n,""):e=new window.Piwik_Transitions(t,n,null,"")},i=function(){return e};return{transitionsUrl:t,createTransitionsInstance:o,getTransitionsInstance:i}},watch:{transitionsUrl:function(e){var t=this,n=e;this.isUrlReport&&(n=n.replace("https://","").replace("http://",""));var o=this.actionNameOptions.find((function(e){var o=e.url;return o=o&&t.isUrlReport?String(o).replace("https://","").replace("http://",""):void 0,e.key===n||n===o&&o}));o?this.actionName=o.key:(this.actionNameOptions=[].concat(q(this.actionNameOptions),[{key:n,value:n}]),this.actionName=n)},actionName:function(e){if(null!==e&&e!==this.noDataKey){var t=this.isUrlReport?"url":"title";this.createTransitionsInstance(t,e),this.getTransitionsInstance().showPopover(!0)}},actionType:function(e){this.fetch(e)}},created:function(){this.fetch(this.actionType)},methods:{detectActionName:function(e){var t=this,n=Object(r["translate"])("General_Others");e.forEach((function(e){if(e&&e.label!==n){var o=t.isUrlReport?e.url:e.label;if(o){var i=Object(r["translate"])("Transitions_NumPageviews",e.nb_hits),a="".concat(e.label," (").concat(i,")");t.actionNameOptions.push({key:o,value:a,url:e.url}),t.actionName||(t.actionName=o)}}}))},fetch:function(e){var t=this;this.isLoading=!0,this.actionNameOptions=[],this.actionName=null,r["AjaxHelper"].fetch({method:e,flat:1,filter_limit:100,filter_sort_order:"desc",filter_sort_column:"nb_hits",showColumns:"label,nb_hits,url"}).then((function(e){t.isLoading=!1,t.actionNameOptions=[],t.actionName=null,null!==e&&void 0!==e&&e.length&&(t.isEnabled=!0,t.detectActionName(e)),null!==t.actionName&&0!==t.actionNameOptions.length||(t.isEnabled=!1,t.actionName=t.noDataKey,t.actionNameOptions.push({key:t.noDataKey,value:Object(r["translate"])("CoreHome_ThereIsNoDataForThisReport")}))})).finally((function(){t.isLoading=!1,t.isEnabled=!1}))}},computed:{isUrlReport:function(){return"Actions.getPageUrls"===this.actionType},availableInOtherReports2:function(){return Object(r["translate"])("Transitions_AvailableInOtherReports2",'<span class="icon-transition"/>')}}}),$=n("42fd"),z=n.n($);X.render=R,"function"===typeof z.a&&z()(X);var Q=X;
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */}})}));
 //# sourceMappingURL=Transitions.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
index 48795de64f..17d23024ed 100644
--- a/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
+++ b/plugins/Transitions/vue/src/TransitionExporter/TransitionExporter.ts
@@ -13,7 +13,9 @@ const { Piwik_Popover } = window;
 
 export default {
   mounted(element: HTMLElement): void {
-    element.addEventListener('click', () => {
+    element.addEventListener('click', (e) => {
+      e.preventDefault();
+
       const props = {
         exportFormat: 'JSON',
         exportFormatOptions: [
diff --git a/plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue b/plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue
new file mode 100644
index 0000000000..d2989c64fb
--- /dev/null
+++ b/plugins/Transitions/vue/src/TransitionSwitcher/TransitionSwitcher.vue
@@ -0,0 +1,315 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<todo>
+- get to build
+- test in UI
+- create PR
+</todo>
+
+<template>
+  <div
+    :class="{ widgetBody: isWidget }"
+    id="transitions_report"
+  >
+    <div class="row">
+      <div class="col s12 m3">
+        <div>
+          <Field
+            uicontrol="select"
+            name="actionType"
+            v-model="actionType"
+            :title="translate('Actions_ActionType')"
+            :full-width="true"
+            :options="actionTypeOptions"
+          >
+          </Field>
+        </div>
+      </div>
+      <div class="col s12 m9">
+        <div>
+          <Field
+            uicontrol="select"
+            name="actionName"
+            v-model="actionName"
+            :title="translate('Transitions_TopX', 100)"
+            :full-width="true"
+            :disabled="!isEnabled"
+            :options="actionNameOptions"
+          >
+          </Field>
+        </div>
+      </div>
+    </div>
+    <ActivityIndicator :loading="isLoading" />
+    <div
+      class="loadingPiwik"
+      style="display:none;"
+      id="transitions_inline_loading"
+      v-show="!isLoading"
+    >
+      <img src="plugins/Morpheus/images/loading-blue.gif" alt/>
+      <span>{{ translate('General_LoadingData') }}</span>
+    </div>
+    <div
+      class="popoverContainer"
+      v-show="!isLoading && isEnabled"
+    >
+    </div>
+    <div
+      id="Transitions_Error_Container"
+      v-show="!isLoading"
+    >
+    </div>
+    <div
+      class="dataTableWrapper"
+      v-show="isEnabled"
+    >
+      <div class="dataTableFeatures">
+        <div class="dataTableFooterNavigation">
+          <div class="dataTableControls">
+            <div class="row">
+              <a
+                class="dataTableAction"
+                v-transition-exporter
+              >
+                <span class="icon-export" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="alert alert-info">
+      {{ translate('Transitions_AvailableInOtherReports') }}
+      {{ translate('Actions_PageUrls') }}, {{ translate('Actions_SubmenuPageTitles') }},
+      {{ translate('Actions_SubmenuPagesEntry') }}
+      {{ translate('General_And') }}
+      {{ translate('Actions_SubmenuPagesExit') }}.
+      <span v-html="availableInOtherReports2"></span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import {
+  translate,
+  AjaxHelper,
+  Matomo,
+  ActivityIndicator,
+} from 'CoreHome';
+import { Field } from 'CorePluginsAdmin';
+import TransitionExporter from '../TransitionExporter/TransitionExporter';
+
+interface Option {
+  key: string;
+  value: unknown;
+  url?: string;
+}
+
+interface TransitionSwitcherState {
+  actionType: string;
+  actionNameOptions: Option[];
+  actionTypeOptions: Option[];
+  isLoading: boolean;
+  actionName: string|null;
+  isEnabled: boolean;
+  noDataKey: string;
+}
+
+interface ActionReportRow {
+  label: string;
+  nb_hits: string|number;
+  segment: string;
+  url: string;
+}
+
+export default defineComponent({
+  props: {
+    isWidget: Boolean,
+  },
+  components: {
+    Field,
+    ActivityIndicator,
+  },
+  directives: {
+    TransitionExporter,
+  },
+  data(): TransitionSwitcherState {
+    return {
+      actionType: 'Actions.getPageUrls',
+      actionNameOptions: [],
+      actionTypeOptions: [
+        {
+          key: 'Actions.getPageUrls',
+          value: translate('Actions_PageUrls'),
+        }, {
+          key: 'Actions.getPageTitles',
+          value: translate('Actions_WidgetPageTitles'),
+        },
+      ],
+      isLoading: false,
+      actionName: null,
+      isEnabled: true,
+      noDataKey: '_____ignore_____',
+    };
+  },
+  setup() {
+    let transitionsInstance: Transitions|null = null;
+    const transitionsUrl = ref<null|string>();
+
+    const onSwitchTransitionsUrl = (params: { url: string }) => {
+      if (params?.url) {
+        transitionsUrl.value = params.url;
+      }
+    };
+
+    Matomo.on('Transitions.switchTransitionsUrl', onSwitchTransitionsUrl);
+
+    onMounted(() => {
+      Matomo.off('Transitions.switchTransitionsUrl', onSwitchTransitionsUrl);
+    });
+
+    const createTransitionsInstance = (type: string, actionName: string) => {
+      if (!transitionsInstance) {
+        transitionsInstance = new window.Piwik_Transitions(type, actionName, null, '');
+      } else {
+        transitionsInstance.reset(type, actionName, '');
+      }
+    };
+
+    const getTransitionsInstance = () => transitionsInstance;
+
+    return {
+      transitionsUrl,
+      createTransitionsInstance,
+      getTransitionsInstance,
+    };
+  },
+  watch: {
+    transitionsUrl(newValue) {
+      let url = newValue;
+      if (this.isUrlReport) {
+        url = url.replace('https://', '').replace('http://', '');
+      }
+
+      const found = this.actionNameOptions.find((option) => {
+        let optionUrl = option.url;
+
+        if (optionUrl && this.isUrlReport) {
+          optionUrl = String(optionUrl).replace('https://', '').replace('http://', '');
+        } else {
+          optionUrl = undefined;
+        }
+
+        return option.key === url || (url === optionUrl && optionUrl);
+      });
+
+      if (found) {
+        this.actionName = found.key;
+      } else {
+        // we only fetch top 100 in the report... so the entry the user clicked on, might not
+        // be in the top 100
+        this.actionNameOptions = [
+          ...this.actionNameOptions,
+          { key: url, value: url },
+        ];
+        this.actionName = url;
+      }
+    },
+    actionName(newValue) {
+      if (newValue === null || newValue === this.noDataKey) {
+        return;
+      }
+
+      const type = this.isUrlReport ? 'url' : 'title';
+
+      this.createTransitionsInstance(type, newValue);
+
+      this.getTransitionsInstance()!.showPopover(true);
+    },
+    actionType(newValue) {
+      this.fetch(newValue);
+    },
+  },
+  created() {
+    this.fetch(this.actionType);
+  },
+  methods: {
+    detectActionName(reports: ActionReportRow[]) {
+      const othersLabel = translate('General_Others');
+
+      reports.forEach((report) => {
+        if (!report) {
+          return;
+        }
+
+        if (report.label === othersLabel) {
+          return;
+        }
+
+        const key = this.isUrlReport ? report.url : report.label;
+        if (key) {
+          const pageviews = translate('Transitions_NumPageviews', report.nb_hits as string);
+          const label = `${report.label} (${pageviews})`;
+          this.actionNameOptions.push({
+            key,
+            value: label,
+            url: report.url,
+          });
+
+          if (!this.actionName) {
+            this.actionName = key;
+          }
+        }
+      });
+    },
+    fetch(type: string) {
+      this.isLoading = true;
+      this.actionNameOptions = [];
+      this.actionName = null;
+      AjaxHelper.fetch<ActionReportRow[]>({
+        method: type,
+        flat: 1,
+        filter_limit: 100,
+        filter_sort_order: 'desc',
+        filter_sort_column: 'nb_hits',
+        showColumns: 'label,nb_hits,url',
+      }).then((report) => {
+        this.isLoading = false;
+        this.actionNameOptions = [];
+        this.actionName = null;
+
+        if (report?.length) {
+          this.isEnabled = true;
+          this.detectActionName(report);
+        }
+
+        if (this.actionName === null || this.actionNameOptions.length === 0) {
+          this.isEnabled = false;
+          this.actionName = this.noDataKey;
+          this.actionNameOptions.push({
+            key: this.noDataKey,
+            value: translate('CoreHome_ThereIsNoDataForThisReport'),
+          });
+        }
+      }).finally(() => {
+        this.isLoading = false;
+        this.isEnabled = false;
+      });
+    },
+  },
+  computed: {
+    isUrlReport() {
+      return this.actionType === 'Actions.getPageUrls';
+    },
+    availableInOtherReports2() {
+      return translate('Transitions_AvailableInOtherReports2', '<span class="icon-transition"/>');
+    },
+  },
+});
+</script>
diff --git a/plugins/Transitions/vue/src/index.ts b/plugins/Transitions/vue/src/index.ts
index f023ec17c0..dff1aa7557 100644
--- a/plugins/Transitions/vue/src/index.ts
+++ b/plugins/Transitions/vue/src/index.ts
@@ -8,3 +8,4 @@
 import './TransitionExporter/TransitionExporter.adapter.ts';
 
 export { default as TransitionExporter } from './TransitionExporter/TransitionExporter';
+export { default as TransitionSwitcher } from './TransitionSwitcher/TransitionSwitcher.vue';