From c7c1027605bb409796f405106a7c9059df9895c5 Mon Sep 17 00:00:00 2001 From: Stefan Giehl Date: Wed, 18 Dec 2024 08:13:53 +0100 Subject: [PATCH] Improves responsiveness of KPI widgets on new all websites dashboard (#22837) * Make AWD layout responsive * Adds UI tests * Improve responsiveness for i18n * update UI tests * fix responsive layout when there is no revenue kpi * small layout tweaks * apply review feedback --- .../images/kpi_divider_horizontal.svg | 3 + .../tests/UI/AllWebsitesDashboard_spec.js | 63 ++++++++++++++++ .../AllWebsitesDashboard_dashboard.png | 4 +- ...WebsitesDashboard_dashboard_all_badges.png | 4 +- ...lWebsitesDashboard_dashboard_kpi_badge.png | 4 +- .../AllWebsitesDashboard_dashboard_mobile.png | 3 + ...sDashboard_dashboard_mobile_no_revenue.png | 3 + .../AllWebsitesDashboard_dashboard_tablet.png | 3 + ...sDashboard_dashboard_tablet_no_revenue.png | 3 + .../AllWebsitesDashboard_error.png | 4 +- .../AllWebsitesDashboard_evolution_change.png | 4 +- .../AllWebsitesDashboard_no_revenue.png | 4 +- .../AllWebsitesDashboard_no_sparklines.png | 4 +- .../AllWebsitesDashboard_widgetized.png | 4 +- plugins/MultiSites/vue/dist/MultiSites.umd.js | 28 ++++---- .../MultiSites/vue/dist/MultiSites.umd.min.js | 2 +- .../AllWebsitesDashboard.less | 72 ++++++++++++++----- .../vue/src/AllWebsitesDashboard/KPICard.vue | 4 +- 18 files changed, 167 insertions(+), 49 deletions(-) create mode 100644 plugins/MultiSites/images/kpi_divider_horizontal.svg create mode 100644 plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_mobile.png create mode 100644 plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_mobile_no_revenue.png create mode 100644 plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_tablet.png create mode 100644 plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_tablet_no_revenue.png diff --git a/plugins/MultiSites/images/kpi_divider_horizontal.svg b/plugins/MultiSites/images/kpi_divider_horizontal.svg new file mode 100644 index 00000000000..2f084565ee2 --- /dev/null +++ b/plugins/MultiSites/images/kpi_divider_horizontal.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/plugins/MultiSites/tests/UI/AllWebsitesDashboard_spec.js b/plugins/MultiSites/tests/UI/AllWebsitesDashboard_spec.js index 458eb4397d8..8713e112677 100644 --- a/plugins/MultiSites/tests/UI/AllWebsitesDashboard_spec.js +++ b/plugins/MultiSites/tests/UI/AllWebsitesDashboard_spec.js @@ -293,4 +293,67 @@ describe('AllWebsitesDashboard', function () { expect(await page.screenshotSelector('#main')).to.matchImage('evolution_change'); }); }); + + describe('Responsive View', function () { + this.title = parentSuite.title; // to make sure the screenshot prefix is the same + + it('should display correctly in tablet view', async function () { + await page.webpage.setViewport({ width: 768, height: 1024 }); + await page.goto(dashboardUrl); + await page.waitForNetworkIdle(); + + await page.evaluate(() => { + window.CoreHome.Matomo.on('MultiSites.DashboardKPIs.updated', function(data) { + data.kpis.badges.hits = 'Plan: 600K hits/month'; + data.kpis.badges.pageviews = 'Weird Pageview Badge'; + data.kpis.badges.revenue = 'Awesome Revenue Badge'; + data.kpis.badges.visits = 'Terrific Visits Badge'; + }) + }); + + // change period to trigger reload of KPIS + await page.click('.move-period-prev'); + await page.click('.move-period-next'); + await page.waitForNetworkIdle(); + + expect(await page.screenshotSelector('#main')).to.matchImage('dashboard_tablet'); + }); + + it('should display correctly in mobile view', async function () { + await page.webpage.setViewport({ width: 352, height: 1024 }); + + expect(await page.screenshotSelector('#main')).to.matchImage('dashboard_mobile'); + }); + + it('should display correctly in tablet view without revenue', async function () { + testEnvironment.pluginsToUnload = ['Goals']; + testEnvironment.save(); + + await page.webpage.setViewport({ width: 768, height: 1024 }); + await page.goto(dashboardUrl); + await page.waitForNetworkIdle(); + + await page.evaluate(() => { + window.CoreHome.Matomo.on('MultiSites.DashboardKPIs.updated', function(data) { + data.kpis.badges.hits = 'Plan: 600K hits/month'; + data.kpis.badges.pageviews = 'Weird Pageview Badge'; + data.kpis.badges.revenue = 'Awesome Revenue Badge'; + data.kpis.badges.visits = 'Terrific Visits Badge'; + }) + }); + + // change period to trigger reload of KPIS + await page.click('.move-period-prev'); + await page.click('.move-period-next'); + await page.waitForNetworkIdle(); + + expect(await page.screenshotSelector('#main')).to.matchImage('dashboard_tablet_no_revenue'); + }); + + it('should display correctly in mobile view without revenue', async function () { + await page.webpage.setViewport({ width: 352, height: 1024 }); + + expect(await page.screenshotSelector('#main')).to.matchImage('dashboard_mobile_no_revenue'); + }); + }); }); diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard.png index 2fd6b623b22..c5dbc90d312 100644 --- a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard.png +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:09e05ca508d2f7def1707e6ad40122b3245c069d84e17ec94451f69f90edcd48 -size 76090 +oid sha256:63d7f56ecbed997a4990851b4a8b99990ea3d8442e8daa5c775618727e9fbad3 +size 76046 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_all_badges.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_all_badges.png index 3da79c44b5c..2a5ae578578 100644 --- a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_all_badges.png +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_all_badges.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:16dcdead23bad96eee4d8703dc1d002c871a1f4d929758ad06f87979e6f9930e -size 85294 +oid sha256:48849f4d586e8201f17d4a3a88300d516e1490e97bee3d7c2a22ada8227186b4 +size 85676 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_kpi_badge.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_kpi_badge.png index a09487813a9..09d3010ae87 100644 --- a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_kpi_badge.png +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_kpi_badge.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:745f84e3336645cb4f8d24d472ce26d99cbd58280010b200f87d8a41c198272d -size 79055 +oid sha256:0f312a21143303dad091da59d93af6134b843a7b4cb3b900f7459d8caf1c954b +size 79009 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_mobile.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_mobile.png new file mode 100644 index 00000000000..07d082956d9 --- /dev/null +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5d0f7f97d80d54a7b574532865af7016b46a330247006cd59431524e57f1f734 +size 66471 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_mobile_no_revenue.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_mobile_no_revenue.png new file mode 100644 index 00000000000..f3a1dfb4765 --- /dev/null +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_mobile_no_revenue.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:215e3dc475e4e87f170163af0246fb04ff2a14dc97eda736f91f988ba730a000 +size 55979 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_tablet.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_tablet.png new file mode 100644 index 00000000000..250193efb7f --- /dev/null +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c0055b90c80e71c2dee09531e2c6271e493b6b39799e963099ff153fb29f0ac8 +size 79804 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_tablet_no_revenue.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_tablet_no_revenue.png new file mode 100644 index 00000000000..3c2fbba9e7d --- /dev/null +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_dashboard_tablet_no_revenue.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:020958883aeb136ebb159c47dd560dc3ac6f6d54a60873441cecc7c15a293de7 +size 67996 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_error.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_error.png index f6d5da1cef9..86f9ea4c141 100644 --- a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_error.png +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_error.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8a30e7662201c448609c4f3adbbf3123bbbf06057724bd9140266b0050969543 -size 52164 +oid sha256:20945054758ac168cd8b5aa58b746161b1c417217db2ae43e47a578267e540d1 +size 52177 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_evolution_change.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_evolution_change.png index b94d905f5f9..a5b2e5d755c 100644 --- a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_evolution_change.png +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_evolution_change.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:51e7044f1b98f2062ef18b13d6f3160eda1d2cb0e8abf907a8fe4e077e711c68 -size 75432 +oid sha256:a6b3abbb6faaab796a4bdb616a1cff50ef1db369ce7d5e13ca9c89ac25d707c1 +size 75383 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_no_revenue.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_no_revenue.png index 1021f629219..fe8c35853df 100644 --- a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_no_revenue.png +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_no_revenue.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d695e31504f02e514dd3d27adbbeaa90e0c26d35c6643612a24806170e9f927d -size 57965 +oid sha256:e8d1673564ec967e56e854f7150c35c6b143282503f698a59788a6f3064ba0a9 +size 57947 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_no_sparklines.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_no_sparklines.png index 79fc941649a..32b39631a2e 100644 --- a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_no_sparklines.png +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_no_sparklines.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:76d3c0835cc1a3209d574f933f98664f653665983e376bea582a1da197c7c928 -size 74485 +oid sha256:442b5e3058e464395970873be04d23497c8f9b9d2fb3ada49d6be18d26978592 +size 74437 diff --git a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_widgetized.png b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_widgetized.png index b0d32152b98..59a42d1cd2d 100644 --- a/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_widgetized.png +++ b/plugins/MultiSites/tests/UI/expected-screenshots/AllWebsitesDashboard_widgetized.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:76a67591a431717ef9a2b32d1ffbb8613832d23bc83079afa5d309ba52825618 -size 68445 +oid sha256:08c0e07bbcd3f9c0c76f7b79ae6f30a7c6b4692d5784584feb4d1c24972eec71 +size 68457 diff --git a/plugins/MultiSites/vue/dist/MultiSites.umd.js b/plugins/MultiSites/vue/dist/MultiSites.umd.js index 48d115e7236..0d0bf1afcbf 100644 --- a/plugins/MultiSites/vue/dist/MultiSites.umd.js +++ b/plugins/MultiSites/vue/dist/MultiSites.umd.js @@ -556,48 +556,48 @@ function KPICardContainervue_type_template_id_87c62b90_render(_ctx, _cache, $pro } // CONCATENATED MODULE: ./plugins/MultiSites/vue/src/AllWebsitesDashboard/KPICardContainer.vue?vue&type=template&id=87c62b90 -// 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/AllWebsitesDashboard/KPICard.vue?vue&type=template&id=40b7b9fe +// 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/AllWebsitesDashboard/KPICard.vue?vue&type=template&id=c61db362 -var KPICardvue_type_template_id_40b7b9fe_hoisted_1 = { +var KPICardvue_type_template_id_c61db362_hoisted_1 = { class: "kpiCard" }; -var KPICardvue_type_template_id_40b7b9fe_hoisted_2 = { +var KPICardvue_type_template_id_c61db362_hoisted_2 = { class: "kpiCardTitle" }; -var KPICardvue_type_template_id_40b7b9fe_hoisted_3 = ["title"]; -var KPICardvue_type_template_id_40b7b9fe_hoisted_4 = { +var KPICardvue_type_template_id_c61db362_hoisted_3 = ["title"]; +var KPICardvue_type_template_id_c61db362_hoisted_4 = { class: "kpiCardEvolution" }; -var KPICardvue_type_template_id_40b7b9fe_hoisted_5 = { +var KPICardvue_type_template_id_c61db362_hoisted_5 = { key: 1, class: "kpiCardEvolution" }; -var KPICardvue_type_template_id_40b7b9fe_hoisted_6 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", { +var KPICardvue_type_template_id_c61db362_hoisted_6 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", { class: "kpiCardEvolutionTrend" }, " ", -1); -var KPICardvue_type_template_id_40b7b9fe_hoisted_7 = [KPICardvue_type_template_id_40b7b9fe_hoisted_6]; +var KPICardvue_type_template_id_c61db362_hoisted_7 = [KPICardvue_type_template_id_c61db362_hoisted_6]; var _hoisted_8 = ["innerHTML"]; -function KPICardvue_type_template_id_40b7b9fe_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"])("div", KPICardvue_type_template_id_40b7b9fe_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", KPICardvue_type_template_id_40b7b9fe_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", { +function KPICardvue_type_template_id_c61db362_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"])("div", KPICardvue_type_template_id_c61db362_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", KPICardvue_type_template_id_c61db362_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", { class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])("kpiCardIcon ".concat(_ctx.kpi.icon)) }, null, 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate(_ctx.kpi.title)), 1)]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", { class: "kpiCardValue", title: _ctx.kpi.valueCompact !== _ctx.kpi.value ? _ctx.kpi.value : '' - }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.kpi.valueCompact), 9, KPICardvue_type_template_id_40b7b9fe_hoisted_3), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", KPICardvue_type_template_id_40b7b9fe_hoisted_4, [_ctx.kpi.evolutionValue !== '' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], { + }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.kpi.valueCompact), 9, KPICardvue_type_template_id_c61db362_hoisted_3), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", KPICardvue_type_template_id_c61db362_hoisted_4, [_ctx.kpi.evolutionValue !== '' ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], { key: 0 }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", { class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])("kpiCardEvolutionTrend ".concat(_ctx.evolutionTrendClass)) }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", { class: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["normalizeClass"])("kpiCardEvolutionIcon ".concat(_ctx.evolutionTrendIcon)) - }, null, 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.kpi.evolutionValue), 1)], 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate(_ctx.evolutionTrendFrom)), 1)], 64)) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", KPICardvue_type_template_id_40b7b9fe_hoisted_5, KPICardvue_type_template_id_40b7b9fe_hoisted_7))]), _ctx.kpi.badge ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", { + }, null, 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.kpi.evolutionValue) + "  ", 1)], 2), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("span", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate(_ctx.evolutionTrendFrom)), 1)], 64)) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", KPICardvue_type_template_id_c61db362_hoisted_5, KPICardvue_type_template_id_c61db362_hoisted_7))]), _ctx.kpi.badge ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", { key: 0, innerHTML: _ctx.$sanitize(_ctx.kpi.badge), class: "kpiCardBadge" }, null, 8, _hoisted_8)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)]); } -// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/AllWebsitesDashboard/KPICard.vue?vue&type=template&id=40b7b9fe +// CONCATENATED MODULE: ./plugins/MultiSites/vue/src/AllWebsitesDashboard/KPICard.vue?vue&type=template&id=c61db362 // 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/AllWebsitesDashboard/KPICard.vue?vue&type=script&lang=ts @@ -660,7 +660,7 @@ function KPICardvue_type_template_id_40b7b9fe_render(_ctx, _cache, $props, $setu -KPICardvue_type_script_lang_ts.render = KPICardvue_type_template_id_40b7b9fe_render +KPICardvue_type_script_lang_ts.render = KPICardvue_type_template_id_c61db362_render /* harmony default export */ var KPICard = (KPICardvue_type_script_lang_ts); // 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/AllWebsitesDashboard/KPICardContainer.vue?vue&type=script&lang=ts diff --git a/plugins/MultiSites/vue/dist/MultiSites.umd.min.js b/plugins/MultiSites/vue/dist/MultiSites.umd.min.js index 5758108ca19..0f927eea52e 100644 --- a/plugins/MultiSites/vue/dist/MultiSites.umd.min.js +++ b/plugins/MultiSites/vue/dist/MultiSites.umd.min.js @@ -4,7 +4,7 @@ * * @link https://matomo.org * @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */var g="desc",j="nb_visits",S=function(){function e(){var t=this;v(this,e),f(this,"fetchAbort",null),f(this,"privateState",Object(o["reactive"])({dashboardKPIs:{badges:{},evolutionPeriod:"day",hits:"?",hitsCompact:"?",hitsEvolution:"",hitsTrend:0,pageviews:"?",pageviewsCompact:"?",pageviewsEvolution:"",pageviewsTrend:0,revenue:"?",revenueCompact:"?",revenueEvolution:"",revenueTrend:0,visits:"?",visitsCompact:"?",visitsEvolution:"",visitsTrend:0},dashboardSites:[],errorLoading:!1,isLoadingKPIs:!1,isLoadingSites:!1,numSites:0,paginationCurrentPage:0,sortColumn:j,sortOrder:g})),f(this,"autoRefreshInterval",0),f(this,"autoRefreshTimeout",null),f(this,"pageSize",25),f(this,"searchTerm",""),f(this,"state",Object(o["computed"])((function(){return Object(o["readonly"])(t.privateState)}))),f(this,"numberOfPages",Object(o["computed"])((function(){return Math.ceil(t.state.value.numSites/t.pageSize-1)}))),f(this,"currentPagingOffset",Object(o["computed"])((function(){return Math.ceil(t.state.value.paginationCurrentPage*t.pageSize)}))),f(this,"paginationLowerBound",Object(o["computed"])((function(){return 0===t.state.value.numSites?0:1+t.currentPagingOffset.value}))),f(this,"paginationUpperBound",Object(o["computed"])((function(){if(0===t.state.value.numSites)return 0;var e=t.pageSize+t.currentPagingOffset.value,r=t.state.value.numSites;return e0&&void 0!==arguments[0]&&arguments[0];this.fetchAbort&&(this.fetchAbort.abort(),this.fetchAbort=null,this.cancelAutoRefresh()),this.fetchAbort=new AbortController,this.privateState.errorLoading=!1,this.privateState.isLoadingKPIs=!t,this.privateState.isLoadingSites=!0;var r={method:"MultiSites.getAllWithGroups",filter_limit:this.pageSize,filter_offset:this.currentPagingOffset.value,filter_sort_column:this.privateState.sortColumn,filter_sort_order:this.privateState.sortOrder,format_metrics:0,showColumns:["hits_evolution","hits_evolution_trend","label","hits","nb_pageviews","nb_visits","pageviews_evolution","pageviews_evolution_trend","revenue","revenue_evolution","revenue_evolution_trend","visits_evolution","visits_evolution_trend"].join(",")};return this.searchTerm&&(r.pattern=this.searchTerm),p["AjaxHelper"].fetch(r,{abortController:this.fetchAbort}).then((function(r){t||(e.updateDashboardKPIs(r),p["Matomo"].postEvent("MultiSites.DashboardKPIs.updated",{parameters:(new p["AjaxHelper"]).mixinDefaultGetParams({filter_limit:e.pageSize,filter_offset:e.currentPagingOffset.value,filter_sort_column:e.privateState.sortColumn,filter_sort_order:e.privateState.sortOrder,pattern:e.searchTerm}),kpis:e.privateState.dashboardKPIs})),e.updateDashboardSites(r)})).catch((function(){e.privateState.dashboardSites=[],e.privateState.errorLoading=!0})).finally((function(){e.privateState.isLoadingKPIs=!1,e.privateState.isLoadingSites=!1,e.fetchAbort=null,e.startAutoRefresh()}))}},{key:"startAutoRefresh",value:function(){var e=this;if(this.cancelAutoRefresh(),!(this.autoRefreshInterval<=0)){var t;try{t=p["Periods"].parse(p["Matomo"].period,p["Matomo"].currentDateString)}catch(r){}t&&t.containsToday()&&(this.autoRefreshTimeout=setTimeout((function(){e.autoRefreshTimeout=null,e.refreshData()}),1e3*this.autoRefreshInterval))}}},{key:"updateDashboardKPIs",value:function(e){this.privateState.dashboardKPIs={badges:{hits:"",pageviews:"",revenue:"",visits:""},evolutionPeriod:p["Matomo"].period,hits:p["NumberFormatter"].formatNumber(e.totals.hits),hitsCompact:p["NumberFormatter"].formatNumberCompact(e.totals.hits),hitsEvolution:p["NumberFormatter"].calculateAndFormatEvolution(e.totals.hits,e.totals.previous_hits,!0),hitsTrend:Math.sign(e.totals.hits-e.totals.previous_hits),pageviews:p["NumberFormatter"].formatNumber(e.totals.nb_pageviews),pageviewsCompact:p["NumberFormatter"].formatNumberCompact(e.totals.nb_pageviews),pageviewsEvolution:p["NumberFormatter"].calculateAndFormatEvolution(e.totals.nb_pageviews,e.totals.previous_nb_pageviews,!0),pageviewsTrend:Math.sign(e.totals.nb_pageviews-e.totals.previous_nb_pageviews),revenue:p["NumberFormatter"].formatCurrency(e.totals.revenue,""),revenueCompact:p["NumberFormatter"].formatCurrencyCompact(e.totals.revenue,""),revenueEvolution:p["NumberFormatter"].calculateAndFormatEvolution(e.totals.revenue,e.totals.previous_revenue,!0),revenueTrend:Math.sign(e.totals.revenue-e.totals.previous_revenue),visits:p["NumberFormatter"].formatNumber(e.totals.nb_visits),visitsCompact:p["NumberFormatter"].formatNumberCompact(e.totals.nb_visits),visitsEvolution:p["NumberFormatter"].calculateAndFormatEvolution(e.totals.nb_visits,e.totals.previous_nb_visits,!0),visitsTrend:Math.sign(e.totals.nb_visits-e.totals.previous_nb_visits)}}},{key:"updateDashboardSites",value:function(e){this.privateState.dashboardSites=e.sites,this.privateState.numSites=e.numSites}}]),e}(),k=new S,y={class:"kpiCardContainer"},C={key:0,class:"kpiCard kpiCardLoading"},_=Object(o["createElementVNode"])("div",{class:"kpiCardTitle"}," ",-1),N={class:"kpiCardValue"},E=Object(o["createElementVNode"])("div",{class:"kpiCardEvolution"},[Object(o["createElementVNode"])("span",{class:"kpiCardEvolutionTrend"}," ")],-1),V={key:0,class:"kpiCardBadge"};function w(e,t,r,a,n,i){var s=Object(o["resolveComponent"])("MatomoLoader"),l=Object(o["resolveComponent"])("KPICard");return Object(o["openBlock"])(),Object(o["createElementBlock"])("div",y,[e.isLoading?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",C,[_,Object(o["createElementVNode"])("div",N,[Object(o["createVNode"])(s)]),E,e.hasKpiBadge?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",V," ")):Object(o["createCommentVNode"])("",!0)])):(Object(o["openBlock"])(!0),Object(o["createElementBlock"])(o["Fragment"],{key:1},Object(o["renderList"])(e.kpis,(function(t,r){return Object(o["openBlock"])(),Object(o["createElementBlock"])(o["Fragment"],{key:"kpi-card-".concat(r)},[r>0?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",{key:0,class:Object(o["normalizeClass"])({kpiCardDivider:!0,kpiCardDividerBadge:e.hasKpiBadge})}," ",2)):Object(o["createCommentVNode"])("",!0),Object(o["createVNode"])(l,{"model-value":t},null,8,["model-value"])],64)})),128))])}var T={class:"kpiCard"},B={class:"kpiCardTitle"},P=["title"],M={class:"kpiCardEvolution"},D={key:1,class:"kpiCardEvolution"},x=Object(o["createElementVNode"])("span",{class:"kpiCardEvolutionTrend"}," ",-1),L=[x],A=["innerHTML"];function F(e,t,r,a,n,i){return Object(o["openBlock"])(),Object(o["createElementBlock"])("div",T,[Object(o["createElementVNode"])("div",B,[Object(o["createElementVNode"])("span",{class:Object(o["normalizeClass"])("kpiCardIcon ".concat(e.kpi.icon))},null,2),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate(e.kpi.title)),1)]),Object(o["createElementVNode"])("div",{class:"kpiCardValue",title:e.kpi.valueCompact!==e.kpi.value?e.kpi.value:""},Object(o["toDisplayString"])(e.kpi.valueCompact),9,P),Object(o["createElementVNode"])("div",M,[""!==e.kpi.evolutionValue?(Object(o["openBlock"])(),Object(o["createElementBlock"])(o["Fragment"],{key:0},[Object(o["createElementVNode"])("span",{class:Object(o["normalizeClass"])("kpiCardEvolutionTrend ".concat(e.evolutionTrendClass))},[Object(o["createElementVNode"])("span",{class:Object(o["normalizeClass"])("kpiCardEvolutionIcon ".concat(e.evolutionTrendIcon))},null,2),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.kpi.evolutionValue),1)],2),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate(e.evolutionTrendFrom)),1)],64)):(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",D,L))]),e.kpi.badge?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",{key:0,innerHTML:e.$sanitize(e.kpi.badge),class:"kpiCardBadge"},null,8,A)):Object(o["createCommentVNode"])("",!0)])}var G=Object(o["defineComponent"])({props:{modelValue:{type:Object,required:!0}},computed:{evolutionTrendFrom:function(){switch(this.kpi.evolutionPeriod){case"day":return"MultiSites_EvolutionFromPreviousDay";case"week":return"MultiSites_EvolutionFromPreviousWeek";case"month":return"MultiSites_EvolutionFromPreviousMonth";case"year":return"MultiSites_EvolutionFromPreviousYear";default:return"MultiSites_EvolutionFromPreviousPeriod"}},evolutionTrendClass:function(){return 1===this.kpi.evolutionTrend?"kpiTrendPositive":-1===this.kpi.evolutionTrend?"kpiTrendNegative":"kpiTrendNeutral"},evolutionTrendIcon:function(){return 1===this.kpi.evolutionTrend?"icon-chevron-up":-1===this.kpi.evolutionTrend?"icon-chevron-down":"icon-circle"},kpi:function(){return this.modelValue}}});G.render=F;var R=G,I=Object(o["defineComponent"])({components:{MatomoLoader:p["MatomoLoader"],KPICard:R},props:{isLoading:Boolean,modelValue:{type:Array,required:!0}},computed:{hasKpiBadge:function(){return this.kpis.some((function(e){return!!e.badge}))},kpis:function(){return this.modelValue}}});I.render=w;var z=I,U={class:"sitesTableContainer"},H={class:"card-table dataTable sitesTable"},q={class:"sitesTableEvolutionSelector"},K=["value"],W={value:"hits_evolution"},$={value:"visits_evolution"},J={value:"pageviews_evolution"},Y={key:0,value:"revenue_evolution"},Q={key:0},X={class:"sitesTableLoading",colspan:"7"},Z={key:1},ee={colspan:"7"},te={class:"notification system notification-error"},re=Object(o["createElementVNode"])("br",null,null,-1),ae=Object(o["createElementVNode"])("br",null,null,-1),ne=["href"],oe=Object(o["createTextVNode"])(" – "),ie=["href"],se=["href"],le=Object(o["createTextVNode"])(". "),ce={key:0,class:"sitesTablePagination"},ue={class:"dataTablePages"};function de(e,t,r,a,n,i){var s=Object(o["resolveComponent"])("MatomoLoader"),l=Object(o["resolveComponent"])("SitesTableSite");return Object(o["openBlock"])(),Object(o["createElementBlock"])(o["Fragment"],null,[Object(o["createElementVNode"])("div",U,[Object(o["createElementVNode"])("table",H,[Object(o["createElementVNode"])("thead",null,[Object(o["createElementVNode"])("tr",null,[Object(o["createElementVNode"])("th",{onClick:t[0]||(t[0]=function(t){return e.sortBy("label")}),class:"label"},[Object(o["createTextVNode"])(Object(o["toDisplayString"])(e.translate("General_Website"))+" ",1),"label"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0)]),Object(o["createElementVNode"])("th",{onClick:t[1]||(t[1]=function(t){return e.sortBy("nb_visits")})},["nb_visits"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_ColumnNbVisits")),1)]),Object(o["createElementVNode"])("th",{onClick:t[2]||(t[2]=function(t){return e.sortBy("nb_pageviews")})},["nb_pageviews"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_ColumnPageviews")),1)]),Object(o["createElementVNode"])("th",{onClick:t[3]||(t[3]=function(t){return e.sortBy("hits")})},["hits"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_ColumnHits")),1)]),e.displayRevenue?(Object(o["openBlock"])(),Object(o["createElementBlock"])("th",{key:0,onClick:t[4]||(t[4]=function(t){return e.sortBy("revenue")})},["revenue"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_ColumnRevenue")),1)])):Object(o["createCommentVNode"])("",!0),Object(o["createElementVNode"])("th",{onClick:t[5]||(t[5]=function(t){return e.sortBy(e.evolutionSelector)})},[e.sortColumn===e.evolutionSelector?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("MultiSites_Evolution")),1)]),Object(o["createElementVNode"])("th",q,[Object(o["createElementVNode"])("select",{class:"browser-default",value:e.evolutionSelector,onChange:t[6]||(t[6]=function(t){return e.changeEvolutionSelector(t.target.value)})},[Object(o["createElementVNode"])("option",W,Object(o["toDisplayString"])(e.translate("General_ColumnHits")),1),Object(o["createElementVNode"])("option",$,Object(o["toDisplayString"])(e.translate("General_ColumnNbVisits")),1),Object(o["createElementVNode"])("option",J,Object(o["toDisplayString"])(e.translate("General_ColumnPageviews")),1),e.displayRevenue?(Object(o["openBlock"])(),Object(o["createElementBlock"])("option",Y,Object(o["toDisplayString"])(e.translate("General_ColumnRevenue")),1)):Object(o["createCommentVNode"])("",!0)],40,K)])])]),Object(o["createElementVNode"])("tbody",null,[e.isLoading?(Object(o["openBlock"])(),Object(o["createElementBlock"])("tr",Q,[Object(o["createElementVNode"])("td",X,[Object(o["createVNode"])(s)])])):e.errorLoading?(Object(o["openBlock"])(),Object(o["createElementBlock"])("tr",Z,[Object(o["createElementVNode"])("td",ee,[Object(o["createElementVNode"])("div",te,[Object(o["createTextVNode"])(Object(o["toDisplayString"])(e.translate("General_ErrorRequest","",""))+" ",1),re,ae,Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_NeedMoreHelp"))+" ",1),Object(o["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.externalRawLink("https://matomo.org/faq/troubleshooting/faq_19489/")},Object(o["toDisplayString"])(e.translate("General_Faq")),9,ne),oe,Object(o["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.externalRawLink("https://forum.matomo.org/")},Object(o["toDisplayString"])(e.translate("Feedback_CommunityHelp")),9,ie),Object(o["withDirectives"])(Object(o["createElementVNode"])("span",null," – ",512),[[o["vShow"],e.errorShowProfessionalHelp]]),Object(o["withDirectives"])(Object(o["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.externalRawLink("https://matomo.org/support-plans/")},Object(o["toDisplayString"])(e.translate("Feedback_ProfessionalHelp")),9,se),[[o["vShow"],e.errorShowProfessionalHelp]]),le])])])):(Object(o["openBlock"])(!0),Object(o["createElementBlock"])(o["Fragment"],{key:2},Object(o["renderList"])(e.sites,(function(t){return Object(o["openBlock"])(),Object(o["createBlock"])(l,{"display-revenue":e.displayRevenue,"evolution-metric":e.evolutionMetric,key:"site-".concat(t.idsite),"model-value":t,"display-sparkline":e.displaySparklines,"sparkline-metric":e.sparklineMetric},null,8,["display-revenue","evolution-metric","model-value","display-sparkline","sparkline-metric"])})),128))])])]),!e.isLoading||e.paginationUpperBound>0?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",ce,[Object(o["withDirectives"])(Object(o["createElementVNode"])("span",{class:"dataTablePrevious",onClick:t[7]||(t[7]=function(t){return e.navigatePreviousPage()})}," « "+Object(o["toDisplayString"])(e.translate("General_Previous")),513),[[o["vShow"],0!==e.paginationCurrentPage]]),Object(o["createElementVNode"])("span",ue,Object(o["toDisplayString"])(e.translate("General_Pagination",e.paginationLowerBound,e.paginationUpperBound,e.numberOfFilteredSites)),1),Object(o["withDirectives"])(Object(o["createElementVNode"])("span",{class:"dataTableNext",onClick:t[8]||(t[8]=function(t){return e.navigateNextPage()})},Object(o["toDisplayString"])(e.translate("General_Next"))+" » ",513),[[o["vShow"],e.paginationCurrentPage0&&void 0!==arguments[0]&&arguments[0];this.fetchAbort&&(this.fetchAbort.abort(),this.fetchAbort=null,this.cancelAutoRefresh()),this.fetchAbort=new AbortController,this.privateState.errorLoading=!1,this.privateState.isLoadingKPIs=!t,this.privateState.isLoadingSites=!0;var r={method:"MultiSites.getAllWithGroups",filter_limit:this.pageSize,filter_offset:this.currentPagingOffset.value,filter_sort_column:this.privateState.sortColumn,filter_sort_order:this.privateState.sortOrder,format_metrics:0,showColumns:["hits_evolution","hits_evolution_trend","label","hits","nb_pageviews","nb_visits","pageviews_evolution","pageviews_evolution_trend","revenue","revenue_evolution","revenue_evolution_trend","visits_evolution","visits_evolution_trend"].join(",")};return this.searchTerm&&(r.pattern=this.searchTerm),p["AjaxHelper"].fetch(r,{abortController:this.fetchAbort}).then((function(r){t||(e.updateDashboardKPIs(r),p["Matomo"].postEvent("MultiSites.DashboardKPIs.updated",{parameters:(new p["AjaxHelper"]).mixinDefaultGetParams({filter_limit:e.pageSize,filter_offset:e.currentPagingOffset.value,filter_sort_column:e.privateState.sortColumn,filter_sort_order:e.privateState.sortOrder,pattern:e.searchTerm}),kpis:e.privateState.dashboardKPIs})),e.updateDashboardSites(r)})).catch((function(){e.privateState.dashboardSites=[],e.privateState.errorLoading=!0})).finally((function(){e.privateState.isLoadingKPIs=!1,e.privateState.isLoadingSites=!1,e.fetchAbort=null,e.startAutoRefresh()}))}},{key:"startAutoRefresh",value:function(){var e=this;if(this.cancelAutoRefresh(),!(this.autoRefreshInterval<=0)){var t;try{t=p["Periods"].parse(p["Matomo"].period,p["Matomo"].currentDateString)}catch(r){}t&&t.containsToday()&&(this.autoRefreshTimeout=setTimeout((function(){e.autoRefreshTimeout=null,e.refreshData()}),1e3*this.autoRefreshInterval))}}},{key:"updateDashboardKPIs",value:function(e){this.privateState.dashboardKPIs={badges:{hits:"",pageviews:"",revenue:"",visits:""},evolutionPeriod:p["Matomo"].period,hits:p["NumberFormatter"].formatNumber(e.totals.hits),hitsCompact:p["NumberFormatter"].formatNumberCompact(e.totals.hits),hitsEvolution:p["NumberFormatter"].calculateAndFormatEvolution(e.totals.hits,e.totals.previous_hits,!0),hitsTrend:Math.sign(e.totals.hits-e.totals.previous_hits),pageviews:p["NumberFormatter"].formatNumber(e.totals.nb_pageviews),pageviewsCompact:p["NumberFormatter"].formatNumberCompact(e.totals.nb_pageviews),pageviewsEvolution:p["NumberFormatter"].calculateAndFormatEvolution(e.totals.nb_pageviews,e.totals.previous_nb_pageviews,!0),pageviewsTrend:Math.sign(e.totals.nb_pageviews-e.totals.previous_nb_pageviews),revenue:p["NumberFormatter"].formatCurrency(e.totals.revenue,""),revenueCompact:p["NumberFormatter"].formatCurrencyCompact(e.totals.revenue,""),revenueEvolution:p["NumberFormatter"].calculateAndFormatEvolution(e.totals.revenue,e.totals.previous_revenue,!0),revenueTrend:Math.sign(e.totals.revenue-e.totals.previous_revenue),visits:p["NumberFormatter"].formatNumber(e.totals.nb_visits),visitsCompact:p["NumberFormatter"].formatNumberCompact(e.totals.nb_visits),visitsEvolution:p["NumberFormatter"].calculateAndFormatEvolution(e.totals.nb_visits,e.totals.previous_nb_visits,!0),visitsTrend:Math.sign(e.totals.nb_visits-e.totals.previous_nb_visits)}}},{key:"updateDashboardSites",value:function(e){this.privateState.dashboardSites=e.sites,this.privateState.numSites=e.numSites}}]),e}(),k=new S,y={class:"kpiCardContainer"},C={key:0,class:"kpiCard kpiCardLoading"},_=Object(o["createElementVNode"])("div",{class:"kpiCardTitle"}," ",-1),N={class:"kpiCardValue"},E=Object(o["createElementVNode"])("div",{class:"kpiCardEvolution"},[Object(o["createElementVNode"])("span",{class:"kpiCardEvolutionTrend"}," ")],-1),V={key:0,class:"kpiCardBadge"};function w(e,t,r,a,n,i){var s=Object(o["resolveComponent"])("MatomoLoader"),l=Object(o["resolveComponent"])("KPICard");return Object(o["openBlock"])(),Object(o["createElementBlock"])("div",y,[e.isLoading?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",C,[_,Object(o["createElementVNode"])("div",N,[Object(o["createVNode"])(s)]),E,e.hasKpiBadge?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",V," ")):Object(o["createCommentVNode"])("",!0)])):(Object(o["openBlock"])(!0),Object(o["createElementBlock"])(o["Fragment"],{key:1},Object(o["renderList"])(e.kpis,(function(t,r){return Object(o["openBlock"])(),Object(o["createElementBlock"])(o["Fragment"],{key:"kpi-card-".concat(r)},[r>0?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",{key:0,class:Object(o["normalizeClass"])({kpiCardDivider:!0,kpiCardDividerBadge:e.hasKpiBadge})}," ",2)):Object(o["createCommentVNode"])("",!0),Object(o["createVNode"])(l,{"model-value":t},null,8,["model-value"])],64)})),128))])}var T={class:"kpiCard"},B={class:"kpiCardTitle"},P=["title"],M={class:"kpiCardEvolution"},D={key:1,class:"kpiCardEvolution"},x=Object(o["createElementVNode"])("span",{class:"kpiCardEvolutionTrend"}," ",-1),L=[x],A=["innerHTML"];function F(e,t,r,a,n,i){return Object(o["openBlock"])(),Object(o["createElementBlock"])("div",T,[Object(o["createElementVNode"])("div",B,[Object(o["createElementVNode"])("span",{class:Object(o["normalizeClass"])("kpiCardIcon ".concat(e.kpi.icon))},null,2),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate(e.kpi.title)),1)]),Object(o["createElementVNode"])("div",{class:"kpiCardValue",title:e.kpi.valueCompact!==e.kpi.value?e.kpi.value:""},Object(o["toDisplayString"])(e.kpi.valueCompact),9,P),Object(o["createElementVNode"])("div",M,[""!==e.kpi.evolutionValue?(Object(o["openBlock"])(),Object(o["createElementBlock"])(o["Fragment"],{key:0},[Object(o["createElementVNode"])("span",{class:Object(o["normalizeClass"])("kpiCardEvolutionTrend ".concat(e.evolutionTrendClass))},[Object(o["createElementVNode"])("span",{class:Object(o["normalizeClass"])("kpiCardEvolutionIcon ".concat(e.evolutionTrendIcon))},null,2),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.kpi.evolutionValue)+"  ",1)],2),Object(o["createElementVNode"])("span",null,Object(o["toDisplayString"])(e.translate(e.evolutionTrendFrom)),1)],64)):(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",D,L))]),e.kpi.badge?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",{key:0,innerHTML:e.$sanitize(e.kpi.badge),class:"kpiCardBadge"},null,8,A)):Object(o["createCommentVNode"])("",!0)])}var G=Object(o["defineComponent"])({props:{modelValue:{type:Object,required:!0}},computed:{evolutionTrendFrom:function(){switch(this.kpi.evolutionPeriod){case"day":return"MultiSites_EvolutionFromPreviousDay";case"week":return"MultiSites_EvolutionFromPreviousWeek";case"month":return"MultiSites_EvolutionFromPreviousMonth";case"year":return"MultiSites_EvolutionFromPreviousYear";default:return"MultiSites_EvolutionFromPreviousPeriod"}},evolutionTrendClass:function(){return 1===this.kpi.evolutionTrend?"kpiTrendPositive":-1===this.kpi.evolutionTrend?"kpiTrendNegative":"kpiTrendNeutral"},evolutionTrendIcon:function(){return 1===this.kpi.evolutionTrend?"icon-chevron-up":-1===this.kpi.evolutionTrend?"icon-chevron-down":"icon-circle"},kpi:function(){return this.modelValue}}});G.render=F;var R=G,I=Object(o["defineComponent"])({components:{MatomoLoader:p["MatomoLoader"],KPICard:R},props:{isLoading:Boolean,modelValue:{type:Array,required:!0}},computed:{hasKpiBadge:function(){return this.kpis.some((function(e){return!!e.badge}))},kpis:function(){return this.modelValue}}});I.render=w;var z=I,U={class:"sitesTableContainer"},H={class:"card-table dataTable sitesTable"},q={class:"sitesTableEvolutionSelector"},K=["value"],W={value:"hits_evolution"},$={value:"visits_evolution"},J={value:"pageviews_evolution"},Y={key:0,value:"revenue_evolution"},Q={key:0},X={class:"sitesTableLoading",colspan:"7"},Z={key:1},ee={colspan:"7"},te={class:"notification system notification-error"},re=Object(o["createElementVNode"])("br",null,null,-1),ae=Object(o["createElementVNode"])("br",null,null,-1),ne=["href"],oe=Object(o["createTextVNode"])(" – "),ie=["href"],se=["href"],le=Object(o["createTextVNode"])(". "),ce={key:0,class:"sitesTablePagination"},ue={class:"dataTablePages"};function de(e,t,r,a,n,i){var s=Object(o["resolveComponent"])("MatomoLoader"),l=Object(o["resolveComponent"])("SitesTableSite");return Object(o["openBlock"])(),Object(o["createElementBlock"])(o["Fragment"],null,[Object(o["createElementVNode"])("div",U,[Object(o["createElementVNode"])("table",H,[Object(o["createElementVNode"])("thead",null,[Object(o["createElementVNode"])("tr",null,[Object(o["createElementVNode"])("th",{onClick:t[0]||(t[0]=function(t){return e.sortBy("label")}),class:"label"},[Object(o["createTextVNode"])(Object(o["toDisplayString"])(e.translate("General_Website"))+" ",1),"label"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0)]),Object(o["createElementVNode"])("th",{onClick:t[1]||(t[1]=function(t){return e.sortBy("nb_visits")})},["nb_visits"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_ColumnNbVisits")),1)]),Object(o["createElementVNode"])("th",{onClick:t[2]||(t[2]=function(t){return e.sortBy("nb_pageviews")})},["nb_pageviews"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_ColumnPageviews")),1)]),Object(o["createElementVNode"])("th",{onClick:t[3]||(t[3]=function(t){return e.sortBy("hits")})},["hits"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_ColumnHits")),1)]),e.displayRevenue?(Object(o["openBlock"])(),Object(o["createElementBlock"])("th",{key:0,onClick:t[4]||(t[4]=function(t){return e.sortBy("revenue")})},["revenue"===e.sortColumn?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_ColumnRevenue")),1)])):Object(o["createCommentVNode"])("",!0),Object(o["createElementVNode"])("th",{onClick:t[5]||(t[5]=function(t){return e.sortBy(e.evolutionSelector)})},[e.sortColumn===e.evolutionSelector?(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",{key:0,class:Object(o["normalizeClass"])(e.sortColumnClass)},null,2)):Object(o["createCommentVNode"])("",!0),Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("MultiSites_Evolution")),1)]),Object(o["createElementVNode"])("th",q,[Object(o["createElementVNode"])("select",{class:"browser-default",value:e.evolutionSelector,onChange:t[6]||(t[6]=function(t){return e.changeEvolutionSelector(t.target.value)})},[Object(o["createElementVNode"])("option",W,Object(o["toDisplayString"])(e.translate("General_ColumnHits")),1),Object(o["createElementVNode"])("option",$,Object(o["toDisplayString"])(e.translate("General_ColumnNbVisits")),1),Object(o["createElementVNode"])("option",J,Object(o["toDisplayString"])(e.translate("General_ColumnPageviews")),1),e.displayRevenue?(Object(o["openBlock"])(),Object(o["createElementBlock"])("option",Y,Object(o["toDisplayString"])(e.translate("General_ColumnRevenue")),1)):Object(o["createCommentVNode"])("",!0)],40,K)])])]),Object(o["createElementVNode"])("tbody",null,[e.isLoading?(Object(o["openBlock"])(),Object(o["createElementBlock"])("tr",Q,[Object(o["createElementVNode"])("td",X,[Object(o["createVNode"])(s)])])):e.errorLoading?(Object(o["openBlock"])(),Object(o["createElementBlock"])("tr",Z,[Object(o["createElementVNode"])("td",ee,[Object(o["createElementVNode"])("div",te,[Object(o["createTextVNode"])(Object(o["toDisplayString"])(e.translate("General_ErrorRequest","",""))+" ",1),re,ae,Object(o["createTextVNode"])(" "+Object(o["toDisplayString"])(e.translate("General_NeedMoreHelp"))+" ",1),Object(o["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.externalRawLink("https://matomo.org/faq/troubleshooting/faq_19489/")},Object(o["toDisplayString"])(e.translate("General_Faq")),9,ne),oe,Object(o["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.externalRawLink("https://forum.matomo.org/")},Object(o["toDisplayString"])(e.translate("Feedback_CommunityHelp")),9,ie),Object(o["withDirectives"])(Object(o["createElementVNode"])("span",null," – ",512),[[o["vShow"],e.errorShowProfessionalHelp]]),Object(o["withDirectives"])(Object(o["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.externalRawLink("https://matomo.org/support-plans/")},Object(o["toDisplayString"])(e.translate("Feedback_ProfessionalHelp")),9,se),[[o["vShow"],e.errorShowProfessionalHelp]]),le])])])):(Object(o["openBlock"])(!0),Object(o["createElementBlock"])(o["Fragment"],{key:2},Object(o["renderList"])(e.sites,(function(t){return Object(o["openBlock"])(),Object(o["createBlock"])(l,{"display-revenue":e.displayRevenue,"evolution-metric":e.evolutionMetric,key:"site-".concat(t.idsite),"model-value":t,"display-sparkline":e.displaySparklines,"sparkline-metric":e.sparklineMetric},null,8,["display-revenue","evolution-metric","model-value","display-sparkline","sparkline-metric"])})),128))])])]),!e.isLoading||e.paginationUpperBound>0?(Object(o["openBlock"])(),Object(o["createElementBlock"])("div",ce,[Object(o["withDirectives"])(Object(o["createElementVNode"])("span",{class:"dataTablePrevious",onClick:t[7]||(t[7]=function(t){return e.navigatePreviousPage()})}," « "+Object(o["toDisplayString"])(e.translate("General_Previous")),513),[[o["vShow"],0!==e.paginationCurrentPage]]),Object(o["createElementVNode"])("span",ue,Object(o["toDisplayString"])(e.translate("General_Pagination",e.paginationLowerBound,e.paginationUpperBound,e.numberOfFilteredSites)),1),Object(o["withDirectives"])(Object(o["createElementVNode"])("span",{class:"dataTableNext",onClick:t[8]||(t[8]=function(t){return e.navigateNextPage()})},Object(o["toDisplayString"])(e.translate("General_Next"))+" » ",513),[[o["vShow"],e.paginationCurrentPagespan { + display: table-cell; + } } .kpiCardEvolutionIcon { @@ -200,7 +198,10 @@ } .kpiCardEvolutionTrend { + width: 1%; font-size: 1rem; + white-space: nowrap; + vertical-align: middle; } .kpiTrendNegative { @@ -226,6 +227,7 @@ height: 1.5rem; margin-top: 0.5rem; padding: 0 0.35rem; + width: fit-content; } } @@ -352,7 +354,50 @@ } } + @media all and (max-width: 1350px) { + .kpiCardContainer { + flex-wrap: wrap; + + .kpiCard { + flex-basis: calc(~'50% - 1px'); + max-width: calc(~'50% - 1px'); + padding: 0 7vw; + } + + .kpiCardDivider { + &:nth-child(4) { + display: none; + } + } + } + } + @media all and (max-width: 600px) { + .dashboardHeader { + margin-bottom: 12px; + } + + .kpiCardContainer { + .kpiCard { + flex-basis: 100%; + max-width: 100%; + padding: 0!important; + justify-items: flex-start; + + .kpiCardValue { + font-size: 2rem; + } + } + + .kpiCardDivider { + display: block!important; + background-image: url('plugins/MultiSites/images/kpi_divider_horizontal.svg'); + height: 1px; + width: 100%; + margin: 4px 0; + } + } + #periodString { width: 100%; } @@ -380,10 +425,5 @@ width: 100%; } } - - .kpiCardContainer { - margin-left: 20px; - margin-right: 20px; - } } } diff --git a/plugins/MultiSites/vue/src/AllWebsitesDashboard/KPICard.vue b/plugins/MultiSites/vue/src/AllWebsitesDashboard/KPICard.vue index 2b7f2252e7a..f5febab508f 100644 --- a/plugins/MultiSites/vue/src/AllWebsitesDashboard/KPICard.vue +++ b/plugins/MultiSites/vue/src/AllWebsitesDashboard/KPICard.vue @@ -20,9 +20,9 @@