Show flattened columns as extra columns in UI (#12524)

* Show each dimension as seperate column in html tables for flattened reports

* set default columns

* rename first dimension column for flattened reports to label

* modify rows right before rendering to prevent plugins to overwrite the displayed columns again

* Use datatable config to allow splitting dimensions into separate columns

* Hide datatable option if report has only one dimension

* ensure to add only needed metric dimensions

* adds ui test

* reorder datatable options

* Add additional columns before generic filters are applied to make sorting of those columns possible

* Improve table layout with multipe label columns

* show logo only in first column

* Add new metadata so the original combine label is still available for row actions

* improve check for multiple lables

* show row action always in last label column

* updates UI file

* fix Others handling for flattened reports

* ensure label translation is set correctly

* show concatenated dimension names as flatten report label

* search combined labels in flattened tables showing dimensions separately

* more ui tests

* fix handling of summary row for concatenated dimensions

* updates expected test files

* fix insights layout

* fix realtime visits table layout

* fix ui tests

* ensure dimensions have correct display order

2 files changed, 43 insertions, 5 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 6ee9e93600..74be5d8a10 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -252,8 +252,21 @@ $.extend(DataTable.prototype, UIControl.prototype, {
 
         var params = {};
         for (var key in self.param) {
-            if (typeof self.param[key] != "undefined" && self.param[key] != '')
+            if (typeof self.param[key] != "undefined" && self.param[key] != '') {
+                if (key == 'filter_column' || key == 'filter_column_recursive' ) {
+                    // search in (metadata) `combinedLabel` when dimensions are shown separately in flattened tables
+                    // needs to be overwritten for each request as switching a searched table might return no results
+                    // otherwise, as search column doesn't fit anymore
+                    if (self.param.flat == "1" && self.param.show_dimensions == "1") {
+                        params[key] = 'combinedLabel';
+                    } else {
+                        params[key] = 'label';
+                    }
+                    continue;
+                }
+
                 params[key] = self.param[key];
+            }
         }
 
         ajaxRequest.addParams(params, 'get');
@@ -456,7 +469,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 labelWidth = maxLabelWidth; // prevent for instance table in Actions-Pages is not too wide
             }
 
-            return parseInt(labelWidth, 10);
+            return parseInt(labelWidth / $('tr:nth-child(1) td.label', domElem).length, 10);
         }
 
         function getLabelColumnMinWidth(domElem)
@@ -1322,6 +1335,13 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 }
             }));
 
+        $('.dataTableShowDimensions', domElem)
+            .each(function () {
+                setText(this, 'show_dimensions', 'CoreHome_DataTableCombineDimensions',
+                    'CoreHome_DataTableShowDimensions');
+            })
+            .click(generateClickCallback('show_dimensions'));
+
         // handle pivot by
         $('.dataTablePivotBySubtable', domElem)
             .each(function () {
@@ -1437,6 +1457,16 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         // label (first column of a data row) or not
         $("th:first-child", domElem).addClass('label');
         $("td:first-child", domElem).addClass('label');
+
+        var metadata = this.getReportMetadata();
+
+        if (self.param.flat == "1" && self.param.show_dimensions == "1" && metadata.dimensions && Object.keys(metadata.dimensions).length > 1) {
+            for (var i = 1; i < Object.keys(metadata.dimensions).length; i++) {
+                $("th:nth-child("+(i+1)+")", domElem).addClass('label');
+                $("td:nth-child("+(i+1)+")", domElem).addClass('label');
+            }
+        }
+
         $("tr td", domElem).addClass('column');
     },
 
@@ -1754,7 +1784,9 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         var details = _pk_translate('General_LearnMore', [' (<a href="https://matomo.org/faq/how-to/faq_54/" rel="noreferrer noopener" target="_blank">', '</a>)']);
 
         domElem.find('tr.summaryRow').each(function () {
-            var labelSpan = $(this).find('.label .value');
+            var labelSpan = $(this).find('.label .value').filter(function(index, elem){
+                return $(elem).text() != '-';
+            }).last();
             var defaultLabel = labelSpan.text();
 
             $(this).hover(function() {
@@ -1789,7 +1821,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
 
         trs.each(function () {
             var tr = $(this);
-            var td = tr.find('td:first');
+            var td = tr.find('td.label:last');
 
             // call initTr on all actions that are available for the report
             for (var i = 0; i < availableActionsForReport.length; i++) {
@@ -1918,7 +1950,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             return;
         }
 
-        var td = tr.find('td:first');
+        var td = tr.find('td.label:last');
         var actions = tr.find('div.dataTableRowActions');
 
         if (!actions) {
diff --git a/plugins/CoreHome/javascripts/dataTable_rowactions.js b/plugins/CoreHome/javascripts/dataTable_rowactions.js
index 5d51e06302..9d8751293b 100644
--- a/plugins/CoreHome/javascripts/dataTable_rowactions.js
+++ b/plugins/CoreHome/javascripts/dataTable_rowactions.js
@@ -198,6 +198,12 @@ DataTable_RowAction.prototype.trigger = function (tr, e, subTableLabel) {
 
 /** Get the label string from a tr dom element */
 DataTable_RowAction.prototype.getLabelFromTr = function (tr) {
+    var rowMetadata = this.getRowMetadata(tr);
+
+    if (rowMetadata.combinedLabel) {
+        return '@' + rowMetadata.combinedLabel;
+    }
+
     var label = tr.find('span.label');
 
     // handle truncation