From 9545601d01838fc2185e1e313d1a5c545b0aa857 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Thu, 14 Dec 2017 16:44:23 +0000 Subject: [PATCH] working graph widgets and local doughnut chart --- src/app/app.module.ts | 2 + .../dashboard-customer.component.html | 151 +++++++++++++++++- .../dashboard/dashboard-customer.component.ts | 24 --- src/app/panels/pie-panel.component.html | 4 +- src/app/panels/pie-panel.component.ts | 54 ++----- src/app/providers/cust-pies.service.ts | 14 ++ src/app/widgets/graph-widget.component.ts | 15 ++ 7 files changed, 194 insertions(+), 70 deletions(-) create mode 100644 src/app/providers/cust-pies.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8821973..0f257e7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,7 @@ import { OrgGraphsService } from './providers/org-graphs.service'; import { CustGraphsService } from './providers/cust-graphs.service'; import { OrgSnippetsService } from './providers/org-snippets.service'; import { CustSnippetsService } from './providers/cust-snippets.service'; +import { CustPiesService } from './providers/cust-pies.service'; // Layouts import { FullLayoutComponent } from './layouts/full-layout.component'; @@ -69,6 +70,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; OrgSnippetsService, CustGraphsService, CustSnippetsService, + CustPiesService, { provide: LocationStrategy, useClass: HashLocationStrategy diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index c1fdcf6..3b9f793 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -12,8 +12,151 @@
-
- -
-
+
+ +
+
+
+
+
+
+

Purchases Per Week

+
+
+
+
    +
  • + This Week + 191,235 (56%) +
    +
    +
    +
    +
    +
    • +
  • + Last Week + 51,223 (15%) +
    +
    +
    +
    +
    +
    • +
  • + 2 Weeks Ago + 37,564 (11%) +
    +
    +
    +
    +
    +
    • +
  • + 3 Weeks Ago + 27,319 (8%) +
    +
    +
    +
    +
    +
    • +
+
+
+
+
+
+
+
+
+
+

Sector Purchase Amounts

+
+
+
+
    +
  • + +
    +
    Sector A
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 1.924 +
    +
    • +
  • + +
    +
    Sector B
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 1.224 +
    +
    • +
  • + +
    +
    Sector C
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 1.163 +
    +
    • +
  • + +
    +
    Sector D
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 928 +
    +
    • +
  • + +
    +
    Sector E
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 893 +
    +
    • +
  • + +
    +
    Sector F
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 121.924 +
    +
    • +
  • + +
    +
    Sector G
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 12.125 +
    +
    • +
+
+
+
+
+ diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 68c4913..87b5419 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -26,18 +26,6 @@ export class DashboardCustomerComponent implements OnInit { public polarAreaChartType = 'polarArea'; public widgetList = [ - { - type: 'graph', - name: 'total_today', - title: 'Total Today', - dataType: DataType.currency, - }, - { - type: 'graph', - name: 'avg_spend_today', - title: 'Avg. Spend Today', - dataType: DataType.currency, - }, { type: 'graph', name: 'total_last_week', @@ -64,18 +52,6 @@ export class DashboardCustomerComponent implements OnInit { title: 'Last Month Avg. Spend', dataType: DataType.currency, }, - { - type: 'graph', - name: 'total_user', - title: 'User Total', - dataType: DataType.currency, - }, - { - type: 'graph', - name: 'avg_spend_user', - title: 'User Avg. Spend', - dataType: DataType.currency, - }, ]; constructor( diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index 291c778..bb90dff 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -16,8 +16,8 @@
= []; - - public chartData: Array = [ - { - data: [], - label: 'This Week' - }, - { - data: [], - label: 'Last Week' - }, - { - data: [], - label: 'Week Before Last' - } - ]; - - public rawChartLabels: Array = []; - public chartLabels: Array = []; - // public mainChartElements = 7; constructor( - private graphService: OrgGraphsService, + private pieService: CustPiesService, ) { } public ngOnInit(): void { - // const end = moment().startOf('day'); - // const start = end.clone().subtract(this.mainChartElements * 3, 'days'); - // this.graphService.getGraph('customers_range', { - // start: start.format('YYYY-MM-DD'), - // end: end.format('YYYY-MM-DD'), - // }).subscribe( result => this.setData(result.graph) ); + this.pieService.getPie() + .subscribe( result => this.setData(result.pie) ); } - // private setData(data: any) { - // this.chartLabels = data.labels.slice(this.mainChartElements * 2, this.mainChartElements * 3); - // this.chartData[2].data = data.data.slice(0, this.mainChartElements); - // this.chartData[1].data = data.data.slice(this.mainChartElements, this.mainChartElements * 2); - // this.chartData[0].data = data.data.slice(this.mainChartElements * 2, this.mainChartElements * 3); - // } + private setData(data: any) { + this.doughnutChartData = Object.values(data); + console.log(this.chartData); + // setTimeout is currently a workaround for ng2-charts labels + setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0); + console.log(this.chartLabels); + } // convert Hex to RGBA public convertHex(hex: string, opacity: number) { diff --git a/src/app/providers/cust-pies.service.ts b/src/app/providers/cust-pies.service.ts new file mode 100644 index 0000000..4608369 --- /dev/null +++ b/src/app/providers/cust-pies.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { ApiService } from './api-service'; +import { Observable } from 'rxjs/Rx'; + +@Injectable() +export class CustPiesService { + private custPieUrl = '/v1/customer/pies'; + + constructor(private api: ApiService) { } + + public getPie(): Observable { + return this.api.post(this.custPieUrl); + } +} diff --git a/src/app/widgets/graph-widget.component.ts b/src/app/widgets/graph-widget.component.ts index 3d99096..8c5b55d 100644 --- a/src/app/widgets/graph-widget.component.ts +++ b/src/app/widgets/graph-widget.component.ts @@ -35,12 +35,21 @@ export class GraphWidget implements OnInit { maintainAspectRatio: false, scales: { xAxes: [{ + type: 'time', + time: { + unit: 'day', + displayFormats: { + day: 'MMM D', + }, + tooltipFormat: 'MMM D', + }, gridLines: { color: 'transparent', zeroLineColor: 'transparent' }, ticks: { fontSize: 2, + source: 'data', fontColor: 'transparent', } @@ -106,6 +115,12 @@ export class GraphWidget implements OnInit { private setData(data: any) { this.setChartData(data.data); this.setChartLabels(data.labels); + this.setChartBounds(data.bounds); + } + + private setChartBounds(data) { + this.lineChartOptions.scales.xAxes[0].time.max = data.max; + this.lineChartOptions.scales.xAxes[0].time.min = data.min; } private setChartData(data: Array) {