2017-08-31 15:06:47 +00:00
|
|
|
<div class="animated fadeIn">
|
2017-12-12 15:10:44 +00:00
|
|
|
<snippet-bar-cust></snippet-bar-cust>
|
2017-08-31 15:06:47 +00:00
|
|
|
<div class="row">
|
2017-12-12 15:10:44 +00:00
|
|
|
<div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
|
|
|
|
<widget-graph *ngIf="widget.type == 'graph'"
|
|
|
|
[graphName]="widget.name"
|
|
|
|
[graphTitle]="widget.title"
|
|
|
|
[graphIcon]="widget.icon"
|
|
|
|
[dataType]="widget.dataType">
|
|
|
|
</widget-graph>
|
2017-09-01 13:36:31 +00:00
|
|
|
</div><!--/.col-->
|
2017-08-31 15:06:47 +00:00
|
|
|
</div><!--/.row-->
|
2017-12-13 12:37:11 +00:00
|
|
|
<div class=row>
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="col-xl-4 col-md-6">
|
2017-12-14 16:44:23 +00:00
|
|
|
<panel-pie></panel-pie>
|
|
|
|
</div><!--/.col-->
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="col-xl-4 col-md-6">
|
2017-12-14 16:44:23 +00:00
|
|
|
<div class="card">
|
|
|
|
<div class="card-block">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-12">
|
2017-12-19 18:01:29 +00:00
|
|
|
<h4 class="card-title float-left mb-0">Purchases by Week</h4>
|
2017-12-14 16:44:23 +00:00
|
|
|
</div><!--/.col-->
|
|
|
|
</div><!--/.row-->
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
<ul class="horizontal-bars type-2">
|
|
|
|
<li>
|
|
|
|
<span class="title">This Week</span>
|
2017-12-19 18:01:29 +00:00
|
|
|
<span class="value">{{ (weekPurchaseList.first || 0 ) }} <span class="text-muted small">
|
|
|
|
({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
2017-12-14 16:44:23 +00:00
|
|
|
<div class="bars">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="progress" style="height: 6px;">
|
|
|
|
<div class="progress-bar bg-success" role="progressbar"
|
2017-12-19 18:01:29 +00:00
|
|
|
[style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
2017-12-14 16:44:23 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="title">Last Week</span>
|
2017-12-19 18:01:29 +00:00
|
|
|
<span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
|
|
|
|
({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
2017-12-14 16:44:23 +00:00
|
|
|
<div class="bars">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="progress" style="height: 6px;">
|
|
|
|
<div class="progress-bar bg-success" role="progressbar"
|
2017-12-19 18:01:29 +00:00
|
|
|
[style.width]="(weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
2017-12-14 16:44:23 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
2017-12-19 18:01:29 +00:00
|
|
|
<span class="title">Week Maximum</span>
|
|
|
|
<span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
|
|
|
|
(100%)</span></span>
|
2017-12-14 16:44:23 +00:00
|
|
|
<div class="bars">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="progress" style="height: 6px;">
|
|
|
|
<div class="progress-bar bg-success" role="progressbar"
|
2017-12-19 18:01:29 +00:00
|
|
|
style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
|
2017-12-14 16:44:23 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
2017-12-19 18:01:29 +00:00
|
|
|
<span class="title">Weekly Average</span>
|
|
|
|
<span class="value">{{ (weekPurchaseList.sum / weekPurchaseList.count) || 0 | number:'1.0-0'}} <span class="text-muted small">
|
|
|
|
({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
2017-12-14 16:44:23 +00:00
|
|
|
<div class="bars">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="progress" style="height: 6px;">
|
|
|
|
<div class="progress-bar bg-success" role="progressbar"
|
2017-12-19 18:01:29 +00:00
|
|
|
[style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
2017-12-14 16:44:23 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div><!--/.col-->
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="col-xl-4">
|
2017-12-14 16:44:23 +00:00
|
|
|
<div class="card">
|
|
|
|
<div class="card-block">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-12">
|
2017-12-21 17:20:56 +00:00
|
|
|
<h4 class="card-title float-left mb-0">Purchases by Sector</h4>
|
2017-12-14 16:44:23 +00:00
|
|
|
</div><!--/.col-->
|
|
|
|
</div><!--/.row-->
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
<ul class="icons-list">
|
2017-12-18 17:20:38 +00:00
|
|
|
<!-- New loop -->
|
2017-12-19 18:01:29 +00:00
|
|
|
<li *ngFor="let sector of sectorLetters | slice:0:sectorLimit; let i=index">
|
2017-12-20 13:41:13 +00:00
|
|
|
<i [ngClass]="[sectorIcons [sector] || 'icon-question', sectorClasses [sector] || 'bg-info']"></i>
|
2017-12-18 17:20:38 +00:00
|
|
|
<div class="desc">
|
|
|
|
<div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
|
|
|
<div class="small text-muted">Bought</div>
|
|
|
|
<strong>{{ sectorPurchases[i] || 'N/A' }}</strong>
|
|
|
|
</div>
|
|
|
|
</li>
|
2018-01-24 12:51:03 +00:00
|
|
|
<li *ngIf="sectorLetters.length > sectorLimit && disableSectorButton == false" class="divider text-center">
|
2017-12-19 18:01:29 +00:00
|
|
|
<button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
|
2017-12-14 16:44:23 +00:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div><!--/.col-->
|
|
|
|
</div><!--/.row-->
|
2017-08-31 15:06:47 +00:00
|
|
|
</div>
|