Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

properly displaying essential purchases dataset

Browse source
This commit is contained in:
Finn 2019-08-20 16:43:53 +01:00
parent 03e9e365fc
commit 55e62a6b87
No known key found for this signature in database
GPG key ID: 7455B4B17685B598
3 changed files with 100 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

166
src/app/dashboard/dashboard.component.html
View file

@ -12,101 +12,101 @@
</div><!--/.col--> </div><!--/.col-->
</div><!--/.row--> </div><!--/.row-->
<panel-graph></panel-graph> <panel-graph></panel-graph>
<div class=row> <div class=row>
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card"> <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="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h4 class="card-title mb-0">Spending by Category</h4> <h4 class="card-title mb-0">Number of Essential Purchases</h4>
</div> </div>
</div> </div>
<div class="chart-wrapper"> <div *ngIf="showEssentialBarChart" class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"
[datasets]="doughnutChartDataCategory" [datasets]="barChartDataEssential"
[labels]="doughnutChartLabelsCategory" [labels]="barChartLabelsEssential"
[options]="doughnutChartOptionsCategory" [options]="barChartOptionsEssential"
[legend]="chartLegend" [chartType]="barChartTypeEssential"
[chartType]="chartType" (chartHover)="chartHovered($event)"
(chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
(chartClick)="chartClicked($event)"></canvas>
</div> </div>
</div> </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"> <div class="col-xl-6">
<org-pie-panel></org-pie-panel> <org-pie-panel></org-pie-panel>
</div> </div>
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h4 class="card-title float-left mb-0"> Global Puchases by Category</h4> <h4 class="card-title float-left mb-0"> Global Puchases by Category</h4>
</div> </div>
<div class="col-12"> <div class="col-12">
<div *ngIf="showTotalCategoryList" class="chart-wrapper"> <div *ngIf="showTotalCategoryList" class="chart-wrapper">
<ul class="icons-list"> <ul class="icons-list">
<!-- New loop --> <!-- New loop -->
<li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index"> <li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
<i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i> <i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
<div class="desc"> <div class="desc">
<div class="title">{{ category.category || 'N/A' }}</div> <div class="title">{{ category.category || 'N/A' }}</div>
</div> </div>
<div class="value"> <div class="value">
<div class="small text-muted">Bought</div> <div class="small text-muted">Bought</div>
<strong>{{ category.value || 'N/A' }}</strong> <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>
</li> </div>
<li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center"> </div><!--/.row-->
<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>
</div><!--/.row--> </div>
</div>
</div>
</div>

27
src/app/dashboard/dashboard.component.ts
View file

@ -97,13 +97,13 @@ export class DashboardComponent {
public purchaseNotEssential: number; public purchaseNotEssential: number;
public purchaseEssential: number; public purchaseEssential: number;
public showEssentialBarChart = false; public showEssentialBarChart:boolean = false;
public showCategoryBarChart = false; public showCategoryBarChart = false;
public showCategoryDoughnutChart = false; public showCategoryDoughnutChart = false;
public barChartDataEssential:any[]=[ public barChartDataEssential: ChartDataSets[] = [
{data: 0, label: 'Essential', stack: '1'}, {data: [0], label: 'Essential', stack: '1'},
{data: 0, label: 'Non-Essential', stack: '1'}, {data: [0], label: 'Non-Essential', stack: '1'},
]; ];
public barChartLabelsEssential:string[] = ['All Purchases']; public barChartLabelsEssential:string[] = ['All Purchases'];
public barChartOptionsEssential:any = { public barChartOptionsEssential:any = {
@ -247,17 +247,11 @@ export class DashboardComponent {
this.setWeekPurchaseList(result.weeks); this.setWeekPurchaseList(result.weeks);
this.setWeekData(result); this.setWeekData(result);
this.setChartDataCat(result.data.cat_total); this.setChartDataCat(result.data.cat_total);
this.setChartDataEssential(result.data.essentials);
this.totalCategoryList = result.data.cat_list; this.totalCategoryList = result.data.cat_list;
if (this.totalCategoryList) { if (this.totalCategoryList) {
this.showTotalCategoryList = true; 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 => { error => {
console.log('Retrieval Error'); console.log('Retrieval Error');
@ -266,6 +260,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) { private setChartDataCat(dataCat: any) {
this.barChartLabelsCategory = Object.keys(dataCat); this.barChartLabelsCategory = Object.keys(dataCat);
let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);

2
src/environments/environment.ts
View file

@ -5,7 +5,7 @@
export const environment = { export const environment = {
production: false, production: false,
apiUrl: 'https://dev.peartrade.org/api', apiUrl: 'https://dev.localspend.co.uk/api',
mapApiKey: 'CHANGEME', mapApiKey: 'CHANGEME',
enableAnalytics: false, enableAnalytics: false,
analyticsKey: 'CHANGEME', analyticsKey: 'CHANGEME',