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 >
2018-05-01 13:23:47 +01:00
< div class = "col-xl-6" >
2019-07-09 12:41:17 +01:00
< panel-pie > < / panel-pie > <!-- All Purchases -->
2019-07-04 15:49:14 +01:00
<!-- <div class="demo - container" ng - app="stacked - bar" ng - controller="stacked - bar">
2019-07-04 15:34:42 +01:00
< div id = "stacked-bar" dx-chart = "chartOptions" > < / div >
2019-07-04 15:49:14 +01:00
< / div > -->
< / div > <!-- /.col -->
2019-07-09 12:41:17 +01:00
< div * ngIf = "showCategoryDoughnutChart" class = "col-xl-6" >
< div class = "card" >
2019-07-04 15:34:42 +01:00
<!-- <body style="background - color:rgb(0,0,0);"> -->
< div class = "card-block" >
< div class = "row" >
2019-08-14 09:49:18 +01:00
< div class = "col-7" >
< h4 class = "card-title mb-0" > Spending by Category< / h4 >
< / div >
< div class = "col-sm-5 hidden-sm-down" >
< div class = "btn-toolbar float-right" role = "toolbar" aria-label = "Toolbar with button groups" >
< div class = "btn-group mr-3" data-toggle = "buttons" aria-label = "First group" >
< select >
< option value = "Day" > Day< / option >
< option value = "Week" > Week< / option >
< option value = "Month" > Month< / option >
< option value = "Year" > Year< / option >
< option value = "All Time" > All Time< / option >
< / select >
< / div >
< / div >
2019-07-04 15:34:42 +01:00
< / div >
< / div >
< div class = "chart-wrapper" >
< canvas baseChart class = "chart"
[datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory"
[options]="doughnutChartOptionsCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
2019-07-09 12:41:17 +01:00
(chartClick)="chartClicked($event)">< / canvas >
2019-07-04 15:34:42 +01:00
< / div >
2018-04-17 12:16:22 +01:00
< / div >
2019-07-04 15:34:42 +01:00
<!-- </body> -->
2018-04-17 12:16:22 +01:00
< / div >
2018-04-13 16:07:26 +01:00
< / div > <!-- /.col -->
2018-05-01 13:23:47 +01:00
< div * ngIf = "showEssentialBarChart" class = "col-xl-6" >
2018-04-17 12:16:22 +01:00
< div class = "card" >
2018-04-13 16:07:26 +01:00
< div class = "card-block" >
< div class = "row" >
2019-08-14 09:49:18 +01:00
< div class = "col-7" >
2018-04-13 16:07:26 +01:00
< h4 class = "card-title mb-0" > No. of Essential Purchases< / h4 >
< / div >
2019-08-14 09:49:18 +01:00
< div class = "col-sm-5 hidden-sm-down" >
< div class = "btn-toolbar float-right" role = "toolbar" aria-label = "Toolbar with button groups" >
< div class = "btn-group mr-3" data-toggle = "buttons" aria-label = "First group" >
< select >
< option value = "Day" > Day< / option >
< option value = "Week" > Week< / option >
< option value = "Month" > Month< / option >
< option value = "Year" > Year< / option >
< option value = "All Time" > All Time< / option >
< / select >
< / div >
< / div >
< / div >
2018-04-13 16:07:26 +01:00
< / div >
< div class = "chart-wrapper" >
< canvas baseChart class = "chart"
[datasets]="barChartDataEssential"
[labels]="barChartLabelsEssential"
[options]="barChartOptionsEssential"
[chartType]="barChartTypeEssential"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">< / canvas >
< / div >
< / div >
< / div >
< / div > <!-- /.col -->
2018-05-01 13:23:47 +01:00
< div class = "col-xl-6" >
2017-12-14 16:44:23 +00:00
< div class = "card" >
< div class = "card-block" >
< div class = "row" >
2019-08-14 09:49:18 +01:00
< div class = "col-8" >
2019-08-09 10:21:40 +01:00
< h4 class = "card-title float-left mb-0" > Your Purchases by Category< / h4 >
2018-05-22 12:28:09 +01:00
< / div > <!-- /.col -->
2019-08-14 09:49:18 +01:00
< div class = "col-sm-4 hidden-sm-down" >
< div class = "btn-toolbar float-right" role = "toolbar" aria-label = "Toolbar with button groups" >
< div class = "btn-group mr-3" data-toggle = "buttons" aria-label = "First group" >
< select >
< option value = "Day" > Day< / option >
< option value = "Week" > Week< / option >
< option value = "Month" > Month< / option >
< option value = "Year" > Year< / option >
< option value = "All Time" > All Time< / option >
< / select >
< / div >
< / div >
< / div >
2018-05-22 12:28:09 +01:00
< / div > <!-- /.row -->
2019-07-09 12:41:17 +01:00
< div class = "chart-wrapper" >
< canvas baseChart class = "chart"
[datasets]="barChartDataCategory"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[legend]="barChartLegendCategory"
[chartType]="barChartTypeCategory"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">< / canvas >
< / div >
2018-05-22 12:28:09 +01:00
< / div >
< / div >
< / div > <!-- /.col -->
2019-08-09 10:21:40 +01:00
< div class = "col-xl-6" >
< div class = "card" >
< div class = "card-block" >
< div class = "row" >
< div class = "col-12" >
< h4 class = "card-title float-left mb-0" > Global Puchases by Category< / h4 >
< / div >
< div class = "col-12" >
< div * ngIf = "showTotalCategoryList" class = "chart-wrapper" >
< ul class = "icons-list" >
<!-- New loop -->
< li * ngFor = "let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index" >
< i [ ngClass ] = " [ ' icon- ' + category . icon , getBootstrapColour ( i ) ] " > < / i >
< div class = "desc" >
< div class = "title" > {{ category.category || 'N/A' }}< / div >
< / div >
< div class = "value" >
< div class = "small text-muted" > Bought< / div >
< strong > {{ category.value || 'N/A' }}< / strong >
< / div >
< / li >
< li * ngIf = "totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class = "divider text-center" >
< button type = "button" class = "btn btn-sm btn-link text-muted" ( click ) = " categoryLoadMore ( ) " > < i class = "icon-options" > < / i > < / button >
< / li >
< / ul >
< / div >
< / div >
< / div > <!-- /.row -->
< / div >
< / div >
< / div >
