diff options
Diffstat (limited to 'plugins/CoreVisualizations/templates')
5 files changed, 202 insertions, 35 deletions
diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig index 38c2101168..a9ac3f4dae 100644 --- a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig +++ b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig @@ -19,11 +19,13 @@ </tr> {% endif %} {% else %} + {% set rowIndex = properties.filter_offset|default(0) + 1 %} {%- for rowId, row in dataTable.getRows() -%} {%- set rowHasSubtable = not subtablesAreDisabled and row.getIdSubDataTable() and properties.subtable_controller_action is not null -%} {%- set rowSubtableId = row.getMetadata('idsubdatatable_in_db')|default(row.getIdSubDataTable()) -%} {%- set isSummaryRow = rowId == constant('Piwik\\DataTable::ID_SUMMARY_ROW') or row.getMetadata('is_summary') -%} {%- set shouldHighlightRow = isSummaryRow and properties.highlight_summary_row -%} + {% set dimensions = dataTable.getMetadata('dimensions')|default([]) %} {# display this row if it doesn't have a subtable or if we don't replace the row with the subtable #} {%- set showRow = subtablesAreDisabled @@ -36,21 +38,38 @@ {% if row.getMetadata('segment') is not false %} data-segment-filter="{{ row.getMetadata('segment')|e('html_attr') }}"{% endif %} {% if row.getMetadata('url') is not false %} data-url-label="{{ row.getMetadata('url')|rawSafeDecoded }}"{% endif %} data-row-metadata="{{ row.getMetadata|json_encode|e('html_attr') }}" - class="{{ row.getMetadata('css_class') }} {% if rowHasSubtable %}subDataTable{% endif %}{% if shouldHighlightRow %} highlight{% endif %}{% if isSummaryRow %} summaryRow{% endif %}" + class="{{ row.getMetadata('css_class') }} {% if rowHasSubtable %}subDataTable{% endif %}{% if shouldHighlightRow %} highlight{% endif %}{% if isSummaryRow %} summaryRow{% endif %} {% if isComparing %}parentComparisonRow{% endif %}" {% if rowHasSubtable %}title="{{ 'CoreHome_ClickRowToExpandOrContract'|translate }}"{% endif %}> {% for column in properties.columns_to_display %} {% set cellAttributes = visualization.getCellHtmlAttributes(row, column) %} - <td {% if cellAttributes is not empty %}{% for name, value in cellAttributes %}{{ name|e('html') }}="{{ value|e('html_attr') }}" {% endfor %}{% endif %}> + <td class="{% if column =='label' or column in dimensions %}label{% else %}column{% endif %} {{ cellAttributes.class|default|e('html_attr') }}" + {% if cellAttributes is not empty %}{% for name, value in cellAttributes %}{{ name|e('html') }}="{{ value|e('html_attr') }}" {% endfor %}{% endif %} + > + {% if isComparing and column == 'label' %} + <span class="prefix-numeral">{{ rowIndex }}.</span> + {% endif %} + {% include "@CoreHome/_dataTableCell.twig" with properties %} </td> {% endfor %} </tr> + + {% if row.getComparisons() %} + {% include "@CoreVisualizations/_dataTableViz_htmlTable_comparisons.twig" with { + 'comparedRow': row, + 'dataTable': row.getComparisons(), + 'rootDataTable': dataTable, + 'dimensions': dimensions, + } %} + {% endif %} {% endif %} {# display subtable if present and showing expanded datatable #} {% if properties.show_expanded|default(false) and rowHasSubtable %} {% include "@CoreVisualizations/_dataTableViz_htmlTable.twig" with {'dataTable': row.getSubtable(), 'idSubtable': rowSubtableId} %} {% endif %} + + {% set rowIndex = rowIndex + 1 %} {%- endfor -%} {% if dataTable.getTotalsRow and properties.show_totals_row %} {% set row = dataTable.getTotalsRow %} @@ -58,7 +77,7 @@ <tr class="{{ row.getMetadata('css_class') }} totalsRow" title="Total values for this table"> {% for column in properties.columns_to_display %} - <td> + <td class="{% if column =='label' %}label{% else %}column{% endif %}"> {% include "@CoreHome/_dataTableCell.twig" with properties %} </td> {% endfor %} diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable_comparisons.twig b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable_comparisons.twig new file mode 100644 index 0000000000..fec4652ed4 --- /dev/null +++ b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable_comparisons.twig @@ -0,0 +1,83 @@ +{% if properties.columns_to_display is not empty %} +{% set lastSeenComparePeriod = false %} +{% set comparedPeriodPretty = dataTable.getFirstRow().getMetadata('comparePeriodPretty') %} +{% set isComparingSegments = rootDataTable.getMetadata('compareSegments')|default([])|length > 1 %} +{% set isComparingPeriods = rootDataTable.getMetadata('comparePeriods')|default([])|length > 1 %} +{%- for rowId, row in dataTable.getRows() -%} + {% set comparePeriod = row.getMetadata('comparePeriodPretty') %} + {% if lastSeenComparePeriod != comparePeriod and isComparingSegments and isComparingPeriods %} + <tr class="comparePeriod"> + <td class="label"> + {{ comparePeriod }} + </td> + + {# add extra empty columns for sticky column scrolling to work #} + {% for column in properties.columns_to_display %} + {% if column != 'label' %} + <td class="column"> </td> + {% endif %} + {% endfor %} + </tr> + {% endif %} + {% set overrideParams = {} %} + + {% if row.getMetadata('compareSegment')|default is not empty %}{% set overrideParams = overrideParams|merge({ segment: row.getMetadata('compareSegment'), compareSegments: '' }) %}{% endif %} + {% if row.getMetadata('comparePeriod')|default is not empty %}{% set overrideParams = overrideParams|merge({ period: row.getMetadata('comparePeriod'), comparePeriods: '' }) %}{% endif %} + {% if row.getMetadata('compareDate')|default is not empty %}{% set overrideParams = overrideParams|merge({ date: row.getMetadata('compareDate'), compareDates: '' }) %}{% endif %} + {% set idSubtable = row.getMetadata('idsubdatatable') %} + {% set seriesIndex = loop.index0 %} + <tr + {% if idSubtable != false %}data-idsubtable="{{ idSubtable|e('html_attr') }}"{% endif %} + data-comparison-series="{{ seriesIndex }}" + class="comparisonRow" + data-param-override="{{ overrideParams|json_encode|e('html_attr') }}" data-label="{{ comparedRow.getColumn('label')|e('html_attr') }}" + {% if row.getMetadata('segment') is not false %}data-segment-filter="{{ row.getMetadata('segment')|e('html_attr') }}"{% endif %} + > + <td class="label"> + {% if isComparingSegments %} + {%- set comparisonLabel = row.getMetadata('compareSegmentPretty') -%} + {% else %} + {%- set comparisonLabel = comparePeriod -%} + {% endif %} + <span class="label">{{ comparisonLabel }}</span> + </td> + {% for dimension in dimensions %} + {% if loop.index0 != 0 %} + <td class="label"> + + </td> + {% endif %} + {% endfor %} + {% for column in properties.columns_to_display %} + {% if column != 'label' and column not in dimensions %} + {% set columnValue = row.getColumn(column) %} + <td class="column"> + {% set rowComparisonTotals = comparisonTotals[seriesIndex].totals|default(null) %} + + {% set comparisonTooltipSuffix = '' %} + {% set columnChange = false %} + {% if row.getColumn(column ~ '_change')|default is not empty %} + {% set columnChange = row.getColumn(column ~ '_change')|default('+0%') %} + {% set comparisonTooltipSuffix = 'General_ComparisonRatioTooltip'|translate(columnChange, row.getMetadata('compareSegmentPretty'), comparedPeriodPretty) %} + {% endif %} + + {% include "@CoreVisualizations/_dataTableViz_htmlTable_ratio.twig" with { + 'changePercentage': columnChange, + 'totals': rowComparisonTotals, + 'label': comparedRow.getColumn('label'), + 'labelColumn': properties.columns_to_display|first, + 'changePercantage': columnChange, + 'forceZero': true, + 'tooltipSuffix': comparisonTooltipSuffix, + 'translations': properties.translations, + 'segmentTitlePretty': row.getMetadata('compareSegmentPretty'), + 'periodTitlePretty': row.getMetadata('comparePeriodPretty') + } %} + <span class="value">{{ columnValue|default(0)|number(2,0)|rawSafeDecoded }}</span> + </td> + {% endif %} + {% endfor %} + </tr> + {% set lastSeenComparePeriod = comparePeriod %} +{%- endfor -%} +{% endif %}
\ No newline at end of file diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable_ratio.twig b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable_ratio.twig new file mode 100644 index 0000000000..8d14bb126d --- /dev/null +++ b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable_ratio.twig @@ -0,0 +1,26 @@ +{% if column in properties.report_ratio_columns and (column in totals|keys or forceZero|default) -%} + {% set reportTotal = totals[column]|default(0) %} + {% if siteTotalRow|default is not empty %} + {% set siteTotal = siteTotalRow.getColumn(column) %} + {% elseif siteSummary is defined and siteSummary is not empty and siteSummary.getFirstRow %} + {% set siteTotal = siteSummary.getFirstRow.getColumn(column) %} + {% else %} + {% set siteTotal = 0 %} + {% endif %} + + {% set rowPercentage = row.getColumn(column)|percentage(reportTotal, 1) %} + {% set metricTitle = translations[column]|default(column) %} + + {% set reportRatioTooltip = 'General_ReportRatioTooltip'|translate(label, rowPercentage|e('html_attr'), reportTotal|e('html_attr'), metricTitle|e('html_attr'), '"' ~ segmentTitlePretty ~ '"', translations[labelColumn]|default(labelColumn)|e('html_attr')) %} + + {% if siteTotal and siteTotal > reportTotal %} + {% set totalPercentage = row.getColumn(column)|percentage(siteTotal, 1) %} + {% set totalRatioTooltip = 'General_TotalRatioTooltip'|translate(totalPercentage, siteTotal|number(2,0), metricTitle, periodTitlePretty) %} + {% else %} + {% set totalRatioTooltip = '' %} + {% endif %} + + <span class="ratio" + title="{{ reportRatioTooltip|rawSafeDecoded|raw }} {{ totalRatioTooltip|rawSafeDecoded|e('html_attr') }}{% if tooltipSuffix|default is not empty %}<br/><br/> {{ tooltipSuffix|rawSafeDecoded|e('html_attr') }}{% endif %}" + > {{ rowPercentage }} {% if changePercantage|default is not empty %}({{ changePercentage }}){% endif %}</span> +{%- endif %} diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig b/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig index 5c8390d914..e1932c523b 100644 --- a/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig +++ b/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig @@ -10,12 +10,23 @@ <div class="row"> <div class="col m6"> {% endif %} - - {% for key, sparkline in sparklines %} - {% if key is even %} + {% if sparklines|length == 1 %} + {% for key, sparkline in sparklines|first %} + {% if loop.index0 is even %} {{ macros.singleSparkline(sparkline, allMetricsDocumentation, areSparklinesLinkable) }} {% endif %} {% endfor %} + {% else %} + {% for group in sparklines %} + {% if loop.index0 is even %} + <div> + {% for key, sparkline in group %} + {{ macros.singleSparkline(sparkline, allMetricsDocumentation, areSparklinesLinkable) }} + {% endfor %} + </div> + {% endif %} + {% endfor %} + {% endif %} {% if not isWidget %} <br style="clear:left"/> @@ -23,11 +34,23 @@ <div class="col m6"> {% endif %} + {% if sparklines|length == 1 %} {% for key, sparkline in sparklines %} - {% if key is odd %} + {% if loop.index0 is odd %} {{ macros.singleSparkline(sparkline, allMetricsDocumentation, areSparklinesLinkable) }} {% endif %} {% endfor %} + {% else %} + {% for group in sparklines %} + {% if loop.index0 is odd %} + <div> + {% for key, sparkline in group %} + {{ macros.singleSparkline(sparkline, allMetricsDocumentation, areSparklinesLinkable) }} + {% endfor %} + </div> + {% endif %} + {% endfor %} + {% endif %} <br style="clear:left"/> diff --git a/plugins/CoreVisualizations/templates/macros.twig b/plugins/CoreVisualizations/templates/macros.twig index 7562b88f78..bc754f2c19 100644 --- a/plugins/CoreVisualizations/templates/macros.twig +++ b/plugins/CoreVisualizations/templates/macros.twig @@ -1,36 +1,52 @@ + +{% macro sparklineEvolution(evolution) %} + {% set evolutionPretty = evolution.percent %} + + {% if evolution.percent < 0 %} + {% set evolutionClass = 'negative-evolution' %} + {% set evolutionIcon = 'arrow_down.png' %} + {% elseif evolution.percent == 0 %} + {% set evolutionClass = 'neutral-evolution' %} + {% set evolutionIcon = 'stop.png' %} + {% else %} + {% set evolutionClass = 'positive-evolution' %} + {% set evolutionIcon = 'arrow_up.png' %} + {% set evolutionPretty = '+' ~ evolution.percent %} + {% endif %} + + <span class="metricEvolution" title="{{ evolution.tooltip|rawSafeDecoded|e('html_attr') }}"> + <img style="padding-right:4px" src="plugins/MultiSites/images/{{ evolutionIcon }}"/> + <strong class="{{ evolutionClass }}">{{ evolutionPretty }}</strong></span> +{% endmacro %} + {% macro singleSparkline(sparkline, allMetricsDocumentation, areSparklinesLinkable) %} - <div class="sparkline {% if areSparklinesLinkable is defined and not areSparklinesLinkable %}notLinkable{% endif %}"> - {% if sparkline.url %}{{ sparkline(sparkline.url)|raw }}{% endif %} + <div class="sparkline {% if areSparklinesLinkable is defined and not areSparklinesLinkable %}notLinkable{% endif %}" + {% if sparkline.seriesIndices|default is not empty %}data-series-indices="{{ sparkline.seriesIndices|json_encode|e('html_attr') }}"{% endif %} + {% if sparkline.graphParams|default is not empty %}data-graph-params="{{ sparkline.graphParams|json_encode|e('html_attr') }}"{% endif %} + > + <div> + {% if sparkline.title|default is not empty %}<h6 class="sparkline-title" title="{{ sparkline.title|rawSafeDecoded|e('html_attr') }}">{{ sparkline.title }}</h6>{% endif %} + {% if sparkline.url %}{{ sparkline(sparkline.url)|raw }}{% endif %} + </div> <div> - {% for metric in sparkline.metrics %} - <span {% if allMetricsDocumentation[metric.column] is defined and allMetricsDocumentation[metric.column] %}title="{{ allMetricsDocumentation[metric.column] }}"{% endif %}> - {% if '%s' in metric.description -%} - {{ metric.description|translate("<strong>"~metric.value~"</strong>")|raw }} - {%- else %} - <strong>{{ metric.value }}</strong> {{ metric.description }} - {%- endif %}{% if not loop.last %}, {% endif %} - </span> + {% for groupName, group in sparkline.metrics %} + {% if groupName is not empty %}<span class="metric-group-title">{{ groupName }}</span>{% endif %} + {% for metric in group %} + <span class="sparkline-metrics" {% if allMetricsDocumentation[metric.column] is defined and allMetricsDocumentation[metric.column] %}title="{{ allMetricsDocumentation[metric.column] }}"{% endif %}> + {% if '%s' in metric.description -%} + {{ metric.description|translate("<strong>"~metric.value~"</strong>")|raw }} + {%- else %} + <strong>{{ metric.value }}</strong> {{ metric.description }} + {%- endif %}{% if not loop.last %}, {% endif %} + </span> + {% if metric.evolution is defined %} + {{ _self.sparklineEvolution(metric.evolution) }} + {% endif %} + {% endfor %} {% endfor %} {% if sparkline.evolution is defined %} - - {% set evolutionPretty = sparkline.evolution.percent %} - - {% if sparkline.evolution.percent < 0 %} - {% set evolutionClass = 'negative-evolution' %} - {% set evolutionIcon = 'arrow_down.png' %} - {% elseif sparkline.evolution.percent == 0 %} - {% set evolutionClass = 'neutral-evolution' %} - {% set evolutionIcon = 'stop.png' %} - {% else %} - {% set evolutionClass = 'positive-evolution' %} - {% set evolutionIcon = 'arrow_up.png' %} - {% set evolutionPretty = '+' ~ sparkline.evolution.percent %} - {% endif %} - - <span class="metricEvolution" title="{{ sparkline.evolution.tooltip }}"><img - style="padding-right:4px" src="plugins/MultiSites/images/{{ evolutionIcon }}"/> - <strong class="{{ evolutionClass }}">{{ evolutionPretty }}</strong></span> + {{ _self.sparklineEvolution(sparkline.evolution) }} {% endif %} </div> </div> |