diff --git a/CHANGELOG.md b/CHANGELOG.md index 7bd6848..e60302d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,14 @@ # Next Release +# 0.1.8 + +* Amended how category is pulled from server +* Added chart on essential purchase numbers as a whole +* Added bar chart of category purchases in the month +* Added pie chart of purchases by category in the week +* Added hint for closing the burger menu while in mobile view + # v0.1.7 * Fixed category on upload highlighting diff --git a/package-lock.json b/package-lock.json index 34edd94..c74a703 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "localloop-web", - "version": "0.1.7", + "version": "0.1.8", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1ef9f74..6b9059f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "localloop-web", - "version": "0.1.7", + "version": "0.1.8", "description": "LocalLoop Web - Web interface for LocalLoop app", "author": "", "url": "http://www.peartrade.org", diff --git a/src/app/dashboard/category-month.component.html b/src/app/dashboard/category-month.component.html index db24b1f..f7501d9 100644 --- a/src/app/dashboard/category-month.component.html +++ b/src/app/dashboard/category-month.component.html @@ -22,7 +22,7 @@
  • - {{ categoryList[categoryEntry.category] || 'Uncategorised' }} + {{ categoryEntry.category || 'Uncategorised' }} {{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} ({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})
    @@ -64,7 +64,7 @@
  • - {{ categoryList[categoryEntry.category] || 'Uncategorised' }} + {{ categoryEntry.category || 'Uncategorised' }} {{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} ({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})
    @@ -106,7 +106,7 @@
  • - {{ categoryList[categoryEntry.category] || 'Uncategorised' }} + {{ categoryEntry.category || 'Uncategorised' }} {{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} ({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})
    @@ -148,7 +148,7 @@
  • - {{ categoryList[categoryEntry.category] || 'Uncategorised' }} + {{ categoryEntry.category || 'Uncategorised' }} {{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} ({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})
    diff --git a/src/app/dashboard/category-month.component.ts b/src/app/dashboard/category-month.component.ts index 140e8e3..c5cd3d1 100644 --- a/src/app/dashboard/category-month.component.ts +++ b/src/app/dashboard/category-month.component.ts @@ -31,7 +31,6 @@ export class CategoryMonthComponent implements OnInit { weekEssential3: number = 0; weekEssential4: number = 0; - categoryList: any; dayList: any[] = []; valueList: number[] = []; myWeek1: any; @@ -47,16 +46,6 @@ export class CategoryMonthComponent implements OnInit { private api: ApiService, ) { this.setDate(); - this.api.categoryList().subscribe( - result => { - this.categoryList = result.categories; - console.log('Category List received'); - }, - error => { - console.log('Retrieval Error'); - console.log( error._body ); - } - ); this.api.categoryTransactionList().subscribe( result => { this.setData(result); diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index e8019a4..5325ccc 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -14,12 +14,74 @@
    +
    +
    +
    +
    +
    +

    Weekly Spending by Category

    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    No. of Essential Purchases

    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Monthly Spending by Category

    +
    +
    +
    + +
    +
    +
    +
    -

    Purchases by Week

    +

    Weekly Purchase No.

    diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 55f1b6a..cebb1f8 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -1,10 +1,13 @@ import { Directive, Component, OnInit } from '@angular/core'; +import { CurrencyPipe } from '@angular/common'; import { ApiService } from '../providers/api-service'; import { Router } from '@angular/router'; import { GraphWidget } from '../widgets/graph-widget.component'; import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'; import { PiePanel } from '../panels/pie-panel.component'; import { DataType } from '../shared/data-types.enum'; +import * as moment from 'moment'; +import 'rxjs/add/operator/map'; @Component({ templateUrl: 'dashboard-customer.component.html' @@ -22,6 +25,73 @@ export class DashboardCustomerComponent implements OnInit { disableSectorButton: boolean = false; + public chartType = 'doughnut'; + public chartLegend = true; + public doughnutChartDataCategory: any[] = []; + public doughnutChartLabelsCategory: string[] = []; + + public doughtnutChartOptionsCategory:any = { + tooltips: { + callbacks: { + label: (tooltip, data) => { + return this.tooltipLabelCallback(tooltip, data); + }, + }, + }, + } + + myWeek1: any; + + weekList1 = []; + + public purchaseNotEssential: number; + public purchaseEssential: number; + public showEssentialBarChart = false; + public showCategoryBarChart = false; + public showCategoryDoughnutChart = false; + + public barChartDataEssential:any[]=[ + {data: 0, label: 'Essential', stack: '1'}, + {data: 0, label: 'Non-Essential', stack: '1'}, + ]; + public barChartLabelsEssential:string[] = ['All Purchases']; + public barChartOptionsEssential:any = { + responsive: true, + scales:{ + xAxes:[{ + stacked:true + }], + yAxes:[{ + stacked:true + }] + } + }; + public barChartTypeEssential:string = 'horizontalBar'; + + public barChartOptionsCategory:any = { + scaleShowVerticalLines: false, + responsive: true, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + callback: label => `£${label}` + } + }] + }, + tooltips: { + callbacks: { + label: (tooltip, data) => { + return this.tooltipLabelCallback(tooltip, data); + }, + }, + }, + }; + public barChartTypeCategory:string = 'bar'; + public barChartLegendCategory:boolean = false; + public barChartDataCategory:any[]=[]; + public barChartLabelsCategory:string[] = []; + weekPurchaseList = { first: 0, second: 0, @@ -140,11 +210,22 @@ export class DashboardCustomerComponent implements OnInit { constructor( private api: ApiService, + private currencyPipe: CurrencyPipe, ) { + this.setDate(); this.api.customerStats().subscribe( result => { this.setWeekPurchaseList(result.weeks); this.setSectorList(result.sectors); + this.setWeekData(result); + this.setChartData(result.data.cat_total); + 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'); @@ -153,6 +234,35 @@ export class DashboardCustomerComponent implements OnInit { ); } + private setChartData(dataCat: any) { + this.barChartLabelsCategory = Object.keys(dataCat); + let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); + this.barChartDataCategory = [ + {data: barChartDataCategoryInitial, label: 'Series A'}, + ]; + this.showCategoryBarChart = true; + if (this.weekList1) { + let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;}); + this.doughnutChartDataCategory = [ + {data: doughnutChartDataCategoryInitial, label: 'Series A'}, + ]; + // setTimeout is currently a workaround for ng2-charts labels + setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0); + this.showCategoryDoughnutChart = true; + } + } + + private setDate () { + this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD'); + } + + private setWeekData (data: any) { + function prop(obj: T, key: K) { + return obj[key]; + } + this.weekList1 = prop(data.data.categories, this.myWeek1); + } + public setWeekPurchaseList (data: any) { this.weekPurchaseList = { first: data.first, @@ -173,6 +283,29 @@ export class DashboardCustomerComponent implements OnInit { this.sectorLimit = 22; } + public convertHex(hex: string, opacity: number) { + hex = hex.replace('#', ''); + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')'; + return rgba; + } + + private tooltipLabelCallback(tooltipItem: any, data: any) { + var dataset = data.datasets[tooltipItem.datasetIndex]; + var value = dataset.data[tooltipItem.index]; + return this.currencyPipe.transform(value, 'GBP', 'symbol', '1.2-2'); + } + + // events + public chartClicked(e: any): void { + } + + public chartHovered(e: any): void { + } + ngOnInit(): void { } } diff --git a/src/app/dashboard/transaction-log.component.html b/src/app/dashboard/transaction-log.component.html index 424897e..9b07ec1 100644 --- a/src/app/dashboard/transaction-log.component.html +++ b/src/app/dashboard/transaction-log.component.html @@ -1,49 +1,6 @@
    -
    -
    - Log of Outgoing Transactions - This lists all purchases that have been submitted. -
    -
    - - - - - - - - - - - -
    SellerValuePurchase Time
    - - - -
    -
    - No Transactions available. -
    -
    Recurring Transactions @@ -140,6 +97,49 @@ No Recurring Transactions.
    +
    +
    + Log of Outgoing Transactions + This lists all purchases that have been submitted. +
    +
    + + + + + + + + + + + +
    SellerValuePurchase Time
    + + + +
    +
    + No Transactions available. +
    +
    diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 8e4d931..58baf2c 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -25,6 +25,11 @@