From 314fc136967f9cf717a1623e266d8453505db52c Mon Sep 17 00:00:00 2001 From: barhen <43050223+barhen@users.noreply.github.com> Date: Wed, 19 Jan 2022 18:45:00 +0000 Subject: [PATCH] worked on the dashboard 19th January, 2022 20% done --- angular.json | 2 +- src/app/mock-api/dashboards/analytics/api.ts | 1 + .../admin/Dashboard/dashboard.component.html | 324 +- .../admin/Dashboard/dashboard.component.ts | 3290 ++++++++++++++++- .../pages/admin/Dashboard/dashboard.module.ts | 31 +- .../admin/Dashboard/dashboard.routing.ts | 9 + .../admin/Dashboard/dashboard.service.ts | 50 + 7 files changed, 3687 insertions(+), 20 deletions(-) create mode 100644 src/app/pages/admin/Dashboard/dashboard.routing.ts create mode 100644 src/app/pages/admin/Dashboard/dashboard.service.ts diff --git a/angular.json b/angular.json index 11b58c1..b5c585a 100644 --- a/angular.json +++ b/angular.json @@ -17,7 +17,7 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/fuse", + "outputPath": "dist/teso", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", diff --git a/src/app/mock-api/dashboards/analytics/api.ts b/src/app/mock-api/dashboards/analytics/api.ts index 891be01..a8db728 100644 --- a/src/app/mock-api/dashboards/analytics/api.ts +++ b/src/app/mock-api/dashboards/analytics/api.ts @@ -31,6 +31,7 @@ export class AnalyticsMockApi // ----------------------------------------------------------------------------------------------------- // @ Sales - GET // ----------------------------------------------------------------------------------------------------- + console.log(analyticsData) this._fuseMockApiService .onGet('api/dashboards/analytics') .reply(() => [200, cloneDeep(this._analytics)]); diff --git a/src/app/pages/admin/Dashboard/dashboard.component.html b/src/app/pages/admin/Dashboard/dashboard.component.html index 0076ce6..6926f1a 100644 --- a/src/app/pages/admin/Dashboard/dashboard.component.html +++ b/src/app/pages/admin/Dashboard/dashboard.component.html @@ -1,11 +1,321 @@ -
+
- -
+
- -
+ +
+
+
Analytics dashboard
+
Monitor metrics, check statistics and review performance on Teso
+
-
+
+ +
+ +
+
+
+
Visitors Overview +
+
Number of unique visitors
+
+
+ +
+ + + + + +
+
+
+
+ + +
+
+ +
+
+
Coupon Redemptions
+
+ + + + + + +
+
+
+
{{data.conversions.amount | number:'1.0-0'}} +
+
+ + +
+ 2% + below target +
+
+
+
+ +
+
+ +
+
+
Total Sales
+
+ + + + + + +
+
+
+
{{data.impressions.amount | number:'1.0-0'}} +
+
+ + +
+ 4% + below target +
+
+
+
+ +
+
+ +
+
+
Visits
+
+ + + + + + +
+
+
+
{{data.visits.amount | number:'1.0-0'}} +
+
+ + +
+ 4% + below target +
+
+
+
+ +
+
+
+ +
+ +
+
+
Recent transactions
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + +
+ Transaction ID + + + {{transaction.transactionId}} + + + Date + + + {{transaction.date | date:'MMM dd, y'}} + + + Name + + + {{transaction.name}} + + + Amount Discounted + + + {{(transaction.amount - 900) | currency:'GH¢'}} + + + Amount Paid + + + {{transaction.amount | currency:'GH¢'}} + + + Status + + + {{transaction.status}} + + + +
+
+
+ + +
+
+
+
+ Coupon Statistics
+
+ Coupon Views
+ +
+
+ + +
+
+
+ The following Teso users have shown interest in some of your coupons. Click to further engage them by sending them personalized coupons +
+
+ The chart below depicts your shops top performing types of coupons +
+
+
+
+
+ +
+
+
Freebies
+
{{dataE.budget.expenses | currency:'GH¢'}}
+ + +
+
+
2.6%
+ +
+
+
+
+
+
+ +
+
+
Discount
+
{{dataE.budget.savings | currency:'GH¢'}}
+ + +
+
+
12.7%
+ +
+
+
+
+
+
+ +
+
+
Proximity Coupons
+
{{dataE.budget.bills | currency:'GH¢'}}
+ +
+
+
105.7%
+ +
+
+ +
+
+ +
+
+
+
\ No newline at end of file diff --git a/src/app/pages/admin/Dashboard/dashboard.component.ts b/src/app/pages/admin/Dashboard/dashboard.component.ts index d4af042..b91ccce 100644 --- a/src/app/pages/admin/Dashboard/dashboard.component.ts +++ b/src/app/pages/admin/Dashboard/dashboard.component.ts @@ -1,16 +1,3296 @@ -import { Component, ViewEncapsulation } from '@angular/core'; - +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { ApexOptions } from 'ng-apexcharts'; +import { DashboardService } from './dashboard.service'; +import { MatSort } from '@angular/material/sort'; +import { MatTableDataSource } from '@angular/material/table'; +import moment from 'moment'; +export const analytics = { + visitors : { + series: { + 'this-year': [ + { + name: 'Visitors', + data: [ + { + x: moment().subtract(12, 'months').day(1).toDate(), + y: 4884 + }, + { + x: moment().subtract(12, 'months').day(4).toDate(), + y: 5351 + }, + { + x: moment().subtract(12, 'months').day(7).toDate(), + y: 5293 + }, + { + x: moment().subtract(12, 'months').day(10).toDate(), + y: 4908 + }, + { + x: moment().subtract(12, 'months').day(13).toDate(), + y: 5027 + }, + { + x: moment().subtract(12, 'months').day(16).toDate(), + y: 4837 + }, + { + x: moment().subtract(12, 'months').day(19).toDate(), + y: 4484 + }, + { + x: moment().subtract(12, 'months').day(22).toDate(), + y: 4071 + }, + { + x: moment().subtract(12, 'months').day(25).toDate(), + y: 4124 + }, + { + x: moment().subtract(12, 'months').day(28).toDate(), + y: 4563 + }, + { + x: moment().subtract(11, 'months').day(1).toDate(), + y: 3820 + }, + { + x: moment().subtract(11, 'months').day(4).toDate(), + y: 3968 + }, + { + x: moment().subtract(11, 'months').day(7).toDate(), + y: 4102 + }, + { + x: moment().subtract(11, 'months').day(10).toDate(), + y: 3941 + }, + { + x: moment().subtract(11, 'months').day(13).toDate(), + y: 3566 + }, + { + x: moment().subtract(11, 'months').day(16).toDate(), + y: 3853 + }, + { + x: moment().subtract(11, 'months').day(19).toDate(), + y: 3853 + }, + { + x: moment().subtract(11, 'months').day(22).toDate(), + y: 4069 + }, + { + x: moment().subtract(11, 'months').day(25).toDate(), + y: 3879 + }, + { + x: moment().subtract(11, 'months').day(28).toDate(), + y: 4298 + }, + { + x: moment().subtract(10, 'months').day(1).toDate(), + y: 4355 + }, + { + x: moment().subtract(10, 'months').day(4).toDate(), + y: 4065 + }, + { + x: moment().subtract(10, 'months').day(7).toDate(), + y: 3650 + }, + { + x: moment().subtract(10, 'months').day(10).toDate(), + y: 3379 + }, + { + x: moment().subtract(10, 'months').day(13).toDate(), + y: 3191 + }, + { + x: moment().subtract(10, 'months').day(16).toDate(), + y: 2968 + }, + { + x: moment().subtract(10, 'months').day(19).toDate(), + y: 2957 + }, + { + x: moment().subtract(10, 'months').day(22).toDate(), + y: 3313 + }, + { + x: moment().subtract(10, 'months').day(25).toDate(), + y: 3708 + }, + { + x: moment().subtract(10, 'months').day(28).toDate(), + y: 3586 + }, + { + x: moment().subtract(9, 'months').day(1).toDate(), + y: 3965 + }, + { + x: moment().subtract(9, 'months').day(4).toDate(), + y: 3901 + }, + { + x: moment().subtract(9, 'months').day(7).toDate(), + y: 3410 + }, + { + x: moment().subtract(9, 'months').day(10).toDate(), + y: 3748 + }, + { + x: moment().subtract(9, 'months').day(13).toDate(), + y: 3929 + }, + { + x: moment().subtract(9, 'months').day(16).toDate(), + y: 3846 + }, + { + x: moment().subtract(9, 'months').day(19).toDate(), + y: 3771 + }, + { + x: moment().subtract(9, 'months').day(22).toDate(), + y: 4015 + }, + { + x: moment().subtract(9, 'months').day(25).toDate(), + y: 3589 + }, + { + x: moment().subtract(9, 'months').day(28).toDate(), + y: 3150 + }, + { + x: moment().subtract(8, 'months').day(1).toDate(), + y: 3050 + }, + { + x: moment().subtract(8, 'months').day(4).toDate(), + y: 2574 + }, + { + x: moment().subtract(8, 'months').day(7).toDate(), + y: 2823 + }, + { + x: moment().subtract(8, 'months').day(10).toDate(), + y: 2848 + }, + { + x: moment().subtract(8, 'months').day(13).toDate(), + y: 3000 + }, + { + x: moment().subtract(8, 'months').day(16).toDate(), + y: 3216 + }, + { + x: moment().subtract(8, 'months').day(19).toDate(), + y: 3299 + }, + { + x: moment().subtract(8, 'months').day(22).toDate(), + y: 3768 + }, + { + x: moment().subtract(8, 'months').day(25).toDate(), + y: 3524 + }, + { + x: moment().subtract(8, 'months').day(28).toDate(), + y: 3918 + }, + { + x: moment().subtract(7, 'months').day(1).toDate(), + y: 4145 + }, + { + x: moment().subtract(7, 'months').day(4).toDate(), + y: 4378 + }, + { + x: moment().subtract(7, 'months').day(7).toDate(), + y: 3941 + }, + { + x: moment().subtract(7, 'months').day(10).toDate(), + y: 3932 + }, + { + x: moment().subtract(7, 'months').day(13).toDate(), + y: 4380 + }, + { + x: moment().subtract(7, 'months').day(16).toDate(), + y: 4243 + }, + { + x: moment().subtract(7, 'months').day(19).toDate(), + y: 4367 + }, + { + x: moment().subtract(7, 'months').day(22).toDate(), + y: 3879 + }, + { + x: moment().subtract(7, 'months').day(25).toDate(), + y: 4357 + }, + { + x: moment().subtract(7, 'months').day(28).toDate(), + y: 4181 + }, + { + x: moment().subtract(6, 'months').day(1).toDate(), + y: 4619 + }, + { + x: moment().subtract(6, 'months').day(4).toDate(), + y: 4769 + }, + { + x: moment().subtract(6, 'months').day(7).toDate(), + y: 4901 + }, + { + x: moment().subtract(6, 'months').day(10).toDate(), + y: 4640 + }, + { + x: moment().subtract(6, 'months').day(13).toDate(), + y: 5128 + }, + { + x: moment().subtract(6, 'months').day(16).toDate(), + y: 5015 + }, + { + x: moment().subtract(6, 'months').day(19).toDate(), + y: 5360 + }, + { + x: moment().subtract(6, 'months').day(22).toDate(), + y: 5608 + }, + { + x: moment().subtract(6, 'months').day(25).toDate(), + y: 5272 + }, + { + x: moment().subtract(6, 'months').day(28).toDate(), + y: 5660 + }, + { + x: moment().subtract(5, 'months').day(1).toDate(), + y: 5836 + }, + { + x: moment().subtract(5, 'months').day(4).toDate(), + y: 5659 + }, + { + x: moment().subtract(5, 'months').day(7).toDate(), + y: 5575 + }, + { + x: moment().subtract(5, 'months').day(10).toDate(), + y: 5474 + }, + { + x: moment().subtract(5, 'months').day(13).toDate(), + y: 5427 + }, + { + x: moment().subtract(5, 'months').day(16).toDate(), + y: 5865 + }, + { + x: moment().subtract(5, 'months').day(19).toDate(), + y: 5700 + }, + { + x: moment().subtract(5, 'months').day(22).toDate(), + y: 6052 + }, + { + x: moment().subtract(5, 'months').day(25).toDate(), + y: 5760 + }, + { + x: moment().subtract(5, 'months').day(28).toDate(), + y: 5648 + }, + { + x: moment().subtract(4, 'months').day(1).toDate(), + y: 5435 + }, + { + x: moment().subtract(4, 'months').day(4).toDate(), + y: 5239 + }, + { + x: moment().subtract(4, 'months').day(7).toDate(), + y: 5452 + }, + { + x: moment().subtract(4, 'months').day(10).toDate(), + y: 5416 + }, + { + x: moment().subtract(4, 'months').day(13).toDate(), + y: 5195 + }, + { + x: moment().subtract(4, 'months').day(16).toDate(), + y: 5119 + }, + { + x: moment().subtract(4, 'months').day(19).toDate(), + y: 4635 + }, + { + x: moment().subtract(4, 'months').day(22).toDate(), + y: 4833 + }, + { + x: moment().subtract(4, 'months').day(25).toDate(), + y: 4584 + }, + { + x: moment().subtract(4, 'months').day(28).toDate(), + y: 4822 + }, + { + x: moment().subtract(3, 'months').day(1).toDate(), + y: 4582 + }, + { + x: moment().subtract(3, 'months').day(4).toDate(), + y: 4348 + }, + { + x: moment().subtract(3, 'months').day(7).toDate(), + y: 4132 + }, + { + x: moment().subtract(3, 'months').day(10).toDate(), + y: 4099 + }, + { + x: moment().subtract(3, 'months').day(13).toDate(), + y: 3849 + }, + { + x: moment().subtract(3, 'months').day(16).toDate(), + y: 4010 + }, + { + x: moment().subtract(3, 'months').day(19).toDate(), + y: 4486 + }, + { + x: moment().subtract(3, 'months').day(22).toDate(), + y: 4403 + }, + { + x: moment().subtract(3, 'months').day(25).toDate(), + y: 4141 + }, + { + x: moment().subtract(3, 'months').day(28).toDate(), + y: 3780 + }, + { + x: moment().subtract(2, 'months').day(1).toDate(), + y: 3524 + }, + { + x: moment().subtract(2, 'months').day(4).toDate(), + y: 3212 + }, + { + x: moment().subtract(2, 'months').day(7).toDate(), + y: 3568 + }, + { + x: moment().subtract(2, 'months').day(10).toDate(), + y: 3800 + }, + { + x: moment().subtract(2, 'months').day(13).toDate(), + y: 3796 + }, + { + x: moment().subtract(2, 'months').day(16).toDate(), + y: 3870 + }, + { + x: moment().subtract(2, 'months').day(19).toDate(), + y: 3745 + }, + { + x: moment().subtract(2, 'months').day(22).toDate(), + y: 3751 + }, + { + x: moment().subtract(2, 'months').day(25).toDate(), + y: 3310 + }, + { + x: moment().subtract(2, 'months').day(28).toDate(), + y: 3509 + }, + { + x: moment().subtract(1, 'months').day(1).toDate(), + y: 3187 + }, + { + x: moment().subtract(1, 'months').day(4).toDate(), + y: 2918 + }, + { + x: moment().subtract(1, 'months').day(7).toDate(), + y: 3191 + }, + { + x: moment().subtract(1, 'months').day(10).toDate(), + y: 3437 + }, + { + x: moment().subtract(1, 'months').day(13).toDate(), + y: 3291 + }, + { + x: moment().subtract(1, 'months').day(16).toDate(), + y: 3317 + }, + { + x: moment().subtract(1, 'months').day(19).toDate(), + y: 3716 + }, + { + x: moment().subtract(1, 'months').day(22).toDate(), + y: 3260 + }, + { + x: moment().subtract(1, 'months').day(25).toDate(), + y: 3694 + }, + { + x: moment().subtract(1, 'months').day(28).toDate(), + y: 3598 + } + ] + } + ], + 'last-year': [ + { + name: 'Visitors', + data: [ + { + x: moment().subtract(12, 'months').day(1).toDate(), + y: 2021 + }, + { + x: moment().subtract(12, 'months').day(4).toDate(), + y: 1749 + }, + { + x: moment().subtract(12, 'months').day(7).toDate(), + y: 1654 + }, + { + x: moment().subtract(12, 'months').day(10).toDate(), + y: 1900 + }, + { + x: moment().subtract(12, 'months').day(13).toDate(), + y: 1647 + }, + { + x: moment().subtract(12, 'months').day(16).toDate(), + y: 1315 + }, + { + x: moment().subtract(12, 'months').day(19).toDate(), + y: 1807 + }, + { + x: moment().subtract(12, 'months').day(22).toDate(), + y: 1793 + }, + { + x: moment().subtract(12, 'months').day(25).toDate(), + y: 1892 + }, + { + x: moment().subtract(12, 'months').day(28).toDate(), + y: 1846 + }, + { + x: moment().subtract(11, 'months').day(1).toDate(), + y: 1804 + }, + { + x: moment().subtract(11, 'months').day(4).toDate(), + y: 1778 + }, + { + x: moment().subtract(11, 'months').day(7).toDate(), + y: 2015 + }, + { + x: moment().subtract(11, 'months').day(10).toDate(), + y: 1892 + }, + { + x: moment().subtract(11, 'months').day(13).toDate(), + y: 1708 + }, + { + x: moment().subtract(11, 'months').day(16).toDate(), + y: 1711 + }, + { + x: moment().subtract(11, 'months').day(19).toDate(), + y: 1570 + }, + { + x: moment().subtract(11, 'months').day(22).toDate(), + y: 1507 + }, + { + x: moment().subtract(11, 'months').day(25).toDate(), + y: 1451 + }, + { + x: moment().subtract(11, 'months').day(28).toDate(), + y: 1522 + }, + { + x: moment().subtract(10, 'months').day(1).toDate(), + y: 1977 + }, + { + x: moment().subtract(10, 'months').day(4).toDate(), + y: 2367 + }, + { + x: moment().subtract(10, 'months').day(7).toDate(), + y: 2798 + }, + { + x: moment().subtract(10, 'months').day(10).toDate(), + y: 3080 + }, + { + x: moment().subtract(10, 'months').day(13).toDate(), + y: 2856 + }, + { + x: moment().subtract(10, 'months').day(16).toDate(), + y: 2745 + }, + { + x: moment().subtract(10, 'months').day(19).toDate(), + y: 2750 + }, + { + x: moment().subtract(10, 'months').day(22).toDate(), + y: 2728 + }, + { + x: moment().subtract(10, 'months').day(25).toDate(), + y: 2436 + }, + { + x: moment().subtract(10, 'months').day(28).toDate(), + y: 2289 + }, + { + x: moment().subtract(9, 'months').day(1).toDate(), + y: 2804 + }, + { + x: moment().subtract(9, 'months').day(4).toDate(), + y: 2777 + }, + { + x: moment().subtract(9, 'months').day(7).toDate(), + y: 3024 + }, + { + x: moment().subtract(9, 'months').day(10).toDate(), + y: 2657 + }, + { + x: moment().subtract(9, 'months').day(13).toDate(), + y: 2218 + }, + { + x: moment().subtract(9, 'months').day(16).toDate(), + y: 1964 + }, + { + x: moment().subtract(9, 'months').day(19).toDate(), + y: 1674 + }, + { + x: moment().subtract(9, 'months').day(22).toDate(), + y: 1721 + }, + { + x: moment().subtract(9, 'months').day(25).toDate(), + y: 2005 + }, + { + x: moment().subtract(9, 'months').day(28).toDate(), + y: 1613 + }, + { + x: moment().subtract(8, 'months').day(1).toDate(), + y: 1071 + }, + { + x: moment().subtract(8, 'months').day(4).toDate(), + y: 1079 + }, + { + x: moment().subtract(8, 'months').day(7).toDate(), + y: 1133 + }, + { + x: moment().subtract(8, 'months').day(10).toDate(), + y: 1536 + }, + { + x: moment().subtract(8, 'months').day(13).toDate(), + y: 2016 + }, + { + x: moment().subtract(8, 'months').day(16).toDate(), + y: 2256 + }, + { + x: moment().subtract(8, 'months').day(19).toDate(), + y: 1934 + }, + { + x: moment().subtract(8, 'months').day(22).toDate(), + y: 1832 + }, + { + x: moment().subtract(8, 'months').day(25).toDate(), + y: 2075 + }, + { + x: moment().subtract(8, 'months').day(28).toDate(), + y: 1709 + }, + { + x: moment().subtract(7, 'months').day(1).toDate(), + y: 1831 + }, + { + x: moment().subtract(7, 'months').day(4).toDate(), + y: 1434 + }, + { + x: moment().subtract(7, 'months').day(7).toDate(), + y: 1293 + }, + { + x: moment().subtract(7, 'months').day(10).toDate(), + y: 1064 + }, + { + x: moment().subtract(7, 'months').day(13).toDate(), + y: 1080 + }, + { + x: moment().subtract(7, 'months').day(16).toDate(), + y: 1032 + }, + { + x: moment().subtract(7, 'months').day(19).toDate(), + y: 1280 + }, + { + x: moment().subtract(7, 'months').day(22).toDate(), + y: 1344 + }, + { + x: moment().subtract(7, 'months').day(25).toDate(), + y: 1835 + }, + { + x: moment().subtract(7, 'months').day(28).toDate(), + y: 2287 + }, + { + x: moment().subtract(6, 'months').day(1).toDate(), + y: 2692 + }, + { + x: moment().subtract(6, 'months').day(4).toDate(), + y: 2250 + }, + { + x: moment().subtract(6, 'months').day(7).toDate(), + y: 1814 + }, + { + x: moment().subtract(6, 'months').day(10).toDate(), + y: 1906 + }, + { + x: moment().subtract(6, 'months').day(13).toDate(), + y: 1973 + }, + { + x: moment().subtract(6, 'months').day(16).toDate(), + y: 1882 + }, + { + x: moment().subtract(6, 'months').day(19).toDate(), + y: 2333 + }, + { + x: moment().subtract(6, 'months').day(22).toDate(), + y: 2048 + }, + { + x: moment().subtract(6, 'months').day(25).toDate(), + y: 2547 + }, + { + x: moment().subtract(6, 'months').day(28).toDate(), + y: 2884 + }, + { + x: moment().subtract(5, 'months').day(1).toDate(), + y: 2771 + }, + { + x: moment().subtract(5, 'months').day(4).toDate(), + y: 2522 + }, + { + x: moment().subtract(5, 'months').day(7).toDate(), + y: 2543 + }, + { + x: moment().subtract(5, 'months').day(10).toDate(), + y: 2413 + }, + { + x: moment().subtract(5, 'months').day(13).toDate(), + y: 2002 + }, + { + x: moment().subtract(5, 'months').day(16).toDate(), + y: 1838 + }, + { + x: moment().subtract(5, 'months').day(19).toDate(), + y: 1830 + }, + { + x: moment().subtract(5, 'months').day(22).toDate(), + y: 1872 + }, + { + x: moment().subtract(5, 'months').day(25).toDate(), + y: 2246 + }, + { + x: moment().subtract(5, 'months').day(28).toDate(), + y: 2171 + }, + { + x: moment().subtract(4, 'months').day(1).toDate(), + y: 2988 + }, + { + x: moment().subtract(4, 'months').day(4).toDate(), + y: 2694 + }, + { + x: moment().subtract(4, 'months').day(7).toDate(), + y: 2806 + }, + { + x: moment().subtract(4, 'months').day(10).toDate(), + y: 3040 + }, + { + x: moment().subtract(4, 'months').day(13).toDate(), + y: 2898 + }, + { + x: moment().subtract(4, 'months').day(16).toDate(), + y: 3013 + }, + { + x: moment().subtract(4, 'months').day(19).toDate(), + y: 2760 + }, + { + x: moment().subtract(4, 'months').day(22).toDate(), + y: 3021 + }, + { + x: moment().subtract(4, 'months').day(25).toDate(), + y: 2688 + }, + { + x: moment().subtract(4, 'months').day(28).toDate(), + y: 2572 + }, + { + x: moment().subtract(3, 'months').day(1).toDate(), + y: 2789 + }, + { + x: moment().subtract(3, 'months').day(4).toDate(), + y: 3069 + }, + { + x: moment().subtract(3, 'months').day(7).toDate(), + y: 3142 + }, + { + x: moment().subtract(3, 'months').day(10).toDate(), + y: 3614 + }, + { + x: moment().subtract(3, 'months').day(13).toDate(), + y: 3202 + }, + { + x: moment().subtract(3, 'months').day(16).toDate(), + y: 2730 + }, + { + x: moment().subtract(3, 'months').day(19).toDate(), + y: 2951 + }, + { + x: moment().subtract(3, 'months').day(22).toDate(), + y: 3267 + }, + { + x: moment().subtract(3, 'months').day(25).toDate(), + y: 2882 + }, + { + x: moment().subtract(3, 'months').day(28).toDate(), + y: 2885 + }, + { + x: moment().subtract(2, 'months').day(1).toDate(), + y: 2915 + }, + { + x: moment().subtract(2, 'months').day(4).toDate(), + y: 2790 + }, + { + x: moment().subtract(2, 'months').day(7).toDate(), + y: 3071 + }, + { + x: moment().subtract(2, 'months').day(10).toDate(), + y: 2802 + }, + { + x: moment().subtract(2, 'months').day(13).toDate(), + y: 2382 + }, + { + x: moment().subtract(2, 'months').day(16).toDate(), + y: 1883 + }, + { + x: moment().subtract(2, 'months').day(19).toDate(), + y: 1448 + }, + { + x: moment().subtract(2, 'months').day(22).toDate(), + y: 1176 + }, + { + x: moment().subtract(2, 'months').day(25).toDate(), + y: 1275 + }, + { + x: moment().subtract(2, 'months').day(28).toDate(), + y: 1136 + }, + { + x: moment().subtract(1, 'months').day(1).toDate(), + y: 1160 + }, + { + x: moment().subtract(1, 'months').day(4).toDate(), + y: 1524 + }, + { + x: moment().subtract(1, 'months').day(7).toDate(), + y: 1305 + }, + { + x: moment().subtract(1, 'months').day(10).toDate(), + y: 1725 + }, + { + x: moment().subtract(1, 'months').day(13).toDate(), + y: 1850 + }, + { + x: moment().subtract(1, 'months').day(16).toDate(), + y: 2304 + }, + { + x: moment().subtract(1, 'months').day(19).toDate(), + y: 2187 + }, + { + x: moment().subtract(1, 'months').day(22).toDate(), + y: 2597 + }, + { + x: moment().subtract(1, 'months').day(25).toDate(), + y: 2246 + }, + { + x: moment().subtract(1, 'months').day(28).toDate(), + y: 1767 + } + ] + } + ] + } + }, + conversions : { + amount: 4123, + labels: [ + moment().subtract(47, 'days').format('DD MMM') + ' - ' + moment().subtract(40, 'days').format('DD MMM'), + moment().subtract(39, 'days').format('DD MMM') + ' - ' + moment().subtract(32, 'days').format('DD MMM'), + moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM') + ], + series: [ + { + name: 'Conversions', + data: [4412, 4345, 4541, 4677, 4322, 4123] + } + ] + }, + impressions : { + amount: 46085, + labels: [ + moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM') + ], + series: [ + { + name: 'Impressions', + data: [11577, 11441, 11544, 11523] + } + ] + }, + visits : { + amount: 62083, + labels: [ + moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM') + ], + series: [ + { + name: 'Visits', + data: [15521, 15519, 15522, 15521] + } + ] + }, + visitorsVsPageViews: { + overallScore : 472, + averageRatio : 45, + predictedRatio: 55, + series : [ + { + name: 'Page Views', + data: [ + { + x: moment().subtract(65, 'days').toDate(), + y: 4769 + }, + { + x: moment().subtract(64, 'days').toDate(), + y: 4901 + }, + { + x: moment().subtract(63, 'days').toDate(), + y: 4640 + }, + { + x: moment().subtract(62, 'days').toDate(), + y: 5128 + }, + { + x: moment().subtract(61, 'days').toDate(), + y: 5015 + }, + { + x: moment().subtract(60, 'days').toDate(), + y: 5360 + }, + { + x: moment().subtract(59, 'days').toDate(), + y: 5608 + }, + { + x: moment().subtract(58, 'days').toDate(), + y: 5272 + }, + { + x: moment().subtract(57, 'days').toDate(), + y: 5660 + }, + { + x: moment().subtract(56, 'days').toDate(), + y: 6026 + }, + { + x: moment().subtract(55, 'days').toDate(), + y: 5836 + }, + { + x: moment().subtract(54, 'days').toDate(), + y: 5659 + }, + { + x: moment().subtract(53, 'days').toDate(), + y: 5575 + }, + { + x: moment().subtract(52, 'days').toDate(), + y: 5474 + }, + { + x: moment().subtract(51, 'days').toDate(), + y: 5427 + }, + { + x: moment().subtract(50, 'days').toDate(), + y: 5865 + }, + { + x: moment().subtract(49, 'days').toDate(), + y: 5700 + }, + { + x: moment().subtract(48, 'days').toDate(), + y: 6052 + }, + { + x: moment().subtract(47, 'days').toDate(), + y: 5760 + }, + { + x: moment().subtract(46, 'days').toDate(), + y: 5648 + }, + { + x: moment().subtract(45, 'days').toDate(), + y: 5510 + }, + { + x: moment().subtract(44, 'days').toDate(), + y: 5435 + }, + { + x: moment().subtract(43, 'days').toDate(), + y: 5239 + }, + { + x: moment().subtract(42, 'days').toDate(), + y: 5452 + }, + { + x: moment().subtract(41, 'days').toDate(), + y: 5416 + }, + { + x: moment().subtract(40, 'days').toDate(), + y: 5195 + }, + { + x: moment().subtract(39, 'days').toDate(), + y: 5119 + }, + { + x: moment().subtract(38, 'days').toDate(), + y: 4635 + }, + { + x: moment().subtract(37, 'days').toDate(), + y: 4833 + }, + { + x: moment().subtract(36, 'days').toDate(), + y: 4584 + }, + { + x: moment().subtract(35, 'days').toDate(), + y: 4822 + }, + { + x: moment().subtract(34, 'days').toDate(), + y: 4330 + }, + { + x: moment().subtract(33, 'days').toDate(), + y: 4582 + }, + { + x: moment().subtract(32, 'days').toDate(), + y: 4348 + }, + { + x: moment().subtract(31, 'days').toDate(), + y: 4132 + }, + { + x: moment().subtract(30, 'days').toDate(), + y: 4099 + }, + { + x: moment().subtract(29, 'days').toDate(), + y: 3849 + }, + { + x: moment().subtract(28, 'days').toDate(), + y: 4010 + }, + { + x: moment().subtract(27, 'days').toDate(), + y: 4486 + }, + { + x: moment().subtract(26, 'days').toDate(), + y: 4403 + }, + { + x: moment().subtract(25, 'days').toDate(), + y: 4141 + }, + { + x: moment().subtract(24, 'days').toDate(), + y: 3780 + }, + { + x: moment().subtract(23, 'days').toDate(), + y: 3929 + }, + { + x: moment().subtract(22, 'days').toDate(), + y: 3524 + }, + { + x: moment().subtract(21, 'days').toDate(), + y: 3212 + }, + { + x: moment().subtract(20, 'days').toDate(), + y: 3568 + }, + { + x: moment().subtract(19, 'days').toDate(), + y: 3800 + }, + { + x: moment().subtract(18, 'days').toDate(), + y: 3796 + }, + { + x: moment().subtract(17, 'days').toDate(), + y: 3870 + }, + { + x: moment().subtract(16, 'days').toDate(), + y: 3745 + }, + { + x: moment().subtract(15, 'days').toDate(), + y: 3751 + }, + { + x: moment().subtract(14, 'days').toDate(), + y: 3310 + }, + { + x: moment().subtract(13, 'days').toDate(), + y: 3509 + }, + { + x: moment().subtract(12, 'days').toDate(), + y: 3311 + }, + { + x: moment().subtract(11, 'days').toDate(), + y: 3187 + }, + { + x: moment().subtract(10, 'days').toDate(), + y: 2918 + }, + { + x: moment().subtract(9, 'days').toDate(), + y: 3191 + }, + { + x: moment().subtract(8, 'days').toDate(), + y: 3437 + }, + { + x: moment().subtract(7, 'days').toDate(), + y: 3291 + }, + { + x: moment().subtract(6, 'days').toDate(), + y: 3317 + }, + { + x: moment().subtract(5, 'days').toDate(), + y: 3716 + }, + { + x: moment().subtract(4, 'days').toDate(), + y: 3260 + }, + { + x: moment().subtract(3, 'days').toDate(), + y: 3694 + }, + { + x: moment().subtract(2, 'days').toDate(), + y: 3598 + }, + { + x: moment().subtract(1, 'days').toDate(), + y: 3812 + } + ] + }, + { + name: 'Visitors', + data: [ + { + x: moment().subtract(65, 'days').toDate(), + y: 1654 + }, + { + x: moment().subtract(64, 'days').toDate(), + y: 1900 + }, + { + x: moment().subtract(63, 'days').toDate(), + y: 1647 + }, + { + x: moment().subtract(62, 'days').toDate(), + y: 1315 + }, + { + x: moment().subtract(61, 'days').toDate(), + y: 1807 + }, + { + x: moment().subtract(60, 'days').toDate(), + y: 1793 + }, + { + x: moment().subtract(59, 'days').toDate(), + y: 1892 + }, + { + x: moment().subtract(58, 'days').toDate(), + y: 1846 + }, + { + x: moment().subtract(57, 'days').toDate(), + y: 1966 + }, + { + x: moment().subtract(56, 'days').toDate(), + y: 1804 + }, + { + x: moment().subtract(55, 'days').toDate(), + y: 1778 + }, + { + x: moment().subtract(54, 'days').toDate(), + y: 2015 + }, + { + x: moment().subtract(53, 'days').toDate(), + y: 1892 + }, + { + x: moment().subtract(52, 'days').toDate(), + y: 1708 + }, + { + x: moment().subtract(51, 'days').toDate(), + y: 1711 + }, + { + x: moment().subtract(50, 'days').toDate(), + y: 1570 + }, + { + x: moment().subtract(49, 'days').toDate(), + y: 1507 + }, + { + x: moment().subtract(48, 'days').toDate(), + y: 1451 + }, + { + x: moment().subtract(47, 'days').toDate(), + y: 1522 + }, + { + x: moment().subtract(46, 'days').toDate(), + y: 1801 + }, + { + x: moment().subtract(45, 'days').toDate(), + y: 1977 + }, + { + x: moment().subtract(44, 'days').toDate(), + y: 2367 + }, + { + x: moment().subtract(43, 'days').toDate(), + y: 2798 + }, + { + x: moment().subtract(42, 'days').toDate(), + y: 3080 + }, + { + x: moment().subtract(41, 'days').toDate(), + y: 2856 + }, + { + x: moment().subtract(40, 'days').toDate(), + y: 2745 + }, + { + x: moment().subtract(39, 'days').toDate(), + y: 2750 + }, + { + x: moment().subtract(38, 'days').toDate(), + y: 2728 + }, + { + x: moment().subtract(37, 'days').toDate(), + y: 2436 + }, + { + x: moment().subtract(36, 'days').toDate(), + y: 2289 + }, + { + x: moment().subtract(35, 'days').toDate(), + y: 2657 + }, + { + x: moment().subtract(34, 'days').toDate(), + y: 2804 + }, + { + x: moment().subtract(33, 'days').toDate(), + y: 2777 + }, + { + x: moment().subtract(32, 'days').toDate(), + y: 3024 + }, + { + x: moment().subtract(31, 'days').toDate(), + y: 2657 + }, + { + x: moment().subtract(30, 'days').toDate(), + y: 2218 + }, + { + x: moment().subtract(29, 'days').toDate(), + y: 1964 + }, + { + x: moment().subtract(28, 'days').toDate(), + y: 1674 + }, + { + x: moment().subtract(27, 'days').toDate(), + y: 1721 + }, + { + x: moment().subtract(26, 'days').toDate(), + y: 2005 + }, + { + x: moment().subtract(25, 'days').toDate(), + y: 1613 + }, + { + x: moment().subtract(24, 'days').toDate(), + y: 1295 + }, + { + x: moment().subtract(23, 'days').toDate(), + y: 1071 + }, + { + x: moment().subtract(22, 'days').toDate(), + y: 799 + }, + { + x: moment().subtract(21, 'days').toDate(), + y: 1133 + }, + { + x: moment().subtract(20, 'days').toDate(), + y: 1536 + }, + { + x: moment().subtract(19, 'days').toDate(), + y: 2016 + }, + { + x: moment().subtract(18, 'days').toDate(), + y: 2256 + }, + { + x: moment().subtract(17, 'days').toDate(), + y: 1934 + }, + { + x: moment().subtract(16, 'days').toDate(), + y: 1832 + }, + { + x: moment().subtract(15, 'days').toDate(), + y: 2075 + }, + { + x: moment().subtract(14, 'days').toDate(), + y: 1709 + }, + { + x: moment().subtract(13, 'days').toDate(), + y: 1932 + }, + { + x: moment().subtract(12, 'days').toDate(), + y: 1831 + }, + { + x: moment().subtract(11, 'days').toDate(), + y: 1434 + }, + { + x: moment().subtract(10, 'days').toDate(), + y: 993 + }, + { + x: moment().subtract(9, 'days').toDate(), + y: 1064 + }, + { + x: moment().subtract(8, 'days').toDate(), + y: 618 + }, + { + x: moment().subtract(7, 'days').toDate(), + y: 1032 + }, + { + x: moment().subtract(6, 'days').toDate(), + y: 1280 + }, + { + x: moment().subtract(5, 'days').toDate(), + y: 1344 + }, + { + x: moment().subtract(4, 'days').toDate(), + y: 1835 + }, + { + x: moment().subtract(3, 'days').toDate(), + y: 2287 + }, + { + x: moment().subtract(2, 'days').toDate(), + y: 2226 + }, + { + x: moment().subtract(1, 'days').toDate(), + y: 2692 + } + ] + } + ] + }, + newVsReturning : { + uniqueVisitors: 46085, + series : [80, 20], + labels : [ + 'New', + 'Returning' + ] + }, + gender : { + uniqueVisitors: 46085, + series : [55, 45], + labels : [ + 'Male', + 'Female' + ] + }, + age : { + uniqueVisitors: 46085, + series : [35, 65], + labels : [ + 'Under 30', + 'Over 30' + ] + }, + language : { + uniqueVisitors: 46085, + series : [25, 75], + labels : [ + 'English', + 'Other' + ] + } +}; +export const finance = { + accountBalance : { + growRate: 38.33, + ami : 45332, + series : [ + { + name: 'Predicted', + data: [ + { + x: moment().subtract(12, 'months').day(1).toDate(), + y: 48.84 + }, + { + x: moment().subtract(12, 'months').day(4).toDate(), + y: 53.51 + }, + { + x: moment().subtract(12, 'months').day(7).toDate(), + y: 52.93 + }, + { + x: moment().subtract(12, 'months').day(10).toDate(), + y: 49.08 + }, + { + x: moment().subtract(12, 'months').day(13).toDate(), + y: 50.27 + }, + { + x: moment().subtract(12, 'months').day(16).toDate(), + y: 48.37 + }, + { + x: moment().subtract(12, 'months').day(19).toDate(), + y: 44.84 + }, + { + x: moment().subtract(12, 'months').day(22).toDate(), + y: 40.71 + }, + { + x: moment().subtract(12, 'months').day(25).toDate(), + y: 41.24 + }, + { + x: moment().subtract(12, 'months').day(28).toDate(), + y: 45.63 + }, + { + x: moment().subtract(11, 'months').day(1).toDate(), + y: 38.20 + }, + { + x: moment().subtract(11, 'months').day(4).toDate(), + y: 39.68 + }, + { + x: moment().subtract(11, 'months').day(7).toDate(), + y: 41.02 + }, + { + x: moment().subtract(11, 'months').day(10).toDate(), + y: 39.41 + }, + { + x: moment().subtract(11, 'months').day(13).toDate(), + y: 35.66 + }, + { + x: moment().subtract(11, 'months').day(16).toDate(), + y: 38.53 + }, + { + x: moment().subtract(11, 'months').day(19).toDate(), + y: 38.53 + }, + { + x: moment().subtract(11, 'months').day(22).toDate(), + y: 40.69 + }, + { + x: moment().subtract(11, 'months').day(25).toDate(), + y: 38.79 + }, + { + x: moment().subtract(11, 'months').day(28).toDate(), + y: 42.98 + }, + { + x: moment().subtract(10, 'months').day(1).toDate(), + y: 43.55 + }, + { + x: moment().subtract(10, 'months').day(4).toDate(), + y: 40.65 + }, + { + x: moment().subtract(10, 'months').day(7).toDate(), + y: 36.50 + }, + { + x: moment().subtract(10, 'months').day(10).toDate(), + y: 33.79 + }, + { + x: moment().subtract(10, 'months').day(13).toDate(), + y: 31.91 + }, + { + x: moment().subtract(10, 'months').day(16).toDate(), + y: 29.68 + }, + { + x: moment().subtract(10, 'months').day(19).toDate(), + y: 29.57 + }, + { + x: moment().subtract(10, 'months').day(22).toDate(), + y: 33.13 + }, + { + x: moment().subtract(10, 'months').day(25).toDate(), + y: 37.08 + }, + { + x: moment().subtract(10, 'months').day(28).toDate(), + y: 35.86 + }, + { + x: moment().subtract(9, 'months').day(1).toDate(), + y: 39.65 + }, + { + x: moment().subtract(9, 'months').day(4).toDate(), + y: 39.01 + }, + { + x: moment().subtract(9, 'months').day(7).toDate(), + y: 34.10 + }, + { + x: moment().subtract(9, 'months').day(10).toDate(), + y: 37.48 + }, + { + x: moment().subtract(9, 'months').day(13).toDate(), + y: 39.29 + }, + { + x: moment().subtract(9, 'months').day(16).toDate(), + y: 38.46 + }, + { + x: moment().subtract(9, 'months').day(19).toDate(), + y: 37.71 + }, + { + x: moment().subtract(9, 'months').day(22).toDate(), + y: 40.15 + }, + { + x: moment().subtract(9, 'months').day(25).toDate(), + y: 35.89 + }, + { + x: moment().subtract(9, 'months').day(28).toDate(), + y: 31.50 + }, + { + x: moment().subtract(8, 'months').day(1).toDate(), + y: 30.50 + }, + { + x: moment().subtract(8, 'months').day(4).toDate(), + y: 25.74 + }, + { + x: moment().subtract(8, 'months').day(7).toDate(), + y: 28.23 + }, + { + x: moment().subtract(8, 'months').day(10).toDate(), + y: 28.48 + }, + { + x: moment().subtract(8, 'months').day(13).toDate(), + y: 30.00 + }, + { + x: moment().subtract(8, 'months').day(16).toDate(), + y: 32.16 + }, + { + x: moment().subtract(8, 'months').day(19).toDate(), + y: 32.99 + }, + { + x: moment().subtract(8, 'months').day(22).toDate(), + y: 37.68 + }, + { + x: moment().subtract(8, 'months').day(25).toDate(), + y: 35.24 + }, + { + x: moment().subtract(8, 'months').day(28).toDate(), + y: 39.18 + }, + { + x: moment().subtract(7, 'months').day(1).toDate(), + y: 41.45 + }, + { + x: moment().subtract(7, 'months').day(4).toDate(), + y: 43.78 + }, + { + x: moment().subtract(7, 'months').day(7).toDate(), + y: 39.41 + }, + { + x: moment().subtract(7, 'months').day(10).toDate(), + y: 39.32 + }, + { + x: moment().subtract(7, 'months').day(13).toDate(), + y: 43.80 + }, + { + x: moment().subtract(7, 'months').day(16).toDate(), + y: 42.43 + }, + { + x: moment().subtract(7, 'months').day(19).toDate(), + y: 43.67 + }, + { + x: moment().subtract(7, 'months').day(22).toDate(), + y: 38.79 + }, + { + x: moment().subtract(7, 'months').day(25).toDate(), + y: 43.57 + }, + { + x: moment().subtract(7, 'months').day(28).toDate(), + y: 41.81 + }, + { + x: moment().subtract(6, 'months').day(1).toDate(), + y: 46.19 + }, + { + x: moment().subtract(6, 'months').day(4).toDate(), + y: 47.69 + }, + { + x: moment().subtract(6, 'months').day(7).toDate(), + y: 49.01 + }, + { + x: moment().subtract(6, 'months').day(10).toDate(), + y: 46.40 + }, + { + x: moment().subtract(6, 'months').day(13).toDate(), + y: 51.28 + }, + { + x: moment().subtract(6, 'months').day(16).toDate(), + y: 50.15 + }, + { + x: moment().subtract(6, 'months').day(19).toDate(), + y: 53.60 + }, + { + x: moment().subtract(6, 'months').day(22).toDate(), + y: 56.08 + }, + { + x: moment().subtract(6, 'months').day(25).toDate(), + y: 52.72 + }, + { + x: moment().subtract(6, 'months').day(28).toDate(), + y: 56.60 + }, + { + x: moment().subtract(5, 'months').day(1).toDate(), + y: 58.36 + }, + { + x: moment().subtract(5, 'months').day(4).toDate(), + y: 56.59 + }, + { + x: moment().subtract(5, 'months').day(7).toDate(), + y: 55.75 + }, + { + x: moment().subtract(5, 'months').day(10).toDate(), + y: 54.74 + }, + { + x: moment().subtract(5, 'months').day(13).toDate(), + y: 54.27 + }, + { + x: moment().subtract(5, 'months').day(16).toDate(), + y: 58.65 + }, + { + x: moment().subtract(5, 'months').day(19).toDate(), + y: 57.00 + }, + { + x: moment().subtract(5, 'months').day(22).toDate(), + y: 60.52 + }, + { + x: moment().subtract(5, 'months').day(25).toDate(), + y: 57.60 + }, + { + x: moment().subtract(5, 'months').day(28).toDate(), + y: 56.48 + }, + { + x: moment().subtract(4, 'months').day(1).toDate(), + y: 54.35 + }, + { + x: moment().subtract(4, 'months').day(4).toDate(), + y: 52.39 + }, + { + x: moment().subtract(4, 'months').day(7).toDate(), + y: 54.52 + }, + { + x: moment().subtract(4, 'months').day(10).toDate(), + y: 54.16 + }, + { + x: moment().subtract(4, 'months').day(13).toDate(), + y: 51.95 + }, + { + x: moment().subtract(4, 'months').day(16).toDate(), + y: 51.19 + }, + { + x: moment().subtract(4, 'months').day(19).toDate(), + y: 46.35 + }, + { + x: moment().subtract(4, 'months').day(22).toDate(), + y: 48.33 + }, + { + x: moment().subtract(4, 'months').day(25).toDate(), + y: 45.84 + }, + { + x: moment().subtract(4, 'months').day(28).toDate(), + y: 48.22 + }, + { + x: moment().subtract(3, 'months').day(1).toDate(), + y: 45.82 + }, + { + x: moment().subtract(3, 'months').day(4).toDate(), + y: 43.48 + }, + { + x: moment().subtract(3, 'months').day(7).toDate(), + y: 41.32 + }, + { + x: moment().subtract(3, 'months').day(10).toDate(), + y: 40.99 + }, + { + x: moment().subtract(3, 'months').day(13).toDate(), + y: 38.49 + }, + { + x: moment().subtract(3, 'months').day(16).toDate(), + y: 40.10 + }, + { + x: moment().subtract(3, 'months').day(19).toDate(), + y: 44.86 + }, + { + x: moment().subtract(3, 'months').day(22).toDate(), + y: 44.03 + }, + { + x: moment().subtract(3, 'months').day(25).toDate(), + y: 41.41 + }, + { + x: moment().subtract(3, 'months').day(28).toDate(), + y: 37.80 + }, + { + x: moment().subtract(2, 'months').day(1).toDate(), + y: 35.24 + }, + { + x: moment().subtract(2, 'months').day(4).toDate(), + y: 32.12 + }, + { + x: moment().subtract(2, 'months').day(7).toDate(), + y: 35.68 + }, + { + x: moment().subtract(2, 'months').day(10).toDate(), + y: 38.00 + }, + { + x: moment().subtract(2, 'months').day(13).toDate(), + y: 37.96 + }, + { + x: moment().subtract(2, 'months').day(16).toDate(), + y: 38.70 + }, + { + x: moment().subtract(2, 'months').day(19).toDate(), + y: 37.45 + }, + { + x: moment().subtract(2, 'months').day(22).toDate(), + y: 37.51 + }, + { + x: moment().subtract(2, 'months').day(25).toDate(), + y: 33.10 + }, + { + x: moment().subtract(2, 'months').day(28).toDate(), + y: 35.09 + }, + { + x: moment().subtract(1, 'months').day(1).toDate(), + y: 31.87 + }, + { + x: moment().subtract(1, 'months').day(4).toDate(), + y: 29.18 + }, + { + x: moment().subtract(1, 'months').day(7).toDate(), + y: 31.91 + }, + { + x: moment().subtract(1, 'months').day(10).toDate(), + y: 34.37 + }, + { + x: moment().subtract(1, 'months').day(13).toDate(), + y: 32.91 + }, + { + x: moment().subtract(1, 'months').day(16).toDate(), + y: 33.17 + }, + { + x: moment().subtract(1, 'months').day(19).toDate(), + y: 37.16 + }, + { + x: moment().subtract(1, 'months').day(22).toDate(), + y: 32.60 + }, + { + x: moment().subtract(1, 'months').day(25).toDate(), + y: 36.94 + }, + { + x: moment().subtract(1, 'months').day(28).toDate(), + y: 35.98 + } + ] + }, + { + name: 'Actual', + data: [ + { + x: moment().subtract(12, 'months').day(1).toDate(), + y: 20.21 + }, + { + x: moment().subtract(12, 'months').day(4).toDate(), + y: 17.49 + }, + { + x: moment().subtract(12, 'months').day(7).toDate(), + y: 16.54 + }, + { + x: moment().subtract(12, 'months').day(10).toDate(), + y: 19.00 + }, + { + x: moment().subtract(12, 'months').day(13).toDate(), + y: 16.47 + }, + { + x: moment().subtract(12, 'months').day(16).toDate(), + y: 13.15 + }, + { + x: moment().subtract(12, 'months').day(19).toDate(), + y: 18.07 + }, + { + x: moment().subtract(12, 'months').day(22).toDate(), + y: 17.93 + }, + { + x: moment().subtract(12, 'months').day(25).toDate(), + y: 18.92 + }, + { + x: moment().subtract(12, 'months').day(28).toDate(), + y: 18.46 + }, + { + x: moment().subtract(11, 'months').day(1).toDate(), + y: 18.04 + }, + { + x: moment().subtract(11, 'months').day(4).toDate(), + y: 17.78 + }, + { + x: moment().subtract(11, 'months').day(7).toDate(), + y: 20.15 + }, + { + x: moment().subtract(11, 'months').day(10).toDate(), + y: 18.92 + }, + { + x: moment().subtract(11, 'months').day(13).toDate(), + y: 17.08 + }, + { + x: moment().subtract(11, 'months').day(16).toDate(), + y: 17.11 + }, + { + x: moment().subtract(11, 'months').day(19).toDate(), + y: 15.70 + }, + { + x: moment().subtract(11, 'months').day(22).toDate(), + y: 15.07 + }, + { + x: moment().subtract(11, 'months').day(25).toDate(), + y: 14.51 + }, + { + x: moment().subtract(11, 'months').day(28).toDate(), + y: 15.22 + }, + { + x: moment().subtract(10, 'months').day(1).toDate(), + y: 19.77 + }, + { + x: moment().subtract(10, 'months').day(4).toDate(), + y: 23.67 + }, + { + x: moment().subtract(10, 'months').day(7).toDate(), + y: 27.98 + }, + { + x: moment().subtract(10, 'months').day(10).toDate(), + y: 30.80 + }, + { + x: moment().subtract(10, 'months').day(13).toDate(), + y: 28.56 + }, + { + x: moment().subtract(10, 'months').day(16).toDate(), + y: 27.45 + }, + { + x: moment().subtract(10, 'months').day(19).toDate(), + y: 27.50 + }, + { + x: moment().subtract(10, 'months').day(22).toDate(), + y: 27.28 + }, + { + x: moment().subtract(10, 'months').day(25).toDate(), + y: 24.36 + }, + { + x: moment().subtract(10, 'months').day(28).toDate(), + y: 22.89 + }, + { + x: moment().subtract(9, 'months').day(1).toDate(), + y: 28.04 + }, + { + x: moment().subtract(9, 'months').day(4).toDate(), + y: 27.77 + }, + { + x: moment().subtract(9, 'months').day(7).toDate(), + y: 30.24 + }, + { + x: moment().subtract(9, 'months').day(10).toDate(), + y: 26.57 + }, + { + x: moment().subtract(9, 'months').day(13).toDate(), + y: 22.18 + }, + { + x: moment().subtract(9, 'months').day(16).toDate(), + y: 19.64 + }, + { + x: moment().subtract(9, 'months').day(19).toDate(), + y: 16.74 + }, + { + x: moment().subtract(9, 'months').day(22).toDate(), + y: 17.21 + }, + { + x: moment().subtract(9, 'months').day(25).toDate(), + y: 20.05 + }, + { + x: moment().subtract(9, 'months').day(28).toDate(), + y: 16.13 + }, + { + x: moment().subtract(8, 'months').day(1).toDate(), + y: 10.71 + }, + { + x: moment().subtract(8, 'months').day(4).toDate(), + y: 7.99 + }, + { + x: moment().subtract(8, 'months').day(7).toDate(), + y: 11.33 + }, + { + x: moment().subtract(8, 'months').day(10).toDate(), + y: 15.36 + }, + { + x: moment().subtract(8, 'months').day(13).toDate(), + y: 20.16 + }, + { + x: moment().subtract(8, 'months').day(16).toDate(), + y: 22.56 + }, + { + x: moment().subtract(8, 'months').day(19).toDate(), + y: 19.34 + }, + { + x: moment().subtract(8, 'months').day(22).toDate(), + y: 18.32 + }, + { + x: moment().subtract(8, 'months').day(25).toDate(), + y: 20.75 + }, + { + x: moment().subtract(8, 'months').day(28).toDate(), + y: 17.09 + }, + { + x: moment().subtract(7, 'months').day(1).toDate(), + y: 18.31 + }, + { + x: moment().subtract(7, 'months').day(4).toDate(), + y: 14.34 + }, + { + x: moment().subtract(7, 'months').day(7).toDate(), + y: 9.93 + }, + { + x: moment().subtract(7, 'months').day(10).toDate(), + y: 10.64 + }, + { + x: moment().subtract(7, 'months').day(13).toDate(), + y: 6.18 + }, + { + x: moment().subtract(7, 'months').day(16).toDate(), + y: 10.32 + }, + { + x: moment().subtract(7, 'months').day(19).toDate(), + y: 12.80 + }, + { + x: moment().subtract(7, 'months').day(22).toDate(), + y: 13.44 + }, + { + x: moment().subtract(7, 'months').day(25).toDate(), + y: 18.35 + }, + { + x: moment().subtract(7, 'months').day(28).toDate(), + y: 22.87 + }, + { + x: moment().subtract(6, 'months').day(1).toDate(), + y: 26.92 + }, + { + x: moment().subtract(6, 'months').day(4).toDate(), + y: 22.50 + }, + { + x: moment().subtract(6, 'months').day(7).toDate(), + y: 18.14 + }, + { + x: moment().subtract(6, 'months').day(10).toDate(), + y: 19.06 + }, + { + x: moment().subtract(6, 'months').day(13).toDate(), + y: 19.73 + }, + { + x: moment().subtract(6, 'months').day(16).toDate(), + y: 18.82 + }, + { + x: moment().subtract(6, 'months').day(19).toDate(), + y: 23.33 + }, + { + x: moment().subtract(6, 'months').day(22).toDate(), + y: 20.48 + }, + { + x: moment().subtract(6, 'months').day(25).toDate(), + y: 25.47 + }, + { + x: moment().subtract(6, 'months').day(28).toDate(), + y: 28.84 + }, + { + x: moment().subtract(5, 'months').day(1).toDate(), + y: 27.71 + }, + { + x: moment().subtract(5, 'months').day(4).toDate(), + y: 25.22 + }, + { + x: moment().subtract(5, 'months').day(7).toDate(), + y: 25.43 + }, + { + x: moment().subtract(5, 'months').day(10).toDate(), + y: 24.13 + }, + { + x: moment().subtract(5, 'months').day(13).toDate(), + y: 20.02 + }, + { + x: moment().subtract(5, 'months').day(16).toDate(), + y: 18.38 + }, + { + x: moment().subtract(5, 'months').day(19).toDate(), + y: 18.30 + }, + { + x: moment().subtract(5, 'months').day(22).toDate(), + y: 18.72 + }, + { + x: moment().subtract(5, 'months').day(25).toDate(), + y: 22.46 + }, + { + x: moment().subtract(5, 'months').day(28).toDate(), + y: 21.71 + }, + { + x: moment().subtract(4, 'months').day(1).toDate(), + y: 29.88 + }, + { + x: moment().subtract(4, 'months').day(4).toDate(), + y: 26.94 + }, + { + x: moment().subtract(4, 'months').day(7).toDate(), + y: 28.06 + }, + { + x: moment().subtract(4, 'months').day(10).toDate(), + y: 30.40 + }, + { + x: moment().subtract(4, 'months').day(13).toDate(), + y: 28.98 + }, + { + x: moment().subtract(4, 'months').day(16).toDate(), + y: 30.13 + }, + { + x: moment().subtract(4, 'months').day(19).toDate(), + y: 27.60 + }, + { + x: moment().subtract(4, 'months').day(22).toDate(), + y: 30.21 + }, + { + x: moment().subtract(4, 'months').day(25).toDate(), + y: 26.88 + }, + { + x: moment().subtract(4, 'months').day(28).toDate(), + y: 25.72 + }, + { + x: moment().subtract(3, 'months').day(1).toDate(), + y: 27.89 + }, + { + x: moment().subtract(3, 'months').day(4).toDate(), + y: 30.69 + }, + { + x: moment().subtract(3, 'months').day(7).toDate(), + y: 31.42 + }, + { + x: moment().subtract(3, 'months').day(10).toDate(), + y: 36.14 + }, + { + x: moment().subtract(3, 'months').day(13).toDate(), + y: 32.02 + }, + { + x: moment().subtract(3, 'months').day(16).toDate(), + y: 27.30 + }, + { + x: moment().subtract(3, 'months').day(19).toDate(), + y: 29.51 + }, + { + x: moment().subtract(3, 'months').day(22).toDate(), + y: 32.67 + }, + { + x: moment().subtract(3, 'months').day(25).toDate(), + y: 28.82 + }, + { + x: moment().subtract(3, 'months').day(28).toDate(), + y: 28.85 + }, + { + x: moment().subtract(2, 'months').day(1).toDate(), + y: 29.15 + }, + { + x: moment().subtract(2, 'months').day(4).toDate(), + y: 27.90 + }, + { + x: moment().subtract(2, 'months').day(7).toDate(), + y: 30.71 + }, + { + x: moment().subtract(2, 'months').day(10).toDate(), + y: 28.02 + }, + { + x: moment().subtract(2, 'months').day(13).toDate(), + y: 23.82 + }, + { + x: moment().subtract(2, 'months').day(16).toDate(), + y: 18.83 + }, + { + x: moment().subtract(2, 'months').day(19).toDate(), + y: 14.48 + }, + { + x: moment().subtract(2, 'months').day(22).toDate(), + y: 11.76 + }, + { + x: moment().subtract(2, 'months').day(25).toDate(), + y: 12.75 + }, + { + x: moment().subtract(2, 'months').day(28).toDate(), + y: 11.36 + }, + { + x: moment().subtract(1, 'months').day(1).toDate(), + y: 11.60 + }, + { + x: moment().subtract(1, 'months').day(4).toDate(), + y: 15.24 + }, + { + x: moment().subtract(1, 'months').day(7).toDate(), + y: 13.05 + }, + { + x: moment().subtract(1, 'months').day(10).toDate(), + y: 17.25 + }, + { + x: moment().subtract(1, 'months').day(13).toDate(), + y: 18.50 + }, + { + x: moment().subtract(1, 'months').day(16).toDate(), + y: 23.04 + }, + { + x: moment().subtract(1, 'months').day(19).toDate(), + y: 21.87 + }, + { + x: moment().subtract(1, 'months').day(22).toDate(), + y: 25.97 + }, + { + x: moment().subtract(1, 'months').day(25).toDate(), + y: 22.46 + }, + { + x: moment().subtract(1, 'months').day(28).toDate(), + y: 17.67 + } + ] + } + ] + }, + budget : { + expenses : 11763.34, + expensesLimit: 20000, + savings : 10974.12, + savingsGoal : 250000, + bills : 1789.22, + billsLimit : 1000 + }, + previousStatement : { + status : 'paid', + date : moment().startOf('day').subtract(15, 'days').format('LL'), + limit : 34500, + spent : 27221.21, + minimum: 7331.94 + }, + currentStatement : { + status : 'pending', + date : moment().startOf('day').subtract(15, 'days').add(1, 'month').format('LL'), + limit : 34500, + spent : 39819.41, + minimum: 9112.51 + }, + recentTransactions: [ + { + id : '1b6fd296-bc6a-4d45-bf4f-e45519a58cf5', + transactionId: '528651571NT', + name : 'Morgan Page', + amount : +1358.75, + status : 'completed', + date : '2019-10-07T22:22:37.274Z' + }, + { + id : '2dec6074-98bd-4623-9526-6480e4776569', + transactionId: '421436904YT', + name : 'Nita Hebert', + amount : -1042.82, + status : 'completed', + date : '2019-12-18T14:51:24.461Z' + }, + { + id : 'ae7c065f-4197-4021-a799-7a221822ad1d', + transactionId: '685377421YT', + name : 'Marsha Chambers', + amount : +1828.16, + status : 'pending', + date : '2019-12-25T17:52:14.304Z' + }, + { + id : '0c43dd40-74f6-49d5-848a-57a4a45772ab', + transactionId: '884960091RT', + name : 'Charmaine Jackson', + amount : +1647.55, + status : 'completed', + date : '2019-11-29T06:32:16.111Z' + }, + { + id : 'e5c9f0ed-a64c-4bfe-a113-29f80b4e162c', + transactionId: '361402213NT', + name : 'Maura Carey', + amount : -927.43, + status : 'completed', + date : '2019-11-24T12:13:23.064Z' + } + ] +}; @Component({ selector : 'dashboard', templateUrl : './dashboard.component.html', - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.Emulated }) -export class DashboardComponent +export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { + @ViewChild('recentTransactionsTable', {read: MatSort}) recentTransactionsTableMatSort: MatSort; + recentTransactionsDataSource: MatTableDataSource = new MatTableDataSource(); + recentTransactionsTableColumns: string[] = ['transactionId', 'date', 'name', 'discount', 'amount', 'status']; + chartVisitors: ApexOptions; + chartConversions: ApexOptions; + chartImpressions: ApexOptions; + chartVisits: ApexOptions; + chartVisitorsVsPageViews: ApexOptions; + chartNewVsReturning: ApexOptions; + chartGender: ApexOptions; + chartAge: ApexOptions; + chartLanguage: ApexOptions; + data: any; + dataE: any; + couponStats: boolean = true; + + private _unsubscribeAll: Subject = new Subject(); /** * Constructor */ - constructor() + constructor(private _dashboardService: DashboardService, + private _router: Router,private change:ChangeDetectorRef) + { + } + + ngOnInit(): void + { + // Get the data + this._dashboardService.data$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((data) => { + + // Store the data + this.data = analytics; + console.log(this.data) + this.dataE = finance; + this.recentTransactionsDataSource.data = finance.recentTransactions; + // Prepare the chart data + this._prepareChartData(); + }); + + // Attach SVG fill fixer to all ApexCharts + window['Apex'] = { + chart: { + events: { + mounted: (chart: any, options?: any): void => { + this._fixSvgFill(chart.el); + }, + updated: (chart: any, options?: any): void => { + this._fixSvgFill(chart.el); + } + } + } + }; + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + ngAfterViewInit(): void + { + // Make the data source sortable + this.recentTransactionsDataSource.sort = this.recentTransactionsTableMatSort; + } + + switchCouponStats():void{ + this.couponStats = !this.couponStats; + this.change.markForCheck(); + } + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Fix the SVG fill references. This fix must be applied to all ApexCharts + * charts in order to fix 'black color on gradient fills on certain browsers' + * issue caused by the '' tag. + * + * Fix based on https://gist.github.com/Kamshak/c84cdc175209d1a30f711abd6a81d472 + * + * @param element + * @private + */ + private _fixSvgFill(element: Element): void + { + // Current URL + const currentURL = this._router.url; + + // 1. Find all elements with 'fill' attribute within the element + // 2. Filter out the ones that doesn't have cross reference so we only left with the ones that use the 'url(#id)' syntax + // 3. Insert the 'currentURL' at the front of the 'fill' attribute value + Array.from(element.querySelectorAll('*[fill]')) + .filter(el => el.getAttribute('fill').indexOf('url(') !== -1) + .forEach((el) => { + const attrVal = el.getAttribute('fill'); + el.setAttribute('fill', `url(${currentURL}${attrVal.slice(attrVal.indexOf('#'))}`); + }); + } + + /** + * Prepare the chart data from the data + * + * @private + */ + private _prepareChartData(): void + { + // Visitors + this.chartVisitors = { + chart : { + animations: { + speed : 400, + animateGradually: { + enabled: false + } + }, + fontFamily: 'inherit', + foreColor : 'inherit', + width : '100%', + height : '100%', + type : 'area', + toolbar : { + show: false + }, + zoom : { + enabled: false + } + }, + colors : ['#818CF8'], + dataLabels: { + enabled: false + }, + fill : { + colors: ['#312E81'] + }, + grid : { + show : true, + borderColor: '#334155', + padding : { + top : 10, + bottom: -40, + left : 0, + right : 0 + }, + position : 'back', + xaxis : { + lines: { + show: true + } + } + }, + series : this.data.visitors.series, + stroke : { + width: 2 + }, + tooltip : { + followCursor: true, + theme : 'dark', + x : { + format: 'MMM dd, yyyy' + }, + y : { + formatter: (value: number): string => `${value}` + } + }, + xaxis : { + axisBorder: { + show: false + }, + axisTicks : { + show: false + }, + crosshairs: { + stroke: { + color : '#475569', + dashArray: 0, + width : 2 + } + }, + labels : { + offsetY: -20, + style : { + colors: '#CBD5E1' + } + }, + tickAmount: 20, + tooltip : { + enabled: false + }, + type : 'datetime' + }, + yaxis : { + axisTicks : { + show: false + }, + axisBorder: { + show: false + }, + min : (min): number => min - 750, + max : (max): number => max + 250, + tickAmount: 5, + show : false + } + }; + + // Conversions + this.chartConversions = { + chart : { + animations: { + enabled: false + }, + fontFamily: 'inherit', + foreColor : 'inherit', + height : '100%', + type : 'area', + sparkline : { + enabled: true + } + }, + colors : ['#38BDF8'], + fill : { + colors : ['#38BDF8'], + opacity: 0.5 + }, + series : this.data.conversions.series, + stroke : { + curve: 'smooth' + }, + tooltip: { + followCursor: true, + theme : 'dark' + }, + xaxis : { + type : 'category', + categories: this.data.conversions.labels + }, + yaxis : { + labels: { + formatter: (val): string => val.toString() + } + } + }; + + // Impressions + this.chartImpressions = { + chart : { + animations: { + enabled: false + }, + fontFamily: 'inherit', + foreColor : 'inherit', + height : '100%', + type : 'area', + sparkline : { + enabled: true + } + }, + colors : ['#34D399'], + fill : { + colors : ['#34D399'], + opacity: 0.5 + }, + series : this.data.impressions.series, + stroke : { + curve: 'smooth' + }, + tooltip: { + followCursor: true, + theme : 'dark' + }, + xaxis : { + type : 'category', + categories: this.data.impressions.labels + }, + yaxis : { + labels: { + formatter: (val): string => val.toString() + } + } + }; + + // Visits + this.chartVisits = { + chart : { + animations: { + enabled: false + }, + fontFamily: 'inherit', + foreColor : 'inherit', + height : '100%', + type : 'area', + sparkline : { + enabled: true + } + }, + colors : ['#FB7185'], + fill : { + colors : ['#FB7185'], + opacity: 0.5 + }, + series : this.data.visits.series, + stroke : { + curve: 'smooth' + }, + tooltip: { + followCursor: true, + theme : 'dark' + }, + xaxis : { + type : 'category', + categories: this.data.visits.labels + }, + yaxis : { + labels: { + formatter: (val): string => val.toString() + } + } + }; + + // Visitors vs Page Views + this.chartVisitorsVsPageViews = { + chart : { + animations: { + enabled: false + }, + fontFamily: 'inherit', + foreColor : 'inherit', + height : '100%', + type : 'area', + toolbar : { + show: false + }, + zoom : { + enabled: false + } + }, + colors : ['#64748B', '#94A3B8'], + dataLabels: { + enabled: false + }, + fill : { + colors : ['#64748B', '#94A3B8'], + opacity: 0.5 + }, + grid : { + show : false, + padding: { + bottom: -40, + left : 0, + right : 0 + } + }, + legend : { + show: false + }, + series : this.data.visitorsVsPageViews.series, + stroke : { + curve: 'smooth', + width: 2 + }, + tooltip : { + followCursor: true, + theme : 'dark', + x : { + format: 'MMM dd, yyyy' + } + }, + xaxis : { + axisBorder: { + show: false + }, + labels : { + offsetY: -20, + rotate : 0, + style : { + colors: 'var(--fuse-text-secondary)' + } + }, + tickAmount: 3, + tooltip : { + enabled: false + }, + type : 'datetime' + }, + yaxis : { + labels : { + style: { + colors: 'var(--fuse-text-secondary)' + } + }, + max : (max): number => max + 250, + min : (min): number => min - 250, + show : false, + tickAmount: 5 + } + }; + + // New vs. returning + this.chartNewVsReturning = { + chart : { + animations: { + speed : 400, + animateGradually: { + enabled: false + } + }, + fontFamily: 'inherit', + foreColor : 'inherit', + height : '100%', + type : 'donut', + sparkline : { + enabled: true + } + }, + colors : ['#3182CE', '#63B3ED'], + labels : this.data.newVsReturning.labels, + plotOptions: { + pie: { + customScale : 0.9, + expandOnClick: false, + donut : { + size: '70%' + } + } + }, + series : this.data.newVsReturning.series, + states : { + hover : { + filter: { + type: 'none' + } + }, + active: { + filter: { + type: 'none' + } + } + }, + tooltip : { + enabled : true, + fillSeriesColor: false, + theme : 'dark', + custom : ({ + seriesIndex, + w + }): string => `
+
+
${w.config.labels[seriesIndex]}:
+
${w.config.series[seriesIndex]}%
+
` + } + }; + + // Gender + this.chartGender = { + chart : { + animations: { + speed : 400, + animateGradually: { + enabled: false + } + }, + fontFamily: 'inherit', + foreColor : 'inherit', + height : '100%', + type : 'donut', + sparkline : { + enabled: true + } + }, + colors : ['#319795', '#4FD1C5'], + labels : this.data.gender.labels, + plotOptions: { + pie: { + customScale : 0.9, + expandOnClick: false, + donut : { + size: '70%' + } + } + }, + series : this.data.gender.series, + states : { + hover : { + filter: { + type: 'none' + } + }, + active: { + filter: { + type: 'none' + } + } + }, + tooltip : { + enabled : true, + fillSeriesColor: false, + theme : 'dark', + custom : ({ + seriesIndex, + w + }): string => `
+
+
${w.config.labels[seriesIndex]}:
+
${w.config.series[seriesIndex]}%
+
` + } + }; + + // Age + this.chartAge = { + chart : { + animations: { + speed : 400, + animateGradually: { + enabled: false + } + }, + fontFamily: 'inherit', + foreColor : 'inherit', + height : '100%', + type : 'donut', + sparkline : { + enabled: true + } + }, + colors : ['#DD6B20', '#F6AD55'], + labels : this.data.age.labels, + plotOptions: { + pie: { + customScale : 0.9, + expandOnClick: false, + donut : { + size: '70%' + } + } + }, + series : this.data.age.series, + states : { + hover : { + filter: { + type: 'none' + } + }, + active: { + filter: { + type: 'none' + } + } + }, + tooltip : { + enabled : true, + fillSeriesColor: false, + theme : 'dark', + custom : ({ + seriesIndex, + w + }): string => `
+
+
${w.config.labels[seriesIndex]}:
+
${w.config.series[seriesIndex]}%
+
` + } + }; + + // Language + this.chartLanguage = { + chart : { + animations: { + speed : 400, + animateGradually: { + enabled: false + } + }, + fontFamily: 'inherit', + foreColor : 'inherit', + height : '100%', + type : 'donut', + sparkline : { + enabled: true + } + }, + colors : ['#805AD5', '#B794F4'], + labels : this.data.language.labels, + plotOptions: { + pie: { + customScale : 0.9, + expandOnClick: false, + donut : { + size: '70%' + } + } + }, + series : this.data.language.series, + states : { + hover : { + filter: { + type: 'none' + } + }, + active: { + filter: { + type: 'none' + } + } + }, + tooltip : { + enabled : true, + fillSeriesColor: false, + theme : 'dark', + custom : ({ + seriesIndex, + w + }): string => `
+
+
${w.config.labels[seriesIndex]}:
+
${w.config.series[seriesIndex]}%
+
` + } + }; } } diff --git a/src/app/pages/admin/Dashboard/dashboard.module.ts b/src/app/pages/admin/Dashboard/dashboard.module.ts index 9f9dd2b..a34e27c 100644 --- a/src/app/pages/admin/Dashboard/dashboard.module.ts +++ b/src/app/pages/admin/Dashboard/dashboard.module.ts @@ -1,20 +1,37 @@ import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { Route, RouterModule } from '@angular/router'; import { DashboardComponent } from 'app/pages/admin/Dashboard/dashboard.component'; +import { SharedModule } from 'app/shared/shared.module'; +import { NgApexchartsModule } from 'ng-apexcharts'; +import { dashboardRoutes } from './dashboard.routing'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; -const exampleRoutes: Route[] = [ - { - path : '', - component: DashboardComponent - } -]; @NgModule({ declarations: [ DashboardComponent ], imports : [ - RouterModule.forChild(exampleRoutes) + RouterModule.forChild(dashboardRoutes), + MatButtonModule, + MatButtonToggleModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + MatProgressBarModule, + MatSortModule, + MatTableModule, + MatTooltipModule, + NgApexchartsModule, + SharedModule ] }) export class DashboardModule diff --git a/src/app/pages/admin/Dashboard/dashboard.routing.ts b/src/app/pages/admin/Dashboard/dashboard.routing.ts new file mode 100644 index 0000000..95fd9d5 --- /dev/null +++ b/src/app/pages/admin/Dashboard/dashboard.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { DashboardComponent } from './dashboard.component'; + +export const dashboardRoutes: Route[] = [ + { + path : '', + component: DashboardComponent + } +]; diff --git a/src/app/pages/admin/Dashboard/dashboard.service.ts b/src/app/pages/admin/Dashboard/dashboard.service.ts new file mode 100644 index 0000000..2f6fbf6 --- /dev/null +++ b/src/app/pages/admin/Dashboard/dashboard.service.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { tap } from 'rxjs/operators'; +import { analytics as analyticsData } from 'app/mock-api/dashboards/analytics/data'; + +@Injectable({ + providedIn: 'root' +}) +export class DashboardService +{ + private _data: BehaviorSubject = new BehaviorSubject(null); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for data + */ + get data$(): Observable + { + return this._data.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get data + */ + getData(): Observable + { + console.log(analyticsData) + return this._httpClient.get('api/dashboards/analytics').pipe( + tap((response: any) => { + console.log(response) + this._data.next(analyticsData); + }) + ); + } +}