Improved All Websites Dashboard (#22312)

* Allow rendering dashboard without top controls

* Bootstrap improved all websites dashboard

* Display period selector

* Add search/new-website controls

* Add new icons circle, dollar-sign, hits

* Add KPI cards

* Fetch KPI data from store

* Introduce delay before showing KPI data

* Connect KPI evolution with PeriodSelector

* Fetch mock dashboard data from API

* Enable today report auto refresh

* Allow displaying info badge on KPI cards

* Display sites table

* Connect site search

* Keep sites table pagination centered if table scrolls

* Display error message if loading fails

* Apply review feedback

* Remove KPI badge from API response

* Update expected screenshots

* Reset sorting/paging for consistency if period changes

* Build vue components

LEGALNOTICE

@@ -290,15 +290,15 @@ THIRD-PARTY CONTENT
 	Link: https://icomoon.io/#icons-icomoon
 	License: GPL
 
-	Name: FontAwesome icons ("icon-minus-square", "icon-plus-square", "icon-arrowup", "icon-arrowdown", "icon-outlink", "icon-chevron-right", "icon-chevron-left", "icon-chevron-down", "icon-chevron-up") in plugins/Morpheus/fonts
+	Name: FontAwesome icons ("icon-minus-square", "icon-plus-square", "icon-arrowup", "icon-arrowdown", "icon-outlink", "icon-chevron-right", "icon-chevron-left", "icon-chevron-down", "icon-chevron-up", "icon-circle") in plugins/Morpheus/fonts
 	Link: https://fontawesome.com/
 	License: CC BY 4.0
 
     Name: Pictogrammers icons ("icon-merge") in plugins/Morpheus/fonts
     Link: https://pictogrammers.com/
     License: Apache License Version 2.0
 
-    Name: Feather icons ("icon-marketplace") in plugins/Morpheus/fonts
+    Name: Feather icons ("icon-dollar-sign", "icon-marketplace") in plugins/Morpheus/fonts
     Link: https://feathericons.com/
     License: MIT (Expat)
 

plugins/Morpheus/Controller.php

@@ -862,7 +862,10 @@ public function demo()
                 'admin-development',
                 'admin-settings',
                 'marketplace',
-                'plugin'
+                'plugin',
+                'circle',
+                'dollar-sign',
+                'hits',
             ],
         ];
         // @phpcs:enable Generic.Files.LineLength

plugins/Morpheus/stylesheets/base/icons.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'matomo';
   src:
-          url('plugins/Morpheus/fonts/matomo.woff2?m6crfo') format('woff2'),
-          url('plugins/Morpheus/fonts/matomo.woff?m6crfo') format('woff'),
-          url('plugins/Morpheus/fonts/matomo.ttf?m6crfo') format('truetype'),
-          url('plugins/Morpheus/fonts/matomo.svg?m6crfo#matomo') format('svg');
+          url('plugins/Morpheus/fonts/matomo.woff2?tat0k1') format('woff2'),
+          url('plugins/Morpheus/fonts/matomo.woff?tat0k1') format('woff'),
+          url('plugins/Morpheus/fonts/matomo.ttf?tat0k1') format('truetype'),
+          url('plugins/Morpheus/fonts/matomo.svg?tat0k1#matomo') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,15 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-circle:before {
+  content: "\e90f";
+}
+.icon-dollar-sign:before {
+  content: "\e90e";
+}
+.icon-hits:before {
+  content: "\e910";
+}
 .icon-merge:before {
   content: "\e904";
 }

plugins/Morpheus/templates/dashboard.twig

@@ -21,10 +21,12 @@
     {% include "@CoreHome/_topScreen.twig" %}
 
     <div class="top_controls">
-        <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl borderedControl"></div>
-        {% block topcontrols %}
-        {% endblock %}
+        {% if hideTopControls is not defined or not hideTopControls %}
+            <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl borderedControl"></div>
 
+            {% block topcontrols %}
+            {% endblock %}
+        {% endif %}
     </div>
 
     <div class="ui-confirm" id="alert">

