[Vue] migrate multisites plugin components to vue (#18939)

* migrate multisites site directive to vue

* migrate multisites dashboard service to store

* migrate evolution filter and migrate multisites dashboard directive to vue

* get to work in UI w/o error

* remove todo

* fixing UI tests

* add some spacing

* fix css tweak

* update expected screenshots

* correct href binding

* apply review feedback

* rebuild MultiSites

27 files changed, 2297 insertions, 419 deletions

diff --git a/plugins/CoreHome/angularjs/common/filters/evolution.js b/plugins/CoreHome/angularjs/common/filters/evolution.js
index d3ba61259b..14adb00db1 100644
--- a/plugins/CoreHome/angularjs/common/filters/evolution.js
+++ b/plugins/CoreHome/angularjs/common/filters/evolution.js
@@ -8,42 +8,8 @@
     angular.module('piwikApp.filter').filter('evolution', evolutionFilter);
 
     function evolutionFilter() {
-
-        function calculateEvolution(currentValue, pastValue)
-        {
-            pastValue    = parseInt(pastValue, 10);
-            currentValue = parseInt(currentValue, 10) - pastValue;
-
-            var evolution;
-
-            if (currentValue === 0 || isNaN(currentValue)) {
-                evolution = 0;
-            } else if (pastValue === 0 || isNaN(pastValue)) {
-                evolution = 100;
-            } else {
-                evolution = (currentValue / pastValue) * 100;
-            }
-
-            return evolution;
-        }
-
-        function formatEvolution(evolution)
-        {
-            evolution = Math.round(evolution);
-
-            if (evolution > 0) {
-                evolution = '+' + evolution;
-            }
-
-            evolution += '%';
-
-            return evolution;
-        }
-
         return function(currentValue, pastValue) {
-            var evolution = calculateEvolution(currentValue, pastValue);
-
-            return formatEvolution(evolution);
+          return window.CoreHome.getFormattedEvolution(currentValue, pastValue);
         };
     }
 })();
diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js b/plugins/CoreHome/vue/dist/CoreHome.umd.js
index c2b128d0f7..e0eb58fd6d 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js
@@ -132,6 +132,7 @@ __webpack_require__.d(__webpack_exports__, "createVueApp", function() { return /
 __webpack_require__.d(__webpack_exports__, "useExternalPluginComponent", function() { return /* reexport */ useExternalPluginComponent; });
 __webpack_require__.d(__webpack_exports__, "DirectiveUtilities", function() { return /* reexport */ directiveUtilities; });
 __webpack_require__.d(__webpack_exports__, "debounce", function() { return /* reexport */ debounce; });
+__webpack_require__.d(__webpack_exports__, "getFormattedEvolution", function() { return /* reexport */ getFormattedEvolution; });
 __webpack_require__.d(__webpack_exports__, "createAngularJsAdapter", function() { return /* reexport */ createAngularJsAdapter; });
 __webpack_require__.d(__webpack_exports__, "transformAngularJsBoolAttr", function() { return /* reexport */ transformAngularJsBoolAttr; });
 __webpack_require__.d(__webpack_exports__, "transformAngularJsIntAttr", function() { return /* reexport */ transformAngularJsIntAttr; });
@@ -11990,6 +11991,39 @@ function piwikAjaxForm($parse) {
 
 piwikAjaxForm.$inject = ['$parse'];
 window.angular.module('piwikApp').directive('piwikAjaxForm', piwikAjaxForm);
+// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/getFormattedEvolution.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+function calculateEvolution(currentValue, pastValue) {
+  var pastValueParsed = parseInt(pastValue, 10);
+  var currentValueParsed = parseInt(currentValue, 10) - pastValueParsed;
+  var evolution;
+
+  if (currentValueParsed === 0 || Number.isNaN(currentValueParsed)) {
+    evolution = 0;
+  } else if (pastValueParsed === 0 || Number.isNaN(pastValueParsed)) {
+    evolution = 100;
+  } else {
+    evolution = currentValueParsed / pastValueParsed * 100;
+  }
+
+  return evolution;
+}
+
+function formatEvolution(evolution) {
+  return "".concat(evolution > 0 ? Matomo_Matomo.numbers.symbolPlus : '').concat(Math.round(evolution), "}%");
+}
+
+function getFormattedEvolution(currentValue, pastValue) {
+  var evolution = calculateEvolution(currentValue, pastValue);
+  return formatEvolution(evolution);
+}
 // CONCATENATED MODULE: ./plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.adapter.ts
 /*!
  * Matomo - free/libre analytics platform
@@ -12174,6 +12208,7 @@ function deleteCookie(name) {
 
 
 
+
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
 
 
diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
index bb1c87e53f..4365bf08ec 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js
@@ -4,7 +4,7 @@
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */window.hasBlockedContent=!1},"8bbf":function(t,n){t.exports=e},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"createVueApp",(function(){return ut})),n.d(t,"useExternalPluginComponent",(function(){return _n})),n.d(t,"DirectiveUtilities",(function(){return _t})),n.d(t,"debounce",(function(){return Ji})),n.d(t,"createAngularJsAdapter",(function(){return jt})),n.d(t,"transformAngularJsBoolAttr",(function(){return kt})),n.d(t,"transformAngularJsIntAttr",(function(){return St})),n.d(t,"removeAngularJsSpecificProperties",(function(){return Ot})),n.d(t,"clone",(function(){return Ct})),n.d(t,"cloneThenApply",(function(){return Et})),n.d(t,"activityIndicatorAdapter",(function(){return ku})),n.d(t,"ActivityIndicator",(function(){return ho})),n.d(t,"translate",(function(){return C})),n.d(t,"Alert",(function(){return st})),n.d(t,"AjaxHelper",(function(){return Xe})),n.d(t,"setCookie",(function(){return Su})),n.d(t,"getCookie",(function(){return Cu})),n.d(t,"deleteCookie",(function(){return Eu})),n.d(t,"MatomoUrl",(function(){return Ce})),n.d(t,"Matomo",(function(){return S})),n.d(t,"Periods",(function(){return p})),n.d(t,"Day",(function(){return G})),n.d(t,"Week",(function(){return X})),n.d(t,"Month",(function(){return re})),n.d(t,"Year",(function(){return ce})),n.d(t,"Range",(function(){return _})),n.d(t,"format",(function(){return E})),n.d(t,"getToday",(function(){return D})),n.d(t,"parseDate",(function(){return P})),n.d(t,"todayIsInRange",(function(){return V})),n.d(t,"DropdownMenu",(function(){return Dt})),n.d(t,"FocusAnywhereButHere",(function(){return xt})),n.d(t,"FocusIf",(function(){return Lt})),n.d(t,"Tooltips",(function(){return Lr})),n.d(t,"MatomoDialog",(function(){return Sn})),n.d(t,"ExpandOnClick",(function(){return Yt})),n.d(t,"ExpandOnHover",(function(){return nn})),n.d(t,"ShowSensitiveData",(function(){return ln})),n.d(t,"DropdownButton",(function(){return dn})),n.d(t,"SelectOnFocus",(function(){return gn})),n.d(t,"SideNav",(function(){return yn})),n.d(t,"EnrichedHeadline",(function(){return Un})),n.d(t,"ContentBlock",(function(){return er})),n.d(t,"Comparisons",(function(){return Rr})),n.d(t,"MenuDropdown",(function(){return ei})),n.d(t,"DatePicker",(function(){return li})),n.d(t,"DateRangePicker",(function(){return mi})),n.d(t,"PeriodDatePicker",(function(){return bi})),n.d(t,"Notification",(function(){return al})),n.d(t,"NotificationGroup",(function(){return yl})),n.d(t,"NotificationsStore",(function(){return fl})),n.d(t,"SitesStore",(function(){return qi})),n.d(t,"SiteSelector",(function(){return zi})),n.d(t,"QuickAccess",(function(){return da})),n.d(t,"FieldArray",(function(){return Ca})),n.d(t,"MultiPairField",(function(){return Ha})),n.d(t,"PeriodSelector",(function(){return Vo})),n.d(t,"ReportingMenu",(function(){return Xl})),n.d(t,"ReportingMenuStore",(function(){return $l})),n.d(t,"ReportingPagesStore",(function(){return Cl})),n.d(t,"ReportMetadataStore",(function(){return lc})),n.d(t,"WidgetsStore",(function(){return Yl})),n.d(t,"WidgetLoader",(function(){return fc})),n.d(t,"WidgetContainer",(function(){return Pc})),n.d(t,"WidgetByDimensionContainer",(function(){return qc})),n.d(t,"Widget",(function(){return Kc})),n.d(t,"ReportingPage",(function(){return ys})),n.d(t,"ReportExport",(function(){return Ks})),n.d(t,"Sparkline",(function(){return nu})),n.d(t,"Progressbar",(function(){return su})),n.d(t,"ContentIntro",(function(){return uu})),n.d(t,"ContentTable",(function(){return pu})),n.d(t,"AjaxForm",(function(){return yu})),"undefined"!==typeof window){var r=window.document.currentScript,i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}n("2342");var a=n("8bbf");function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e,t,n){return t&&l(e.prototype,t),n&&l(e,n),e}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}
+ */window.hasBlockedContent=!1},"8bbf":function(t,n){t.exports=e},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"createVueApp",(function(){return ut})),n.d(t,"useExternalPluginComponent",(function(){return _n})),n.d(t,"DirectiveUtilities",(function(){return _t})),n.d(t,"debounce",(function(){return Ji})),n.d(t,"getFormattedEvolution",(function(){return Cu})),n.d(t,"createAngularJsAdapter",(function(){return jt})),n.d(t,"transformAngularJsBoolAttr",(function(){return kt})),n.d(t,"transformAngularJsIntAttr",(function(){return St})),n.d(t,"removeAngularJsSpecificProperties",(function(){return Ot})),n.d(t,"clone",(function(){return Ct})),n.d(t,"cloneThenApply",(function(){return Et})),n.d(t,"activityIndicatorAdapter",(function(){return Eu})),n.d(t,"ActivityIndicator",(function(){return ho})),n.d(t,"translate",(function(){return C})),n.d(t,"Alert",(function(){return st})),n.d(t,"AjaxHelper",(function(){return Xe})),n.d(t,"setCookie",(function(){return Du})),n.d(t,"getCookie",(function(){return Pu})),n.d(t,"deleteCookie",(function(){return Vu})),n.d(t,"MatomoUrl",(function(){return Ce})),n.d(t,"Matomo",(function(){return S})),n.d(t,"Periods",(function(){return p})),n.d(t,"Day",(function(){return G})),n.d(t,"Week",(function(){return X})),n.d(t,"Month",(function(){return re})),n.d(t,"Year",(function(){return ce})),n.d(t,"Range",(function(){return _})),n.d(t,"format",(function(){return E})),n.d(t,"getToday",(function(){return D})),n.d(t,"parseDate",(function(){return P})),n.d(t,"todayIsInRange",(function(){return V})),n.d(t,"DropdownMenu",(function(){return Dt})),n.d(t,"FocusAnywhereButHere",(function(){return xt})),n.d(t,"FocusIf",(function(){return Lt})),n.d(t,"Tooltips",(function(){return Lr})),n.d(t,"MatomoDialog",(function(){return Sn})),n.d(t,"ExpandOnClick",(function(){return Yt})),n.d(t,"ExpandOnHover",(function(){return nn})),n.d(t,"ShowSensitiveData",(function(){return ln})),n.d(t,"DropdownButton",(function(){return dn})),n.d(t,"SelectOnFocus",(function(){return gn})),n.d(t,"SideNav",(function(){return yn})),n.d(t,"EnrichedHeadline",(function(){return Un})),n.d(t,"ContentBlock",(function(){return er})),n.d(t,"Comparisons",(function(){return Rr})),n.d(t,"MenuDropdown",(function(){return ei})),n.d(t,"DatePicker",(function(){return li})),n.d(t,"DateRangePicker",(function(){return mi})),n.d(t,"PeriodDatePicker",(function(){return bi})),n.d(t,"Notification",(function(){return al})),n.d(t,"NotificationGroup",(function(){return yl})),n.d(t,"NotificationsStore",(function(){return fl})),n.d(t,"SitesStore",(function(){return qi})),n.d(t,"SiteSelector",(function(){return zi})),n.d(t,"QuickAccess",(function(){return da})),n.d(t,"FieldArray",(function(){return Ca})),n.d(t,"MultiPairField",(function(){return Ha})),n.d(t,"PeriodSelector",(function(){return Vo})),n.d(t,"ReportingMenu",(function(){return Xl})),n.d(t,"ReportingMenuStore",(function(){return $l})),n.d(t,"ReportingPagesStore",(function(){return Cl})),n.d(t,"ReportMetadataStore",(function(){return lc})),n.d(t,"WidgetsStore",(function(){return Yl})),n.d(t,"WidgetLoader",(function(){return fc})),n.d(t,"WidgetContainer",(function(){return Pc})),n.d(t,"WidgetByDimensionContainer",(function(){return qc})),n.d(t,"Widget",(function(){return Kc})),n.d(t,"ReportingPage",(function(){return ys})),n.d(t,"ReportExport",(function(){return Ks})),n.d(t,"Sparkline",(function(){return nu})),n.d(t,"Progressbar",(function(){return su})),n.d(t,"ContentIntro",(function(){return uu})),n.d(t,"ContentTable",(function(){return pu})),n.d(t,"AjaxForm",(function(){return yu})),"undefined"!==typeof window){var r=window.document.currentScript,i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}n("2342");var a=n("8bbf");function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e,t,n){return t&&l(e.prototype,t),n&&l(e,n),e}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}
 /*!
  * Matomo - free/libre analytics platform
  *
@@ -547,13 +547,20 @@ function du(){return{restrict:"A",link:function(e,t){uu.mounted(t[0])}}}window.a
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */function ju(e){return{restrict:"A",scope:{submitApiMethod:"=",sendJsonPayload:"=",noErrorNotification:"=",noSuccessNotification:"=",useCustomDataBinding:"="},require:"?ngModel",transclude:!0,compile:function(t,n){return n.noErrorNotification=!!n.noErrorNotification,function(t,n,r,i,o){if(!t.submitApiMethod)throw new Error("submitApiMethod is required");if(t.ajaxForm={},t.ajaxForm.submitApiMethod=t.submitApiMethod,t.ajaxForm.sendJsonPayload=t.sendJsonPayload,t.ajaxForm.noErrorNotification=t.noErrorNotification,t.ajaxForm.noSuccessNotification=t.noSuccessNotification,t.ajaxForm.data={},i){var l=e(r.ngModel);t.ajaxForm.data=l(t.$parent)}var c={mounted:function(e,n){t.ajaxForm.submitForm=n.value.submitForm}},s='\n        <AjaxForm\n          :form-data="data"\n          :submit-api-method="submitApiMethod"\n          :send-json-payload="sendJsonPayload"\n          :no-error-notification="noErrorNotification"\n          :no-success-notification="noSuccessNotification"\n        >\n          <template v-slot:default="ajaxFormVue">\n            <div\n              ref="transcludeTarget"\n              v-special-bind-directive="{ submitForm: ajaxFormVue.submitForm }"\n            />\n          </template>\n        </AjaxForm>',u=ut({template:s,data:function(){return t.ajaxForm},setup:function(){var e=Object(a["ref"])(null);return{transcludeTarget:e}}});u.component("AjaxForm",yu),u.directive("SpecialBindDirective",c);var d=u.mount(n[0]);function p(e,n){var r,i=Ou(e).attr("name");r="checkbox"===Ou(e).attr("type")?Ou(e).is(":checked"):Ou(e).val(),t.ajaxForm.data[i]=r,n||setTimeout((function(){t.$apply()}),0)}n.on("$destroy",(function(){u.unmount()})),t.useCustomDataBinding||n.on("change","input,select",(function(e){p(e.target)})),o(t,(function(e,t){if(!t.useCustomDataBinding){var n=e.find("input,select").not("[type=submit]");n.each((function(){p(this,!0)}))}Ou(d.transcludeTarget).append(e)}))}}}}ju.$inject=["$parse"],window.angular.module("piwikApp").directive("piwikAjaxForm",ju);
+ */function ju(e){return{restrict:"A",scope:{submitApiMethod:"=",sendJsonPayload:"=",noErrorNotification:"=",noSuccessNotification:"=",useCustomDataBinding:"="},require:"?ngModel",transclude:!0,compile:function(t,n){return n.noErrorNotification=!!n.noErrorNotification,function(t,n,r,i,o){if(!t.submitApiMethod)throw new Error("submitApiMethod is required");if(t.ajaxForm={},t.ajaxForm.submitApiMethod=t.submitApiMethod,t.ajaxForm.sendJsonPayload=t.sendJsonPayload,t.ajaxForm.noErrorNotification=t.noErrorNotification,t.ajaxForm.noSuccessNotification=t.noSuccessNotification,t.ajaxForm.data={},i){var l=e(r.ngModel);t.ajaxForm.data=l(t.$parent)}var c={mounted:function(e,n){t.ajaxForm.submitForm=n.value.submitForm}},s='\n        <AjaxForm\n          :form-data="data"\n          :submit-api-method="submitApiMethod"\n          :send-json-payload="sendJsonPayload"\n          :no-error-notification="noErrorNotification"\n          :no-success-notification="noSuccessNotification"\n        >\n          <template v-slot:default="ajaxFormVue">\n            <div\n              ref="transcludeTarget"\n              v-special-bind-directive="{ submitForm: ajaxFormVue.submitForm }"\n            />\n          </template>\n        </AjaxForm>',u=ut({template:s,data:function(){return t.ajaxForm},setup:function(){var e=Object(a["ref"])(null);return{transcludeTarget:e}}});u.component("AjaxForm",yu),u.directive("SpecialBindDirective",c);var d=u.mount(n[0]);function p(e,n){var r,i=Ou(e).attr("name");r="checkbox"===Ou(e).attr("type")?Ou(e).is(":checked"):Ou(e).val(),t.ajaxForm.data[i]=r,n||setTimeout((function(){t.$apply()}),0)}n.on("$destroy",(function(){u.unmount()})),t.useCustomDataBinding||n.on("change","input,select",(function(e){p(e.target)})),o(t,(function(e,t){if(!t.useCustomDataBinding){var n=e.find("input,select").not("[type=submit]");n.each((function(){p(this,!0)}))}Ou(d.transcludeTarget).append(e)}))}}}}
 /*!
  * Matomo - free/libre analytics platform
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */var ku=jt({component:ho,scope:{loading:{vue:"loading",angularJsBind:"<"},loadingMessage:{vue:"loadingMessage",angularJsBind:"<",default:function(){return C("General_LoadingData")}}},$inject:[],directiveName:"piwikActivityIndicator"});function Su(e,t,n){var r=new Date;n||(n=432e4),r.setTime(r.getTime()+n),document.cookie="".concat(e,"=").concat(t,"; expires=").concat(r.toUTCString(),"; path=/")}function Cu(e){var t="; ".concat(document.cookie),n=t.split("; ".concat(e,"="));if(2==n.length){var r=n.pop().split(";").shift();if("undefined"!==typeof r)return r}return null}function Eu(e){var t=new Date;t.setTime(t.getTime()+-864e5),document.cookie="".concat(e,"=; expires=").concat(t.toUTCString(),"; path=/")}
+ */
+function ku(e,t){var n,r=parseInt(t,10),i=parseInt(e,10)-r;return n=0===i||Number.isNaN(i)?0:0===r||Number.isNaN(r)?100:i/r*100,n}function Su(e){return"".concat(e>0?S.numbers.symbolPlus:"").concat(Math.round(e),"}%")}function Cu(e,t){var n=ku(e,t);return Su(n)}
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */ju.$inject=["$parse"],window.angular.module("piwikApp").directive("piwikAjaxForm",ju);var Eu=jt({component:ho,scope:{loading:{vue:"loading",angularJsBind:"<"},loadingMessage:{vue:"loadingMessage",angularJsBind:"<",default:function(){return C("General_LoadingData")}}},$inject:[],directiveName:"piwikActivityIndicator"});function Du(e,t,n){var r=new Date;n||(n=432e4),r.setTime(r.getTime()+n),document.cookie="".concat(e,"=").concat(t,"; expires=").concat(r.toUTCString(),"; path=/")}function Pu(e){var t="; ".concat(document.cookie),n=t.split("; ".concat(e,"="));if(2==n.length){var r=n.pop().split(";").shift();if("undefined"!==typeof r)return r}return null}function Vu(e){var t=new Date;t.setTime(t.getTime()+-864e5),document.cookie="".concat(e,"=; expires=").concat(t.toUTCString(),"; path=/")}
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/CoreHome/vue/src/SiteSelector/Site.ts b/plugins/CoreHome/vue/src/SiteSelector/Site.ts
index ec30bb5885..ee3d818dbd 100644
--- a/plugins/CoreHome/vue/src/SiteSelector/Site.ts
+++ b/plugins/CoreHome/vue/src/SiteSelector/Site.ts
@@ -14,6 +14,7 @@ interface Site {
   currency?: string;
   timezone_name: string;
   currency_name?: string;
+  main_url: string;
   alias_urls: string[];
   excluded_ips: string;
   excluded_parameters: string;
diff --git a/plugins/CoreHome/vue/src/getFormattedEvolution.ts b/plugins/CoreHome/vue/src/getFormattedEvolution.ts
new file mode 100644
index 0000000000..84b8e57dec
--- /dev/null
+++ b/plugins/CoreHome/vue/src/getFormattedEvolution.ts
@@ -0,0 +1,37 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import Matomo from './Matomo/Matomo';
+
+function calculateEvolution(currentValue: string|number, pastValue: string|number) {
+  const pastValueParsed = parseInt(pastValue as string, 10);
+  const currentValueParsed = parseInt(currentValue as string, 10) - pastValueParsed;
+
+  let evolution: number;
+
+  if (currentValueParsed === 0 || Number.isNaN(currentValueParsed)) {
+    evolution = 0;
+  } else if (pastValueParsed === 0 || Number.isNaN(pastValueParsed)) {
+    evolution = 100;
+  } else {
+    evolution = (currentValueParsed / pastValueParsed) * 100;
+  }
+
+  return evolution;
+}
+
+function formatEvolution(evolution: number) {
+  return `${evolution > 0 ? Matomo.numbers.symbolPlus : ''}${Math.round(evolution)}}%`;
+}
+
+export default function getFormattedEvolution(
+  currentValue: string|number,
+  pastValue: string|number,
+): string {
+  const evolution = calculateEvolution(currentValue, pastValue);
+  return formatEvolution(evolution);
+}
diff --git a/plugins/CoreHome/vue/src/index.ts b/plugins/CoreHome/vue/src/index.ts
index 384ad5b484..3080549c03 100644
--- a/plugins/CoreHome/vue/src/index.ts
+++ b/plugins/CoreHome/vue/src/index.ts
@@ -60,6 +60,7 @@ export { default as createVueApp } from './createVueApp';
 export { default as useExternalPluginComponent } from './useExternalPluginComponent';
 export { default as DirectiveUtilities } from './directiveUtilities';
 export { default as debounce } from './debounce';
+export { default as getFormattedEvolution } from './getFormattedEvolution';
 export {
   default as createAngularJsAdapter,
   transformAngularJsBoolAttr,
diff --git a/plugins/CoreVue/types/index.d.ts b/plugins/CoreVue/types/index.d.ts
index 784ee26969..abef59d415 100644
--- a/plugins/CoreVue/types/index.d.ts
+++ b/plugins/CoreVue/types/index.d.ts
@@ -147,6 +147,7 @@ declare global {
     hasSuperUserAccess: boolean;
     language: string;
     cacheBuster: string;
+    numbers: Record<string, string>;
 
     updatePeriodParamsFromUrl(): void;
     updateDateInTitle(date: string, period: string): void;
@@ -176,6 +177,12 @@ declare global {
     scrollToAnchorInUrl(): void;
   }
 
+  interface NumberFormatter {
+    formatNumber(value?: number|string): string;
+    formatPercent(value?: number|string): string;
+    formatCurrency(value?: number|string, currency: string): string;
+  }
+
   interface Window {
     angular: IAngularStatic;
     globalAjaxQueue: GlobalAjaxQueue;
@@ -189,6 +196,7 @@ declare global {
     anchorLinkFix: AnchorLinkFix;
     $: JQueryStatic;
     Piwik_Popover: PiwikPopoverGlobal;
+    NumberFormatter: NumberFormatter;
 
     _pk_translate(translationStringId: string, values: string[]): string;
     require(p: string): any;
diff --git a/plugins/MultiSites/MultiSites.php b/plugins/MultiSites/MultiSites.php
index 27bf465763..7b54b59178 100644
--- a/plugins/MultiSites/MultiSites.php
+++ b/plugins/MultiSites/MultiSites.php
@@ -19,7 +19,6 @@ class MultiSites extends \Piwik\Plugin
     {
         return array(
             'AssetManager.getStylesheetFiles' => 'getStylesheetFiles',
-            'AssetManager.getJavaScriptFiles' => 'getJsFiles',
             'Translate.getClientSideTranslationKeys' => 'getClientSideTranslationKeys',
             'Metrics.getDefaultMetricTranslations'  => 'addMetricTranslations',
             'API.getPagesComparisonsDisabledFor'     => 'getPagesComparisonsDisabledFor',
@@ -80,17 +79,8 @@ class MultiSites extends \Piwik\Plugin
         $translations[] = 'MultiSites_EvolutionComparisonYear';
     }
 
-    public function getJsFiles(&$jsFiles)
-    {
-        $jsFiles[] = "plugins/MultiSites/angularjs/dashboard/dashboard-model.service.js";
-        $jsFiles[] = "plugins/MultiSites/angularjs/dashboard/dashboard.controller.js";
-        $jsFiles[] = "plugins/MultiSites/angularjs/dashboard/dashboard.directive.js";
-        $jsFiles[] = "plugins/MultiSites/angularjs/site/site.controller.js";
-        $jsFiles[] = "plugins/MultiSites/angularjs/site/site.directive.js";
-    }
-
     public function getStylesheetFiles(&$stylesheets)
     {
-        $stylesheets[] = "plugins/MultiSites/angularjs/dashboard/dashboard.directive.less";
+        $stylesheets[] = "plugins/MultiSites/vue/src/Dashboard/Dashboard.less";
     }
 }
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard-model.service.js b/plugins/MultiSites/angularjs/dashboard/dashboard-model.service.js
deleted file mode 100644
index 32c2f404ca..0000000000
--- a/plugins/MultiSites/angularjs/dashboard/dashboard-model.service.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/**
- * Model for Multisites Dashboard aka All Websites Dashboard.
- */
-(function () {
-    angular.module('piwikApp').factory('multisitesDashboardModel', multisitesDashboardModel);
-
-    multisitesDashboardModel.$inject = ['piwikApi', '$filter', '$timeout'];
-
-    function multisitesDashboardModel(piwikApi, $filter, $timeout) {
-
-        var refreshPromise = null;
-
-        // those sites are going to be displayed
-        var model = {
-            sites        : [],
-            isLoading    : false,
-            pageSize     : 25,
-            currentPage  : 0,
-            totalVisits  : '?',
-            totalPageviews : '?',
-            totalActions : '?',
-            totalRevenue : '?',
-            searchTerm   : '',
-            lastVisits   : '?',
-            lastVisitsDate : '?',
-            numberOfSites : 0,
-            loadingMessage: _pk_translate('MultiSites_LoadingWebsites'),
-            updateWebsitesList: updateWebsitesList,
-            getNumberOfFilteredSites: getNumberOfFilteredSites,
-            getNumberOfPages: getNumberOfPages,
-            getPaginationLowerBound: getPaginationLowerBound,
-            getPaginationUpperBound: getPaginationUpperBound,
-            previousPage: previousPage,
-            nextPage: nextPage,
-            searchSite: searchSite,
-            sortBy: sortBy,
-            reverse: true,
-            sortColumn: 'nb_visits',
-            fetchAllSites: fetchAllSites,
-            refreshInterval: 0
-        };
-
-        return model;
-
-        function cancelRefereshInterval()
-        {
-            if (refreshPromise) {
-                $timeout.cancel(refreshPromise);
-                refreshPromise = null;
-            };
-        }
-
-        function onError () {
-            model.errorLoadingSites = true;
-            model.sites = [];
-        }
-
-        function updateWebsitesList(report) {
-            if (!report) {
-                onError();
-                return;
-            }
-
-            var allSites = report.sites;
-            angular.forEach(allSites, function (site, index) {
-
-                if (site.hasOwnProperty('ratio') && site.ratio != 1) {
-                    var percent = NumberFormatter.formatPercent(Math.round((site.ratio * 100)));
-                    var metricName = null;
-                    var previousTotal = 0;
-                    var currentTotal = 0;
-                    var evolution = 0;
-                    var previousTotalAdjusted = 0;
-                    if (model.sortColumn == 'nb_visits' || model.sortColumn == 'visits_evolution') {
-                        previousTotal = NumberFormatter.formatNumber(site.previous_nb_visits);
-                        currentTotal = NumberFormatter.formatNumber(site.nb_visits);
-                        evolution = NumberFormatter.formatPercent(site.visits_evolution);
-                        metricName = _pk_translate("General_ColumnNbVisits");
-                        previousTotalAdjusted = NumberFormatter.formatNumber(Math.round(site.previous_nb_visits * site.ratio));
-                    }
-                    if (model.sortColumn == 'pageviews_evolution') {
-                        previousTotal = site.previous_Actions_nb_pageviews;
-                        currentTotal = site.nb_pageviews;
-                        evolution = NumberFormatter.formatPercent(site.pageviews_evolution);
-                        metricName = _pk_translate("General_ColumnPageviews");
-                        previousTotalAdjusted = NumberFormatter.formatNumber(Math.round(site.previous_Actions_nb_pageviews * site.ratio));
-                    }
-                    if (model.sortColumn == 'revenue_evolution') {
-                        previousTotal = NumberFormatter.formatCurrency(site.previous_Goal_revenue, site.currencySymbol);
-                        currentTotal = NumberFormatter.formatCurrency(site.revenue, site.currencySymbol);
-                        evolution = NumberFormatter.formatPercent(site.revenue_evolution);
-                        metricName = _pk_translate("General_ColumnRevenue");
-                        previousTotalAdjusted = NumberFormatter.formatCurrency(Math.round(site.previous_Goal_revenue * site.ratio), site.currencySymbol);
-                    }
-
-                    if (metricName) {
-                        site.tooltip = _pk_translate("MultiSites_EvolutionComparisonIncomplete", [percent]) + "\n";
-                        site.tooltip += _pk_translate("MultiSites_EvolutionComparisonProportional", [percent, previousTotalAdjusted, metricName, previousTotal]) + "\n";
-
-                        switch (site.periodName) {
-                            case 'day':
-                                site.tooltip += _pk_translate("MultiSites_EvolutionComparisonDay", [currentTotal, metricName, previousTotalAdjusted, site.previousRange, evolution]);
-                                break;
-                            case 'week':
-                                site.tooltip += _pk_translate("MultiSites_EvolutionComparisonWeek", [currentTotal, metricName, previousTotalAdjusted, site.previousRange, evolution]);
-                                break;
-                            case 'month':
-                                site.tooltip += _pk_translate("MultiSites_EvolutionComparisonMonth", [currentTotal, metricName, previousTotalAdjusted, site.previousRange, evolution]);
-                                break;
-                            case 'year':
-                                site.tooltip += _pk_translate("MultiSites_EvolutionComparisonYear", [currentTotal, metricName, previousTotalAdjusted, site.previousRange, evolution]);
-                                break;
-                        }
-                    }
-
-                }
-            });
-
-            model.totalVisits   = report.totals.nb_visits;
-            model.totalPageviews  = report.totals.nb_pageviews;
-            model.totalActions  = report.totals.nb_actions;
-            model.totalRevenue  = report.totals.revenue;
-            model.lastVisits    = report.totals.nb_visits_lastdate;
-            model.sites = allSites;
-            model.numberOfSites  = report.numSites;
-            model.lastVisitsDate = report.lastDate;
-        }
-
-        function getNumberOfFilteredSites () {
-            return model.numberOfSites;
-        }
-
-        function getNumberOfPages() {
-            return Math.ceil(getNumberOfFilteredSites() / model.pageSize - 1);
-        }
-
-        function getCurrentPagingOffset() {
-            return Math.ceil(model.currentPage * model.pageSize);
-        }
-
-        function getPaginationLowerBound() {
-            return getCurrentPagingOffset() + 1;
-        }
-
-        function getPaginationUpperBound() {
-            var end = getCurrentPagingOffset() + parseInt(model.pageSize, 10);
-            var max = getNumberOfFilteredSites();
-            if (end > max) {
-                end = max;
-            }
-            return parseInt(end, 10);
-        }
-
-        function sortBy(metric) {
-            if (model.sortColumn == metric) {
-                model.reverse = !model.reverse;
-            }
-
-            model.sortColumn = metric;
-            fetchAllSites();
-        }
-
-        function previousPage() {
-            model.currentPage = model.currentPage - 1;
-            fetchAllSites();
-        }
-
-        function nextPage() {
-            model.currentPage = model.currentPage + 1;
-            fetchAllSites();
-        }
-
-        function searchSite (term) {
-            model.searchTerm  = term;
-            model.currentPage = 0;
-            fetchAllSites();
-        }
-
-        function fetchAllSites() {
-
-            if (model.isLoading) {
-                piwikApi.abort();
-                cancelRefereshInterval();
-            }
-
-            model.isLoading = true;
-            model.errorLoadingSites = false;
-
-            var params = {
-                module: 'MultiSites',
-                action: 'getAllWithGroups',
-                hideMetricsDoc: '1',
-                filter_sort_order: 'asc',
-                filter_limit: model.pageSize,
-                filter_offset: getCurrentPagingOffset(),
-                showColumns: 'label,nb_visits,nb_pageviews,visits_evolution,visits_evolution_trend,pageviews_evolution,pageviews_evolution_trend,revenue_evolution,revenue_evolution_trend,nb_actions,revenue'
-            };
-
-            if (model.searchTerm) {
-                params.pattern = model.searchTerm;
-            }
-
-            if (model.sortColumn) {
-                params.filter_sort_column = model.sortColumn;
-            }
-
-            if (model.reverse) {
-                params.filter_sort_order = 'desc';
-            }
-
-            return piwikApi.fetch(params).then(function (response) {
-                updateWebsitesList(response);
-            }, onError).finally(function () {
-                model.isLoading = false;
-
-                if (model.refreshInterval && model.refreshInterval > 0) {
-                    cancelRefereshInterval();
-
-                    refreshPromise = $timeout(function () {
-                        refreshPromise = null;
-                        fetchAllSites(model.refreshInterval);
-                    }, model.refreshInterval * 1000);
-                }
-            });
-        }
-    }
-})();
diff --git a/plugins/MultiSites/angularjs/site/site.controller.js b/plugins/MultiSites/angularjs/site/site.controller.js
deleted file mode 100644
index 9237ec25a3..0000000000
--- a/plugins/MultiSites/angularjs/site/site.controller.js
+++ /dev/null
@@ -1,51 +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('MultiSitesSiteController', MultiSitesSiteController);
-
-    MultiSitesSiteController.$inject = ['$scope', 'piwik'];
-
-    function MultiSitesSiteController($scope, piwik){
-
-        $scope.period = piwik.period;
-        $scope.date   = piwik.broadcast.getValueFromUrl('date');
-        $scope.dashboardUrl = dashboardUrl;
-        $scope.sparklineImage = sparklineImage;
-        $scope.website.label  = piwik.helper.htmlDecode($scope.website.label);
-
-        this.getWebsite = function () {
-            return $scope.website;
-        };
-
-        function tokenParam() {
-            var token_auth = piwik.broadcast.getValueFromUrl('token_auth');
-            return token_auth.length ? '&token_auth=' + token_auth : '';
-        }
-
-        function dashboardUrl(website){
-            return 'index.php?module=CoreHome&action=index&date=' + $scope.date + '&period=' + $scope.period + '&idSite=' + website.idsite + tokenParam();
-        }
-
-        function sparklineImage(website){
-            var metric = $scope.metric;
-
-            switch ($scope.evolutionMetric) {
-                case 'visits_evolution':
-                    metric = 'nb_visits';
-                    break;
-                case 'pageviews_evolution':
-                    metric = 'nb_pageviews';
-                    break;
-                case 'revenue_evolution':
-                    metric = 'revenue';
-                    break;
-            }
-
-            return 'index.php?module=MultiSites&action=getEvolutionGraph&period=' + $scope.period + '&date=' + $scope.dateSparkline + '&evolutionBy=' + metric + '&columns=' + metric + '&idSite=' + website.idsite + '&idsite=' + website.idsite + '&viewDataTable=sparkline' + tokenParam() + '&colors=' + encodeURIComponent(JSON.stringify(piwik.getSparklineColors()));
-        }
-    }
-})();
diff --git a/plugins/MultiSites/angularjs/site/site.directive.html b/plugins/MultiSites/angularjs/site/site.directive.html
deleted file mode 100644
index a013bae07e..0000000000
--- a/plugins/MultiSites/angularjs/site/site.directive.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<tr ng-class="{'groupedWebsite': website.group, 'website': !website.group, 'group': website.isGroup}">
-    <td ng-if="!website.isGroup" class="multisites-label label">
-        <a title="View reports" ng-href="{{ dashboardUrl(website) }}" class="value truncated-text-line">{{ website.label }}</a>
-
-        <span>
-            <a rel="noreferrer noopener" target="_blank" title="{{ 'General_GoTo'|translate:website.main_url }}" ng-href="{{ website.main_url }}">
-            <span class="icon icon-outlink"></span></a>
-        </span>
-    </td>
-    <td ng-if="website.isGroup" class="multisites-label label">
-        <span class="value">{{ website.label }}</span>
-    </td>
-    <td class="multisites-column">
-        <span class="value">{{ website.nb_visits }}</span>
-    </td>
-    <td class="multisites-column">
-        <span class="value">{{ website.nb_pageviews }}</span>
-    </td>
-    <td ng-if="displayRevenueColumn" class="multisites-column">
-        <span class="value">{{ website.revenue }}</span>
-    </td>
-
-    <td ng-if="period != 'range'" class="multisites-evolution" title="{{ website.tooltip }}">
-        <div class="visits value" ng-if="!website.isGroup">
-            <span ng-show="website[evolutionMetric+'_trend'] == 1"><img class="multisites_icon" src="plugins/MultiSites/images/arrow_up.png" alt="" /> <span style="color: green;">{{ website[evolutionMetric] }}</span></span>
-            <span ng-show="website[evolutionMetric+'_trend'] == 0"><img class="multisites_icon" src="plugins/MultiSites/images/stop.png" alt="" /> <span>{{ website[evolutionMetric] }}</span></span>
-            <span ng-show="website[evolutionMetric+'_trend'] == -1"><img class="multisites_icon" src="plugins/MultiSites/images/arrow_down.png" alt="" /> <span style="color: red;">{{ website[evolutionMetric] }}</span></span>
-        </div>
-    </td>
-
-    <td ng-if="showSparklines" style="width:180px;">
-        <div ng-if="!website.isGroup" class="sparkline" style="width: 100px; margin: auto;">
-            <a rel="noreferrer noopener" target="_blank" ng-href="{{ dashboardUrl(website) }}"
-               title="{{ 'General_GoTo'|translate:('Dashboard_DashboardOf'|translate:website.label) }}">
-                <img alt="" ng-src="{{ sparklineImage(website) }}" width="100" height="25" />
-            </a>
-        </div>
-    </td>
-</tr>
-
diff --git a/plugins/MultiSites/angularjs/site/site.directive.js b/plugins/MultiSites/angularjs/site/site.directive.js
deleted file mode 100644
index 77fd683185..0000000000
--- a/plugins/MultiSites/angularjs/site/site.directive.js
+++ /dev/null
@@ -1,42 +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
- */
-
-/**
- * Renders a single website row, for instance to be used within the MultiSites Dashboard.
- *
- * Usage:
- * <div piwik-multisites-site>
- *     website="{label: 'Name', main_url: 'http://...', idsite: '...'}"
- *     evolution-metric="visits_evolution"
- *     show-sparklines="true"
- *     date-sparkline="2014-01-01,2014-02-02"
- *     display-revenue-column="true"
- *     </div>
- */
-(function () {
-    angular.module('piwikApp').directive('piwikMultisitesSite', piwikMultisitesSite);
-
-    piwikMultisitesSite.$inject = ['piwik'];
-
-    function piwikMultisitesSite(piwik){
-
-        return {
-            restrict: 'AC',
-            replace: true,
-            scope: {
-                website: '=',
-                evolutionMetric: '=',
-                showSparklines: '=',
-                dateSparkline: '=',
-                displayRevenueColumn: '=',
-                metric: '='
-            },
-            templateUrl: 'plugins/MultiSites/angularjs/site/site.directive.html?cb=' + piwik.cacheBuster,
-            controller: 'MultiSitesSiteController'
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites.png b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites.png
index 5fa5c07d42..4664788cdd 100644
--- a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites.png
+++ b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:10628683cd359569c35511396c326065e971e93693e6b8a3a747d2b7deb9d1bb
-size 282157
+oid sha256:5ae87d5a3294e50aad3d9901c35134cdc6875e4ddd826c661656be29a4523790
+size 281871
diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_changed_sort_order.png b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_changed_sort_order.png
index c6d2572126..d76e603796 100644
--- a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_changed_sort_order.png
+++ b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_changed_sort_order.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4c40a6f0595736de832b0f5443c5cc6ba962a0dbf8da686ef3ca60f513763c5d
-size 56157
+oid sha256:0433d72ccf6e4d9adcc3889d5de2d971371b7d2751e5e18cd8c18be88babd576
+size 56026
diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_page_1.png b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_page_1.png
index b58f3c9426..e554392cf2 100644
--- a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_page_1.png
+++ b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_page_1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8b3f3dcc869143f0cde259da590f424f2c2383b592518112938ac7db9527633b
-size 73017
+oid sha256:ebb8da5af6638c76f19f30ab9b5b8883d5c82a228d80897ec19ad75b1f5340d3
+size 72797
diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_range.png b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_range.png
index c735b5fe75..23ef1613c8 100644
--- a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_range.png
+++ b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_range.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca5cdfdbcc53b91c26c0d2a5fadd06857dedbd0b4dc608b865c5aa62a7b0d2ff
-size 245998
+oid sha256:635c97270639541031b26d277eb5f90e3ed6cba2089b7fb4dd93758ba1753c53
+size 245690
diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_search.png b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_search.png
index 031adb7170..9773098ffd 100644
--- a/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_search.png
+++ b/plugins/MultiSites/tests/UI/expected-screenshots/MultiSitesTest_all_websites_search.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c1d370fdaff480f0b81da0f8fd994dffce5cb1bb7b4ba37076b1b888c3c46705
-size 56187
+oid sha256:658d929e130416681ac6c0062a632516f4f0dd5b9047d8e9ba1488ef5dfc7fa3
+size 56062
diff --git a/plugins/MultiSites/vue/dist/MultiSites.umd.js b/plugins/MultiSites/vue/dist/MultiSites.umd.js
new file mode 100644
index 0000000000..abc2461684
--- /dev/null
+++ b/plugins/MultiSites/vue/dist/MultiSites.umd.js
@@ -0,0 +1,1140 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("CoreHome"), require("vue"));
+	else if(typeof define === 'function' && define.amd)
+		define(["CoreHome", ], factory);
+	else if(typeof exports === 'object')
+		exports["MultiSites"] = factory(require("CoreHome"), require("vue"));
+	else
+		root["MultiSites"] = factory(root["CoreHome"], root["Vue"]);
+})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__, __WEBPACK_EXTERNAL_MODULE__8bbf__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "plugins/MultiSites/vue/dist/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "fae3");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "19dc":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__;
+
+/***/ }),
+
+/***/ "8bbf":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;
+
+/***/ }),
+
+/***/ "fae3":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "MultisitesSite", function() { return /* reexport */ MultisitesSite; });
+__webpack_require__.d(__webpack_exports__, "DashboadStore", function() { return /* reexport */ Dashboard_store; });
+__webpack_require__.d(__webpack_exports__, "Dashboard", function() { return /* reexport */ Dashboard; });
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (false) { var getCurrentScript; }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: external "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+
+// 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/MultiSites/vue/src/MultisitesSite/MultisitesSite.vue?vue&type=template&id=96049642
+
+var _hoisted_1 = {
+  key: 0,
+  class: "multisites-label label"
+};
+var _hoisted_2 = ["href"];
+var _hoisted_3 = ["href", "title"];
+
+var _hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+  class: "icon icon-outlink"
+}, null, -1);
+
+var _hoisted_5 = [_hoisted_4];
+var _hoisted_6 = {
+  key: 1,
+  class: "multisites-label label"
+};
+var _hoisted_7 = {
+  class: "value"
+};
+var _hoisted_8 = {
+  class: "multisites-column"
+};
+var _hoisted_9 = {
+  class: "value"
+};
+var _hoisted_10 = {
+  class: "multisites-column"
+};
+var _hoisted_11 = {
+  class: "value"
+};
+var _hoisted_12 = {
+  key: 2,
+  class: "multisites-column"
+};
+var _hoisted_13 = {
+  class: "value"
+};
+var _hoisted_14 = ["title"];
+var _hoisted_15 = {
+  key: 0,
+  class: "visits value"
+};
+
+var _hoisted_16 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+  class: "multisites_icon",
+  src: "plugins/MultiSites/images/arrow_up.png",
+  alt: ""
+}, null, -1);
+
+var _hoisted_17 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])();
+
+var _hoisted_18 = {
+  style: {
+    "color": "green"
+  }
+};
+
+var _hoisted_19 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+  class: "multisites_icon",
+  src: "plugins/MultiSites/images/stop.png",
+  alt: ""
+}, null, -1);
+
+var _hoisted_20 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])();
+
+var _hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+  class: "multisites_icon",
+  src: "plugins/MultiSites/images/arrow_down.png",
+  alt: ""
+}, null, -1);
+
+var _hoisted_22 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])();
+
+var _hoisted_23 = {
+  style: {
+    "color": "red"
+  }
+};
+var _hoisted_24 = {
+  key: 4,
+  style: {
+    "width": "180px"
+  }
+};
+var _hoisted_25 = {
+  key: 0,
+  class: "sparkline",
+  style: {
+    "width": "100px",
+    "margin": "auto"
+  }
+};
+var _hoisted_26 = ["href", "title"];
+var _hoisted_27 = ["src"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("tr", {
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])({
+      'groupedWebsite': _ctx.website.group,
+      'website': !_ctx.website.group,
+      'group': _ctx.website.isGroup
+    })
+  }, [!_ctx.website.isGroup ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("td", _hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+    title: "View reports",
+    class: "value truncated-text-line",
+    href: _ctx.dashboardUrl(_ctx.website)
+  }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.websiteLabel), 9, _hoisted_2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+    rel: "noreferrer noopener",
+    target: "_blank",
+    href: _ctx.website.main_url,
+    title: _ctx.translate('General_GoTo', _ctx.website.main_url)
+  }, _hoisted_5, 8, _hoisted_3)])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), _ctx.website.isGroup ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("td", _hoisted_6, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_7, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.websiteLabel), 1)])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", _hoisted_8, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_9, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.website.nb_visits), 1)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", _hoisted_10, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_11, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.website.nb_pageviews), 1)]), _ctx.displayRevenueColumn ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("td", _hoisted_12, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_13, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.website.revenue), 1)])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), _ctx.period !== 'range' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("td", {
+    key: 3,
+    class: "multisites-evolution",
+    title: _ctx.website.tooltip
+  }, [!_ctx.website.isGroup ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_15, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, [_hoisted_16, _hoisted_17, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.website[_ctx.evolutionMetric]), 1)], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.website["".concat(_ctx.evolutionMetric, "_trend")] === 1]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, [_hoisted_19, _hoisted_20, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.website[_ctx.evolutionMetric]), 1)], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.website["".concat(_ctx.evolutionMetric, "_trend")] === 0]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, [_hoisted_21, _hoisted_22, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_23, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.website[_ctx.evolutionMetric]), 1)], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.website["".concat(_ctx.evolutionMetric, "_trend")] === -1]])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 8, _hoisted_14)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), _ctx.showSparklines ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("td", _hoisted_24, [!_ctx.website.isGroup ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_25, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+    rel: "noreferrer noopener",
+    target: "_blank",
+    href: _ctx.dashboardUrl(_ctx.website),
+    title: _ctx.translate('General_GoTo', _ctx.translate('Dashboard_DashboardOf', _ctx.websiteLabel))
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("img", {
+    alt: "",
+    width: "100",
+    height: "25",
+    src: _ctx.sparklineImage(_ctx.website)
+  }, null, 8, _hoisted_27)], 8, _hoisted_26)])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 2);
+}
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.vue?vue&type=template&id=96049642
+
+// 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/MultiSites/vue/src/MultisitesSite/MultisitesSite.vue?vue&type=script&lang=ts
+
+
+/* harmony default export */ var MultisitesSitevue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    website: {
+      type: Object,
+      required: true
+    },
+    evolutionMetric: {
+      type: String,
+      required: true
+    },
+    showSparklines: Boolean,
+    dateSparkline: String,
+    displayRevenueColumn: Boolean,
+    metric: String
+  },
+  methods: {
+    dashboardUrl: function dashboardUrl(website) {
+      return "index.php?module=CoreHome&action=index&date=".concat(this.date, "&period=").concat(this.period) + "&idSite=".concat(website.idsite).concat(this.tokenParam);
+    },
+    sparklineImage: function sparklineImage(website) {
+      var metric = this.metric;
+
+      switch (this.evolutionMetric) {
+        case 'visits_evolution':
+          metric = 'nb_visits';
+          break;
+
+        case 'pageviews_evolution':
+          metric = 'nb_pageviews';
+          break;
+
+        case 'revenue_evolution':
+          metric = 'revenue';
+          break;
+
+        default:
+          break;
+      }
+
+      return "index.php?module=MultiSites&action=getEvolutionGraph&period=".concat(this.period, "&date=") + "".concat(this.dateSparkline, "&evolutionBy=").concat(metric, "&columns=").concat(metric, "&idSite=").concat(website.idsite) + "&idsite=".concat(website.idsite, "&viewDataTable=sparkline").concat(this.tokenParam, "&colors=") + "".concat(encodeURIComponent(JSON.stringify(external_CoreHome_["Matomo"].getSparklineColors())));
+    }
+  },
+  computed: {
+    tokenParam: function tokenParam() {
+      var token_auth = external_CoreHome_["MatomoUrl"].urlParsed.value.token_auth;
+      return token_auth ? "&token_auth=".concat(token_auth) : '';
+    },
+    period: function period() {
+      return external_CoreHome_["Matomo"].period;
+    },
+    date: function date() {
+      return external_CoreHome_["MatomoUrl"].urlParsed.value.date;
+    },
+    websiteLabel: function websiteLabel() {
+      return external_CoreHome_["Matomo"].helper.htmlDecode(this.website.label);
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.vue
+
+
+
+MultisitesSitevue_type_script_lang_ts.render = render
+
+/* harmony default export */ var MultisitesSite = (MultisitesSitevue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.adapter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+/* harmony default export */ var MultisitesSite_adapter = (Object(external_CoreHome_["createAngularJsAdapter"])({
+  component: MultisitesSite,
+  scope: {
+    website: {
+      angularJsBind: '='
+    },
+    evolutionMetric: {
+      angularJsBind: '='
+    },
+    showSparklines: {
+      angularJsBind: '='
+    },
+    dateSparkline: {
+      angularJsBind: '='
+    },
+    displayRevenueColumn: {
+      angularJsBind: '='
+    },
+    metric: {
+      angularJsBind: '='
+    }
+  },
+  directiveName: 'piwikMultisitesSite'
+}));
+// 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/MultiSites/vue/src/Dashboard/Dashboard.vue?vue&type=template&id=3809d5a2
+
+var Dashboardvue_type_template_id_3809d5a2_hoisted_1 = {
+  class: "card-title"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_2 = ["innerHTML", "title"];
+var Dashboardvue_type_template_id_3809d5a2_hoisted_3 = {
+  id: "mt",
+  class: "dataTable card-table",
+  cellspacing: "0"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_4 = {
+  class: "heading"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_5 = {
+  class: "heading"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_6 = {
+  class: "heading"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_7 = {
+  class: "heading"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_8 = ["colspan"];
+var Dashboardvue_type_template_id_3809d5a2_hoisted_9 = ["value"];
+var Dashboardvue_type_template_id_3809d5a2_hoisted_10 = {
+  value: "visits_evolution"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_11 = {
+  value: "pageviews_evolution"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_12 = {
+  key: 0,
+  value: "revenue_evolution"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_13 = {
+  key: 0
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_14 = {
+  colspan: "7",
+  class: "allWebsitesLoading"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_15 = {
+  key: 1
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_16 = {
+  key: 0
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_17 = {
+  colspan: "7"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_18 = {
+  class: "notification system notification-error"
+};
+
+var Dashboardvue_type_template_id_3809d5a2_hoisted_19 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var Dashboardvue_type_template_id_3809d5a2_hoisted_20 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var Dashboardvue_type_template_id_3809d5a2_hoisted_21 = {
+  rel: "noreferrer noopener",
+  target: "_blank",
+  href: "https://matomo.org/faq/troubleshooting/faq_19489/"
+};
+
+var Dashboardvue_type_template_id_3809d5a2_hoisted_22 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" – ");
+
+var Dashboardvue_type_template_id_3809d5a2_hoisted_23 = {
+  rel: "noreferrer noopener",
+  target: "_blank",
+  href: "https://forum.matomo.org/"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_24 = ["href"];
+
+var Dashboardvue_type_template_id_3809d5a2_hoisted_25 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(". ");
+
+var Dashboardvue_type_template_id_3809d5a2_hoisted_26 = {
+  colspan: "8",
+  class: "paging"
+};
+var Dashboardvue_type_template_id_3809d5a2_hoisted_27 = {
+  class: "row"
+};
+var _hoisted_28 = {
+  class: "col s3 add_new_site"
+};
+var _hoisted_29 = ["href"];
+
+var _hoisted_30 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+  class: "icon-add"
+}, null, -1);
+
+var _hoisted_31 = {
+  class: "col s6"
+};
+var _hoisted_32 = {
+  style: {
+    "cursor": "pointer"
+  }
+};
+var _hoisted_33 = {
+  class: "dataTablePages"
+};
+var _hoisted_34 = {
+  id: "counter"
+};
+var _hoisted_35 = {
+  style: {
+    "cursor": "pointer"
+  },
+  class: "pointer"
+};
+
+var _hoisted_36 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", {
+  class: "col s3"
+}, " ", -1);
+
+var _hoisted_37 = {
+  row_id: "last"
+};
+var _hoisted_38 = {
+  colspan: "8",
+  class: "site_search"
+};
+var _hoisted_39 = {
+  class: "row"
+};
+var _hoisted_40 = {
+  class: "input-field col s12"
+};
+var _hoisted_41 = ["placeholder"];
+var _hoisted_42 = ["title"];
+function Dashboardvue_type_template_id_3809d5a2_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _this = this;
+
+  var _component_EnrichedHeadline = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("EnrichedHeadline");
+
+  var _component_ActivityIndicator = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ActivityIndicator");
+
+  var _component_MultisitesSite = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("MultisitesSite");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h2", Dashboardvue_type_template_id_3809d5a2_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_EnrichedHeadline, {
+    "help-url": "https://matomo.org/docs/manage-websites/#all-websites-dashboard",
+    "feature-name": _ctx.translate('General_AllWebsitesDashboard')
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_AllWebsitesDashboard')) + " ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+        class: "smallTitle",
+        innerHTML: _ctx.$sanitize(_this.smallTitleContent),
+        title: _ctx.smallTitleTooltip
+      }, null, 8, Dashboardvue_type_template_id_3809d5a2_hoisted_2)];
+    }),
+    _: 1
+  }, 8, ["feature-name"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("table", Dashboardvue_type_template_id_3809d5a2_hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("thead", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("th", {
+    id: "names",
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["label", {
+      columnSorted: 'label' === _ctx.sortColumn
+    }]),
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.sortBy('label');
+    })
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", Dashboardvue_type_template_id_3809d5a2_hoisted_4, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Website')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["arrow", {
+      multisites_asc: !_ctx.reverse && 'label' === _ctx.sortColumn,
+      multisites_desc: _ctx.reverse && 'label' === _ctx.sortColumn
+    }]),
+    style: {
+      "margin-left": "3.5px"
+    }
+  }, null, 2)], 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("th", {
+    id: "visits",
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["multisites-column", {
+      columnSorted: 'nb_visits' === _ctx.sortColumn
+    }]),
+    onClick: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.sortBy('nb_visits');
+    })
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["arrow", {
+      multisites_asc: !_ctx.reverse && 'nb_visits' === _ctx.sortColumn,
+      multisites_desc: _ctx.reverse && 'nb_visits' === _ctx.sortColumn
+    }]),
+    style: {
+      "margin-right": "3.5px"
+    }
+  }, null, 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", Dashboardvue_type_template_id_3809d5a2_hoisted_5, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ColumnNbVisits')), 1)], 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("th", {
+    id: "pageviews",
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["multisites-column", {
+      columnSorted: 'nb_pageviews' === _ctx.sortColumn
+    }]),
+    onClick: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.sortBy('nb_pageviews');
+    })
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["arrow", {
+      multisites_asc: !_ctx.reverse && 'nb_pageviews' === _ctx.sortColumn,
+      multisites_desc: _ctx.reverse && 'nb_pageviews' === _ctx.sortColumn
+    }]),
+    style: {
+      "margin-right": "3.5px"
+    }
+  }, null, 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", Dashboardvue_type_template_id_3809d5a2_hoisted_6, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ColumnPageviews')), 1)], 2), _ctx.displayRevenueColumn ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("th", {
+    key: 0,
+    id: "revenue",
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["multisites-column", {
+      columnSorted: 'revenue' === _ctx.sortColumn
+    }]),
+    onClick: _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.sortBy('revenue');
+    })
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["arrow", {
+      multisites_asc: !_ctx.reverse && 'revenue' === _ctx.sortColumn,
+      multisites_desc: _ctx.reverse && 'revenue' === _ctx.sortColumn
+    }]),
+    style: {
+      "margin-right": "3.5px"
+    }
+  }, null, 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", Dashboardvue_type_template_id_3809d5a2_hoisted_7, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ColumnRevenue')), 1)], 2)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("th", {
+    id: "evolution",
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])({
+      columnSorted: _ctx.evolutionSelector === _ctx.sortColumn
+    }),
+    colspan: _ctx.showSparklines ? 2 : 1
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])(["arrow", {
+      multisites_asc: !_ctx.reverse && _ctx.evolutionSelector === _ctx.sortColumn,
+      multisites_desc: _ctx.reverse && _ctx.evolutionSelector === _ctx.sortColumn
+    }]),
+    style: {
+      "margin-right": "3.5px"
+    }
+  }, null, 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    class: "evolution",
+    onClick: _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.sortBy(_ctx.evolutionSelector);
+    }),
+    style: {
+      "margin-right": "3.5px"
+    }
+  }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('MultiSites_Evolution')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("select", {
+    class: "selector browser-default",
+    id: "evolution_selector",
+    value: _ctx.evolutionSelector,
+    onChange: _cache[5] || (_cache[5] = function ($event) {
+      _ctx.evolutionSelector = $event.target.value;
+
+      _ctx.sortBy(_ctx.evolutionSelector);
+    })
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("option", Dashboardvue_type_template_id_3809d5a2_hoisted_10, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ColumnNbVisits')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("option", Dashboardvue_type_template_id_3809d5a2_hoisted_11, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ColumnPageviews')), 1), _ctx.displayRevenueColumn ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("option", Dashboardvue_type_template_id_3809d5a2_hoisted_12, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ColumnRevenue')), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 40, Dashboardvue_type_template_id_3809d5a2_hoisted_9)], 10, Dashboardvue_type_template_id_3809d5a2_hoisted_8)])]), _ctx.isLoading ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("tbody", Dashboardvue_type_template_id_3809d5a2_hoisted_13, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", Dashboardvue_type_template_id_3809d5a2_hoisted_14, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ActivityIndicator, {
+    "loading-message": _ctx.loadingMessage,
+    loading: _ctx.isLoading
+  }, null, 8, ["loading-message", "loading"])])])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), !_ctx.isLoading ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("tbody", Dashboardvue_type_template_id_3809d5a2_hoisted_15, [_ctx.errorLoadingSites ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("tr", Dashboardvue_type_template_id_3809d5a2_hoisted_16, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", Dashboardvue_type_template_id_3809d5a2_hoisted_17, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", Dashboardvue_type_template_id_3809d5a2_hoisted_18, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ErrorRequest', '', '')) + " ", 1), Dashboardvue_type_template_id_3809d5a2_hoisted_19, Dashboardvue_type_template_id_3809d5a2_hoisted_20, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_NeedMoreHelp')) + " ", 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", Dashboardvue_type_template_id_3809d5a2_hoisted_21, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Faq')), 1), Dashboardvue_type_template_id_3809d5a2_hoisted_22, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", Dashboardvue_type_template_id_3809d5a2_hoisted_23, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Feedback_CommunityHelp')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, " – ", 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.areAdsForProfessionalServicesEnabled]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", {
+    rel: "noreferrer noopener",
+    target: "_blank",
+    href: _ctx.professionalHelpUrl
+  }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Feedback_ProfessionalHelp')), 9, Dashboardvue_type_template_id_3809d5a2_hoisted_24), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.areAdsForProfessionalServicesEnabled]]), Dashboardvue_type_template_id_3809d5a2_hoisted_25])])])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(_ctx.sites, function (website) {
+    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(_component_MultisitesSite, {
+      key: website.idsite,
+      website: website,
+      "evolution-metric": _ctx.evolutionSelector,
+      "date-sparkline": _ctx.dateSparkline,
+      "show-sparklines": _ctx.showSparklines,
+      metric: _ctx.sortColumn,
+      "display-revenue-column": _ctx.displayRevenueColumn
+    }, null, 8, ["website", "evolution-metric", "date-sparkline", "show-sparklines", "metric", "display-revenue-column"]);
+  }), 128))])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tfoot", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", Dashboardvue_type_template_id_3809d5a2_hoisted_26, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", Dashboardvue_type_template_id_3809d5a2_hoisted_27, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_28, [_ctx.hasSuperUserAccess ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("a", {
+    key: 0,
+    href: _ctx.addSiteUrl
+  }, [_hoisted_30, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('SitesManager_AddSite')), 1)], 8, _hoisted_29)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_31, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    id: "prev",
+    class: "previous dataTablePrevious",
+    onClick: _cache[6] || (_cache[6] = function ($event) {
+      return _ctx.previousPage();
+    })
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_32, "« " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Previous')), 1)], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], !(_ctx.currentPage === 0)]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_33, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_34, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Pagination', _ctx.paginationLowerBound, _ctx.paginationUpperBound, _ctx.numberOfFilteredSites)), 1)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    id: "next",
+    class: "next dataTableNext",
+    onClick: _cache[7] || (_cache[7] = function ($event) {
+      return _ctx.nextPage();
+    })
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", _hoisted_35, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_Next')) + " »", 1)], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], !(_ctx.currentPage >= _ctx.numberOfPages)]])]), _hoisted_36])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("tr", _hoisted_37, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("td", _hoisted_38, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_39, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_40, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("input", {
+    type: "text",
+    onKeydown: _cache[8] || (_cache[8] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withKeys"])(function ($event) {
+      return _ctx.searchSite(_ctx.searchTerm);
+    }, ["enter"])),
+    "onUpdate:modelValue": _cache[9] || (_cache[9] = function ($event) {
+      return _ctx.searchTerm = $event;
+    }),
+    placeholder: _ctx.translate('Actions_SubmenuSitesearch')
+  }, null, 40, _hoisted_41), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vModelText"], _ctx.searchTerm]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", {
+    class: "icon-search search_ico",
+    onClick: _cache[10] || (_cache[10] = function ($event) {
+      return _ctx.searchSite(_ctx.searchTerm);
+    }),
+    title: _ctx.translate('General_ClickToSearch')
+  }, null, 8, _hoisted_42)])])])])])])]);
+}
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/Dashboard/Dashboard.vue?vue&type=template&id=3809d5a2
+
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/Dashboard/Dashboard.store.ts
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+var _window = window,
+    NumberFormatter = _window.NumberFormatter;
+
+var Dashboard_store_DashboardStore = /*#__PURE__*/function () {
+  function DashboardStore() {
+    var _this = this;
+
+    _classCallCheck(this, DashboardStore);
+
+    _defineProperty(this, "privateState", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+      sites: [],
+      isLoading: false,
+      pageSize: 25,
+      currentPage: 0,
+      totalVisits: '?',
+      totalPageviews: '?',
+      totalActions: '?',
+      totalRevenue: '?',
+      searchTerm: '',
+      lastVisits: '?',
+      lastVisitsDate: '?',
+      numberOfSites: 0,
+      loadingMessage: Object(external_CoreHome_["translate"])('MultiSites_LoadingWebsites'),
+      reverse: true,
+      sortColumn: 'nb_visits',
+      refreshInterval: 0,
+      errorLoadingSites: false
+    }));
+
+    _defineProperty(this, "refreshTimeout", null);
+
+    _defineProperty(this, "fetchAbort", null);
+
+    _defineProperty(this, "state", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["readonly"])(_this.privateState);
+    }));
+
+    _defineProperty(this, "numberOfFilteredSites", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return _this.state.value.numberOfSites;
+    }));
+
+    _defineProperty(this, "numberOfPages", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return Math.ceil(_this.numberOfFilteredSites.value / _this.state.value.pageSize - 1);
+    }));
+
+    _defineProperty(this, "currentPagingOffset", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return Math.ceil(_this.state.value.currentPage * _this.state.value.pageSize);
+    }));
+
+    _defineProperty(this, "paginationLowerBound", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return _this.currentPagingOffset.value + 1;
+    }));
+
+    _defineProperty(this, "paginationUpperBound", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      var end = _this.currentPagingOffset.value + _this.state.value.pageSize;
+      var max = _this.numberOfFilteredSites.value;
+
+      if (end > max) {
+        end = max;
+      }
+
+      return end;
+    }));
+  }
+
+  _createClass(DashboardStore, [{
+    key: "cancelRefereshInterval",
+    value: function cancelRefereshInterval() {
+      if (this.refreshTimeout) {
+        clearTimeout(this.refreshTimeout);
+        this.refreshTimeout = null;
+      }
+    }
+  }, {
+    key: "updateWebsitesList",
+    value: function updateWebsitesList(report) {
+      var _this2 = this;
+
+      if (!report) {
+        this.onError();
+        return;
+      }
+
+      var allSites = report.sites;
+      allSites.forEach(function (site) {
+        if (site.ratio !== 1 && site.ratio !== '1') {
+          var percent = NumberFormatter.formatPercent(Math.round(parseInt(site.ratio, 10) * 100));
+          var metricName = null;
+          var previousTotal = '0';
+          var currentTotal = '0';
+          var evolution = '0';
+          var previousTotalAdjusted = '0';
+
+          if (_this2.state.value.sortColumn === 'nb_visits' || _this2.state.value.sortColumn === 'visits_evolution') {
+            previousTotal = NumberFormatter.formatNumber(site.previous_nb_visits);
+            currentTotal = NumberFormatter.formatNumber(site.nb_visits);
+            evolution = NumberFormatter.formatPercent(site.visits_evolution);
+            metricName = Object(external_CoreHome_["translate"])('General_ColumnNbVisits');
+            previousTotalAdjusted = NumberFormatter.formatNumber(Math.round(parseInt(site.previous_nb_visits, 10) * parseInt(site.ratio, 10)));
+          }
+
+          if (_this2.state.value.sortColumn === 'pageviews_evolution') {
+            previousTotal = "".concat(site.previous_Actions_nb_pageviews);
+            currentTotal = "".concat(site.nb_pageviews);
+            evolution = NumberFormatter.formatPercent(site.pageviews_evolution);
+            metricName = Object(external_CoreHome_["translate"])('General_ColumnPageviews');
+            previousTotalAdjusted = NumberFormatter.formatNumber(Math.round(parseInt(site.previous_Actions_nb_pageviews, 10) * parseInt(site.ratio, 10)));
+          }
+
+          if (_this2.state.value.sortColumn === 'revenue_evolution') {
+            previousTotal = NumberFormatter.formatCurrency(site.previous_Goal_revenue, site.currencySymbol);
+            currentTotal = NumberFormatter.formatCurrency(site.revenue, site.currencySymbol);
+            evolution = NumberFormatter.formatPercent(site.revenue_evolution);
+            metricName = Object(external_CoreHome_["translate"])('General_ColumnRevenue');
+            previousTotalAdjusted = NumberFormatter.formatCurrency(Math.round(parseInt(site.previous_Goal_revenue, 10) * parseInt(site.ratio, 10)), site.currencySymbol);
+          }
+
+          if (metricName) {
+            site.tooltip = "".concat(Object(external_CoreHome_["translate"])('MultiSites_EvolutionComparisonIncomplete', [percent]), "\n");
+            site.tooltip += "".concat(Object(external_CoreHome_["translate"])('MultiSites_EvolutionComparisonProportional', [percent, "".concat(previousTotalAdjusted), metricName, "".concat(previousTotal)]), "\n");
+
+            switch (site.periodName) {
+              case 'day':
+                site.tooltip += Object(external_CoreHome_["translate"])('MultiSites_EvolutionComparisonDay', ["".concat(currentTotal), metricName, "".concat(previousTotalAdjusted), site.previousRange, "".concat(evolution)]);
+                break;
+
+              case 'week':
+                site.tooltip += Object(external_CoreHome_["translate"])('MultiSites_EvolutionComparisonWeek', ["".concat(currentTotal), metricName, "".concat(previousTotalAdjusted), site.previousRange, "".concat(evolution)]);
+                break;
+
+              case 'month':
+                site.tooltip += Object(external_CoreHome_["translate"])('MultiSites_EvolutionComparisonMonth', ["".concat(currentTotal), metricName, "".concat(previousTotalAdjusted), site.previousRange, "".concat(evolution)]);
+                break;
+
+              case 'year':
+                site.tooltip += Object(external_CoreHome_["translate"])('MultiSites_EvolutionComparisonYear', ["".concat(currentTotal), metricName, "".concat(previousTotalAdjusted), site.previousRange, "".concat(evolution)]);
+                break;
+
+              default:
+                break;
+            }
+          }
+        }
+      });
+      this.privateState.totalVisits = report.totals.nb_visits;
+      this.privateState.totalPageviews = report.totals.nb_pageviews;
+      this.privateState.totalActions = report.totals.nb_actions;
+      this.privateState.totalRevenue = report.totals.revenue;
+      this.privateState.lastVisits = report.totals.nb_visits_lastdate;
+      this.privateState.sites = allSites;
+      this.privateState.numberOfSites = report.numSites;
+      this.privateState.lastVisitsDate = report.lastDate;
+    }
+  }, {
+    key: "sortBy",
+    value: function sortBy(metric) {
+      if (this.state.value.sortColumn === metric) {
+        this.privateState.reverse = !this.state.value.reverse;
+      }
+
+      this.privateState.sortColumn = metric;
+      this.fetchAllSites();
+    }
+  }, {
+    key: "previousPage",
+    value: function previousPage() {
+      this.privateState.currentPage = this.state.value.currentPage - 1;
+      this.fetchAllSites();
+    }
+  }, {
+    key: "nextPage",
+    value: function nextPage() {
+      this.privateState.currentPage = this.state.value.currentPage + 1;
+      this.fetchAllSites();
+    }
+  }, {
+    key: "searchSite",
+    value: function searchSite(term) {
+      this.privateState.searchTerm = term;
+      this.privateState.currentPage = 0;
+      this.fetchAllSites();
+    }
+  }, {
+    key: "fetchAllSites",
+    value: function fetchAllSites() {
+      var _this3 = this;
+
+      if (this.fetchAbort) {
+        this.fetchAbort.abort();
+        this.fetchAbort = null;
+        this.cancelRefereshInterval();
+      }
+
+      this.privateState.isLoading = true;
+      this.privateState.errorLoadingSites = false;
+      var params = {
+        module: 'MultiSites',
+        action: 'getAllWithGroups',
+        hideMetricsDoc: '1',
+        filter_sort_order: 'asc',
+        filter_limit: this.state.value.pageSize,
+        filter_offset: this.currentPagingOffset.value,
+        showColumns: ['label', 'nb_visits', 'nb_pageviews', 'visits_evolution', 'visits_evolution_trend', 'pageviews_evolution', 'pageviews_evolution_trend', 'revenue_evolution', 'revenue_evolution_trend', 'nb_actions,revenue'].join(',')
+      };
+
+      if (this.privateState.searchTerm) {
+        params.pattern = this.privateState.searchTerm;
+      }
+
+      if (this.privateState.sortColumn) {
+        params.filter_sort_column = this.privateState.sortColumn;
+      }
+
+      if (this.privateState.reverse) {
+        params.filter_sort_order = 'desc';
+      }
+
+      this.fetchAbort = new AbortController();
+      return external_CoreHome_["AjaxHelper"].fetch(params, {
+        abortController: this.fetchAbort
+      }).then(function (response) {
+        _this3.updateWebsitesList(response);
+      }).catch(function () {
+        _this3.onError();
+      }).finally(function () {
+        _this3.privateState.isLoading = false;
+        _this3.fetchAbort = null;
+
+        if (_this3.state.value.refreshInterval && _this3.state.value.refreshInterval > 0) {
+          _this3.cancelRefereshInterval();
+
+          _this3.refreshTimeout = setTimeout(function () {
+            _this3.refreshTimeout = null;
+
+            _this3.fetchAllSites();
+          }, _this3.state.value.refreshInterval * 1000);
+        }
+      });
+    }
+  }, {
+    key: "onError",
+    value: function onError() {
+      this.privateState.errorLoadingSites = true;
+      this.privateState.sites = [];
+    }
+  }, {
+    key: "setRefreshInterval",
+    value: function setRefreshInterval(interval) {
+      this.privateState.refreshInterval = interval;
+    }
+  }, {
+    key: "setPageSize",
+    value: function setPageSize(pageSize) {
+      this.privateState.pageSize = pageSize;
+    }
+  }]);
+
+  return DashboardStore;
+}();
+
+/* harmony default export */ var Dashboard_store = (new Dashboard_store_DashboardStore());
+// 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/MultiSites/vue/src/Dashboard/Dashboard.vue?vue&type=script&lang=ts
+
+
+
+
+/* harmony default export */ var Dashboardvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    displayRevenueColumn: Boolean,
+    showSparklines: Boolean,
+    dateSparkline: String,
+    pageSize: Number,
+    autoRefreshTodayReport: Number
+  },
+  components: {
+    EnrichedHeadline: external_CoreHome_["EnrichedHeadline"],
+    ActivityIndicator: external_CoreHome_["ActivityIndicator"],
+    MultisitesSite: MultisitesSite
+  },
+  data: function data() {
+    return {
+      evolutionSelector: 'visits_evolution',
+      searchTerm: ''
+    };
+  },
+  created: function created() {
+    if (this.pageSize) {
+      Dashboard_store.setPageSize(this.pageSize);
+    }
+
+    this.refresh(this.autoRefreshTodayReport);
+  },
+  methods: {
+    refresh: function refresh(interval) {
+      Dashboard_store.setRefreshInterval(interval);
+      Dashboard_store.fetchAllSites();
+    },
+    sortBy: function sortBy(column) {
+      Dashboard_store.sortBy(column);
+    },
+    previousPage: function previousPage() {
+      Dashboard_store.previousPage();
+    },
+    nextPage: function nextPage() {
+      Dashboard_store.nextPage();
+    },
+    searchSite: function searchSite() {
+      Dashboard_store.searchSite(this.searchTerm);
+    }
+  },
+  computed: {
+    hasSuperUserAccess: function hasSuperUserAccess() {
+      return external_CoreHome_["Matomo"].hasSuperUserAccess;
+    },
+    date: function date() {
+      return external_CoreHome_["MatomoUrl"].urlParsed.value.date;
+    },
+    idSite: function idSite() {
+      return external_CoreHome_["MatomoUrl"].urlParsed.value.idSite;
+    },
+    url: function url() {
+      return external_CoreHome_["Matomo"].piwik_url;
+    },
+    period: function period() {
+      return external_CoreHome_["Matomo"].period;
+    },
+    areAdsForProfessionalServicesEnabled: function areAdsForProfessionalServicesEnabled() {
+      return external_CoreHome_["Matomo"].config && external_CoreHome_["Matomo"].config.are_ads_enabled;
+    },
+    sortColumn: function sortColumn() {
+      return Dashboard_store.state.value.sortColumn;
+    },
+    reverse: function reverse() {
+      return Dashboard_store.state.value.reverse;
+    },
+    smallTitleContent: function smallTitleContent() {
+      var state = Dashboard_store.state.value;
+      return Object(external_CoreHome_["translate"])('General_TotalVisitsPageviewsActionsRevenue', "<strong>".concat(state.totalVisits, "</strong>"), "<strong>".concat(state.totalPageviews, "</strong>"), "<strong>".concat(state.totalActions, "</strong>"), "<strong>".concat(state.totalRevenue, "</strong>"));
+    },
+    smallTitleTooltip: function smallTitleTooltip() {
+      var state = Dashboard_store.state.value;
+      return Object(external_CoreHome_["translate"])('General_EvolutionSummaryGeneric', Object(external_CoreHome_["translate"])('General_NVisits', "".concat(state.totalVisits)), this.date, "".concat(state.lastVisits), state.lastVisitsDate, Object(external_CoreHome_["getFormattedEvolution"])(state.totalVisits, state.lastVisits));
+    },
+    loadingMessage: function loadingMessage() {
+      return Dashboard_store.state.value.loadingMessage;
+    },
+    isLoading: function isLoading() {
+      return Dashboard_store.state.value.isLoading;
+    },
+    errorLoadingSites: function errorLoadingSites() {
+      return Dashboard_store.state.value.errorLoadingSites;
+    },
+    sites: function sites() {
+      return Dashboard_store.state.value.sites;
+    },
+    numberOfPages: function numberOfPages() {
+      return Dashboard_store.numberOfPages.value;
+    },
+    currentPage: function currentPage() {
+      return Dashboard_store.state.value.currentPage;
+    },
+    paginationLowerBound: function paginationLowerBound() {
+      return Dashboard_store.paginationLowerBound.value;
+    },
+    paginationUpperBound: function paginationUpperBound() {
+      return Dashboard_store.paginationUpperBound.value;
+    },
+    numberOfFilteredSites: function numberOfFilteredSites() {
+      return Dashboard_store.numberOfFilteredSites.value;
+    },
+    professionalHelpUrl: function professionalHelpUrl() {
+      return 'https://matomo.org/support-plans/?pk_campaign=Help&pk_medium=AjaxError&pk_content=' + 'MultiSites&pk_source=Matomo_App';
+    },
+    addSiteUrl: function addSiteUrl() {
+      return "index.php?module=SitesManager&action=index&showaddsite=1&period=".concat(this.period, "&") + "date=".concat(this.date, "&idSite=").concat(this.idSite);
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/Dashboard/Dashboard.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/Dashboard/Dashboard.vue
+
+
+
+Dashboardvue_type_script_lang_ts.render = Dashboardvue_type_template_id_3809d5a2_render
+
+/* harmony default export */ var Dashboard = (Dashboardvue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/Dashboard/Dashboard.adapter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+/* harmony default export */ var Dashboard_adapter = (Object(external_CoreHome_["createAngularJsAdapter"])({
+  component: Dashboard,
+  scope: {
+    displayRevenueColumn: {
+      angularJsBind: '@',
+      transform: external_CoreHome_["transformAngularJsBoolAttr"]
+    },
+    showSparklines: {
+      angularJsBind: '@',
+      transform: external_CoreHome_["transformAngularJsBoolAttr"]
+    },
+    dateSparkline: {
+      angularJsBind: '@'
+    },
+    pageSize: {
+      angularJsBind: '@',
+      transform: external_CoreHome_["transformAngularJsIntAttr"]
+    },
+    autoRefreshTodayReport: {
+      angularJsBind: '@',
+      transform: external_CoreHome_["transformAngularJsIntAttr"]
+    }
+  },
+  directiveName: 'piwikMultisitesDashboard'
+}));
+// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/index.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+
+
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
+
+
+
+
+/***/ })
+
+/******/ });
+});
+//# sourceMappingURL=MultiSites.umd.js.map
\ No newline at end of file
diff --git a/plugins/MultiSites/vue/dist/MultiSites.umd.min.js b/plugins/MultiSites/vue/dist/MultiSites.umd.min.js
new file mode 100644
index 0000000000..9a9e970fa8
--- /dev/null
+++ b/plugins/MultiSites/vue/dist/MultiSites.umd.min.js
@@ -0,0 +1,20 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue")):"function"===typeof define&&define.amd?define(["CoreHome"],t):"object"===typeof exports?exports["MultiSites"]=t(require("CoreHome"),require("vue")):e["MultiSites"]=t(e["CoreHome"],e["Vue"])})("undefined"!==typeof self?self:this,(function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},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/MultiSites/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"MultisitesSite",(function(){return x})),n.d(t,"DashboadStore",(function(){return Te})),n.d(t,"Dashboard",(function(){return De})),"undefined"!==typeof window){var r=window.document.currentScript,a=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);a&&(n.p=a[1])}var o=n("19dc"),i=n("8bbf"),s={key:0,class:"multisites-label label"},l=["href"],c=["href","title"],u=Object(i["createElementVNode"])("span",{class:"icon icon-outlink"},null,-1),d=[u],b={key:1,class:"multisites-label label"},m={class:"value"},p={class:"multisites-column"},v={class:"value"},f={class:"multisites-column"},h={class:"value"},g={key:2,class:"multisites-column"},O={class:"value"},j=["title"],S={key:0,class:"visits value"},_=Object(i["createElementVNode"])("img",{class:"multisites_icon",src:"plugins/MultiSites/images/arrow_up.png",alt:""},null,-1),y=Object(i["createTextVNode"])(),w={style:{color:"green"}},k=Object(i["createElementVNode"])("img",{class:"multisites_icon",src:"plugins/MultiSites/images/stop.png",alt:""},null,-1),V=Object(i["createTextVNode"])(),N=Object(i["createElementVNode"])("img",{class:"multisites_icon",src:"plugins/MultiSites/images/arrow_down.png",alt:""},null,-1),E=Object(i["createTextVNode"])(),C={style:{color:"red"}},B={key:4,style:{width:"180px"}},M={key:0,class:"sparkline",style:{width:"100px",margin:"auto"}},P=["href","title"],T=["src"];function A(e,t,n,r,a,o){return Object(i["openBlock"])(),Object(i["createElementBlock"])("tr",{class:Object(i["normalizeClass"])({groupedWebsite:e.website.group,website:!e.website.group,group:e.website.isGroup})},[e.website.isGroup?Object(i["createCommentVNode"])("",!0):(Object(i["openBlock"])(),Object(i["createElementBlock"])("td",s,[Object(i["createElementVNode"])("a",{title:"View reports",class:"value truncated-text-line",href:e.dashboardUrl(e.website)},Object(i["toDisplayString"])(e.websiteLabel),9,l),Object(i["createElementVNode"])("span",null,[Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.website.main_url,title:e.translate("General_GoTo",e.website.main_url)},d,8,c)])])),e.website.isGroup?(Object(i["openBlock"])(),Object(i["createElementBlock"])("td",b,[Object(i["createElementVNode"])("span",m,Object(i["toDisplayString"])(e.websiteLabel),1)])):Object(i["createCommentVNode"])("",!0),Object(i["createElementVNode"])("td",p,[Object(i["createElementVNode"])("span",v,Object(i["toDisplayString"])(e.website.nb_visits),1)]),Object(i["createElementVNode"])("td",f,[Object(i["createElementVNode"])("span",h,Object(i["toDisplayString"])(e.website.nb_pageviews),1)]),e.displayRevenueColumn?(Object(i["openBlock"])(),Object(i["createElementBlock"])("td",g,[Object(i["createElementVNode"])("span",O,Object(i["toDisplayString"])(e.website.revenue),1)])):Object(i["createCommentVNode"])("",!0),"range"!==e.period?(Object(i["openBlock"])(),Object(i["createElementBlock"])("td",{key:3,class:"multisites-evolution",title:e.website.tooltip},[e.website.isGroup?Object(i["createCommentVNode"])("",!0):(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",S,[Object(i["withDirectives"])(Object(i["createElementVNode"])("span",null,[_,y,Object(i["createElementVNode"])("span",w,Object(i["toDisplayString"])(e.website[e.evolutionMetric]),1)],512),[[i["vShow"],1===e.website["".concat(e.evolutionMetric,"_trend")]]]),Object(i["withDirectives"])(Object(i["createElementVNode"])("span",null,[k,V,Object(i["createElementVNode"])("span",null,Object(i["toDisplayString"])(e.website[e.evolutionMetric]),1)],512),[[i["vShow"],0===e.website["".concat(e.evolutionMetric,"_trend")]]]),Object(i["withDirectives"])(Object(i["createElementVNode"])("span",null,[N,E,Object(i["createElementVNode"])("span",C,Object(i["toDisplayString"])(e.website[e.evolutionMetric]),1)],512),[[i["vShow"],-1===e.website["".concat(e.evolutionMetric,"_trend")]]])]))],8,j)):Object(i["createCommentVNode"])("",!0),e.showSparklines?(Object(i["openBlock"])(),Object(i["createElementBlock"])("td",B,[e.website.isGroup?Object(i["createCommentVNode"])("",!0):(Object(i["openBlock"])(),Object(i["createElementBlock"])("div",M,[Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.dashboardUrl(e.website),title:e.translate("General_GoTo",e.translate("Dashboard_DashboardOf",e.websiteLabel))},[Object(i["createElementVNode"])("img",{alt:"",width:"100",height:"25",src:e.sparklineImage(e.website)},null,8,T)],8,P)]))])):Object(i["createCommentVNode"])("",!0)],2)}var D=Object(i["defineComponent"])({props:{website:{type:Object,required:!0},evolutionMetric:{type:String,required:!0},showSparklines:Boolean,dateSparkline:String,displayRevenueColumn:Boolean,metric:String},methods:{dashboardUrl:function(e){return"index.php?module=CoreHome&action=index&date=".concat(this.date,"&period=").concat(this.period)+"&idSite=".concat(e.idsite).concat(this.tokenParam)},sparklineImage:function(e){var t=this.metric;switch(this.evolutionMetric){case"visits_evolution":t="nb_visits";break;case"pageviews_evolution":t="nb_pageviews";break;case"revenue_evolution":t="revenue";break;default:break}return"index.php?module=MultiSites&action=getEvolutionGraph&period=".concat(this.period,"&date=")+"".concat(this.dateSparkline,"&evolutionBy=").concat(t,"&columns=").concat(t,"&idSite=").concat(e.idsite)+"&idsite=".concat(e.idsite,"&viewDataTable=sparkline").concat(this.tokenParam,"&colors=")+"".concat(encodeURIComponent(JSON.stringify(o["Matomo"].getSparklineColors())))}},computed:{tokenParam:function(){var e=o["MatomoUrl"].urlParsed.value.token_auth;return e?"&token_auth=".concat(e):""},period:function(){return o["Matomo"].period},date:function(){return o["MatomoUrl"].urlParsed.value.date},websiteLabel:function(){return o["Matomo"].helper.htmlDecode(this.website.label)}}});D.render=A;var x=D,G=(Object(o["createAngularJsAdapter"])({component:x,scope:{website:{angularJsBind:"="},evolutionMetric:{angularJsBind:"="},showSparklines:{angularJsBind:"="},dateSparkline:{angularJsBind:"="},displayRevenueColumn:{angularJsBind:"="},metric:{angularJsBind:"="}},directiveName:"piwikMultisitesSite"}),{class:"card-title"}),R=["innerHTML","title"],L={id:"mt",class:"dataTable card-table",cellspacing:"0"},I={class:"heading"},z={class:"heading"},U={class:"heading"},J={class:"heading"},H=["colspan"],F=["value"],q={value:"visits_evolution"},W={value:"pageviews_evolution"},K={key:0,value:"revenue_evolution"},$={key:0},Y={colspan:"7",class:"allWebsitesLoading"},Q={key:1},X={key:0},Z={colspan:"7"},ee={class:"notification system notification-error"},te=Object(i["createElementVNode"])("br",null,null,-1),ne=Object(i["createElementVNode"])("br",null,null,-1),re={rel:"noreferrer noopener",target:"_blank",href:"https://matomo.org/faq/troubleshooting/faq_19489/"},ae=Object(i["createTextVNode"])(" – "),oe={rel:"noreferrer noopener",target:"_blank",href:"https://forum.matomo.org/"},ie=["href"],se=Object(i["createTextVNode"])(". "),le={colspan:"8",class:"paging"},ce={class:"row"},ue={class:"col s3 add_new_site"},de=["href"],be=Object(i["createElementVNode"])("span",{class:"icon-add"},null,-1),me={class:"col s6"},pe={style:{cursor:"pointer"}},ve={class:"dataTablePages"},fe={id:"counter"},he={style:{cursor:"pointer"},class:"pointer"},ge=Object(i["createElementVNode"])("div",{class:"col s3"}," ",-1),Oe={row_id:"last"},je={colspan:"8",class:"site_search"},Se={class:"row"},_e={class:"input-field col s12"},ye=["placeholder"],we=["title"];
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */function ke(e,t,n,r,a,o){var s=this,l=Object(i["resolveComponent"])("EnrichedHeadline"),c=Object(i["resolveComponent"])("ActivityIndicator"),u=Object(i["resolveComponent"])("MultisitesSite");return Object(i["openBlock"])(),Object(i["createElementBlock"])("div",null,[Object(i["createElementVNode"])("h2",G,[Object(i["createVNode"])(l,{"help-url":"https://matomo.org/docs/manage-websites/#all-websites-dashboard","feature-name":e.translate("General_AllWebsitesDashboard")},{default:Object(i["withCtx"])((function(){return[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.translate("General_AllWebsitesDashboard"))+" ",1),Object(i["createElementVNode"])("span",{class:"smallTitle",innerHTML:e.$sanitize(s.smallTitleContent),title:e.smallTitleTooltip},null,8,R)]})),_:1},8,["feature-name"])]),Object(i["createElementVNode"])("table",L,[Object(i["createElementVNode"])("thead",null,[Object(i["createElementVNode"])("tr",null,[Object(i["createElementVNode"])("th",{id:"names",class:Object(i["normalizeClass"])(["label",{columnSorted:"label"===e.sortColumn}]),onClick:t[0]||(t[0]=function(t){return e.sortBy("label")})},[Object(i["createElementVNode"])("span",I,Object(i["toDisplayString"])(e.translate("General_Website")),1),Object(i["createElementVNode"])("span",{class:Object(i["normalizeClass"])(["arrow",{multisites_asc:!e.reverse&&"label"===e.sortColumn,multisites_desc:e.reverse&&"label"===e.sortColumn}]),style:{"margin-left":"3.5px"}},null,2)],2),Object(i["createElementVNode"])("th",{id:"visits",class:Object(i["normalizeClass"])(["multisites-column",{columnSorted:"nb_visits"===e.sortColumn}]),onClick:t[1]||(t[1]=function(t){return e.sortBy("nb_visits")})},[Object(i["createElementVNode"])("span",{class:Object(i["normalizeClass"])(["arrow",{multisites_asc:!e.reverse&&"nb_visits"===e.sortColumn,multisites_desc:e.reverse&&"nb_visits"===e.sortColumn}]),style:{"margin-right":"3.5px"}},null,2),Object(i["createElementVNode"])("span",z,Object(i["toDisplayString"])(e.translate("General_ColumnNbVisits")),1)],2),Object(i["createElementVNode"])("th",{id:"pageviews",class:Object(i["normalizeClass"])(["multisites-column",{columnSorted:"nb_pageviews"===e.sortColumn}]),onClick:t[2]||(t[2]=function(t){return e.sortBy("nb_pageviews")})},[Object(i["createElementVNode"])("span",{class:Object(i["normalizeClass"])(["arrow",{multisites_asc:!e.reverse&&"nb_pageviews"===e.sortColumn,multisites_desc:e.reverse&&"nb_pageviews"===e.sortColumn}]),style:{"margin-right":"3.5px"}},null,2),Object(i["createElementVNode"])("span",U,Object(i["toDisplayString"])(e.translate("General_ColumnPageviews")),1)],2),e.displayRevenueColumn?(Object(i["openBlock"])(),Object(i["createElementBlock"])("th",{key:0,id:"revenue",class:Object(i["normalizeClass"])(["multisites-column",{columnSorted:"revenue"===e.sortColumn}]),onClick:t[3]||(t[3]=function(t){return e.sortBy("revenue")})},[Object(i["createElementVNode"])("span",{class:Object(i["normalizeClass"])(["arrow",{multisites_asc:!e.reverse&&"revenue"===e.sortColumn,multisites_desc:e.reverse&&"revenue"===e.sortColumn}]),style:{"margin-right":"3.5px"}},null,2),Object(i["createElementVNode"])("span",J,Object(i["toDisplayString"])(e.translate("General_ColumnRevenue")),1)],2)):Object(i["createCommentVNode"])("",!0),Object(i["createElementVNode"])("th",{id:"evolution",class:Object(i["normalizeClass"])({columnSorted:e.evolutionSelector===e.sortColumn}),colspan:e.showSparklines?2:1},[Object(i["createElementVNode"])("span",{class:Object(i["normalizeClass"])(["arrow",{multisites_asc:!e.reverse&&e.evolutionSelector===e.sortColumn,multisites_desc:e.reverse&&e.evolutionSelector===e.sortColumn}]),style:{"margin-right":"3.5px"}},null,2),Object(i["createElementVNode"])("span",{class:"evolution",onClick:t[4]||(t[4]=function(t){return e.sortBy(e.evolutionSelector)}),style:{"margin-right":"3.5px"}},Object(i["toDisplayString"])(e.translate("MultiSites_Evolution")),1),Object(i["createElementVNode"])("select",{class:"selector browser-default",id:"evolution_selector",value:e.evolutionSelector,onChange:t[5]||(t[5]=function(t){e.evolutionSelector=t.target.value,e.sortBy(e.evolutionSelector)})},[Object(i["createElementVNode"])("option",q,Object(i["toDisplayString"])(e.translate("General_ColumnNbVisits")),1),Object(i["createElementVNode"])("option",W,Object(i["toDisplayString"])(e.translate("General_ColumnPageviews")),1),e.displayRevenueColumn?(Object(i["openBlock"])(),Object(i["createElementBlock"])("option",K,Object(i["toDisplayString"])(e.translate("General_ColumnRevenue")),1)):Object(i["createCommentVNode"])("",!0)],40,F)],10,H)])]),e.isLoading?(Object(i["openBlock"])(),Object(i["createElementBlock"])("tbody",$,[Object(i["createElementVNode"])("tr",null,[Object(i["createElementVNode"])("td",Y,[Object(i["createVNode"])(c,{"loading-message":e.loadingMessage,loading:e.isLoading},null,8,["loading-message","loading"])])])])):Object(i["createCommentVNode"])("",!0),e.isLoading?Object(i["createCommentVNode"])("",!0):(Object(i["openBlock"])(),Object(i["createElementBlock"])("tbody",Q,[e.errorLoadingSites?(Object(i["openBlock"])(),Object(i["createElementBlock"])("tr",X,[Object(i["createElementVNode"])("td",Z,[Object(i["createElementVNode"])("div",ee,[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.translate("General_ErrorRequest","",""))+" ",1),te,ne,Object(i["createTextVNode"])(" "+Object(i["toDisplayString"])(e.translate("General_NeedMoreHelp"))+" ",1),Object(i["createElementVNode"])("a",re,Object(i["toDisplayString"])(e.translate("General_Faq")),1),ae,Object(i["createElementVNode"])("a",oe,Object(i["toDisplayString"])(e.translate("Feedback_CommunityHelp")),1),Object(i["withDirectives"])(Object(i["createElementVNode"])("span",null," – ",512),[[i["vShow"],e.areAdsForProfessionalServicesEnabled]]),Object(i["withDirectives"])(Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.professionalHelpUrl},Object(i["toDisplayString"])(e.translate("Feedback_ProfessionalHelp")),9,ie),[[i["vShow"],e.areAdsForProfessionalServicesEnabled]]),se])])])):Object(i["createCommentVNode"])("",!0),(Object(i["openBlock"])(!0),Object(i["createElementBlock"])(i["Fragment"],null,Object(i["renderList"])(e.sites,(function(t){return Object(i["openBlock"])(),Object(i["createBlock"])(u,{key:t.idsite,website:t,"evolution-metric":e.evolutionSelector,"date-sparkline":e.dateSparkline,"show-sparklines":e.showSparklines,metric:e.sortColumn,"display-revenue-column":e.displayRevenueColumn},null,8,["website","evolution-metric","date-sparkline","show-sparklines","metric","display-revenue-column"])})),128))])),Object(i["createElementVNode"])("tfoot",null,[Object(i["createElementVNode"])("tr",null,[Object(i["createElementVNode"])("td",le,[Object(i["createElementVNode"])("div",ce,[Object(i["createElementVNode"])("div",ue,[e.hasSuperUserAccess?(Object(i["openBlock"])(),Object(i["createElementBlock"])("a",{key:0,href:e.addSiteUrl},[be,Object(i["createTextVNode"])(" "+Object(i["toDisplayString"])(e.translate("SitesManager_AddSite")),1)],8,de)):Object(i["createCommentVNode"])("",!0)]),Object(i["createElementVNode"])("div",me,[Object(i["withDirectives"])(Object(i["createElementVNode"])("span",{id:"prev",class:"previous dataTablePrevious",onClick:t[6]||(t[6]=function(t){return e.previousPage()})},[Object(i["createElementVNode"])("span",pe,"« "+Object(i["toDisplayString"])(e.translate("General_Previous")),1)],512),[[i["vShow"],!(0===e.currentPage)]]),Object(i["createElementVNode"])("span",ve,[Object(i["createElementVNode"])("span",fe,Object(i["toDisplayString"])(e.translate("General_Pagination",e.paginationLowerBound,e.paginationUpperBound,e.numberOfFilteredSites)),1)]),Object(i["withDirectives"])(Object(i["createElementVNode"])("span",{id:"next",class:"next dataTableNext",onClick:t[7]||(t[7]=function(t){return e.nextPage()})},[Object(i["createElementVNode"])("span",he,Object(i["toDisplayString"])(e.translate("General_Next"))+" »",1)],512),[[i["vShow"],!(e.currentPage>=e.numberOfPages)]])]),ge])])]),Object(i["createElementVNode"])("tr",Oe,[Object(i["createElementVNode"])("td",je,[Object(i["createElementVNode"])("div",Se,[Object(i["createElementVNode"])("div",_e,[Object(i["withDirectives"])(Object(i["createElementVNode"])("input",{type:"text",onKeydown:t[8]||(t[8]=Object(i["withKeys"])((function(t){return e.searchSite(e.searchTerm)}),["enter"])),"onUpdate:modelValue":t[9]||(t[9]=function(t){return e.searchTerm=t}),placeholder:e.translate("Actions_SubmenuSitesearch")},null,40,ye),[[i["vModelText"],e.searchTerm]]),Object(i["createElementVNode"])("span",{class:"icon-search search_ico",onClick:t[10]||(t[10]=function(t){return e.searchSite(e.searchTerm)}),title:e.translate("General_ClickToSearch")},null,8,we)])])])])])])])}function Ve(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Ne(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function Ee(e,t,n){return t&&Ne(e.prototype,t),n&&Ne(e,n),e}function Ce(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */var Be=window,Me=Be.NumberFormatter,Pe=function(){function e(){var t=this;Ve(this,e),Ce(this,"privateState",Object(i["reactive"])({sites:[],isLoading:!1,pageSize:25,currentPage:0,totalVisits:"?",totalPageviews:"?",totalActions:"?",totalRevenue:"?",searchTerm:"",lastVisits:"?",lastVisitsDate:"?",numberOfSites:0,loadingMessage:Object(o["translate"])("MultiSites_LoadingWebsites"),reverse:!0,sortColumn:"nb_visits",refreshInterval:0,errorLoadingSites:!1})),Ce(this,"refreshTimeout",null),Ce(this,"fetchAbort",null),Ce(this,"state",Object(i["computed"])((function(){return Object(i["readonly"])(t.privateState)}))),Ce(this,"numberOfFilteredSites",Object(i["computed"])((function(){return t.state.value.numberOfSites}))),Ce(this,"numberOfPages",Object(i["computed"])((function(){return Math.ceil(t.numberOfFilteredSites.value/t.state.value.pageSize-1)}))),Ce(this,"currentPagingOffset",Object(i["computed"])((function(){return Math.ceil(t.state.value.currentPage*t.state.value.pageSize)}))),Ce(this,"paginationLowerBound",Object(i["computed"])((function(){return t.currentPagingOffset.value+1}))),Ce(this,"paginationUpperBound",Object(i["computed"])((function(){var e=t.currentPagingOffset.value+t.state.value.pageSize,n=t.numberOfFilteredSites.value;return e>n&&(e=n),e})))}return Ee(e,[{key:"cancelRefereshInterval",value:function(){this.refreshTimeout&&(clearTimeout(this.refreshTimeout),this.refreshTimeout=null)}},{key:"updateWebsitesList",value:function(e){var t=this;if(e){var n=e.sites;n.forEach((function(e){if(1!==e.ratio&&"1"!==e.ratio){var n=Me.formatPercent(Math.round(100*parseInt(e.ratio,10))),r=null,a="0",i="0",s="0",l="0";if("nb_visits"!==t.state.value.sortColumn&&"visits_evolution"!==t.state.value.sortColumn||(a=Me.formatNumber(e.previous_nb_visits),i=Me.formatNumber(e.nb_visits),s=Me.formatPercent(e.visits_evolution),r=Object(o["translate"])("General_ColumnNbVisits"),l=Me.formatNumber(Math.round(parseInt(e.previous_nb_visits,10)*parseInt(e.ratio,10)))),"pageviews_evolution"===t.state.value.sortColumn&&(a="".concat(e.previous_Actions_nb_pageviews),i="".concat(e.nb_pageviews),s=Me.formatPercent(e.pageviews_evolution),r=Object(o["translate"])("General_ColumnPageviews"),l=Me.formatNumber(Math.round(parseInt(e.previous_Actions_nb_pageviews,10)*parseInt(e.ratio,10)))),"revenue_evolution"===t.state.value.sortColumn&&(a=Me.formatCurrency(e.previous_Goal_revenue,e.currencySymbol),i=Me.formatCurrency(e.revenue,e.currencySymbol),s=Me.formatPercent(e.revenue_evolution),r=Object(o["translate"])("General_ColumnRevenue"),l=Me.formatCurrency(Math.round(parseInt(e.previous_Goal_revenue,10)*parseInt(e.ratio,10)),e.currencySymbol)),r)switch(e.tooltip="".concat(Object(o["translate"])("MultiSites_EvolutionComparisonIncomplete",[n]),"\n"),e.tooltip+="".concat(Object(o["translate"])("MultiSites_EvolutionComparisonProportional",[n,"".concat(l),r,"".concat(a)]),"\n"),e.periodName){case"day":e.tooltip+=Object(o["translate"])("MultiSites_EvolutionComparisonDay",["".concat(i),r,"".concat(l),e.previousRange,"".concat(s)]);break;case"week":e.tooltip+=Object(o["translate"])("MultiSites_EvolutionComparisonWeek",["".concat(i),r,"".concat(l),e.previousRange,"".concat(s)]);break;case"month":e.tooltip+=Object(o["translate"])("MultiSites_EvolutionComparisonMonth",["".concat(i),r,"".concat(l),e.previousRange,"".concat(s)]);break;case"year":e.tooltip+=Object(o["translate"])("MultiSites_EvolutionComparisonYear",["".concat(i),r,"".concat(l),e.previousRange,"".concat(s)]);break;default:break}}})),this.privateState.totalVisits=e.totals.nb_visits,this.privateState.totalPageviews=e.totals.nb_pageviews,this.privateState.totalActions=e.totals.nb_actions,this.privateState.totalRevenue=e.totals.revenue,this.privateState.lastVisits=e.totals.nb_visits_lastdate,this.privateState.sites=n,this.privateState.numberOfSites=e.numSites,this.privateState.lastVisitsDate=e.lastDate}else this.onError()}},{key:"sortBy",value:function(e){this.state.value.sortColumn===e&&(this.privateState.reverse=!this.state.value.reverse),this.privateState.sortColumn=e,this.fetchAllSites()}},{key:"previousPage",value:function(){this.privateState.currentPage=this.state.value.currentPage-1,this.fetchAllSites()}},{key:"nextPage",value:function(){this.privateState.currentPage=this.state.value.currentPage+1,this.fetchAllSites()}},{key:"searchSite",value:function(e){this.privateState.searchTerm=e,this.privateState.currentPage=0,this.fetchAllSites()}},{key:"fetchAllSites",value:function(){var e=this;this.fetchAbort&&(this.fetchAbort.abort(),this.fetchAbort=null,this.cancelRefereshInterval()),this.privateState.isLoading=!0,this.privateState.errorLoadingSites=!1;var t={module:"MultiSites",action:"getAllWithGroups",hideMetricsDoc:"1",filter_sort_order:"asc",filter_limit:this.state.value.pageSize,filter_offset:this.currentPagingOffset.value,showColumns:["label","nb_visits","nb_pageviews","visits_evolution","visits_evolution_trend","pageviews_evolution","pageviews_evolution_trend","revenue_evolution","revenue_evolution_trend","nb_actions,revenue"].join(",")};return this.privateState.searchTerm&&(t.pattern=this.privateState.searchTerm),this.privateState.sortColumn&&(t.filter_sort_column=this.privateState.sortColumn),this.privateState.reverse&&(t.filter_sort_order="desc"),this.fetchAbort=new AbortController,o["AjaxHelper"].fetch(t,{abortController:this.fetchAbort}).then((function(t){e.updateWebsitesList(t)})).catch((function(){e.onError()})).finally((function(){e.privateState.isLoading=!1,e.fetchAbort=null,e.state.value.refreshInterval&&e.state.value.refreshInterval>0&&(e.cancelRefereshInterval(),e.refreshTimeout=setTimeout((function(){e.refreshTimeout=null,e.fetchAllSites()}),1e3*e.state.value.refreshInterval))}))}},{key:"onError",value:function(){this.privateState.errorLoadingSites=!0,this.privateState.sites=[]}},{key:"setRefreshInterval",value:function(e){this.privateState.refreshInterval=e}},{key:"setPageSize",value:function(e){this.privateState.pageSize=e}}]),e}(),Te=new Pe,Ae=Object(i["defineComponent"])({props:{displayRevenueColumn:Boolean,showSparklines:Boolean,dateSparkline:String,pageSize:Number,autoRefreshTodayReport:Number},components:{EnrichedHeadline:o["EnrichedHeadline"],ActivityIndicator:o["ActivityIndicator"],MultisitesSite:x},data:function(){return{evolutionSelector:"visits_evolution",searchTerm:""}},created:function(){this.pageSize&&Te.setPageSize(this.pageSize),this.refresh(this.autoRefreshTodayReport)},methods:{refresh:function(e){Te.setRefreshInterval(e),Te.fetchAllSites()},sortBy:function(e){Te.sortBy(e)},previousPage:function(){Te.previousPage()},nextPage:function(){Te.nextPage()},searchSite:function(){Te.searchSite(this.searchTerm)}},computed:{hasSuperUserAccess:function(){return o["Matomo"].hasSuperUserAccess},date:function(){return o["MatomoUrl"].urlParsed.value.date},idSite:function(){return o["MatomoUrl"].urlParsed.value.idSite},url:function(){return o["Matomo"].piwik_url},period:function(){return o["Matomo"].period},areAdsForProfessionalServicesEnabled:function(){return o["Matomo"].config&&o["Matomo"].config.are_ads_enabled},sortColumn:function(){return Te.state.value.sortColumn},reverse:function(){return Te.state.value.reverse},smallTitleContent:function(){var e=Te.state.value;return Object(o["translate"])("General_TotalVisitsPageviewsActionsRevenue","<strong>".concat(e.totalVisits,"</strong>"),"<strong>".concat(e.totalPageviews,"</strong>"),"<strong>".concat(e.totalActions,"</strong>"),"<strong>".concat(e.totalRevenue,"</strong>"))},smallTitleTooltip:function(){var e=Te.state.value;return Object(o["translate"])("General_EvolutionSummaryGeneric",Object(o["translate"])("General_NVisits","".concat(e.totalVisits)),this.date,"".concat(e.lastVisits),e.lastVisitsDate,Object(o["getFormattedEvolution"])(e.totalVisits,e.lastVisits))},loadingMessage:function(){return Te.state.value.loadingMessage},isLoading:function(){return Te.state.value.isLoading},errorLoadingSites:function(){return Te.state.value.errorLoadingSites},sites:function(){return Te.state.value.sites},numberOfPages:function(){return Te.numberOfPages.value},currentPage:function(){return Te.state.value.currentPage},paginationLowerBound:function(){return Te.paginationLowerBound.value},paginationUpperBound:function(){return Te.paginationUpperBound.value},numberOfFilteredSites:function(){return Te.numberOfFilteredSites.value},professionalHelpUrl:function(){return"https://matomo.org/support-plans/?pk_campaign=Help&pk_medium=AjaxError&pk_content=MultiSites&pk_source=Matomo_App"},addSiteUrl:function(){return"index.php?module=SitesManager&action=index&showaddsite=1&period=".concat(this.period,"&")+"date=".concat(this.date,"&idSite=").concat(this.idSite)}}});Ae.render=ke;var De=Ae;
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */Object(o["createAngularJsAdapter"])({component:De,scope:{displayRevenueColumn:{angularJsBind:"@",transform:o["transformAngularJsBoolAttr"]},showSparklines:{angularJsBind:"@",transform:o["transformAngularJsBoolAttr"]},dateSparkline:{angularJsBind:"@"},pageSize:{angularJsBind:"@",transform:o["transformAngularJsIntAttr"]},autoRefreshTodayReport:{angularJsBind:"@",transform:o["transformAngularJsIntAttr"]}},directiveName:"piwikMultisitesDashboard"})}})}));
+//# sourceMappingURL=MultiSites.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/MultiSites/vue/dist/umd.metadata.json b/plugins/MultiSites/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..9ecfcc0456
--- /dev/null
+++ b/plugins/MultiSites/vue/dist/umd.metadata.json
@@ -0,0 +1,5 @@
+{
+  "dependsOn": [
+    "CoreHome"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/MultiSites/vue/src/Dashboard/Dashboard.adapter.ts b/plugins/MultiSites/vue/src/Dashboard/Dashboard.adapter.ts
new file mode 100644
index 0000000000..5db60f3d24
--- /dev/null
+++ b/plugins/MultiSites/vue/src/Dashboard/Dashboard.adapter.ts
@@ -0,0 +1,39 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import {
+  createAngularJsAdapter,
+  transformAngularJsBoolAttr,
+  transformAngularJsIntAttr,
+} from 'CoreHome';
+import Dashboard from './Dashboard.vue';
+
+export default createAngularJsAdapter({
+  component: Dashboard,
+  scope: {
+    displayRevenueColumn: {
+      angularJsBind: '@',
+      transform: transformAngularJsBoolAttr,
+    },
+    showSparklines: {
+      angularJsBind: '@',
+      transform: transformAngularJsBoolAttr,
+    },
+    dateSparkline: {
+      angularJsBind: '@',
+    },
+    pageSize: {
+      angularJsBind: '@',
+      transform: transformAngularJsIntAttr,
+    },
+    autoRefreshTodayReport: {
+      angularJsBind: '@',
+      transform: transformAngularJsIntAttr,
+    },
+  },
+  directiveName: 'piwikMultisitesDashboard',
+});
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less b/plugins/MultiSites/vue/src/Dashboard/Dashboard.less
index 37d05ce83a..9f9a5f80e4 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
+++ b/plugins/MultiSites/vue/src/Dashboard/Dashboard.less
@@ -289,4 +289,8 @@
   tfoot td {
     border-bottom: 0;
   }
+
+  .dataTablePages {
+    margin: 10px 13.5px;
+  }
 }
diff --git a/plugins/MultiSites/vue/src/Dashboard/Dashboard.store.ts b/plugins/MultiSites/vue/src/Dashboard/Dashboard.store.ts
new file mode 100644
index 0000000000..2b9080a00c
--- /dev/null
+++ b/plugins/MultiSites/vue/src/Dashboard/Dashboard.store.ts
@@ -0,0 +1,359 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import {
+  reactive,
+  computed,
+  readonly,
+} from 'vue';
+import {
+  AjaxHelper,
+  translate,
+  Site,
+} from 'CoreHome';
+
+interface SiteWithMetrics extends Site {
+  label: string;
+  nb_actions: string|number;
+  nb_pageviews: string|number;
+  nb_visits: string|number;
+  pageviews_evolution: string;
+  revenue: string;
+  revenue_evolution: string;
+  visits_evolution: string;
+  ratio?: number|string;
+  previous_nb_visits?: string|number;
+  previous_Actions_nb_pageviews?: string|number;
+  previous_Goal_revenue?: string|number;
+  currencySymbol: string;
+  periodName: string;
+  previousRange: string;
+  tooltip?: string;
+}
+
+interface SiteTotals {
+  nb_actions: string|number;
+  nb_pageviews: string|number;
+  nb_visits: string|number;
+  nb_visits_lastdate: string|number;
+  revenue: string|number;
+}
+
+interface DashboardStoreState {
+  sites: SiteWithMetrics[];
+  isLoading: boolean;
+  pageSize: number;
+  currentPage: number;
+  totalVisits: string|number;
+  totalPageviews: string|number;
+  totalActions: string|number;
+  totalRevenue: string|number;
+  searchTerm: string;
+  lastVisits: string|number;
+  lastVisitsDate: string;
+  numberOfSites: number;
+  loadingMessage: string;
+  reverse: boolean;
+  sortColumn: string;
+  refreshInterval?: number;
+  errorLoadingSites: boolean;
+}
+
+interface GetAllWithGroupsResponse {
+  lastDate: string;
+  numSites: number;
+  sites: SiteWithMetrics[];
+  totals: SiteTotals;
+}
+
+const { NumberFormatter } = window;
+
+class DashboardStore {
+  private privateState = reactive<DashboardStoreState>({
+    sites: [],
+    isLoading: false,
+    pageSize: 25,
+    currentPage: 0,
+    totalVisits: '?',
+    totalPageviews: '?',
+    totalActions: '?',
+    totalRevenue: '?',
+    searchTerm: '',
+    lastVisits: '?',
+    lastVisitsDate: '?',
+    numberOfSites: 0,
+    loadingMessage: translate('MultiSites_LoadingWebsites'),
+    reverse: true,
+    sortColumn: 'nb_visits',
+    refreshInterval: 0,
+    errorLoadingSites: false,
+  });
+
+  private refreshTimeout: ReturnType<typeof setTimeout>|null = null;
+
+  private fetchAbort: AbortController|null = null;
+
+  readonly state = computed(() => readonly(this.privateState));
+
+  readonly numberOfFilteredSites = computed(() => this.state.value.numberOfSites);
+
+  readonly numberOfPages = computed(
+    () => Math.ceil(this.numberOfFilteredSites.value / this.state.value.pageSize - 1),
+  );
+
+  readonly currentPagingOffset = computed(
+    () => Math.ceil(this.state.value.currentPage * this.state.value.pageSize),
+  );
+
+  readonly paginationLowerBound = computed(() => this.currentPagingOffset.value + 1);
+
+  readonly paginationUpperBound = computed(() => {
+    let end = this.currentPagingOffset.value + this.state.value.pageSize;
+    const max = this.numberOfFilteredSites.value;
+
+    if (end > max) {
+      end = max;
+    }
+
+    return end;
+  });
+
+  cancelRefereshInterval(): void {
+    if (this.refreshTimeout) {
+      clearTimeout(this.refreshTimeout);
+      this.refreshTimeout = null;
+    }
+  }
+
+  updateWebsitesList(report: GetAllWithGroupsResponse): void {
+    if (!report) {
+      this.onError();
+      return;
+    }
+
+    const allSites = report.sites;
+    allSites.forEach((site) => {
+      if (site.ratio !== 1 && site.ratio !== '1') {
+        const percent = NumberFormatter.formatPercent(
+          Math.round(parseInt(site.ratio! as string, 10) * 100),
+        );
+
+        let metricName = null;
+        let previousTotal = '0';
+        let currentTotal = '0';
+        let evolution = '0';
+        let previousTotalAdjusted = '0';
+
+        if (this.state.value.sortColumn === 'nb_visits'
+          || this.state.value.sortColumn === 'visits_evolution'
+        ) {
+          previousTotal = NumberFormatter.formatNumber(site.previous_nb_visits);
+          currentTotal = NumberFormatter.formatNumber(site.nb_visits);
+          evolution = NumberFormatter.formatPercent(site.visits_evolution);
+          metricName = translate('General_ColumnNbVisits');
+          previousTotalAdjusted = NumberFormatter.formatNumber(
+            Math.round(parseInt(site.previous_nb_visits as string, 10)
+              * parseInt(site.ratio as string, 10)),
+          );
+        }
+
+        if (this.state.value.sortColumn === 'pageviews_evolution') {
+          previousTotal = `${site.previous_Actions_nb_pageviews}`;
+          currentTotal = `${site.nb_pageviews}`;
+          evolution = NumberFormatter.formatPercent(site.pageviews_evolution);
+          metricName = translate('General_ColumnPageviews');
+          previousTotalAdjusted = NumberFormatter.formatNumber(
+            Math.round(parseInt(site.previous_Actions_nb_pageviews as string, 10)
+              * parseInt(site.ratio as string, 10)),
+          );
+        }
+
+        if (this.state.value.sortColumn === 'revenue_evolution') {
+          previousTotal = NumberFormatter.formatCurrency(
+            site.previous_Goal_revenue,
+            site.currencySymbol,
+          );
+          currentTotal = NumberFormatter.formatCurrency(site.revenue, site.currencySymbol);
+          evolution = NumberFormatter.formatPercent(site.revenue_evolution);
+          metricName = translate('General_ColumnRevenue');
+          previousTotalAdjusted = NumberFormatter.formatCurrency(
+            Math.round(parseInt(site.previous_Goal_revenue as string, 10)
+              * parseInt(site.ratio as string, 10)),
+            site.currencySymbol,
+          );
+        }
+
+        if (metricName) {
+          site.tooltip = `${translate('MultiSites_EvolutionComparisonIncomplete', [percent])}\n`;
+          site.tooltip += `${translate('MultiSites_EvolutionComparisonProportional', [
+            percent,
+            `${previousTotalAdjusted}`,
+            metricName,
+            `${previousTotal}`,
+          ])}\n`;
+
+          switch (site.periodName) {
+            case 'day':
+              site.tooltip += translate('MultiSites_EvolutionComparisonDay', [
+                `${currentTotal}`,
+                metricName,
+                `${previousTotalAdjusted}`,
+                site.previousRange,
+                `${evolution}`,
+              ]);
+              break;
+
+            case 'week':
+              site.tooltip += translate('MultiSites_EvolutionComparisonWeek', [
+                `${currentTotal}`,
+                metricName,
+                `${previousTotalAdjusted}`,
+                site.previousRange,
+                `${evolution}`,
+              ]);
+              break;
+
+            case 'month':
+              site.tooltip += translate('MultiSites_EvolutionComparisonMonth', [
+                `${currentTotal}`,
+                metricName,
+                `${previousTotalAdjusted}`,
+                site.previousRange,
+                `${evolution}`,
+              ]);
+              break;
+
+            case 'year':
+              site.tooltip += translate('MultiSites_EvolutionComparisonYear', [
+                `${currentTotal}`,
+                metricName,
+                `${previousTotalAdjusted}`,
+                site.previousRange,
+                `${evolution}`,
+              ]);
+              break;
+            default:
+              break;
+          }
+        }
+      }
+    });
+    this.privateState.totalVisits = report.totals.nb_visits;
+    this.privateState.totalPageviews = report.totals.nb_pageviews;
+    this.privateState.totalActions = report.totals.nb_actions;
+    this.privateState.totalRevenue = report.totals.revenue;
+    this.privateState.lastVisits = report.totals.nb_visits_lastdate;
+    this.privateState.sites = allSites;
+    this.privateState.numberOfSites = report.numSites;
+    this.privateState.lastVisitsDate = report.lastDate;
+  }
+
+  sortBy(metric: string): void {
+    if (this.state.value.sortColumn === metric) {
+      this.privateState.reverse = !this.state.value.reverse;
+    }
+
+    this.privateState.sortColumn = metric;
+    this.fetchAllSites();
+  }
+
+  previousPage(): void {
+    this.privateState.currentPage = this.state.value.currentPage - 1;
+    this.fetchAllSites();
+  }
+
+  nextPage(): void {
+    this.privateState.currentPage = this.state.value.currentPage + 1;
+    this.fetchAllSites();
+  }
+
+  searchSite(term: string): void {
+    this.privateState.searchTerm = term;
+    this.privateState.currentPage = 0;
+    this.fetchAllSites();
+  }
+
+  fetchAllSites(): Promise<void> {
+    if (this.fetchAbort) {
+      this.fetchAbort.abort();
+      this.fetchAbort = null;
+
+      this.cancelRefereshInterval();
+    }
+
+    this.privateState.isLoading = true;
+    this.privateState.errorLoadingSites = false;
+    const params: QueryParameters = {
+      module: 'MultiSites',
+      action: 'getAllWithGroups',
+      hideMetricsDoc: '1',
+      filter_sort_order: 'asc',
+      filter_limit: this.state.value.pageSize,
+      filter_offset: this.currentPagingOffset.value,
+      showColumns: [
+        'label',
+        'nb_visits',
+        'nb_pageviews',
+        'visits_evolution',
+        'visits_evolution_trend',
+        'pageviews_evolution',
+        'pageviews_evolution_trend',
+        'revenue_evolution',
+        'revenue_evolution_trend',
+        'nb_actions,revenue',
+      ].join(','),
+    };
+
+    if (this.privateState.searchTerm) {
+      params.pattern = this.privateState.searchTerm;
+    }
+
+    if (this.privateState.sortColumn) {
+      params.filter_sort_column = this.privateState.sortColumn;
+    }
+
+    if (this.privateState.reverse) {
+      params.filter_sort_order = 'desc';
+    }
+
+    this.fetchAbort = new AbortController();
+    return AjaxHelper.fetch<GetAllWithGroupsResponse>(
+      params,
+      { abortController: this.fetchAbort },
+    ).then((response) => {
+      this.updateWebsitesList(response);
+    }).catch(() => {
+      this.onError();
+    }).finally(() => {
+      this.privateState.isLoading = false;
+      this.fetchAbort = null;
+
+      if (this.state.value.refreshInterval && this.state.value.refreshInterval > 0) {
+        this.cancelRefereshInterval();
+        this.refreshTimeout = setTimeout(() => {
+          this.refreshTimeout = null;
+          this.fetchAllSites();
+        }, this.state.value.refreshInterval! * 1000);
+      }
+    });
+  }
+
+  private onError(): void {
+    this.privateState.errorLoadingSites = true;
+    this.privateState.sites = [];
+  }
+
+  setRefreshInterval(interval?: number): void {
+    this.privateState.refreshInterval = interval;
+  }
+
+  setPageSize(pageSize: number): void {
+    this.privateState.pageSize = pageSize;
+  }
+}
+
+export default new DashboardStore();
diff --git a/plugins/MultiSites/vue/src/Dashboard/Dashboard.vue b/plugins/MultiSites/vue/src/Dashboard/Dashboard.vue
new file mode 100644
index 0000000000..00eafbb225
--- /dev/null
+++ b/plugins/MultiSites/vue/src/Dashboard/Dashboard.vue
@@ -0,0 +1,407 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div>
+    <h2 class="card-title">
+      <EnrichedHeadline
+        help-url="https://matomo.org/docs/manage-websites/#all-websites-dashboard"
+        :feature-name="translate('General_AllWebsitesDashboard')"
+      >
+        {{ translate('General_AllWebsitesDashboard') }}
+        <span
+          class="smallTitle"
+          v-html="$sanitize(this.smallTitleContent)"
+          :title="smallTitleTooltip"
+        >
+        </span>
+      </EnrichedHeadline>
+    </h2>
+    <table
+      id="mt"
+      class="dataTable card-table"
+      cellspacing="0"
+    >
+      <thead>
+        <tr>
+          <th
+            id="names"
+            class="label"
+            @click="sortBy('label')"
+            :class="{columnSorted: 'label' === sortColumn}"
+          >
+            <span class="heading">{{ translate('General_Website') }}</span>
+            <span
+              class="arrow"
+              :class="{
+                multisites_asc: !reverse && 'label' === sortColumn,
+                multisites_desc: reverse && 'label' === sortColumn,
+              }"
+              style="margin-left: 3.5px"
+            />
+          </th>
+          <th
+            id="visits"
+            class="multisites-column"
+            @click="sortBy('nb_visits')"
+            :class="{columnSorted: 'nb_visits' === sortColumn}"
+          >
+            <span
+              class="arrow"
+              :class="{
+                multisites_asc: !reverse && 'nb_visits' === sortColumn,
+                multisites_desc: reverse && 'nb_visits' === sortColumn,
+              }"
+              style="margin-right: 3.5px"
+            />
+            <span class="heading">{{ translate('General_ColumnNbVisits') }}</span>
+          </th>
+          <th
+            id="pageviews"
+            class="multisites-column"
+            @click="sortBy('nb_pageviews')"
+            :class="{columnSorted: 'nb_pageviews' === sortColumn}"
+          >
+            <span
+              class="arrow"
+              :class="{
+                multisites_asc: !reverse && 'nb_pageviews' === sortColumn,
+                multisites_desc: reverse && 'nb_pageviews' === sortColumn,
+              }"
+              style="margin-right: 3.5px"
+            />
+            <span class="heading">{{ translate('General_ColumnPageviews') }}</span>
+          </th>
+          <th
+            id="revenue"
+            class="multisites-column"
+            v-if="displayRevenueColumn"
+            @click="sortBy('revenue')"
+            :class="{columnSorted: 'revenue' === sortColumn}"
+          >
+            <span
+              class="arrow"
+              :class="{
+                multisites_asc: !reverse && 'revenue' === sortColumn,
+                multisites_desc: reverse && 'revenue' === sortColumn,
+              }"
+              style="margin-right: 3.5px"
+            />
+            <span class="heading">{{ translate('General_ColumnRevenue') }}</span>
+          </th>
+          <th
+            id="evolution"
+            :class="{columnSorted: evolutionSelector === sortColumn}"
+            :colspan="showSparklines ? 2 : 1"
+          >
+            <span
+              class="arrow"
+              :class="{
+                multisites_asc: !reverse && evolutionSelector === sortColumn,
+                multisites_desc: reverse && evolutionSelector === sortColumn,
+              }"
+              style="margin-right: 3.5px"
+            />
+            <span
+              class="evolution"
+              @click="sortBy(evolutionSelector)"
+              style="margin-right: 3.5px"
+            > {{ translate('MultiSites_Evolution') }}</span>
+            <select
+              class="selector browser-default"
+              id="evolution_selector"
+              :value="evolutionSelector"
+              @change="evolutionSelector = $event.target.value; sortBy(evolutionSelector)"
+            >
+              <option value="visits_evolution">{{ translate('General_ColumnNbVisits') }}</option>
+              <option value="pageviews_evolution">
+                {{ translate('General_ColumnPageviews') }}
+              </option>
+              <option
+                value="revenue_evolution"
+                v-if="displayRevenueColumn"
+              >
+                {{ translate('General_ColumnRevenue') }}
+              </option>
+            </select>
+          </th>
+        </tr>
+      </thead>
+      <tbody v-if="isLoading">
+        <tr>
+          <td
+            colspan="7"
+            class="allWebsitesLoading"
+          >
+            <ActivityIndicator
+              :loading-message="loadingMessage"
+              :loading="isLoading"
+            />
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-if="!isLoading">
+        <tr v-if="errorLoadingSites">
+          <td colspan="7">
+            <div class="notification system notification-error">
+              {{ translate('General_ErrorRequest', '', '') }}
+              <br /><br />
+              {{ translate('General_NeedMoreHelp') }}
+              <a
+                rel="noreferrer noopener"
+                target="_blank"
+                href="https://matomo.org/faq/troubleshooting/faq_19489/"
+              >{{ translate('General_Faq') }}</a>
+              &#x2013;
+              <a
+                rel="noreferrer noopener"
+                target="_blank"
+                href="https://forum.matomo.org/"
+              >{{ translate('Feedback_CommunityHelp') }}</a>
+              <span v-show="areAdsForProfessionalServicesEnabled"> &#x2013; </span>
+              <a
+                rel="noreferrer noopener"
+                target="_blank"
+                :href="professionalHelpUrl"
+                v-show="areAdsForProfessionalServicesEnabled"
+              >{{ translate('Feedback_ProfessionalHelp') }}</a>.
+            </div>
+          </td>
+        </tr>
+        <MultisitesSite
+          v-for="website in sites"
+          :key="website.idsite"
+          :website="website"
+          :evolution-metric="evolutionSelector"
+          :date-sparkline="dateSparkline"
+          :show-sparklines="showSparklines"
+          :metric="sortColumn"
+          :display-revenue-column="displayRevenueColumn"
+        >
+        </MultisitesSite>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td
+            colspan="8"
+            class="paging"
+          >
+            <div class="row">
+              <div class="col s3 add_new_site">
+                <a
+                  :href="addSiteUrl"
+                  v-if="hasSuperUserAccess"
+                >
+                  <span class="icon-add" /> {{ translate('SitesManager_AddSite') }}
+                </a>
+              </div>
+              <div class="col s6">
+                <span
+                  id="prev"
+                  class="previous dataTablePrevious"
+                  @click="previousPage()"
+                  v-show="!(currentPage === 0)"
+                >
+                  <span style="cursor:pointer;">&#xAB; {{ translate('General_Previous') }}</span>
+                </span>
+                <span class="dataTablePages">
+                  <span id="counter">
+                    {{ translate(
+                      'General_Pagination',
+                      paginationLowerBound,
+                      paginationUpperBound,
+                      numberOfFilteredSites,
+                    ) }}
+                  </span>
+                </span>
+                <span
+                  id="next"
+                  class="next dataTableNext"
+                  @click="nextPage()"
+                  v-show="!(currentPage >= numberOfPages)"
+                >
+                  <span
+                    style="cursor:pointer;"
+                    class="pointer"
+                  >{{ translate('General_Next') }} &#xBB;</span>
+                </span>
+              </div>
+              <div class="col s3">&nbsp;</div>
+            </div>
+          </td>
+        </tr>
+        <tr row_id="last">
+          <td
+            colspan="8"
+            class="site_search"
+          >
+            <div class="row">
+              <div class="input-field col s12">
+                <input
+                  type="text"
+                  @keydown.enter="searchSite(searchTerm)"
+                  v-model="searchTerm"
+                  :placeholder="translate('Actions_SubmenuSitesearch')"
+                />
+                <span
+                  class="icon-search search_ico"
+                  @click="searchSite(searchTerm)"
+                  :title="translate('General_ClickToSearch')"
+                />
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  translate,
+  Matomo,
+  EnrichedHeadline,
+  ActivityIndicator,
+  MatomoUrl,
+  getFormattedEvolution,
+} from 'CoreHome';
+import MultisitesSite from '../MultisitesSite/MultisitesSite.vue';
+import DashboardStore from './Dashboard.store';
+
+interface DashboardState {
+  evolutionSelector: string;
+  searchTerm: string;
+}
+
+export default defineComponent({
+  props: {
+    displayRevenueColumn: Boolean,
+    showSparklines: Boolean,
+    dateSparkline: String,
+    pageSize: Number,
+    autoRefreshTodayReport: Number,
+  },
+  components: {
+    EnrichedHeadline,
+    ActivityIndicator,
+    MultisitesSite,
+  },
+  data(): DashboardState {
+    return {
+      evolutionSelector: 'visits_evolution',
+      searchTerm: '',
+    };
+  },
+  created() {
+    if (this.pageSize) {
+      DashboardStore.setPageSize(this.pageSize);
+    }
+    this.refresh(this.autoRefreshTodayReport);
+  },
+  methods: {
+    refresh(interval?: number) {
+      DashboardStore.setRefreshInterval(interval);
+      DashboardStore.fetchAllSites();
+    },
+    sortBy(column: string) {
+      DashboardStore.sortBy(column);
+    },
+    previousPage() {
+      DashboardStore.previousPage();
+    },
+    nextPage() {
+      DashboardStore.nextPage();
+    },
+    searchSite() {
+      DashboardStore.searchSite(this.searchTerm);
+    },
+  },
+  computed: {
+    hasSuperUserAccess() {
+      return Matomo.hasSuperUserAccess;
+    },
+    date() {
+      return MatomoUrl.urlParsed.value.date as string;
+    },
+    idSite() {
+      return MatomoUrl.urlParsed.value.idSite as string;
+    },
+    url() {
+      return Matomo.piwik_url;
+    },
+    period() {
+      return Matomo.period;
+    },
+    areAdsForProfessionalServicesEnabled() {
+      return Matomo.config && Matomo.config.are_ads_enabled;
+    },
+    sortColumn() {
+      return DashboardStore.state.value.sortColumn;
+    },
+    reverse() {
+      return DashboardStore.state.value.reverse;
+    },
+    smallTitleContent() {
+      const state = DashboardStore.state.value;
+      return translate(
+        'General_TotalVisitsPageviewsActionsRevenue',
+        `<strong>${state.totalVisits}</strong>`,
+        `<strong>${state.totalPageviews}</strong>`,
+        `<strong>${state.totalActions}</strong>`,
+        `<strong>${state.totalRevenue}</strong>`,
+      );
+    },
+    smallTitleTooltip() {
+      const state = DashboardStore.state.value;
+      return translate(
+        'General_EvolutionSummaryGeneric',
+        translate('General_NVisits', `${state.totalVisits}`),
+        this.date,
+        `${state.lastVisits}`,
+        state.lastVisitsDate,
+        getFormattedEvolution(state.totalVisits, state.lastVisits),
+      );
+    },
+    loadingMessage() {
+      return DashboardStore.state.value.loadingMessage;
+    },
+    isLoading() {
+      return DashboardStore.state.value.isLoading;
+    },
+    errorLoadingSites() {
+      return DashboardStore.state.value.errorLoadingSites;
+    },
+    sites() {
+      return DashboardStore.state.value.sites;
+    },
+    numberOfPages() {
+      return DashboardStore.numberOfPages.value;
+    },
+    currentPage() {
+      return DashboardStore.state.value.currentPage;
+    },
+    paginationLowerBound() {
+      return DashboardStore.paginationLowerBound.value;
+    },
+    paginationUpperBound() {
+      return DashboardStore.paginationUpperBound.value;
+    },
+    numberOfFilteredSites() {
+      return DashboardStore.numberOfFilteredSites.value;
+    },
+    professionalHelpUrl() {
+      return 'https://matomo.org/support-plans/?pk_campaign=Help&pk_medium=AjaxError&pk_content='
+        + 'MultiSites&pk_source=Matomo_App';
+    },
+    addSiteUrl() {
+      return `index.php?module=SitesManager&action=index&showaddsite=1&period=${this.period}&`
+        + `date=${this.date}&idSite=${this.idSite}`;
+    },
+  },
+});
+</script>
diff --git a/plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.adapter.ts b/plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.adapter.ts
new file mode 100644
index 0000000000..5b74aee43f
--- /dev/null
+++ b/plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.adapter.ts
@@ -0,0 +1,34 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { createAngularJsAdapter } from 'CoreHome';
+import MultisitesSite from './MultisitesSite.vue';
+
+export default createAngularJsAdapter({
+  component: MultisitesSite,
+  scope: {
+    website: {
+      angularJsBind: '=',
+    },
+    evolutionMetric: {
+      angularJsBind: '=',
+    },
+    showSparklines: {
+      angularJsBind: '=',
+    },
+    dateSparkline: {
+      angularJsBind: '=',
+    },
+    displayRevenueColumn: {
+      angularJsBind: '=',
+    },
+    metric: {
+      angularJsBind: '=',
+    },
+  },
+  directiveName: 'piwikMultisitesSite',
+});
diff --git a/plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.vue b/plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.vue
new file mode 100644
index 0000000000..ff0171e9f1
--- /dev/null
+++ b/plugins/MultiSites/vue/src/MultisitesSite/MultisitesSite.vue
@@ -0,0 +1,172 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <tr
+    :class="{'groupedWebsite': website.group, 'website': !website.group, 'group': website.isGroup}"
+  >
+    <td
+      class="multisites-label label"
+      v-if="!website.isGroup"
+    >
+      <a
+        title="View reports"
+        class="value truncated-text-line"
+        :href="dashboardUrl(website)"
+      >
+        {{ websiteLabel }}
+      </a>
+      <span>
+        <a
+          rel="noreferrer noopener"
+          target="_blank"
+          :href="website.main_url"
+          :title="translate('General_GoTo', website.main_url)"
+        >
+          <span class="icon icon-outlink" /></a>
+      </span>
+    </td>
+    <td
+      class="multisites-label label"
+      v-if="website.isGroup"
+    >
+      <span class="value">{{ websiteLabel }}</span>
+    </td>
+    <td class="multisites-column">
+      <span class="value">{{ website.nb_visits }}</span>
+    </td>
+    <td class="multisites-column">
+      <span class="value">{{ website.nb_pageviews }}</span>
+    </td>
+    <td
+      class="multisites-column"
+      v-if="displayRevenueColumn"
+    >
+      <span class="value">{{ website.revenue }}</span>
+    </td>
+    <td
+      class="multisites-evolution"
+      v-if="period !== 'range'"
+      :title="website.tooltip"
+    >
+      <div
+        class="visits value"
+        v-if="!website.isGroup"
+      >
+        <span v-show="website[`${evolutionMetric}_trend`] === 1">
+          <img
+            class="multisites_icon"
+            src="plugins/MultiSites/images/arrow_up.png"
+            alt
+          /> <span style="color: green;">{{ website[evolutionMetric] }}</span>
+        </span>
+        <span v-show="website[`${evolutionMetric}_trend`] === 0">
+          <img
+            class="multisites_icon"
+            src="plugins/MultiSites/images/stop.png"
+            alt
+          /> <span>{{ website[evolutionMetric] }}</span>
+        </span>
+        <span v-show="website[`${evolutionMetric}_trend`] === -1">
+          <img
+            class="multisites_icon"
+            src="plugins/MultiSites/images/arrow_down.png"
+            alt
+          /> <span style="color: red;">{{ website[evolutionMetric] }}</span>
+        </span>
+      </div>
+    </td>
+    <td
+      style="width:180px;"
+      v-if="showSparklines"
+    >
+      <div
+        class="sparkline"
+        style="width: 100px; margin: auto;"
+        v-if="!website.isGroup"
+      >
+        <a
+          rel="noreferrer noopener"
+          target="_blank"
+          :href="dashboardUrl(website)"
+          :title="translate('General_GoTo', translate('Dashboard_DashboardOf', websiteLabel))"
+        >
+          <img
+            alt
+            width="100"
+            height="25"
+            :src="sparklineImage(website)"
+          />
+        </a>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Matomo, MatomoUrl, Site } from 'CoreHome';
+
+export default defineComponent({
+  props: {
+    website: {
+      type: Object,
+      required: true,
+    },
+    evolutionMetric: {
+      type: String,
+      required: true,
+    },
+    showSparklines: Boolean,
+    dateSparkline: String,
+    displayRevenueColumn: Boolean,
+    metric: String,
+  },
+  methods: {
+    dashboardUrl(website: Site) {
+      return `index.php?module=CoreHome&action=index&date=${this.date}&period=${this.period}`
+        + `&idSite=${website.idsite}${this.tokenParam}`;
+    },
+    sparklineImage(website: Site) {
+      let { metric } = this;
+
+      switch (this.evolutionMetric) {
+        case 'visits_evolution':
+          metric = 'nb_visits';
+          break;
+        case 'pageviews_evolution':
+          metric = 'nb_pageviews';
+          break;
+        case 'revenue_evolution':
+          metric = 'revenue';
+          break;
+        default:
+          break;
+      }
+
+      return `index.php?module=MultiSites&action=getEvolutionGraph&period=${this.period}&date=`
+        + `${this.dateSparkline}&evolutionBy=${metric}&columns=${metric}&idSite=${website.idsite}`
+        + `&idsite=${website.idsite}&viewDataTable=sparkline${this.tokenParam}&colors=`
+        + `${encodeURIComponent(JSON.stringify(Matomo.getSparklineColors()))}`;
+    },
+  },
+  computed: {
+    tokenParam() {
+      const token_auth = MatomoUrl.urlParsed.value.token_auth as string;
+      return token_auth ? `&token_auth=${token_auth}` : '';
+    },
+    period() {
+      return Matomo.period;
+    },
+    date() {
+      return MatomoUrl.urlParsed.value.date as string;
+    },
+    websiteLabel() {
+      return Matomo.helper.htmlDecode(this.website.label);
+    },
+  },
+});
+</script>
diff --git a/plugins/MultiSites/vue/src/index.ts b/plugins/MultiSites/vue/src/index.ts
new file mode 100644
index 0000000000..b7042f0ce9
--- /dev/null
+++ b/plugins/MultiSites/vue/src/index.ts
@@ -0,0 +1,13 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import './MultisitesSite/MultisitesSite.adapter';
+import './Dashboard/Dashboard.adapter';
+
+export { default as MultisitesSite } from './MultisitesSite/MultisitesSite.vue';
+export { default as DashboadStore } from './Dashboard/Dashboard.store';
+export { default as Dashboard } from './Dashboard/Dashboard.vue';