1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-12-04 15:24:23 +01:00
fab-manager/app/frontend/templates/admin/statistics/graphs.html

148 lines
7.3 KiB
HTML

<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="fas fa-long-arrow-alt-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="true"/>
<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="true"/>
<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="(index, stat) in statistics" heading="{{stat.label}}" select="setActiveTab(stat, index)" ng-if="hiddenTab(stat)" index="index" 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>