plugins/MultiSites/API.php

@@ -16,10 +16,13 @@
 use Piwik\Container\StaticContainer;
 use Piwik\DataTable;
 use Piwik\DataTable\Row;
+use Piwik\NumberFormatter;
 use Piwik\Period;
 use Piwik\Period\Range;
 use Piwik\Piwik;
+use Piwik\Plugins\FeatureFlags\FeatureFlagManager;
 use Piwik\Plugins\Goals\Archiver;
+use Piwik\Plugins\MultiSites\FeatureFlags\ImprovedAllWebsitesDashboard;
 use Piwik\Plugins\SitesManager\API as APISitesManager;
 use Piwik\Scheduler\Scheduler;
 use Piwik\SettingsPiwik;
@@ -384,6 +387,93 @@ function ($value) {
         return $dataTable;
     }
 
+    /**
+     * Temporary/partially mocked data for the all websites dashboard.
+     *
+     * @internal
+     *
+     * @param int $idSite
+     * @param string $period
+     * @param string $date
+     * @param string|false $segment
+     * @param string $pattern
+     * @return array
+     * @throws Exception
+     */
+    public function mockDashboardData(
+        int $idSite,
+        string $period,
+        string $date,
+        int $filter_limit,
+        $segment = false,
+        string $pattern = ''
+    ): array {
+        $featureFlagManager = StaticContainer::get(FeatureFlagManager::class);
+
+        if (!$featureFlagManager->isFeatureActive(ImprovedAllWebsitesDashboard::class)) {
+            throw new Exception('THIS API SHOULD NOT BE USED');
+        }
+
+        Piwik::checkUserHasSomeViewAccess();
+
+        if (Period::isMultiplePeriod($date, $period)) {
+            throw new Exception('Multiple periods are not supported');
+        }
+
+        $numberFormatter = NumberFormatter::getInstance();
+
+        $response = [
+            'totals' => [
+                'hits_evolution'            => $numberFormatter->formatPercent(2.8, 2, 2),
+                'hits_evolution_trend'      => 1,
+                'nb_hits'                   => $numberFormatter->formatNumber(582303),
+                'nb_pageviews'              => $numberFormatter->formatNumber(26027),
+                'nb_visits'                 => $numberFormatter->formatNumber(10118),
+                'pageviews_evolution'       => $numberFormatter->formatPercent(0.3, 2, 2),
+                'pageviews_evolution_trend' => -1,
+                'visits_evolution'          => $numberFormatter->formatPercent(2.4, 2, 2),
+                'visits_evolution_trend'    => 1,
+                'revenue'                   => $numberFormatter->formatNumber(85958.30, 2, 2),
+                'revenue_evolution'         => $numberFormatter->formatPercent(0.0, 2, 2),
+                'revenue_evolution_trend'   => 0,
+            ],
+        ];
+
+        $segment = $segment ?: false;
+        $request = $_GET + $_POST;
+        $dashboard = new Dashboard($period, $date, $segment);
+
+        if ('' !== $pattern) {
+            $dashboard->search(strtolower($pattern));
+        }
+
+        $sites = $dashboard->getSites($request, $filter_limit);
+
+        foreach ($sites as &$site) {
+            $site['nb_hits'] = $site['nb_pageviews'];
+            $site['hits_evolution'] = $site['pageviews_evolution'];
+            $site['hits_evolution_trend'] = $site['pageviews_evolution_trend'];
+        }
+
+        $response['numSites'] = $dashboard->getNumSites();
+        $response['sites'] = $sites;
+
+        if ('range' === $period) {
+            $response['sparklineDate'] = $date;
+        } else {
+            Piwik::checkUserHasViewAccess($idSite);
+
+            $response['sparklineDate'] = Range::getRelativeToEndDate(
+                $period,
+                'last30',
+                $date,
+                new Site($idSite)
+            );
+        }
+
+        return $response;
+    }
+
     /**
      * Performs a binary filter of two
      * DataTables in order to correctly calculate evolution metrics.