Add reusable widget to display single metric w/ sparkline & evolution percent (+ other changes) (#13101)

* Add empty metric for single metric view.

* Add new isReusable property to widget metadata & if set to true, do not grey out the widget in the dashboard manager, even if the widget is used in the dashboard.

* Initial working version of single metric view.

* Get single metric view widget to work and look correctly (no series picker).

* Add series picker to single metric widget and add filter_last_period_evolution parameter.

* Persist metric change through dashboard widget parameter saving.

* Loading state for single metric view.

* Make new evolution param work on processed reports + tweak component implementation.

* Tweak CSS and make sure angular components are compiled in widget preview.

* Make component work with widget preview and avoid unnecessary widget reloads when multiple widgets of the same type are shown.

* Generalize JS lastN range period computing and use to create standalone sparkline angular component and get rid of need for "past-period" argument to single metric view.

* Add format_metrics: "1" to API.get method.

* Add escaping to _angularComponent.twig.

* hacky fix for formatting revenue columns

* Format past data values & allow evolution to be calculated for processed metrics.

* filter evolution changes

* Fix issue in subtable recursion for processed metric computation & metric formatting + add new processed metric compute hooks to fix bug in evolution calculation on subtables.

* remove isReusable property.

* attempting to change strategy

* simpler solution that does not require backend changes

* remove unneeded code + fix issue w/ formatted metrics

* remove some more unneeded code

* write UI test

* add new screenshots

* Add all goals to single metric view picker.

* move category

* fix test

* fixing more tests

* Fixing some UI tests.

* Update more screenshots.

* update two more screenshots

12 files changed, 34 insertions, 29 deletions

diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js
index c72f53a8c9..cb603be3a6 100644
--- a/plugins/Dashboard/javascripts/dashboardObject.js
+++ b/plugins/Dashboard/javascripts/dashboardObject.js
@@ -160,7 +160,6 @@
          */
         addWidget: function (uniqueId, columnNumber, widgetParameters, addWidgetOnTop, isHidden) {
             addWidgetTemplate(uniqueId, columnNumber, widgetParameters, addWidgetOnTop, isHidden);
-            reloadWidget(uniqueId);
             saveLayout();
         },
 
@@ -445,10 +444,14 @@
     /**
      * Reloads the widget with the given uniqueId
      *
-     * @param {String} uniqueId
+     * @param {String|jQuery} $widget
      */
-    function reloadWidget(uniqueId) {
-        $('[widgetId="' + uniqueId + '"]', dashboardElement).dashboardWidget('reload', false, true);
+    function reloadWidget($widget) {
+        if (typeof widget === 'string') {
+            $widget = $('[widgetId="' + uniqueId + '"]', dashboardElement);
+        }
+
+        $widget.dashboardWidget('reload', false, true);
     }
 
     /**
@@ -469,15 +472,15 @@
             return;
         }
 
-        var widgetContent = '<div class="sortable" widgetId="' + uniqueId + '"></div>';
+        var $widgetContent = $('<div class="sortable" widgetId="' + uniqueId + '"></div>');
 
         if (addWidgetOnTop) {
-            $('> .col:nth-child(' + columnNumber + ')', dashboardElement).prepend(widgetContent);
+            $('> .col:nth-child(' + columnNumber + ')', dashboardElement).prepend($widgetContent);
         } else {
-            $('> .col:nth-child(' + columnNumber + ')', dashboardElement).append(widgetContent);
+            $('> .col:nth-child(' + columnNumber + ')', dashboardElement).append($widgetContent);
         }
 
-        $('[widgetId="' + uniqueId + '"]', dashboardElement).dashboardWidget({
+        return $widgetContent.dashboardWidget({
             uniqueId: uniqueId,
             widgetParameters: widgetParameters,
             onChange: function () {
diff --git a/plugins/Dashboard/javascripts/dashboardWidget.js b/plugins/Dashboard/javascripts/dashboardWidget.js
index 6756b1d291..22c0538471 100644
--- a/plugins/Dashboard/javascripts/dashboardWidget.js
+++ b/plugins/Dashboard/javascripts/dashboardWidget.js
@@ -117,6 +117,8 @@
 
             var self = this, currentWidget = this.element;
 
+            $('.widgetContent', currentWidget).trigger('widget:reload');
+
             function onWidgetLoadedReplaceElementWithContent(loadedContent) {
                 var $widgetContent = $('.widgetContent', currentWidget);
 
@@ -133,7 +135,7 @@
                 if (currentWidget.parents('body').length) {
                     // there might be race conditions, eg widget might be just refreshed while whole dashboard is also
                     // removed from DOM
-                    piwikHelper.compileAngularComponents($widgetContent);
+                    piwikHelper.compileAngularComponents($widgetContent, { forceNewScope: true });
                 }
                 $widgetContent.removeClass('loading');
                 $widgetContent.trigger('widget:create', [self]);
diff --git a/plugins/Dashboard/javascripts/widgetMenu.js b/plugins/Dashboard/javascripts/widgetMenu.js
index 465e8001f5..c847edeb70 100644
--- a/plugins/Dashboard/javascripts/widgetMenu.js
+++ b/plugins/Dashboard/javascripts/widgetMenu.js
@@ -327,9 +327,9 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
                 for (var j = 0; j < widgets.length; j++) {
                     var widgetName = widgets[j]["name"];
                     var widgetUniqueId = widgets[j]["uniqueId"];
-                    // var widgetParameters = widgets[j]["parameters"];
+                    var widgetCategoryId = widgets[j].category ? widgets[j].category.id : null;
                     var widgetClass = '';
-                    if (!settings.isWidgetAvailable(widgetUniqueId)) {
+                    if (!settings.isWidgetAvailable(widgetUniqueId) && widgetCategoryId !== 'General_Generic') {
                         widgetClass += ' ' + settings.unavailableClass;
                     }
 
@@ -408,7 +408,7 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
 
                     var emptyWidgetHtml = require('piwik/UI/Dashboard').WidgetFactory.make(
                         widgetUniqueId,
-                        $('<div/>')
+                        $('<span/>')
                             .attr('title', _pk_translate("Dashboard_AddPreviewedWidget"))
                             .text(_pk_translate('Dashboard_WidgetPreview'))
                     );
@@ -418,6 +418,7 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
                         var widgetElement = $(document.getElementById(widgetUniqueId));
                         // document.getElementById needed for widgets with uniqueid like widgetOpens+Contact+Form
                         $('.widgetContent', widgetElement).html($(response));
+                        piwikHelper.compileAngularComponents($('.widgetContent', widgetElement), { forceNewScope: true });
                         $('.widgetContent', widgetElement).trigger('widget:create');
                         settings.onPreviewLoaded(widgetUniqueId, widgetElement);
                         $('.' + settings.widgetpreviewClass + ' .widgetTop', widgetPreview).on('click', function () {
diff --git a/plugins/Dashboard/tests/UI/Dashboard_spec.js b/plugins/Dashboard/tests/UI/Dashboard_spec.js
index c929f6783e..79b7eb997d 100644
--- a/plugins/Dashboard/tests/UI/Dashboard_spec.js
+++ b/plugins/Dashboard/tests/UI/Dashboard_spec.js
@@ -52,7 +52,6 @@ describe("Dashboard", function () {
             []
         ];
 
-        // TODO: should probably include an async lib
         testEnvironment.callController("Dashboard.saveLayout", {name: 'D4', layout: JSON.stringify(layout), idDashboard: 5, idSite: 2}, function () {
             // reset default widget selection
             testEnvironment.callController("Dashboard.saveLayoutAsDefault", {layout: 0}, function () {
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_create_new.png b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_create_new.png
index 58490a4567..6d8cb7adeb 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_create_new.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_create_new.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4cc5ac318571f225047a6ea8099a36a3eddf84160490455e4be0cb2f1b1fedfa
-size 47474
+oid sha256:4eed2ccd11a0fd8867a9f83721d674cdcc80d3b3fafaa3e28e237201480e0e65
+size 47578
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_expanded.png b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_expanded.png
index 5f26293303..39a1d09d71 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_expanded.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_expanded.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4fd2c5c78884be0cfd6c7bf620dc2f7aa5f82bea9de34a65fae33ef0ddadc5d8
-size 46904
+oid sha256:f581b26a963cf0b0318ef6277122a3c433803bf9a47c419085f491d27a9f0d0c
+size 47830
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_removed.png b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_removed.png
index 4910980871..28a728eb9a 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_removed.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_removed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0ba89b3a3e64b84fd716d852a1b7c87b13328f7b8722ec67b0ff3f23a63a108c
-size 429615
+oid sha256:6b3381ae6c02a78d3d04192425e289e2cc6d06c5422f2536b48326ac43ffaff7
+size 415347
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_widget_list_shown.png b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_widget_list_shown.png
index e015fafe22..800e666235 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_widget_list_shown.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_widget_list_shown.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2692f5b18e1643264b616159b4a8043fd4b33cfee9abeb89bfcaef19290677b7
-size 57021
+oid sha256:0189c5b0b15e78e0d575180b721e873fc17c441bf5a3418a2afa5068fd206e20
+size 57925
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_widget_preview.png b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_widget_preview.png
index 40665bf6a7..e8caefddbd 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_widget_preview.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/DashboardManager_widget_preview.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:22a795cbcbbe4600add04a010b32d8bf6fc4ae353bc31e643b474a2e68ba327e
-size 68744
+oid sha256:76d374477ef2b3898b21b764bab479bb0f297efa1d068b28d2fe7eaf43c8903f
+size 69442
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_loaded_token_auth.png b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_loaded_token_auth.png
index 6d51d33409..48f26c8a2d 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_loaded_token_auth.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_loaded_token_auth.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e24de3ee34581a370f0e7b91e079d25ca411c0897964525551156259862bf3d5
-size 624303
+oid sha256:6cd315980242867325c54b263aa94c3fbd453ae93f23873c3f1d1e8bded128eb
+size 616084
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_removed.png b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_removed.png
index 5d8f810e97..159b8b5b30 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_removed.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_removed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4148a72a37f310fce630d18b5dd1dea6012afc27751bd8f954db37c432917e70
-size 624066
+oid sha256:cb7a5493c40df8442fee1b9119ef4a08b1bb9c5cb61e508d72edd46534e3c07b
+size 615793
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_reset.png b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_reset.png
index 7b237f9bb3..58769a7eb8 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_reset.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_reset.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:587356c3aa5d29f3ec2e719ae9eaabf1c9db176ffa7322f2af4e81d03a8a6066
-size 252483
+oid sha256:391fc9177fd7effde0c8c66d83d2570f5d84cbb0d58687f883843f26d9b905d4
+size 252398