diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index d86a1f2..826cae5 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -18,40 +18,19 @@

Spend by company and Industrial sector

- +
-
-
-
-
-
-

All Purchases by Category

-
-
-
- -
-
-
-
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index cb913fa..72e6478 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -128,7 +128,63 @@ export class DashboardComponent { public barChartDataCategory:any[]=[]; public barChartLabelsCategory:string[] = []; - + public lineChartDataSector: ChartDataSets[] = [ + { data: [], label: '' }, + ]; + public lineChartLabelsSector: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December']; + public lineChartOptionsSector: (ChartOptions & { annotation: any }) = { + responsive: true, + scales: { + // We use this empty structure as a placeholder for dynamic theming. + xAxes: [{}], + yAxes: [{}] + }, + annotation: { + annotations: [ + { + type: 'line', + mode: 'vertical', + scaleID: 'x-axis-0', + value: 'March', + borderColor: 'orange', + borderWidth: 2, + label: { + enabled: true, + fontColor: 'orange', + content: 'LineAnno' + } + }, + ], + }, + }; + public lineChartColorsSector: Color[] = [ + { // grey + backgroundColor: 'rgba(148,159,177,0.2)', + borderColor: 'rgba(148,159,177,1)', + pointBackgroundColor: 'rgba(148,159,177,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(148,159,177,0.8)' + }, + { // dark grey + backgroundColor: 'rgba(77,83,96,0.2)', + borderColor: 'rgba(77,83,96,1)', + pointBackgroundColor: 'rgba(77,83,96,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(77,83,96,1)' + }, + { // red + backgroundColor: 'rgba(255,0,0,0.3)', + borderColor: 'red', + pointBackgroundColor: 'rgba(148,159,177,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(148,159,177,0.8)' + } + ]; + public lineChartLegendSector = true; + public lineChartTypeSector = 'line'; weekPurchaseList = { first: 0, @@ -160,7 +216,7 @@ export class DashboardComponent { result => { this.setWeekPurchaseList(result.weeks); this.setWeekData(result); - this.setChartData(result.data.cat_total); + this.setChartDataCat(result.data.cat_total); this.totalCategoryList = result.data.cat_list; if (this.totalCategoryList) { this.showTotalCategoryList = true; @@ -180,7 +236,7 @@ export class DashboardComponent { ); } - private setChartData(dataCat: any) { + private setChartDataCat(dataCat: any) { this.barChartLabelsCategory = Object.keys(dataCat); let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); this.barChartDataCategory = [ @@ -198,6 +254,24 @@ export class DashboardComponent { } } + private setChartDataSector(dataSec: any) { + this.barChartLabelsCategory = Object.keys(dataSec); + let lineChartDataSectorInitial = Object.keys(dataSec).map(key => dataSec[key]); + this.lineChartDataSector = [ + {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'); } diff --git a/src/app/panels/org-pie-panel.component.ts b/src/app/panels/org-pie-panel.component.ts index 6ce9109..327788d 100644 --- a/src/app/panels/org-pie-panel.component.ts +++ b/src/app/panels/org-pie-panel.component.ts @@ -42,17 +42,6 @@ export class OrgPiePanel implements OnInit { setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0); } - // convert Hex to RGBA - 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; - } - // events public chartClicked(e: any): void { }