Make segment title clickable and add segment definition to tooltip. (#15269)

6 files changed, 43 insertions, 4 deletions

diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index 379eb0b4b5..199f4be452 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -207,6 +207,7 @@ class CoreHome extends \Piwik\Plugin
         $jsFiles[] = "plugins/CoreHome/angularjs/common/filters/pretty-url.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/common/filters/escape.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/common/filters/htmldecode.js";
+        $jsFiles[] = "plugins/CoreHome/angularjs/common/filters/urldecode.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/common/filters/ucfirst.js";
 
         $jsFiles[] = "plugins/CoreHome/angularjs/common/directives/directive.module.js";
diff --git a/plugins/CoreHome/angularjs/common/filters/urldecode.js b/plugins/CoreHome/angularjs/common/filters/urldecode.js
new file mode 100644
index 0000000000..d4e8d68594
--- /dev/null
+++ b/plugins/CoreHome/angularjs/common/filters/urldecode.js
@@ -0,0 +1,22 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp.filter').filter('urldecode', urldecode);
+
+    urldecode.$inject = [];
+
+    function urldecode() {
+
+        return function(text) {
+            if (text && text.length) {
+                return decodeURIComponent(text);
+            }
+
+            return text;
+        };
+    }
+})();
diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.component.html b/plugins/CoreHome/angularjs/comparisons/comparisons.component.html
index f9fe8a3b2d..b706ecc5d7 100644
--- a/plugins/CoreHome/angularjs/comparisons/comparisons.component.html
+++ b/plugins/CoreHome/angularjs/comparisons/comparisons.component.html
@@ -4,8 +4,10 @@
     <div class="comparison card" ng-repeat="comparison in $ctrl.comparisonsService.getSegmentComparisons() track by $index">
         <div class="comparison-type">{{ 'General_Segment'|translate }}</div>
 
-        <div class="title" title="{{ comparison.title }}">
+        <div class="title" title="{{ comparison.title }}&lt;br/&gt;{{ comparison.params.segment|urldecode }}">
+            <a href="{{ $ctrl.getUrlToSegment(comparison.params.segment) }}" target="_blank">
             {{ comparison.title }}
+        </a>
         </div>
 
         <div class="comparison-period"
@@ -25,4 +27,4 @@
         <img src="plugins/Morpheus/images/loading-blue.gif" alt="{{ 'General_LoadingData'|translate }}" />
         {{ 'General_LoadingData'|translate }}
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.component.js b/plugins/CoreHome/angularjs/comparisons/comparisons.component.js
index d4bdbdee8a..12925d1a5d 100644
--- a/plugins/CoreHome/angularjs/comparisons/comparisons.component.js
+++ b/plugins/CoreHome/angularjs/comparisons/comparisons.component.js
@@ -26,6 +26,7 @@
         vm.comparisonHasSegment = comparisonHasSegment;
         vm.getComparisonPeriodType = getComparisonPeriodType;
         vm.getComparisonTooltip = getComparisonTooltip;
+        vm.getUrlToSegment = getUrlToSegment;
 
         function $onInit() {
             $rootScope.$on('piwikComparisonsChanged', onComparisonsChanged);
@@ -145,5 +146,14 @@
             tooltip += '</div>';
             return tooltip;
         }
+
+        function getUrlToSegment(segment) {
+            var hash = window.location.hash;
+            hash = broadcast.updateParamValue('comparePeriods[]=', hash);
+            hash = broadcast.updateParamValue('compareDates[]=', hash);
+            hash = broadcast.updateParamValue('compareSegments[]=', hash);
+            hash = broadcast.updateParamValue('segment=' + encodeURIComponent(segment), hash);
+            return window.location.search + hash;
+        }
     }
 })();
diff --git a/plugins/CoreHome/angularjs/comparisons/comparisons.component.less b/plugins/CoreHome/angularjs/comparisons/comparisons.component.less
index c2eecb3a22..d390695fd6 100644
--- a/plugins/CoreHome/angularjs/comparisons/comparisons.component.less
+++ b/plugins/CoreHome/angularjs/comparisons/comparisons.component.less
@@ -38,6 +38,10 @@ piwik-comparisons {
     max-width: 250px;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    a {
+      color: #333;
+    }
   }
 
   .comparison-period {
diff --git a/plugins/CoreHome/javascripts/broadcast.js b/plugins/CoreHome/javascripts/broadcast.js
index 6781e7cfe3..481e8d6232 100644
--- a/plugins/CoreHome/javascripts/broadcast.js
+++ b/plugins/CoreHome/javascripts/broadcast.js
@@ -437,7 +437,7 @@ var broadcast = {
         var p_v = newParamValue.split("=");
 
         var paramName = p_v[0];
-        var valFromUrl = broadcast.getParamValue(paramName, urlStr);
+        var valFromUrl = broadcast.getParamValue(paramName, urlStr) || broadcast.getParamValue(encodeURIComponent(paramName), urlStr);
         // if set 'idGoal=' then we remove the parameter from the URL automatically (rather than passing an empty value)
         var paramValue = p_v[1];
         if (paramValue == '') {
@@ -453,7 +453,7 @@ var broadcast = {
             var regToBeReplace = new RegExp(paramName + '=' + valFromUrl, 'ig');
             if (newParamValue == '') {
                 // if new value is empty remove leading &, as well
-                regToBeReplace = new RegExp('[\&]?' + paramName + '=' + valFromUrl, 'ig');
+                regToBeReplace = new RegExp('[\&]?(' + paramName + '|' + encodeURIComponent(paramName) + ')=' + valFromUrl, 'ig');
             }
             urlStr = urlStr.replace(regToBeReplace, newParamValue);
         } else if (newParamValue != '') {