Single metric view fixes (#13352)

* Make sure client side sparkline limits first date in range to min allowed date.

* For goal metrics make sure sparkline in single metric view uses GOal.get w/ idGoal.

* UI test tweak.

* update ui screenshots

* Fixing tests.

* Fix caching in singlemetricview.

* Update expected UI test.

* Update screenshots.

2 files changed, 30 insertions, 13 deletions

diff --git a/plugins/CoreVisualizations/angularjs/single-metric-view/single-metric-view.component.html b/plugins/CoreVisualizations/angularjs/single-metric-view/single-metric-view.component.html
index 7d7b0c2a9f..e302dda171 100644
--- a/plugins/CoreVisualizations/angularjs/single-metric-view/single-metric-view.component.html
+++ b/plugins/CoreVisualizations/angularjs/single-metric-view/single-metric-view.component.html
@@ -1,7 +1,7 @@
 <div class="singleMetricView" ng-class="{'loading': $ctrl.isLoading}">
     <piwik-sparkline
         class="metric-sparkline"
-        params="{module: 'API', action: 'get', columns: $ctrl.metric}"
+        params="$ctrl.sparklineParams"
     >
     </piwik-sparkline>
     <div class="metric-value">
diff --git a/plugins/CoreVisualizations/angularjs/single-metric-view/single-metric-view.component.js b/plugins/CoreVisualizations/angularjs/single-metric-view/single-metric-view.component.js
index d18e9d88ed..353a5faebc 100644
--- a/plugins/CoreVisualizations/angularjs/single-metric-view/single-metric-view.component.js
+++ b/plugins/CoreVisualizations/angularjs/single-metric-view/single-metric-view.component.js
@@ -35,6 +35,7 @@
         vm.metricDocumentation = null;
         vm.selectableColumns = [];
         vm.responses = null;
+        vm.sparklineParams = {};
         vm.$onInit = $onInit;
         vm.$onChanges = $onChanges;
         vm.$onDestroy = $onDestroy;
@@ -42,6 +43,15 @@
         vm.getMetricTranslation = getMetricTranslation;
         vm.setMetric = setMetric;
 
+        function setSparklineParams() {
+            var params = { module: 'API', action: 'get', columns: vm.metric };
+            if (isIdGoalSet()) {
+                params.idGoal = vm.idGoal;
+                params.module = 'Goals';
+            }
+            vm.sparklineParams = params;
+        }
+
         function $onInit() {
             vm.selectedColumns = [vm.metric];
             if (piwik.period !== 'range') {
@@ -55,6 +65,8 @@
             $element.closest('.widgetContent')
                 .on('widget:destroy', function() { $scope.$parent.$destroy(); })
                 .on('widget:reload', function() { $scope.$parent.$destroy(); });
+
+            setSparklineParams();
         }
 
         function $onChanges(changes) {
@@ -69,10 +81,6 @@
         }
 
         function fetchData() {
-            if (vm.responses && vm.responses.length && typeof vm.idGoal === 'undefined') {
-                return $q.resolve();
-            }
-
             vm.isLoading = true;
 
             var promises = [];
@@ -81,7 +89,7 @@
             var apiAction = 'get';
 
             var extraParams = {};
-            if (vm.idGoal) {
+            if (isIdGoalSet()) {
                 extraParams.idGoal = vm.idGoal;
                 // the conversion rate added by the AddColumnsProcessedMetrics filter conflicts w/ the goals one, so don't run it
                 extraParams.filter_add_columns_when_show_all_columns = 0;
@@ -161,7 +169,7 @@
 
         function setWidgetTitle() {
             var title = vm.getMetricTranslation();
-            if (vm.idGoal) {
+            if (isIdGoalSet()) {
                 var goalName = vm.goals[vm.idGoal].name;
                 title = goalName + ' - ' + title;
             }
@@ -234,6 +242,8 @@
         }
 
         function onMetricChanged() {
+            setSparklineParams();
+
             fetchData().then(recalculateValues);
 
             // notify widget of parameter change so it is replaced
@@ -241,16 +251,19 @@
         }
 
         function setMetric(newColumn) {
-            var m = newColumn.match(/^goal([0-9])_(.*)/);
+            var idGoal;
+
+            var m = newColumn.match(/^goal([0-9]+)_(.*)/);
             if (m) {
-                vm.idGoal = m[1];
+                idGoal = +m[1];
                 newColumn = m[2];
-            } else {
-                vm.idGoal = undefined;
             }
 
-            vm.metric = newColumn;
-            onMetricChanged();
+            if (vm.metric !== newColumn || idGoal !== vm.idGoal) {
+                vm.metric = newColumn;
+                vm.idGoal = idGoal;
+                onMetricChanged();
+            }
         }
 
         function getPastPeriodStr() {
@@ -258,5 +271,9 @@
             var dateRange = piwikPeriods.get(piwik.period).parse(startDate).getDateRange();
             return $.datepicker.formatDate('yy-mm-dd', dateRange[0]) + ',' + $.datepicker.formatDate('yy-mm-dd', dateRange[1]);
         }
+
+        function isIdGoalSet() {
+            return vm.idGoal || vm.idGoal === 0;
+        }
     }
 })();