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

2 files changed, 50 insertions, 21 deletions

diff --git a/plugins/CoreHome/angularjs/common/services/periods.js b/plugins/CoreHome/angularjs/common/services/periods.js
index d1b50917bd..1c02bca2df 100644
--- a/plugins/CoreHome/angularjs/common/services/periods.js
+++ b/plugins/CoreHome/angularjs/common/services/periods.js
@@ -167,40 +167,64 @@
     addCustomPeriod('year', YearPeriod);
 
     // range period
-    function RangePeriod(startDate, endDate) {
+    function RangePeriod(startDate, endDate, childPeriodType) {
         this.startDate = startDate;
         this.endDate = endDate;
+        this.childPeriodType = childPeriodType;
     }
 
-    RangePeriod.parse = function parseRangePeriod(strDate) {
-        var dates = [];
+    RangePeriod.parse = function parseRangePeriod(strDate, childPeriodType) {
+        childPeriodType = childPeriodType || 'day';
 
         if (/^previous/.test(strDate)) {
-            dates = getLastNRange(strDate.substring(8), 1);
+            var endDate = RangePeriod.getLastNRange(childPeriodType, 2).startDate;
+            return RangePeriod.getLastNRange(childPeriodType, strDate.substring(8), endDate);
         } else if (/^last/.test(strDate)) {
-            dates = getLastNRange(strDate.substring(4), 0);
+            return RangePeriod.getLastNRange(childPeriodType, strDate.substring(4));
         } else {
             var parts = strDate.split(',');
-            dates[0] = parseDate(parts[0]);
-            dates[1] = parseDate(parts[1]);
+            return new RangePeriod(parseDate(parts[0]), parseDate(parts[1]), childPeriodType)
         }
+    };
 
-        return new RangePeriod(dates[0], dates[1]);
-
-        function getLastNRange(strAmount, extraDaysStart) {
-            var nAmount = Math.max(parseInt(strAmount) - 1, 0);
-            if (isNaN(nAmount)) {
-                throw new Error('Invalid range date: ' + strDate);
-            }
+    /**
+     * Returns a range representing the last N childPeriodType periods, including the current one.
+     *
+     * @param childPeriodType
+     * @param strAmount
+     * @param endDate
+     * @returns {RangePeriod}
+     */
+    RangePeriod.getLastNRange = function (childPeriodType, strAmount, endDate) {
+        var nAmount = Math.max(parseInt(strAmount) - 1, 0);
+        if (isNaN(nAmount)) {
+            throw new Error('Invalid range date: ' + strDate);
+        }
 
-            var endDate = getToday();
-            endDate.setDate(endDate.getDate() - extraDaysStart);
+        endDate = endDate ? parseDate(endDate) : getToday();
 
-            var startDate = new Date(endDate.getTime());
+        var startDate = new Date(endDate.getTime());
+        if (childPeriodType === 'day') {
             startDate.setDate(startDate.getDate() - nAmount);
+        } else if (childPeriodType === 'week') {
+            startDate.setDate(startDate.getDate() - (nAmount * 7));
+        } else if (childPeriodType === 'month') {
+            startDate.setMonth(startDate.getMonth() - nAmount);
+        } else if (childPeriodType === 'year') {
+            startDate.setFullYear(startDate.getFullYear() - nAmount);
+        } else {
+            throw new Error("Unknown period type '" + childPeriodType + "'.");
+        }
+
+        if (childPeriodType !== 'day') {
+            var startPeriod = periods[childPeriodType].parse(startDate);
+            var endPeriod = periods[childPeriodType].parse(endDate);
 
-            return [startDate, endDate];
+            startDate = startPeriod.getDateRange()[0];
+            endDate = endPeriod.getDateRange()[1];
         }
+
+        return new RangePeriod(startDate, endDate, childPeriodType);
     };
 
     RangePeriod.getDisplayText = function () {
@@ -268,6 +292,10 @@
     }
 
     function parseDate(strDate) {
+        if (strDate instanceof Date) {
+            return strDate;
+        }
+
         if (strDate === 'today'
             || strDate === 'now'
         ) {
diff --git a/plugins/CoreHome/angularjs/common/services/piwik-api.js b/plugins/CoreHome/angularjs/common/services/piwik-api.js
index 54c07dc0d8..0f77fd7dbb 100644
--- a/plugins/CoreHome/angularjs/common/services/piwik-api.js
+++ b/plugins/CoreHome/angularjs/common/services/piwik-api.js
@@ -137,7 +137,7 @@ var hasBlockedContent = false;
                 method: 'POST',
                 url: url,
                 responseType: requestFormat,
-                params: _mixinDefaultGetParams(getParams),
+                params: mixinDefaultGetParams(getParams),
                 data: $.param(getPostParams(postParams)),
                 timeout: requestPromise,
                 headers: headers
@@ -201,7 +201,7 @@ var hasBlockedContent = false;
          * @return {object}
          * @private
          */
-        function _mixinDefaultGetParams (getParamsToMixin) {
+        function mixinDefaultGetParams (getParamsToMixin) {
             var segment = piwik.broadcast.getValueFromHash('segment', $window.location.href.split('#')[1]);
 
             // we have to decode the value manually because broadcast will not decode anything itself. if we don't,
@@ -338,7 +338,8 @@ var hasBlockedContent = false;
              * @deprecated
              */
             abort: abort,
-            abortAll: abortAll
+            abortAll: abortAll,
+            mixinDefaultGetParams: mixinDefaultGetParams
         };
     }
 })();
\ No newline at end of file