{% macro sparklineEvolution(evolution) %}
    {% set isLowerValueBetter = evolution.isLowerValueBetter is defined ? evolution.isLowerValueBetter : false %}
    {% set evolutionPretty = evolution.percent %}
    {% set compareValue = evolution.trend is defined ? evolution.trend : evolution.percent %}
    {% if compareValue < 0 %}
        {% set evolutionClass = isLowerValueBetter ? 'positive-evolution' : 'negative-evolution' %}
        {% set evolutionIcon  = isLowerValueBetter ? 'arrow_down_green.svg' : 'arrow_down.svg' %}
    {% elseif compareValue == 0 or compareValue == '0%' %}
        {% set evolutionClass = 'neutral-evolution' %}
        {% set evolutionIcon  = 'stop.svg' %}
    {% else %}
        {% set evolutionClass = isLowerValueBetter ? 'negative-evolution' : 'positive-evolution' %}
        {% set evolutionIcon  = isLowerValueBetter ? 'arrow_up_red.svg' : 'arrow_up.svg' %}
        {% 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 }}" alt="" />
    <strong class="{{ evolutionClass }}" aria-hidden="true">{{ evolutionPretty }}</strong></span>
{% endmacro %}

{% macro singleSparkline(sparkline, allMetricsDocumentation, areSparklinesLinkable) %}

    <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.tooltip|default %}title="{{ sparkline.tooltip|e('html_attr') }}"{% endif %}
        >
            {% 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 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|number(2)~"</strong>")|raw }}
                {%- else %}
                    <strong>{{ metric.value|number(2) }}</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 %}
            {{ _self.sparklineEvolution(sparkline.evolution) }}
        {% endif %}
	</div>
    </div>
{% endmacro %}