diff --git a/CHANGELOG.md b/CHANGELOG.md index 44f290b..7bd6848 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ # Next Release +# v0.1.7 + +* Fixed category on upload highlighting + # v0.1.6 * Changed layout of category choosing on upload diff --git a/package-lock.json b/package-lock.json index 7334a98..34edd94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "localloop-web", - "version": "0.1.4", + "version": "0.1.7", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 5d7e254..1ef9f74 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "localloop-web", - "version": "0.1.4", + "version": "0.1.7", "description": "LocalLoop Web - Web interface for LocalLoop app", "author": "", "url": "http://www.peartrade.org", diff --git a/src/app/dashboard/add-data.component.html b/src/app/dashboard/add-data.component.html index f1630c4..6284ee2 100644 --- a/src/app/dashboard/add-data.component.html +++ b/src/app/dashboard/add-data.component.html @@ -72,7 +72,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..0d17e88 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,33 @@ 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'}, + ]; + 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; + this.showCategoryBarChart = 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 +281,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..13887c7 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -97,6 +97,14 @@
    • +
  • + +
    +
    +
    Click to Close Menu
    +
    +     +
    • diff --git a/src/app/layouts/full-layout.component.ts b/src/app/layouts/full-layout.component.ts index 453a8df..ff74ceb 100644 --- a/src/app/layouts/full-layout.component.ts +++ b/src/app/layouts/full-layout.component.ts @@ -39,7 +39,6 @@ export class FullLayoutComponent implements OnInit { .logout() .subscribe( result => { - console.log('Logged out!'); localStorage.clear(); this.router.navigate(['/login']); } diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index 5a6376b..0ddfafb 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -1,18 +1,18 @@ -
    -
    -
    -
    -

    All Purchases

    -
    -
    -
    - +
    +
    +
    +
    +

    All Purchases

    +
    + +
    +
    diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index bae839f..80f64e1 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { ApiService } from '../providers/api-service'; import { CustPiesService } from '../providers/cust-pies.service'; import { DataType } from '../shared/data-types.enum'; import { ChartData } from '../_interfaces/chart-data'; +import 'rxjs/add/operator/map'; @Component({ selector: 'panel-pie', @@ -11,27 +13,32 @@ export class PiePanel implements OnInit { public chartType = 'doughnut'; public chartLegend = true; - public doughnutChartLabels: string[] = []; - public doughnutChartData: number[] = []; - - - //Old - - // public mainChartElements = 7; + public doughnutChartDataLocal: number[] = []; + public doughnutChartLabelsLocal: string[] = []; constructor( + private api: ApiService, private pieService: CustPiesService, - ) { } - - public ngOnInit(): void { - this.pieService.getPie() - .subscribe( result => this.setData(result.pie) ); + ) { + this.pieService.getPie().subscribe( + result => { + this.setChartData(result.local_all); + }, + error => { + console.log('Retrieval Error'); + console.log( error._body ); + } + ); } - private setData(data: any) { - this.doughnutChartData = Object.keys(data).map(key => data[key]); + public ngOnInit(): void { + + } + + private setChartData(dataLocal: any) { + this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]); // setTimeout is currently a workaround for ng2-charts labels - setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0); + setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0); } // convert Hex to RGBA @@ -45,13 +52,4 @@ export class PiePanel implements OnInit { return rgba; } - // events - public chartClicked(e: any): void { - console.log(e); - } - - public chartHovered(e: any): void { - console.log(e); - } - }