From 6be70d6cb45e170a375d43898825526b32905179 Mon Sep 17 00:00:00 2001 From: Anwesh Nayak Date: Sun, 10 Jun 2018 16:49:29 +0530 Subject: [PATCH] Dashboard UI (#46) * dashboard UI --- README.md | 10 -- package-lock.json | 161 ++++++++++++++++++ package.json | 1 + src/app/app.module.ts | 2 + .../core/shell/header/header.component.html | 6 +- .../home/dashboard/dashboard.component.html | 113 ++++++++++++ .../home/dashboard/dashboard.component.scss | 5 + .../dashboard/dashboard.component.spec.ts | 28 +++ src/app/home/dashboard/dashboard.component.ts | 37 ++++ src/app/home/dashboard/data.ts | 58 +++++++ src/app/home/home-routing.module.ts | 4 +- src/app/home/home.module.ts | 8 +- src/app/login/login.component.scss | 2 +- 13 files changed, 418 insertions(+), 17 deletions(-) create mode 100644 src/app/home/dashboard/dashboard.component.html create mode 100644 src/app/home/dashboard/dashboard.component.scss create mode 100644 src/app/home/dashboard/dashboard.component.spec.ts create mode 100644 src/app/home/dashboard/dashboard.component.ts create mode 100644 src/app/home/dashboard/data.ts diff --git a/README.md b/README.md index fd7b0f090..a71b57007 100644 --- a/README.md +++ b/README.md @@ -69,13 +69,3 @@ Tasks are mostly based on the `angular-cli` tool. Use `ng help` to get more help ## Creating new modules/components - [Setup modules](https://github.com/openMF/web-app/wiki/Create-a-new-module-component) - -## Coding guides - -- [Angular](docs/coding-guides/angular.md) -- [TypeScript](docs/coding-guides/typescript.md) -- [Sass](docs/coding-guides/sass.md) -- [HTML](docs/coding-guides/html.md) -- [Unit tests](docs/coding-guides/unit-tests.md) -- [End-to-end tests](docs/coding-guides/e2e-tests.md) - diff --git a/package-lock.json b/package-lock.json index 5ac947bc1..79423eadb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -723,6 +723,24 @@ "semver-intersect": "1.3.1" } }, + "@swimlane/ngx-charts": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-8.0.2.tgz", + "integrity": "sha512-6n5YzsmDrS6d2Aqdo/5ZJ068P8ENBGKyYDq11Be6Ned/TQg1yE5YhoDICmZEKbbKs4fmRZf2ipVFsclCkRWrIg==", + "requires": { + "d3-array": "1.2.1", + "d3-brush": "1.0.4", + "d3-color": "1.2.0", + "d3-force": "1.1.0", + "d3-format": "1.3.0", + "d3-hierarchy": "1.1.6", + "d3-interpolate": "1.2.0", + "d3-scale": "1.0.7", + "d3-selection": "1.3.0", + "d3-shape": "1.2.0", + "d3-time-format": "2.1.1" + } + }, "@types/babel-types": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.2.tgz", @@ -3056,6 +3074,149 @@ "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=", "dev": true }, + "d3-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz", + "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw==" + }, + "d3-brush": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz", + "integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=", + "requires": { + "d3-dispatch": "1.0.3", + "d3-drag": "1.2.1", + "d3-interpolate": "1.2.0", + "d3-selection": "1.3.0", + "d3-transition": "1.1.1" + } + }, + "d3-collection": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz", + "integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI=" + }, + "d3-color": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.2.0.tgz", + "integrity": "sha512-dmL9Zr/v39aSSMnLOTd58in2RbregCg4UtGyUArvEKTTN6S3HKEy+ziBWVYo9PTzRyVW+pUBHUtRKz0HYX+SQg==" + }, + "d3-dispatch": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz", + "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg=" + }, + "d3-drag": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz", + "integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==", + "requires": { + "d3-dispatch": "1.0.3", + "d3-selection": "1.3.0" + } + }, + "d3-ease": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz", + "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4=" + }, + "d3-force": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz", + "integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==", + "requires": { + "d3-collection": "1.0.4", + "d3-dispatch": "1.0.3", + "d3-quadtree": "1.0.3", + "d3-timer": "1.0.7" + } + }, + "d3-format": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.0.tgz", + "integrity": "sha512-ycfLEIzHVZC3rOvuBOKVyQXSiUyCDjeAPIj9n/wugrr+s5AcTQC2Bz6aKkubG7rQaQF0SGW/OV4UEJB9nfioFg==" + }, + "d3-hierarchy": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz", + "integrity": "sha512-nn4bhBnwWnMSoZgkBXD7vRyZ0xVUsNMQRKytWYHhP1I4qHw+qzApCTgSQTZqMdf4XXZbTMqA59hFusga+THA/g==" + }, + "d3-interpolate": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.2.0.tgz", + "integrity": "sha512-zLvTk8CREPFfc/2XglPQriAsXkzoRDAyBzndtKJWrZmHw7kmOWHNS11e40kPTd/oGk8P5mFJW5uBbcFQ+ybxyA==", + "requires": { + "d3-color": "1.2.0" + } + }, + "d3-path": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz", + "integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q=" + }, + "d3-quadtree": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz", + "integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg=" + }, + "d3-scale": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz", + "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==", + "requires": { + "d3-array": "1.2.1", + "d3-collection": "1.0.4", + "d3-color": "1.2.0", + "d3-format": "1.3.0", + "d3-interpolate": "1.2.0", + "d3-time": "1.0.8", + "d3-time-format": "2.1.1" + } + }, + "d3-selection": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz", + "integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA==" + }, + "d3-shape": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz", + "integrity": "sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c=", + "requires": { + "d3-path": "1.0.5" + } + }, + "d3-time": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz", + "integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ==" + }, + "d3-time-format": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz", + "integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==", + "requires": { + "d3-time": "1.0.8" + } + }, + "d3-timer": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz", + "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA==" + }, + "d3-transition": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz", + "integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==", + "requires": { + "d3-color": "1.2.0", + "d3-dispatch": "1.0.3", + "d3-ease": "1.0.3", + "d3-interpolate": "1.2.0", + "d3-selection": "1.3.0", + "d3-timer": "1.0.7" + } + }, "dagre-d3-renderer": { "version": "0.4.26", "resolved": "https://registry.npmjs.org/dagre-d3-renderer/-/dagre-d3-renderer-0.4.26.tgz", diff --git a/package.json b/package.json index cd79cc534..6ed8e543b 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@fortawesome/fontawesome-free-webfonts": "^1.0.9", "@ng-bootstrap/ng-bootstrap": "^2.0.0", "@ngx-translate/core": "^10.0.1", + "@swimlane/ngx-charts": "^8.0.2", "angular-archwizard": "^3.0.0", "bootstrap": "^4.1.1", "core-js": "^2.5.6", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c8858d51b..786e6bfa5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,6 +6,7 @@ import { ServiceWorkerModule } from '@angular/service-worker'; import { TranslateModule } from '@ngx-translate/core'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AlertModule } from 'ngx-bootstrap'; +import { NgxChartsModule } from '@swimlane/ngx-charts'; import { environment } from '@env/environment'; import { CoreModule } from '@app/core'; @@ -28,6 +29,7 @@ import { NavigationModule } from './navigation/navigation.module'; TranslateModule.forRoot(), NgbModule.forRoot(), AlertModule.forRoot(), + NgxChartsModule, CoreModule, SharedModule, HomeModule, diff --git a/src/app/core/shell/header/header.component.html b/src/app/core/shell/header/header.component.html index 761d4b2ab..b329ffc4a 100644 --- a/src/app/core/shell/header/header.component.html +++ b/src/app/core/shell/header/header.component.html @@ -57,14 +57,14 @@
  • Groups
    • -
    - Toggle dropup +
  • +
    -
    • +
    diff --git a/src/app/home/dashboard/dashboard.component.html b/src/app/home/dashboard/dashboard.component.html new file mode 100644 index 000000000..4c3823b87 --- /dev/null +++ b/src/app/home/dashboard/dashboard.component.html @@ -0,0 +1,113 @@ +
    +
    +
    +
    + + +
    +
    Recent Activities
    +
    +
    + + Cras justo odio + + Dapibus ac facilisis in + + Morbi leo risus + + + Cras justo odio + + Dapibus ac facilisis in + + Morbi leo risus + +
    +
    +
    +
    +
    + + +
    +
    Frequent Activities
    +
    +
    + + Cras justo odio + + Dapibus ac facilisis in + + Morbi leo risus + + + Cras justo odio + + Dapibus ac facilisis in + + Morbi leo risus + +
    +
    +
    +
    +
    + + +
    +
    Amount distributed
    +
    +
    + + Cras justo odio + + Dapibus ac facilisis in + + Morbi leo risus + + + Cras justo odio + + Dapibus ac facilisis in + + Morbi leo risus + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    \ No newline at end of file diff --git a/src/app/home/dashboard/dashboard.component.scss b/src/app/home/dashboard/dashboard.component.scss new file mode 100644 index 000000000..a34fdf178 --- /dev/null +++ b/src/app/home/dashboard/dashboard.component.scss @@ -0,0 +1,5 @@ + +.ngx-charts { + position: relative; + + } \ No newline at end of file diff --git a/src/app/home/dashboard/dashboard.component.spec.ts b/src/app/home/dashboard/dashboard.component.spec.ts new file mode 100644 index 000000000..a29783c8b --- /dev/null +++ b/src/app/home/dashboard/dashboard.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { DashboardComponent } from './dashboard.component'; + +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/dashboard/dashboard.component.ts b/src/app/home/dashboard/dashboard.component.ts new file mode 100644 index 000000000..6f9355a65 --- /dev/null +++ b/src/app/home/dashboard/dashboard.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from '@angular/core'; +import { NgxChartsModule } from '@swimlane/ngx-charts'; +import { single } from './data'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'] +}) +export class DashboardComponent implements OnInit { + single: any[]; + multi: any[]; + + view: any[] = [600, 350]; + + // options + showXAxis = true; + showYAxis = true; + gradient = false; + showLegend = true; + showXAxisLabel = true; + xAxisLabel = 'Country'; + showYAxisLabel = true; + yAxisLabel = 'Population'; + + colorScheme = { + domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] + }; + constructor() { + Object.assign(this, { single }); + } + ngOnInit() { + + } + +} + diff --git a/src/app/home/dashboard/data.ts b/src/app/home/dashboard/data.ts new file mode 100644 index 000000000..b906037e1 --- /dev/null +++ b/src/app/home/dashboard/data.ts @@ -0,0 +1,58 @@ +export const single = [ + { + 'name': 'Germany', + 'value': 89400001 + }, + { + 'name': 'USA', + 'value': 5000000 + }, + { + 'name': 'France', + 'value': 7200000 + } +]; + +export const multi = [ + { + 'name': 'Germany', + 'series': [ + { + 'name': '2010', + 'value': 7300000 + }, + { + 'name': '2011', + 'value': 8940000 + } + ] + }, + + { + 'name': 'USA', + 'series': [ + { + 'name': '2010', + 'value': 7870000 + }, + { + 'name': '2011', + 'value': 8270000 + } + ] + }, + + { + 'name': 'France', + 'series': [ + { + 'name': '2010', + 'value': 5000002 + }, + { + 'name': '2011', + 'value': 5800000 + } + ] + } +]; diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts index 80adeef31..8e329fad9 100644 --- a/src/app/home/home-routing.module.ts +++ b/src/app/home/home-routing.module.ts @@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router'; import { Route, extract } from '@app/core'; import { HomeComponent } from './home.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; const routes: Routes = [ Route.withShell([ { path: '', redirectTo: '/home', pathMatch: 'full' }, - { path: 'home', component: HomeComponent, data: { title: extract('Home') } } + { path: 'home', component: HomeComponent, data: { title: extract('Home') } }, + { path: 'home/dashboard', component: DashboardComponent} ]) ]; diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 777c2200f..5366024f6 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -1,24 +1,28 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; +import { NgxChartsModule } from '@swimlane/ngx-charts'; import { CoreModule } from '@app/core'; import { SharedModule } from '@app/shared'; import { HomeRoutingModule } from './home-routing.module'; import { HomeComponent } from './home.component'; import { QuoteService } from './quote.service'; +import { DashboardComponent } from './dashboard/dashboard.component'; @NgModule({ imports: [ CommonModule, TranslateModule, + NgxChartsModule, CoreModule, SharedModule, HomeRoutingModule ], declarations: [ - HomeComponent - ], + HomeComponent, + DashboardComponent +], providers: [ QuoteService ] diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss index bacb29666..a682adf83 100644 --- a/src/app/login/login.component.scss +++ b/src/app/login/login.component.scss @@ -1,4 +1,4 @@ -@import "src/theme/theme-variables"; +@import "../../theme/theme-variables"; @import "~bootstrap/scss/mixins/_breakpoints"; .login-container {