Merge remote-tracking branch 'origin/tyu-tyu/char' into tyu-tyu/charts
This commit is contained in:
Tom Slater
commit
ade578d78b
4 changed files with 99 additions and 100 deletions
|
|
@ -40,15 +40,11 @@ export class LoginComponent implements OnInit {
|
|||
}
|
||||
|
||||
onSubmit() {
|
||||
console.log(this.signin.value);
|
||||
|
||||
this.api
|
||||
.login(this.signin.value)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log('logged in!');
|
||||
this.loginStatus = 'success';
|
||||
console.log(this.loginStatus);
|
||||
this.router.navigate([this.returnUrl]);
|
||||
},
|
||||
error => {
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@ export class RegisterComponent {
|
|||
town: organisationForm.town,
|
||||
postcode: organisationForm.postcode,
|
||||
};
|
||||
console.log(data);
|
||||
this.api
|
||||
.register(data)
|
||||
.subscribe(
|
||||
|
|
|
|||
|
|
@ -12,102 +12,101 @@
|
|||
</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-12">
|
||||
<h4 class="card-title mb-0">Number of Essential Purchases</h4>
|
||||
</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-12">
|
||||
<h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
|
||||
</div><!--/.col-->
|
||||
</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=row>
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title mb-0">Last week's spending by Category</h4>
|
||||
<h4 class="card-title mb-0">Number of Essential Purchases</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<div *ngIf="showEssentialBarChart" class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="doughnutChartDataCategory"
|
||||
[labels]="doughnutChartLabelsCategory"
|
||||
[options]="doughnutChartOptionsCategory"
|
||||
[colors]="doughnutChartColoursCategory"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
[datasets]="barChartDataEssential"
|
||||
[labels]="barChartLabelsEssential"
|
||||
[options]="barChartOptionsEssential"
|
||||
[chartType]="barChartTypeEssential"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</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 Organisation Purchases by Category</h4>
|
||||
</div><!--/.col-->
|
||||
</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-12">
|
||||
<h4 class="card-title mb-0">Spending by Category</h4>
|
||||
</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 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 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>
|
||||
</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><!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -114,13 +114,13 @@ export class DashboardComponent {
|
|||
|
||||
public purchaseNotEssential: number;
|
||||
public purchaseEssential: number;
|
||||
public showEssentialBarChart = false;
|
||||
public showEssentialBarChart:boolean = false;
|
||||
public showCategoryBarChart = false;
|
||||
public showCategoryDoughnutChart = false;
|
||||
|
||||
public barChartDataEssential:any[]=[
|
||||
{data: 0, label: 'Essential', stack: '1'},
|
||||
{data: 0, label: 'Non-Essential', stack: '1'},
|
||||
public barChartDataEssential: ChartDataSets[] = [
|
||||
{data: [0], label: 'Essential', stack: '1'},
|
||||
{data: [0], label: 'Non-Essential', stack: '1'},
|
||||
];
|
||||
public barChartLabelsEssential:string[] = ['All Purchases'];
|
||||
public barChartOptionsEssential:any = {
|
||||
|
|
@ -265,17 +265,11 @@ export class DashboardComponent {
|
|||
this.setWeekPurchaseList(result.weeks);
|
||||
this.setWeekData(result);
|
||||
this.setChartDataCat(result.data.cat_total);
|
||||
this.setChartDataEssential(result.data.essentials);
|
||||
this.totalCategoryList = result.data.cat_list;
|
||||
if (this.totalCategoryList) {
|
||||
this.showTotalCategoryList = true;
|
||||
}
|
||||
this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
|
||||
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
|
||||
this.barChartDataEssential = [
|
||||
{data: this.purchaseEssential, label: 'Essential', stack: '1'},
|
||||
{data: this.purchaseNotEssential, label: 'Non-Essential', stack: '1'},
|
||||
];
|
||||
this.showEssentialBarChart = true;
|
||||
},
|
||||
error => {
|
||||
console.log('Retrieval Error');
|
||||
|
|
@ -284,6 +278,17 @@ export class DashboardComponent {
|
|||
);
|
||||
}
|
||||
|
||||
private setChartDataEssential (dataEs: any) {
|
||||
this.purchaseEssential = dataEs.purchase_no_essential_total;
|
||||
this.purchaseNotEssential = dataEs.purchase_no_total - this.purchaseEssential;
|
||||
this.barChartDataEssential = [
|
||||
{data: [this.purchaseEssential], label: 'Essential', stack: '1'},
|
||||
{data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'},
|
||||
];
|
||||
this.showEssentialBarChart = true;
|
||||
console.log(this.barChartDataEssential);
|
||||
}
|
||||
|
||||
private setChartDataCat(dataCat: any) {
|
||||
this.barChartLabelsCategory = Object.keys(dataCat);
|
||||
let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
|
||||
|
|
|
|||
Reference in a new issue