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">
|
|
|
|
<h4 class="card-title float-left mb-0">Purchases Per Week</h4>
|
|
|
|
</div><!--/.col-->
|
|
|
|
</div><!--/.row-->
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
<ul class="horizontal-bars type-2">
|
|
|
|
<li>
|
|
|
|
<span class="title">This Week</span>
|
2017-12-14 20:14:47 +00:00
|
|
|
<span class="value">{{ (weekPurchaseList.week_0 || 0 ) }} <span
|
|
|
|
class="text-muted small">({{ (weekPurchaseList.week_0 || 0 ) / maxPurchase | 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"
|
|
|
|
[style.width]="(weekPurchaseList.week_0 || 0 ) / maxPurchase | 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-14 20:14:47 +00:00
|
|
|
<span class="value">{{ weekPurchaseList.week_1 || 0 }} <span
|
|
|
|
class="text-muted small">({{ (weekPurchaseList.week_1 || 0 ) / maxPurchase | 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"
|
|
|
|
[style.width]="(weekPurchaseList.week_1 || 0 ) / maxPurchase | 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">2 Weeks Ago</span>
|
2017-12-14 20:14:47 +00:00
|
|
|
<span class="value">{{ weekPurchaseList.week_2 || 0 }} <span
|
|
|
|
class="text-muted small">({{ (weekPurchaseList.week_2 || 0 ) / maxPurchase | 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"
|
|
|
|
[style.width]="(weekPurchaseList.week_2 || 0 ) / maxPurchase | 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">3 Weeks Ago</span>
|
2017-12-14 20:14:47 +00:00
|
|
|
<span class="value">{{ weekPurchaseList.week_3 || 0 }} <span
|
|
|
|
class="text-muted small">({{ (weekPurchaseList.week_3 || 0 ) / maxPurchase | 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"
|
|
|
|
[style.width]="(weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="title">4 Weeks Ago</span>
|
|
|
|
<span class="value">{{ weekPurchaseList.week_4 || 0 }} <span
|
|
|
|
class="text-muted small">({{ (weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
|
|
|
<div class="bars">
|
|
|
|
<div class="progress" style="height: 6px;">
|
|
|
|
<div class="progress-bar bg-success" role="progressbar"
|
|
|
|
[style.width]="(weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="title">5 Weeks Ago</span>
|
|
|
|
<span class="value">{{ weekPurchaseList.week_5 || 0 }} <span
|
|
|
|
class="text-muted small">({{ (weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
|
|
|
<div class="bars">
|
|
|
|
<div class="progress" style="height: 6px;">
|
|
|
|
<div class="progress-bar bg-success" role="progressbar"
|
|
|
|
[style.width]="(weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="title">6 Weeks Ago</span>
|
|
|
|
<span class="value">{{ weekPurchaseList.week_6 || 0 }} <span
|
|
|
|
class="text-muted small">({{ (weekPurchaseList.week_6 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
|
|
|
<div class="bars">
|
|
|
|
<div class="progress" style="height: 6px;">
|
|
|
|
<div class="progress-bar bg-success" role="progressbar"
|
|
|
|
[style.width]="(weekPurchaseList.week_6 || 0 ) / maxPurchase | 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">
|
|
|
|
<h4 class="card-title float-left mb-0">Sector Purchase Amounts</h4>
|
|
|
|
</div><!--/.col-->
|
|
|
|
</div><!--/.row-->
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
<ul class="icons-list">
|
|
|
|
<li>
|
|
|
|
<i class="icon-screen-desktop bg-primary"></i>
|
|
|
|
<div class="desc">
|
|
|
|
<div class="title">Sector A</div>
|
|
|
|
<small>Lorem ipsum dolor sit amet</small>
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="small text-muted">Bought from Sector</div>
|
2017-12-14 16:44:23 +00:00
|
|
|
<strong>1.924</strong>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<i class="icon-screen-smartphone bg-info"></i>
|
|
|
|
<div class="desc">
|
|
|
|
<div class="title">Sector B</div>
|
|
|
|
<small>Lorem ipsum dolor sit amet</small>
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="small text-muted">Bought from Sector</div>
|
2017-12-14 16:44:23 +00:00
|
|
|
<strong>1.224</strong>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<i class="icon-screen-smartphone bg-warning"></i>
|
|
|
|
<div class="desc">
|
|
|
|
<div class="title">Sector C</div>
|
|
|
|
<small>Lorem ipsum dolor sit amet</small>
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="small text-muted">Bought from Sector</div>
|
2017-12-14 16:44:23 +00:00
|
|
|
<strong>1.163</strong>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<i class="icon-user bg-danger"></i>
|
|
|
|
<div class="desc">
|
|
|
|
<div class="title">Sector D</div>
|
|
|
|
<small>Lorem ipsum dolor sit amet</small>
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="small text-muted">Bought from Sector</div>
|
2017-12-14 16:44:23 +00:00
|
|
|
<strong>928</strong>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<i class="icon-social-spotify bg-success"></i>
|
|
|
|
<div class="desc">
|
|
|
|
<div class="title">Sector E</div>
|
|
|
|
<small>Lorem ipsum dolor sit amet</small>
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="small text-muted">Bought from Sector</div>
|
2017-12-14 16:44:23 +00:00
|
|
|
<strong>893</strong>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<i class="icon-cloud-download bg-danger"></i>
|
|
|
|
<div class="desc">
|
|
|
|
<div class="title">Sector F</div>
|
|
|
|
<small>Lorem ipsum dolor sit amet</small>
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="small text-muted">Bought from Sector</div>
|
2017-12-14 16:44:23 +00:00
|
|
|
<strong>121.924</strong>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<i class="icon-camera bg-warning"></i>
|
|
|
|
<div class="desc">
|
|
|
|
<div class="title">Sector G</div>
|
|
|
|
<small>Lorem ipsum dolor sit amet</small>
|
|
|
|
</div>
|
|
|
|
<div class="value">
|
2017-12-14 20:14:47 +00:00
|
|
|
<div class="small text-muted">Bought from Sector</div>
|
2017-12-14 16:44:23 +00:00
|
|
|
<strong>12.125</strong>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div><!--/.col-->
|
|
|
|
</div><!--/.row-->
|
2017-08-31 15:06:47 +00:00
|
|
|
</div>
|