diff --git a/src/app/_interfaces/chart-data.ts b/src/app/_interfaces/chart-data.ts new file mode 100644 index 0000000..747f9a2 --- /dev/null +++ b/src/app/_interfaces/chart-data.ts @@ -0,0 +1,4 @@ +export interface ChartData { + data: Array; + label: string; +} diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index c85910e..4ee858b 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -9,73 +9,5 @@ [dataType]="widget.dataType"> -
-
-
-
-

Customers

-
November 2015
-
-
- - -
-
-
- -
-
-
-
    -
  • -
    Customers
    - 24.093 Users (20%) -
    -
    -
    -
    • -
  • -
    Pageviews
    - 78.706 Views (60%) -
    -
    -
    -
    • -
  • -
    New Users
    - 22.123 Users (80%) -
    -
    -
    -
    • -
  • -
    Bounce Rate
    - 40.15% -
    -
    -
    -
    • -
-
-
+ diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index f5530b7..444a17c 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,15 +1,14 @@ -import { Directive, Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { GraphWidget } from '../widgets/graph-widget.component'; import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; +import { GraphPanel } from '../panels/graph-panel.component'; import { DataType } from '../shared/data-types.enum'; @Component({ templateUrl: 'dashboard.component.html' }) -export class DashboardComponent implements OnInit { - - shuffledArray: any; +export class DashboardComponent { public widgetList = [ { @@ -52,153 +51,5 @@ export class DashboardComponent implements OnInit { }, ]; - constructor( - ) { - this.shuffle = this.shuffledArray; - } - - // Fisher-Yates shuffle function - public shuffle(array) { - return new Promise(resolve => { - let counter = array.length; - - // While there are elements in the array - while (counter > 0) { - // Pick a random index - const index = Math.floor(Math.random() * counter); - - // Decrease counter by 1 - counter--; - - // And swap the last element with it - const temp = array[counter]; - array[counter] = array[index]; - array[index] = temp; - } - - this.shuffledArray = array; - resolve(true); - }); - } - - public brandSuccess = '#4dbd74'; - public brandInfo = '#63c2de'; - public brandDanger = '#f86c6b'; - - // 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 { - console.log(e); - } - - public chartHovered(e: any): void { - console.log(e); - } - - // mainChart - - public random(min: number, max: number) { - return Math.floor(Math.random() * (max - min + 1) + min); - } - - public mainChartElements = 27; - public mainChartData1: Array = []; - public mainChartData2: Array = []; - public mainChartData3: Array = []; - - public mainChartData: Array = [ - { - data: this.mainChartData1, - label: 'Current' - }, - { - data: this.mainChartData2, - label: 'Previous' - }, - { - data: this.mainChartData3, - label: 'BEP' - } - ]; - /* tslint:disable:max-line-length */ - public mainChartLabels: Array = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; - /* tslint:enable:max-line-length */ - public mainChartOptions: any = { - responsive: true, - maintainAspectRatio: false, - scales: { - xAxes: [{ - gridLines: { - drawOnChartArea: false, - }, - ticks: { - callback: function(value: any) { - return value.charAt(0); - } - } - }], - yAxes: [{ - ticks: { - beginAtZero: true, - maxTicksLimit: 5, - stepSize: Math.ceil(250 / 5), - max: 250 - } - }] - }, - elements: { - line: { - borderWidth: 2 - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - } - }, - legend: { - display: false - } - }; - public mainChartColours: Array = [ - { // brandInfo - backgroundColor: this.convertHex(this.brandInfo, 10), - borderColor: this.brandInfo, - pointHoverBackgroundColor: '#fff' - }, - { // brandSuccess - backgroundColor: 'transparent', - borderColor: this.brandSuccess, - pointHoverBackgroundColor: '#fff' - }, - { // brandDanger - backgroundColor: 'transparent', - borderColor: this.brandDanger, - pointHoverBackgroundColor: '#fff', - borderWidth: 1, - borderDash: [8, 5] - } - ]; - public mainChartLegend = false; - public mainChartType = 'line'; - - ngOnInit(): void { - // generate random values for mainChart - for (let i = 0; i <= this.mainChartElements; i++) { - this.mainChartData1.push(this.random(50, 200)); - this.mainChartData2.push(this.random(80, 100)); - this.mainChartData3.push(this.random(50, 200)); - } - } + constructor() { } } diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 0427e81..55bb110 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -16,6 +16,7 @@ import { TransactionLogComponent } from './transaction-log.component'; import { GraphWidget } from '../widgets/graph-widget.component'; import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; +import { GraphPanel } from '../panels/graph-panel.component'; import { DashboardRoutingModule } from './dashboard.routing'; import { OrgResultComponent } from '../shared/org-result.component'; @@ -45,6 +46,7 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone FeedbackComponent, GraphWidget, OrgBarSnippetComponent, + GraphPanel, ], providers: [ CurrencyPipe diff --git a/src/app/panels/graph-panel.component.html b/src/app/panels/graph-panel.component.html new file mode 100644 index 0000000..35d1aa1 --- /dev/null +++ b/src/app/panels/graph-panel.component.html @@ -0,0 +1,29 @@ +
+
+
+
+

Customers

+
+
+ +
+
+
+ +
+
+
diff --git a/src/app/panels/graph-panel.component.ts b/src/app/panels/graph-panel.component.ts new file mode 100644 index 0000000..8497dce --- /dev/null +++ b/src/app/panels/graph-panel.component.ts @@ -0,0 +1,145 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { OrgGraphsService } from '../providers/org-graphs.service'; +import { DataType } from '../shared/data-types.enum'; +import { ChartData } from '../_interfaces/chart-data'; +import * as moment from 'moment'; + +@Component({ + selector: 'panel-graph', + templateUrl: 'graph-panel.component.html', +}) +export class GraphPanel implements OnInit { + + public chartType = 'line'; + public chartLegend = true; + + public rawChartData: Array = []; + + public chartData: Array = [ + { + data: [], + label: 'This Week' + }, + { + data: [], + label: 'Last Week' + }, + { + data: [], + label: 'Week Before Last' + } + ]; + + public rawChartLabels: Array = []; + public chartLabels: Array = []; + + public brandSuccess = '#4dbd74'; + public brandInfo = '#63c2de'; + public brandDanger = '#f86c6b'; + + public mainChartElements = 7; + + public mainChartOptions: any = { + responsive: true, + maintainAspectRatio: false, + scales: { + xAxes: [{ + type: 'time', + time: { + unit: 'day', + displayFormats: { + day: 'dddd', + }, + tooltipFormat: 'dddd', + }, + gridLines: { + drawOnChartArea: false, + }, + }], + yAxes: [{ + ticks: { + beginAtZero: true, + stepSize: 1, + } + }] + }, + elements: { + line: { + borderWidth: 2 + }, + point: { + radius: 0, + hitRadius: 10, + hoverRadius: 4, + hoverBorderWidth: 3, + } + }, + }; + public mainChartColours: Array = [ + { // brandInfo + backgroundColor: this.convertHex(this.brandInfo, 10), + borderColor: this.brandInfo, + pointHoverBackgroundColor: '#fff' + }, + { // brandSuccess + backgroundColor: 'transparent', + borderColor: this.brandSuccess, + pointHoverBackgroundColor: '#fff' + }, + { // brandDanger + backgroundColor: 'transparent', + borderColor: this.brandDanger, + pointHoverBackgroundColor: '#fff', + borderWidth: 1, + borderDash: [8, 5] + } + ]; + + constructor( + private graphService: OrgGraphsService, + ) { } + + 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) ); + } + + 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); + } + + // 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 { + console.log(e); + } + + public chartHovered(e: any): void { + console.log(e); + } + + // mainChart + + public random(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1) + min); + } + + +} diff --git a/src/app/providers/org-graphs.service.ts b/src/app/providers/org-graphs.service.ts index aeea889..859361c 100644 --- a/src/app/providers/org-graphs.service.ts +++ b/src/app/providers/org-graphs.service.ts @@ -7,7 +7,8 @@ export class OrgGraphsService { constructor(private api: ApiService) { } - public getGraph(name: string) { - return this.api.post(this.orgGraphUrl, { graph: name }); + public getGraph(name: string, data: any = {}) { + data.graph = name; + return this.api.post(this.orgGraphUrl, data); } } diff --git a/tslint.json b/tslint.json index ee44f97..b4db95c 100644 --- a/tslint.json +++ b/tslint.json @@ -99,7 +99,7 @@ ], "directive-selector": [true, "attribute", "app", "camelCase"], - "component-selector": [true, "element", ["app", "widget", "snippet"], "kebab-case"], + "component-selector": [true, "element", ["app", "widget", "snippet", "panel"], "kebab-case"], "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true, @@ -107,7 +107,7 @@ "no-output-rename": true, "use-life-cycle-interface": true, "use-pipe-transform-interface": true, - "component-class-suffix": [true, "Component", "Widget"], + "component-class-suffix": [true, "Component", "Widget", "Panel"], "directive-class-suffix": true, "no-access-missing-member": true, "templates-use-public": true,