<div class="panel panel-default panel-narrow panel-flat center-block">
  <div class="panel-heading">
    <h3 class="panel-title">Statistics</h3>
  </div>
  <div class="panel-body">
    <h4>
      Today ({{ today | date:'longDate'}})
      <a tooltip="Choose date" tooltip-placement="left" href="" class="pull-right"><i class="fa fa-calendar"></i></a>
    </h4>
    <hr>
    <ul class="list-unstyled">
      <li ng-repeat="activity in activities">
          <h5>{{activity.name}}</h5>
          <div class="progress">
            <div class="progress-bar progress-bar-{{activity.color}}" style="width: {{activity.getDurationInPct()}}%">
              {{activity.duration | timeDuration}}
            </div>
          </div>
      </li>
    </ul>
  </div>
</div>

<div class="panel panel-default panel-narrow panel-flat center-block">
  <div class="panel-heading">
    <h3 class="panel-title">Statistics</h3>
  </div>
  <div class="panel-body">
    <h4>
      Today ({{ today | date:'longDate'}})
      <a tooltip="Choose date" tooltip-placement="left" href="" class="pull-right"><i class="fa fa-calendar"></i></a>
    </h4>
    <hr>
    <ul class="list-unstyled">
      <li ng-repeat="activity in activities | orderBy:'duration':true">
          <h5>{{activity.name}}</h5>
          <div class="progress">
            <div class="progress-bar progress-bar-{{activity.color}}" style="width: {{activity.getDurationInPct()}}%">
              {{activity.duration | timeDuration}}
            </div>
          </div>
      </li>
    </ul>
  </div>
</div>

Order in statistic by duration
Order in statistic by duration
