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.

11 files changed, 60 insertions, 25 deletions

diff --git a/plugins/CoreHome/angularjs/sparkline/sparkline.component.js b/plugins/CoreHome/angularjs/sparkline/sparkline.component.js
index 4bf959875c..eddd97349f 100644
--- a/plugins/CoreHome/angularjs/sparkline/sparkline.component.js
+++ b/plugins/CoreHome/angularjs/sparkline/sparkline.component.js
@@ -54,6 +54,12 @@
             }
 
             var dateRange = piwikPeriods.get('range').getLastNRange(piwik.period, 30, piwik.currentDateString).getDateRange();
+
+            var piwikMinDate = new Date(piwik.minDateYear, piwik.minDateMonth - 1, piwik.minDateDay);
+            if (dateRange[0] < piwikMinDate) {
+                dateRange[0] = piwikMinDate;
+            }
+
             var startDateStr = $.datepicker.formatDate('yy-mm-dd', dateRange[0]);
             var endDateStr = $.datepicker.formatDate('yy-mm-dd', dateRange[1]);
             return startDateStr + ',' + endDateStr;
diff --git a/plugins/CoreHome/tests/UI/SingleMetricView_spec.js b/plugins/CoreHome/tests/UI/SingleMetricView_spec.js
index 4305c95ae8..d8785740b9 100644
--- a/plugins/CoreHome/tests/UI/SingleMetricView_spec.js
+++ b/plugins/CoreHome/tests/UI/SingleMetricView_spec.js
@@ -35,9 +35,18 @@ describe('SingleMetricView', function () {
         }, done);
     });
 
+    it('should handle individual goal metrics properly', function (done) {
+        expect.screenshot("goal_metric").to.be.captureSelector('#widgetCoreVisualizationssingleMetricViewcolumn', function (page) {
+            page.mouseMove('#widgetCoreVisualizationssingleMetricViewcolumn .single-metric-view-picker');
+            page.click('.jqplot-seriespicker-popover label:contains(two - Conversions)');
+        }, done);
+    });
+
     it('should handle range periods correctly', function (done) {
         expect.screenshot("range").to.be.captureSelector('#widgetCoreVisualizationssingleMetricViewcolumn', function (page) {
             page.load(rangeUrl, 8000);
+            page.mouseMove('#widgetCoreVisualizationssingleMetricViewcolumn .single-metric-view-picker');
+            page.click('.jqplot-seriespicker-popover label:contains(Revenue):eq(0)');
         }, done);
     });
 });
diff --git a/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_formatted_metric.png b/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_formatted_metric.png
index 358cebf25c..9f6c1fad0f 100644
--- a/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_formatted_metric.png
+++ b/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_formatted_metric.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:313dada73a2be00e60b92b87103ff6034469ca4f5791a748e89c0c7416731c6e
-size 8060
+oid sha256:25112c77109df9d9283f2d6172475d63cb67efb4609a4be5314bb2aabecf8b5d
+size 7907
diff --git a/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_goal_metric.png b/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_goal_metric.png
new file mode 100644
index 0000000000..92cfa79482
--- /dev/null
+++ b/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_goal_metric.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:09e5e38161b1182c758dacf4896f2cea4fb8bac77244b2377c86616c03f044b4
+size 8988
diff --git a/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_loaded.png b/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_loaded.png
index 2c5ba94ffd..10dd37df8b 100644
--- a/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_loaded.png
+++ b/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_loaded.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:63f8be060d07ca212107f46af079331be10d41d217200b7866b190be73810b08
-size 5584
+oid sha256:afb3be798ea2c8569108b9c86e483740965b9c450236eda1c24c10f92b55d2b6
+size 5407
diff --git a/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_range.png b/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_range.png
index 6082d81fad..bfcbda25df 100644
--- a/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_range.png
+++ b/plugins/CoreHome/tests/UI/expected-screenshots/SingleMetricView_range.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0d1d41054131c42a62773b142a0119a4099b9c7da0068f3592aa080c805d1dad
-size 5061
+oid sha256:ada23e5b8f8f2e24a63122e58f0ca4ae3f32b24f7558e33f13a89d184e6b5adf
+size 6200
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;
+        }
     }
 })();
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_removed.png b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_removed.png
index 9a9990c67e..815f1706c7 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:5b8885a542c5176137ec90872bf695869add2d9904cbb2c473d9efdb9f4f5a2c
-size 618077
+oid sha256:222f619d588fab2ae378b4452c19239f5eee299b1de96ec45375e0e763d00c2e
+size 617812
diff --git a/tests/UI/expected-screenshots/Theme_home.png b/tests/UI/expected-screenshots/Theme_home.png
index 76b3aef22b..2bbf3dfb02 100644
--- a/tests/UI/expected-screenshots/Theme_home.png
+++ b/tests/UI/expected-screenshots/Theme_home.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:041388687a46572ec1b1c54940ac5b341276434a90fd891e98b59d3339e72754
-size 623251
+oid sha256:9734226645c012f582c7e6a2f07b6b5e19961d9e926d85584a3171e27bf3d3de
+size 623145
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_dashboard1.png b/tests/UI/expected-screenshots/UIIntegrationTest_dashboard1.png
index 1181df5a9f..ef6b2104af 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_dashboard1.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_dashboard1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:32597daf3452838a1a60e8550647b460140f32d800f17ba3eb3fb0409620bf53
-size 572692
+oid sha256:ecd9df4fe064e4ab75bb3a2b3a0cde00173ed236d22eb1ae78ce59711436ba9d
+size 572469