Use unformatted API data in new all websites dashboard

matomo-org · Nov 12, 2024 · 90ce1e9 · 90ce1e9
1 parent 8173853
commit 90ce1e9
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 119 deletions.
diff --git a/plugins/MultiSites/vue/dist/MultiSites.umd.js b/plugins/MultiSites/vue/dist/MultiSites.umd.js
diff --git a/plugins/MultiSites/vue/dist/MultiSites.umd.min.js b/plugins/MultiSites/vue/dist/MultiSites.umd.min.js
diff --git a/plugins/MultiSites/vue/src/AllWebsitesDashboard/AllWebsitesDashboard.store.ts b/plugins/MultiSites/vue/src/AllWebsitesDashboard/AllWebsitesDashboard.store.ts
@@ -6,7 +6,12 @@
  */
 
 import { computed, reactive, readonly } from 'vue';
-import { AjaxHelper, Matomo, Periods } from 'CoreHome';
+import {
+  AjaxHelper,
+  Matomo,
+  Periods,
+  NumberFormatter,
+} from 'CoreHome';
 
 import {
   DashboardMetrics,
@@ -39,16 +44,14 @@ interface DashboardStoreState {
   isLoadingSites: boolean;
   numSites: number;
   paginationCurrentPage: number;
-  sparklineDate: string;
   sortColumn: string;
   sortOrder: DashboardSortOrder;
 }
 
-interface GetDashboardMockDataResponse {
+interface GetAllWithGroupsDataResponse {
   sites: DashboardSiteData[];
   totals: DashboardMetrics;
   numSites: number;
-  sparklineDate: string;
 }
 
 const DEFAULT_SORT_ORDER = 'desc';
@@ -79,7 +82,6 @@ class DashboardStore {
     isLoadingSites: false,
     numSites: 0,
     paginationCurrentPage: 0,
-    sparklineDate: '',
     sortColumn: DEFAULT_SORT_COLUMN,
     sortOrder: DEFAULT_SORT_ORDER,
   });
@@ -204,11 +206,12 @@ class DashboardStore {
     this.privateState.isLoadingSites = true;
 
     const params: QueryParameters = {
-      method: 'MultiSites.mockDashboardData',
+      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',
@@ -230,7 +233,7 @@ class DashboardStore {
       params.pattern = this.searchTerm;
     }
 
-    return AjaxHelper.fetch<GetDashboardMockDataResponse>(
+    return AjaxHelper.fetch<GetAllWithGroupsDataResponse>(
       params,
       { abortController: this.fetchAbort },
     ).then((response) => {
@@ -279,28 +282,51 @@ class DashboardStore {
     }, this.autoRefreshInterval * 1000);
   }
 
-  private updateDashboardKPIs(response: GetDashboardMockDataResponse) {
+  private updateDashboardKPIs(response: GetAllWithGroupsDataResponse) {
     this.privateState.dashboardKPIs = {
       evolutionPeriod: Matomo.period as string,
-      hits: response.totals.hits,
-      hitsEvolution: response.totals.hits_evolution,
-      hitsTrend: response.totals.hits_evolution_trend,
-      pageviews: response.totals.nb_pageviews,
-      pageviewsEvolution: response.totals.pageviews_evolution,
-      pageviewsTrend: response.totals.pageviews_evolution_trend,
-      revenue: response.totals.revenue,
-      revenueEvolution: response.totals.revenue_evolution,
-      revenueTrend: response.totals.revenue_evolution_trend,
-      visits: response.totals.nb_visits,
-      visitsEvolution: response.totals.visits_evolution,
-      visitsTrend: response.totals.visits_evolution_trend,
+      hits: NumberFormatter.formatNumber(response.totals.hits),
+      hitsEvolution: NumberFormatter.calculateAndFormatEvolution(
+        response.totals.hits,
+        response.totals.previous_hits,
+        true,
+      ),
+      hitsTrend: Math.sign(
+        response.totals.hits - response.totals.previous_hits,
+      ) as EvolutionTrend,
+      pageviews: NumberFormatter.formatNumber(response.totals.nb_pageviews),
+      pageviewsEvolution: NumberFormatter.calculateAndFormatEvolution(
+        response.totals.nb_pageviews,
+        response.totals.previous_nb_pageviews,
+        true,
+      ),
+      pageviewsTrend: Math.sign(
+        response.totals.nb_pageviews - response.totals.previous_nb_pageviews,
+      ) as EvolutionTrend,
+      revenue: NumberFormatter.formatCurrency(response.totals.revenue, ''),
+      revenueEvolution: NumberFormatter.calculateAndFormatEvolution(
+        response.totals.revenue,
+        response.totals.previous_revenue,
+        true,
+      ),
+      revenueTrend: Math.sign(
+        response.totals.revenue - response.totals.previous_revenue,
+      ) as EvolutionTrend,
+      visits: NumberFormatter.formatNumber(response.totals.nb_visits),
+      visitsEvolution: NumberFormatter.calculateAndFormatEvolution(
+        response.totals.nb_visits,
+        response.totals.previous_nb_visits,
+        true,
+      ),
+      visitsTrend: Math.sign(
+        response.totals.nb_visits - response.totals.previous_nb_visits,
+      ) as EvolutionTrend,
     };
   }
 
-  private updateDashboardSites(response: GetDashboardMockDataResponse) {
+  private updateDashboardSites(response: GetAllWithGroupsDataResponse) {
     this.privateState.dashboardSites = response.sites;
     this.privateState.numSites = response.numSites;
-    this.privateState.sparklineDate = response.sparklineDate;
   }
 }
 

diff --git a/plugins/MultiSites/vue/src/AllWebsitesDashboard/SitesTable.vue b/plugins/MultiSites/vue/src/AllWebsitesDashboard/SitesTable.vue
@@ -131,7 +131,7 @@
             :evolution-metric="evolutionMetric"
             :key="`site-${site.idsite}`"
             :model-value="site"
-            :sparkline-date="sparklineDate"
+            :display-sparkline="displaySparklines"
             :sparkline-metric="sparklineMetric"
         />
       </tbody>
@@ -257,9 +257,6 @@ export default defineComponent({
           return '';
       }
     },
-    sparklineDate(): string|null {
-      return this.displaySparklines ? DashboardStore.state.value.sparklineDate : null;
-    },
   },
   methods: {
     changeEvolutionSelector(metric: string) {

diff --git a/plugins/MultiSites/vue/src/AllWebsitesDashboard/SitesTableSite.vue b/plugins/MultiSites/vue/src/AllWebsitesDashboard/SitesTableSite.vue
@@ -33,15 +33,20 @@
       </template>
     </td>
 
-    <td><span class="value">{{ site.nb_visits }}</span></td>
-    <td><span class="value">{{ site.nb_pageviews }}</span></td>
-    <td><span class="value">{{ site.hits }}</span></td>
-    <td v-if="displayRevenue"><span class="value">{{ site.revenue }}</span></td>
+    <td><span class="value">{{ formatNumber(site.nb_visits) }}</span></td>
+    <td><span class="value">{{ formatNumber(site.nb_pageviews) }}</span></td>
+    <td><span class="value">{{ formatNumber(site.hits) }}</span></td>
+    <td v-if="displayRevenue">
+      <span class="value">{{ formatCurrency(site.revenue, site.currencySymbol) }}</span>
+    </td>
 
     <td :colspan="displaySparkline ? 1 : 2">
       <template v-if="!site.isGroup && !!site[evolutionMetric]">
         <img :src="evolutionIconSrc" alt="" />
-        <span :class="evolutionTrendClass">{{ site[evolutionMetric] }}</span>
+        <span :class="evolutionTrendClass">
+          {{ calculateAndFormatEvolution(
+                site[sparklineMetric], site[`previous_${sparklineMetric}`], true) }}
+        </span>
       </template>
     </td>
 
@@ -67,7 +72,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Matomo, MatomoUrl } from 'CoreHome';
+import {
+  Matomo,
+  MatomoUrl,
+  Range,
+  format,
+} from 'CoreHome';
 
 import { DashboardSiteData, DashboardMetrics, EvolutionTrend } from '../types';
 
@@ -85,8 +95,8 @@ export default defineComponent({
       type: Object,
       required: true,
     },
-    sparklineDate: String,
     sparklineMetric: String,
+    displaySparkline: Boolean,
   },
   computed: {
     dashboardUrl() {
@@ -100,9 +110,6 @@ export default defineComponent({
 
       return `?${dashboardParams}${this.tokenParam}`;
     },
-    displaySparkline() {
-      return !this.site.isGroup && this.sparklineDate && this.sparklineMetric;
-    },
     evolutionIconSrc() {
       if (this.evolutionTrend === 1) {
         return 'plugins/MultiSites/images/arrow_up.png';
@@ -115,10 +122,22 @@ export default defineComponent({
       return 'plugins/MultiSites/images/stop.png';
     },
     evolutionSparklineSrc() {
+      let sparklineDate = Matomo.currentDateString as string;
+
+      if (Matomo.period as string !== 'range') {
+        const { startDate, endDate } = Range.getLastNRange(
+          Matomo.period as string,
+          '30',
+          Matomo.currentDateString as string,
+        );
+
+        sparklineDate = `${format(startDate)},${format(endDate)}`;
+      }
+
       const sparklineParams = MatomoUrl.stringify({
         module: 'MultiSites',
         action: 'getEvolutionGraph',
-        date: this.sparklineDate,
+        date: sparklineDate,
         period: Matomo.period as string,
         idSite: this.site.idsite,
         columns: this.sparklineMetric,

diff --git a/plugins/MultiSites/vue/src/types.ts b/plugins/MultiSites/vue/src/types.ts
@@ -11,18 +11,14 @@ export type DashboardSortOrder = 'asc' | 'desc';
 export type EvolutionTrend = -1 | 0 | 1;
 
 export interface DashboardMetrics {
-  hits_evolution: string;
-  hits_evolution_trend: EvolutionTrend;
-  hits: string;
-  nb_pageviews: string;
-  nb_visits: string;
-  pageviews_evolution: string;
-  pageviews_evolution_trend: EvolutionTrend;
-  visits_evolution: string;
-  visits_evolution_trend: EvolutionTrend;
-  revenue: string;
-  revenue_evolution: string;
-  revenue_evolution_trend: EvolutionTrend;
+  hits: number;
+  previous_hits: number;
+  nb_pageviews: number;
+  previous_nb_pageviews: number;
+  nb_visits: number;
+  previous_nb_visits: number;
+  revenue: number;
+  previous_revenue: number;
 }
 
 export interface DashboardSiteData extends DashboardMetrics, Site {