fab-manager/app/assets/templates/admin/statistics/graphs.html.erb

<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
    <div class="col-xs-8 col-sm-10 col-md-8 b-l">
      <section class="heading-title">
        <h1 translate>{{ 'app.admin.stats_graphs.statistics' }}</h1>
      </section>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
      <section class="heading-actions wrapper">
        <a class="btn btn-lg btn-warning bg-white b-2x rounded m-t-sm upper text-sm" ui-sref="app.admin.statistics" role="button"><i class="fa fa-table"></i> {{ 'app.admin.stats_graphs.data' | translate }}</a>
      </section>
    </div>
  </div>
</section>


<section class="m-lg">
  <div class="row">

    <div class="col-md-12">
      <form id="filters_form" name="filters_form" class="form-inline m-t-md m-b-lg" novalidate="novalidate">

        <div class="btn-group m-r-md">
          <a role="button" ng-model="display.interval" uib-btn-radio="'day'" class="btn btn-default" translate>{{ 'app.admin.stats_graphs.day' }}</a>
          <a role="button" ng-model="display.interval" uib-btn-radio="'week'" class="btn btn-default" translate>{{ 'app.admin.stats_graphs.week' }}</a>
          <a role="button" ng-model="display.interval" uib-btn-radio="'month'" class="btn btn-default" translate>{{ 'app.admin.stats_graphs.month' }}</a>
        </div>

        <div class="form-group pull-right datepicker-container">
          <button id="datepickerExpand" class="btn btn-default" type="button" ng-click="datePicker.show = !datePicker.show">
            <i class="fa fa-calendar"></i>
            <i class="fa fa-arrows-h"></i>
            <i class="fa fa-calendar"></i>
            <span translate>{{ 'app.admin.stats_graphs.from_date' }}</span>
            <b class="text-info" id="datepicker-from-info">{{datePickerStart.selected | amDateFormat:'L'}}</b>
            <span translate>{{ 'app.admin.stats_graphs.to_date' }}</span>
            <b class="text-info" id="datepicker-to-info">{{datePickerEnd.selected | amDateFormat:'L'}}</b>
            <i class="fa fa-caret-down" ng-show="!datePicker.show"></i>
            <i class="fa fa-caret-up" ng-show="datePicker.show"></i>
          </button>
          <div class="datepicker-dropdown" ng-show="datePicker.show">
            <ul class="list-unstyled">
              <li class="row">
                <span class="col-md-4" translate>{{ 'app.admin.stats_graphs.start' }}</span>
                <div class="input-group black col-md-7 m-r" id="date_pick_start">
                  <input type="text"
                         class="form-control"
                         uib-datepicker-popup="{{datePickerStart.format}}"
                         ng-model="datePickerStart.selected"
                         name="startDate"
                         is-open="datePickerStart.opened"
                         min-date="datePickerStart.minDate"
                         max-date="datePickerStart.maxDate"
                         datepicker-options="datePickerStart.options"
                         show-button-bar="false"
                         placeholder="{{ 'app.admin.stats_graphs.start' | translate }}"
                         ng-click="toggleStartDatePicker($event)"
                         required="required"/>
                      <span class="input-group-btn">
                        <button type="button" class="btn btn-default btn-search-datepicker" ng-click="toggleStartDatePicker($event)">
                          <i class="glyphicon glyphicon-calendar"></i>
                        </button>
                      </span>
                </div>
              </li>
              <li class="row">
                <span class="col-md-4" translate>{{ 'app.admin.stats_graphs.end' }}</span>
                <div class="input-group black col-md-7 m-r" id="date_pick_end">
                  <input type="text"
                         class="form-control"
                         uib-datepicker-popup="{{datePickerEnd.format}}"
                         ng-model="datePickerEnd.selected"
                         name="endDate"
                         is-open="datePickerEnd.opened"
                         min-date="datePickerEnd.minDate"
                         max-date="datePickerEnd.maxDate"
                         datepicker-options="datePickerEnd.options"
                         show-button-bar="false"
                         placeholder="{{ 'app.admin.stats_graphs.end' | translate }}"
                         ng-click="toggleEndDatePicker($event)"
                         required="required"/>
                      <span class="input-group-btn">
                        <button type="button" class="btn btn-default btn-search-datepicker" ng-click="toggleEndDatePicker($event)">
                          <i class="glyphicon glyphicon-calendar"></i>
                        </button>
                      </span>
                </div>
              </li>
              <li>
                <button class="btn btn-default text-primary pull-right" ng-click="validateDateChange()">
                  <i class="fa fa-check green"></i> <span class="hidden-xs" translate>{{ 'app.shared.buttons.apply' }}</span>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </form>

      <uib-tabset justified="true">
        <uib-tab ng-repeat="stat in statistics" heading="{{stat.label}}" select="setActiveTab(stat)" ng-if="stat.graph && !(stat.es_type_key == 'subscription' && plansModule)" class="row">

          <div ng-if="stat.graph.chart_type == 'discreteBarChart'">
            <div id="rankingFilters">
              <form class="form-inline m-t-md m-b-lg">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-filter"></i></span>
                  <select class="form-control" ng-model="ranking.groupCriterion">
                    <option value="subType" translate>{{ 'app.admin.stats_graphs.type' }}</option>
                    <option value="{{field.key}}" ng-repeat="field in stat.additional_fields">{{field.label}}</option>
                  </select>
                </div>
                <div class="input-group pull-right">
                  <span class="input-group-addon"><i class="fa fa-sort-amount-desc "></i></span>
                  <select class="form-control" ng-model="ranking.sortCriterion">
                    <option value="ca" ng-if="stat.ca" translate>{{ 'app.admin.stats_graphs.revenue' }}</option>
                    <option value="{{t.key}}" ng-repeat="t in stat.types">{{t.label}}</option>
                  </select>
                </div>
              </form>
            </div>
            <div class="col-md-12">
              <h3>{{ 'app.admin.stats_graphs.top_list_of' | translate}} {{stat.label}}</h3>
              <div id="chart-{{stat.es_type_key}}">
                <svg style="height: 500px;width:100%"></svg>
              </div>
            </div>
          </div>


          <div class="col-md-12" ng-repeat="type in stat.types" ng-if="type.graph">
            <h3>{{type.label}}</h3>
            <div id="chart-{{type.key}}">
              <svg style="height: 500px;width:100%"></svg>
            </div>
          </div>

        </uib-tab>
      </uib-tabset>
    </div>

  </div>
</section>