show period label on evo graph (#17456)

* v1

* v2

* use css classes

* update period name when selected

* fix ui tests

* use translation for period name

Co-authored-by: sgiehl <stefan@matomo.org>

12 files changed, 53 insertions, 36 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index dca051d25b..76d85feb76 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -237,7 +237,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             delete self.param.filter_offset;
             delete self.param.filter_limit;
         }
-	    
+
         delete self.param.showtitle;
 
         var container = $('#' + self.workingDivId + ' .piwik-graph');
@@ -725,6 +725,9 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             var endDateOfPeriod = currentPeriod.getDateRange()[1];
             endDateOfPeriod = piwikPeriods.format(endDateOfPeriod);
 
+            var newPeriod = piwikPeriods.get(period);
+            $('.periodName', domElem).html(newPeriod.getDisplayText());
+
             self.param['period'] = period;
             self.param['date'] = endDateOfPeriod;
             self.reloadAjaxDataTable();
@@ -836,7 +839,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             $searchAction.find('.icon-search').off('click', searchForPattern);
 
             $searchInput.val('');
-            
+
             if (currentPattern) {
                 // we search for this pattern so if there was a search term before, and someone closes the search
                 // we show all results again
@@ -1595,7 +1598,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         $('th:has(.columnDocumentation)', domElem).each(function () {
             var th = $(this);
             var tooltip = th.find('.columnDocumentation');
-            
+
             tooltip.next().hover(function () {
                 var left = (-1 * tooltip.outerWidth() / 2) + th.width() / 2;
                 var top = -1 * tooltip.outerHeight();
diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index a9ed6b920d..96423295a1 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -513,7 +513,7 @@ tr.level12 td.label {
 }
 
 table.dataTable td.label img {
-  max-height: 16px; 
+  max-height: 16px;
 }
 
 .pk-emptyDataTable {
@@ -615,6 +615,19 @@ td.cellSubDataTable .loadingPiwik {
     .icon-more-verti {
       font-size: 18px;
     }
+
+    .periodName {
+        padding-left:8px;
+        padding-right:8px;
+        font-size:16px;
+        text-transform:capitalize;
+    }
+  }
+
+  .activatePeriodsSelection {
+    width:auto;
+    text-align:left;
+    padding-left:8px;
   }
 }
 
diff --git a/plugins/CoreHome/templates/_dataTableActions.twig b/plugins/CoreHome/templates/_dataTableActions.twig
index c1f52456b9..39eec1cae5 100644
--- a/plugins/CoreHome/templates/_dataTableActions.twig
+++ b/plugins/CoreHome/templates/_dataTableActions.twig
@@ -33,24 +33,6 @@
             </ul>
         {% endset %}
 
-        {% if properties.show_periods %}
-            <a class="dropdown-button dataTableAction activatePeriodsSelection"
-               href="javascript:;"
-               title="{{ 'CoreHome_ChangePeriod'|translate|e('html_attr') }}"
-               data-target="dropdownPeriods{{ randomIdForDropdown }}">
-                <span class="icon-calendar"></span>
-            </a>
-            <ul id='dropdownPeriods{{ randomIdForDropdown }}' class='dropdown-content dataTablePeriods'>
-                {% for selectablePeriod in properties.selectable_periods %}
-                    <li>
-                        <a data-period="{{ selectablePeriod }}" class="tableIcon {% if (clientSideParameters.period|default('')) == selectablePeriod %}activeIcon{% endif %}">
-                            <span>{{ properties.translations[selectablePeriod]|default(selectablePeriod) }}</span>
-                        </a>
-                    </li>
-                {% endfor %}
-            </ul>
-        {% endif %}
-
         {% if activeFooterIcon and numIcons > 1 %}
             <a class="dropdown-button dataTableAction activateVisualizationSelection"
                href="javascript:;"
@@ -152,4 +134,23 @@
                 </li>
             {% endif %}
         </ul>
+
+        {% if properties.show_periods %}
+            <a class="dropdown-button dataTableAction activatePeriodsSelection"
+               href="javascript:;"
+               title="{{ 'CoreHome_ChangePeriod'|translate|e('html_attr') }}"
+               data-target="dropdownPeriods{{ randomIdForDropdown }}"
+            >
+                <div><span class="icon-calendar"></span><span class="periodName">{{ properties.translations[clientSideParameters.period]|default(clientSideParameters.period) }}</span></div>
+            </a>
+            <ul id='dropdownPeriods{{ randomIdForDropdown }}' class='dropdown-content dataTablePeriods'>
+                {% for selectablePeriod in properties.selectable_periods %}
+                    <li>
+                        <a data-period="{{ selectablePeriod }}" class="tableIcon {% if (clientSideParameters.period|default('')) == selectablePeriod %}activeIcon{% endif %}">
+                            <span>{{ properties.translations[selectablePeriod]|default(selectablePeriod) }}</span>
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
     {% endif %}
diff --git a/plugins/CustomDimensions/tests/UI/expected-ui-screenshots/CustomDimensions_report_action_subtable_rowevolution.png b/plugins/CustomDimensions/tests/UI/expected-ui-screenshots/CustomDimensions_report_action_subtable_rowevolution.png
index e89b90a41c..53f11da1bc 100644
--- a/plugins/CustomDimensions/tests/UI/expected-ui-screenshots/CustomDimensions_report_action_subtable_rowevolution.png
+++ b/plugins/CustomDimensions/tests/UI/expected-ui-screenshots/CustomDimensions_report_action_subtable_rowevolution.png
diff --git a/plugins/CustomDimensions/tests/UI/expected-ui-screenshots/CustomDimensions_report_actions_rowevolution.png b/plugins/CustomDimensions/tests/UI/expected-ui-screenshots/CustomDimensions_report_actions_rowevolution.png
index 6f88076fae..537ed909a8 100644
--- a/plugins/CustomDimensions/tests/UI/expected-ui-screenshots/CustomDimensions_report_actions_rowevolution.png
+++ b/plugins/CustomDimensions/tests/UI/expected-ui-screenshots/CustomDimensions_report_actions_rowevolution.png
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 f6a2ea19bb..a0cc85a5bd 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:b909833eac2e5214431f39cb6bff153748dc10fb778b5c435fbc73eef298d9a5
-size 77983
+oid sha256:52c5a0f945beb09577e1edc28f5bdf054432a085bac72b685af453344f43f36f
+size 78661
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_rowevolution.png b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_rowevolution.png
index 0adff1b9a2..5441f608fa 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_rowevolution.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_rowevolution.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:171c4b01ef9c363be024e122f5fb2a56200009564e932016ac8d136a7f05ca13
-size 70595
+oid sha256:acb0bac250eb6a112528a1ea725e5fa31ba7b18d976956f345daa110f1a3b45c
+size 71378
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_widget_maximise.png b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_widget_maximise.png
index 296b02264e..929a393eaa 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_widget_maximise.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_widget_maximise.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:98a579476b4aac45499beff3e5bdd4f48576a0ad0c2c71c745f5223977a75e1b
-size 31414
+oid sha256:d405e50f8e67ea15bbd27006402933b88929845045291347a441241b788d2d98
+size 32321
diff --git a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_widget_unmaximise.png b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_widget_unmaximise.png
index 0ac0485743..18ab0dabc0 100644
--- a/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_widget_unmaximise.png
+++ b/plugins/Dashboard/tests/UI/expected-screenshots/Dashboard_widget_unmaximise.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:74256d5ad3e09a43c173a76c9156e65039fac38e6e84ca27b05549d2e3456889
-size 30412
+oid sha256:64c141ebdaefca852da48b9ac8cfbac3da7a8db76b545efcfa44a34b759b62d0
+size 31196
diff --git a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
index 77633527ce..e7a1079100 100644
--- a/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
+++ b/plugins/Overlay/tests/UI/expected-screenshots/Overlay_row_evolution.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:52ceb95a94d19593c57de4d291e434b513c22856e5b965fa95513d36650fc16d
-size 100025
+oid sha256:4b6a96bfb4012de182291fd4f5f09930216e253982b9e8c244422264b90f2364
+size 100782
diff --git a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pagetitle_overlay.png b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pagetitle_overlay.png
index bd2065aef2..5472f84482 100644
--- a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pagetitle_overlay.png
+++ b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pagetitle_overlay.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d615d8bdf8ccb0106dafe82acc2af8abb2c9902c01bd63f4491b190ae4936ec0
-size 151372
+oid sha256:d6ee3af8a32edc0ec828185a27c84bfb80872f514045c85a951b7e5e1267c868
+size 152079
diff --git a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pageurl_overlay.png b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pageurl_overlay.png
index 78074862aa..d62afb8d11 100644
--- a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pageurl_overlay.png
+++ b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_pageurl_overlay.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d5b0026fba1e4c7f16e67546e0ae34d073b5c7a0c68dc11d24bc8699a5069ad5
-size 150544
+oid sha256:92ac5d7b67c03192a128cc55bcf76c48444855d07167802c930a0f393839f09e
+size 151246