properly displaying essential purchases dataset
This commit is contained in:
Finn
parent
81d56f3bc9
commit
ed2025b67d
3 changed files with 100 additions and 95 deletions
|
|
@ -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>
|
|
||||||
|
|
|
||||||
|
|
@ -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]);
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
|
|
|
||||||
Reference in a new issue