2017-08-31 16:06:47 +01:00
< div class = "animated fadeIn" >
2017-12-12 15:10:44 +00:00
< snippet-bar-cust > < / snippet-bar-cust >
2017-08-31 16:06:47 +01: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 14:36:31 +01:00
< / div > <!-- /.col -->
2017-08-31 16:06:47 +01: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 16:06:47 +01:00
< / div >