<div class="singleMetricView" ng-class="{'loading': $ctrl.isLoading}">
    <piwik-sparkline
        class="metric-sparkline"
        params="$ctrl.sparklineParams"
    >
    </piwik-sparkline>
    <div class="metric-value">
        <span title="{{ $ctrl.metricDocumentation }}">
            <strong>{{ $ctrl.metricValue }}</strong> {{ ($ctrl.metricTranslation || '').toLowerCase() }}
        </span>
        <span class="metricEvolution"
              ng-if="$ctrl.pastValue !== null"
              title="{{ 'General_EvolutionSummaryGeneric'|translate:$ctrl.metricValue:$ctrl.getCurrentPeriod():$ctrl.pastValue:$ctrl.pastPeriod:$ctrl.metricChangePercent }}"
        >
            <span ng-class="{'positive-evolution': $ctrl.metricValueUnformatted > $ctrl.pastValueUnformatted, 'negative-evolution': $ctrl.metricValueUnformatted < $ctrl.pastValueUnformatted}">
                {{ $ctrl.metricChangePercent }}
            </span>
        </span>
    </div>
</div>