Added time filter options + Chart Labels
Cleaned up graphs that aren't relevant to this particular page, added chart labels and a WIP time filter option
This commit is contained in:
parent
7ee0b64351
commit
c206a394d2
9 changed files with 89 additions and 112 deletions
|
@ -65,66 +65,7 @@
|
|||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title float-left mb-0">Weekly Purchase No.</h4>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<li>
|
||||
<span class="title">This Week</span>
|
||||
<span class="value">{{ (weekPurchaseList.first || 0 ) }} <span class="text-muted small">
|
||||
({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | 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.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="title">Last Week</span>
|
||||
<span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
|
||||
({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | 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.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="title">Week Maximum</span>
|
||||
<span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
|
||||
(100%)</span></span>
|
||||
<div class="bars">
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
<div class="bars">
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
[style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<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">All Purchases by Category</h4>
|
||||
<h4 class="card-title float-left mb-0">Your Purchases by Category</h4>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
|
@ -137,26 +78,37 @@
|
|||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<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>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
<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>
|
||||
|
|
|
@ -76,13 +76,6 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
stacked:true,
|
||||
|
||||
}],
|
||||
yAxes:[{
|
||||
scaleLabel: {
|
||||
display:true,
|
||||
labelString: 'Organisation purchase amount'
|
||||
},
|
||||
stacked:true,
|
||||
}]
|
||||
}
|
||||
};
|
||||
public barChartTypeEssential:string = 'horizontalBar';
|
||||
|
|
|
@ -2,9 +2,22 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-sm-7">
|
||||
<h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</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>
|
||||
<canvas baseChart
|
||||
|
@ -20,9 +33,22 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-sm-7">
|
||||
<h4 class="card-title mb-0">Spend amount and number of organisations</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>
|
||||
<canvas baseChart
|
||||
|
@ -41,14 +67,6 @@
|
|||
<div class="col-sm-5">
|
||||
<h4 class="card-title mb-0">Supplier Spend History</h4>
|
||||
</div>
|
||||
<div class="col-sm-7 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">
|
||||
<button class="btn btn-outline-secondary active" onclick="newGroup()"> New Group
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<canvas baseChart #supplierChart
|
||||
|
|
|
@ -215,12 +215,6 @@ export class MoreStuffComponent implements OnInit {
|
|||
}
|
||||
)
|
||||
}
|
||||
public newGroup() {
|
||||
this.supplierMonthChartData[0].data = quarter.slice(0,15);
|
||||
this.supplierMonthChartData[1].data = half.slice(0,15);
|
||||
this.supplierMonthChartData[2].data = year.slice(0,15);
|
||||
this.supplierMonthChartLabels = labels.slice(0,15);
|
||||
}
|
||||
public supplierMonthChartData: any[] = [
|
||||
{
|
||||
data: [],
|
||||
|
|
|
@ -7,11 +7,16 @@
|
|||
<div class="col-sm-7 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">
|
||||
<label class="btn btn-outline-secondary active"> Week
|
||||
</label>
|
||||
<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><!--/.col-->
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper" style="height:300px;margin-top:40px;">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title mb-0">All Purchases</h4>
|
||||
<h4 class="card-title mb-0">All Purchases by Type</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
|
|
|
@ -12,7 +12,7 @@ import { ChartData } from '../_interfaces/chart-data';
|
|||
|
||||
export class OrgPiePanel implements OnInit {
|
||||
|
||||
public chartType = 'doughnut';
|
||||
public chartType = 'pie';
|
||||
public chartLegend = true;
|
||||
public doughnutChartDataLocal: number[] = [];
|
||||
public doughnutChartColors: any[] = [
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title mb-0">All Purchases</h4>
|
||||
<h4 class="card-title mb-0">All Purchases by Category</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
|
|
|
@ -12,11 +12,12 @@ import { ChartData } from '../_interfaces/chart-data';
|
|||
|
||||
export class PiePanel implements OnInit {
|
||||
|
||||
public chartType = 'doughnut';
|
||||
public chartType = 'pie';
|
||||
public chartLegend = true;
|
||||
public doughnutChartDataLocal: number[] = [];
|
||||
public doughnutChartLabelsLocal: string[] = [];
|
||||
public doughnutChartColors: any[] = [{ backgroundColor: [
|
||||
public doughnutChartColors: any[] = [
|
||||
{ backgroundColor: [
|
||||
'red',
|
||||
'green',
|
||||
'blue',
|
||||
|
@ -28,7 +29,21 @@ export class PiePanel implements OnInit {
|
|||
'orange',
|
||||
'pink'
|
||||
]
|
||||
}];
|
||||
},
|
||||
{ borderColor:[
|
||||
'red',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'pink'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
constructor(
|
||||
private api: ApiService,
|
||||
|
|
Reference in a new issue