121 lines
4.6 KiB
HTML
121 lines
4.6 KiB
HTML
|
|
<div class="animated fadeIn">
|
|
<snippet-bar-org></snippet-bar-org>
|
|
<div class="row">
|
|
<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>
|
|
</div><!--/.col-->
|
|
</div><!--/.row-->
|
|
<panel-graph></panel-graph>
|
|
<div class=row>
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-block">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<h4 class="card-title mb-0">No. of Essential Purchases</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>
|
|
</div>
|
|
</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-->
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-block">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
|
|
</div><!--/.col-->
|
|
<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>
|
|
</div><!--/.row-->
|
|
<div class="chart-wrapper">
|
|
<canvas baseChart class="chart"
|
|
[datasets]="barChartDataCategory"
|
|
[labels]="barChartLabelsCategory"
|
|
[options]="barChartOptionsCategory"
|
|
[colors]="barChartColoursCategory"
|
|
[legend]="barChartLegendCategory"
|
|
[chartType]="barChartTypeCategory"
|
|
(chartHover)="chartHovered($event)"
|
|
(chartClick)="chartClicked($event)"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.col-->
|
|
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-block">
|
|
<div class="row">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas baseChart class="chart"
|
|
[datasets]="doughnutChartDataCategory"
|
|
[labels]="doughnutChartLabelsCategory"
|
|
[options]="doughnutChartOptionsCategory"
|
|
[legend]="chartLegend"
|
|
[chartType]="chartType"
|
|
(chartHover)="chartHovered($event)"
|
|
(chartClick)="chartClicked($event)"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-6">
|
|
<org-pie-panel></org-pie-panel>
|
|
</div>
|
|
</div>
|