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, 11 insertions, 6 deletions

diff --git a/plugins/CoreHome/templates/_dataTableActions.twig b/plugins/CoreHome/templates/_dataTableActions.twig
index 095c5a0aee..4266644440 100644
--- a/plugins/CoreHome/templates/_dataTableActions.twig
+++ b/plugins/CoreHome/templates/_dataTableActions.twig
@@ -121,14 +121,19 @@
 
         <ul id='dropdownConfigure{{ randomIdForDropdown }}' class='dropdown-content tableConfiguration'>
             {% if properties.show_flatten_table %}
+                <li>
+                    <div class="configItem dataTableFlatten"></div>
+                </li>
                 {% if clientSideParameters.flat is defined and clientSideParameters.flat == 1 %}
+                    {% if hasMultipleDimensions|default %}
+                        <li>
+                            <div class="configItem dataTableShowDimensions"></div>
+                        </li>
+                    {% endif %}
                     <li>
                         <div class="configItem dataTableIncludeAggregateRows"></div>
                     </li>
                 {% endif %}
-                <li>
-                    <div class="configItem dataTableFlatten"></div>
-                </li>
             {% endif %}
             {% if not isDataTableEmpty and properties.show_totals_row|default(0) %}
                 <li>
diff --git a/plugins/CoreHome/templates/_dataTableCell.twig b/plugins/CoreHome/templates/_dataTableCell.twig
index a1b1c2c59a..7aca38defd 100644
--- a/plugins/CoreHome/templates/_dataTableCell.twig
+++ b/plugins/CoreHome/templates/_dataTableCell.twig
@@ -37,13 +37,13 @@
           title="{{ reportRatioTooltip|raw }} {{ totalRatioTooltip|e('html_attr') }}"
           >&nbsp;{{ rowPercentage }}</span>
 {%- endif %}
-
-{% if column=='label' %}
+{% set dimensions = dataTable.getMetadata('dimensions')|default([]) %}
+{% if column=='label' or column in dimensions %}
     {% import 'macros.twig' as piwik %}
 
     <span class='label{% if row.getMetadata('is_aggregate') %} highlighted{% endif %}'
     {% if properties is defined and properties.tooltip_metadata_name is not empty %}title="{{ row.getMetadata(properties.tooltip_metadata_name) }}"{% endif %}>
-        {{ piwik.logoHtml(row.getMetadata(), row.getColumn('label')) }}
+        {% if column=='label' %}{{ piwik.logoHtml(row.getMetadata(), row.getColumn('label')) }}{% endif %}
         {% if row.getMetadata('html_label_prefix') %}<span class='label-prefix'>{{ row.getMetadata('html_label_prefix') | raw }}&nbsp;</span>{% endif -%}
 {% endif %}<span class="value">
     {%- if row.getColumn(column) or (column=='label' and row.getColumn(column) is same as("0")) %}{% if column=='label' %}{{- row.getColumn(column)|rawSafeDecoded -}}{% else %}{% if row.getMetadata('html_column_' ~ column ~ '_prefix') %}<span class='column-prefix'>{{ row.getMetadata('html_column_' ~ column ~ '_prefix') | raw }}</span>{% endif -%}{{- row.getColumn(column)|number(2,0)|rawSafeDecoded -}}{% if row.getMetadata('html_column_' ~ column ~ '_suffix') %}<span class='column-suffix'>{{ row.getMetadata('html_column_' ~ column ~ '_suffix') | raw }}</span>{% endif -%}{% endif %}