CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Dashboard UI (#46)

Browse Source 
* dashboard UI
This commit is contained in:
Anwesh Nayak
2018-06-10 16:49:29 +05:30
committed by GitHub
parent f733172fcd
commit 6be70d6cb4
13 changed files with 418 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
-10
View File
@@ -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)
package-lock.json
Generated
+161
View File
@@ -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",
package.json
+1
View File
@@ -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",
src/app/app.module.ts
+2
View File
@@ -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,
src/app/core/shell/header/header.component.html
+3 -3
View File
@@ -57,14 +57,14 @@
<li class="nav-item">
<a class="nav-link" href="#"><h5 class="font-weight-normal">Groups</h5></a>
</li>
<div ngbDropdown class="d-inline-block">
<a class="nav-link" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</a>
<li ngbDropdown class="nav-item dropdown d-inline-block">
<div class="nav-link" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</div>
<div ngbDropdownMenu aria-labelledby="dropdownBasic2">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
src/app/home/dashboard/dashboard.component.html
+113
View File
@@ -0,0 +1,113 @@
<div class="fluid-container">
<div class="container">
<div class="row mt-5">
<div class="col-sm-4">
<div class="card">
<div class="card-header">Recent Activities </div>
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
</a>
<a href="#" class="list-group-item list-group-item-action">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">Frequent Activities </div>
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus
</a>
<a href="#" class="list-group-item list-group-item-action ">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">Amount distributed </div>
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus
</a>
<a href="#" class="list-group-item list-group-item-action ">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action ">Morbi leo risus
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-8 mx-auto">
<div class="card">
<div class="card-body">
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
</div>
</div>
</div>
<!-- <div class="col-sm-4 ">
<div class="card">
<div class="card-body">
<div class="ngx-charts">
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single"></ngx-charts-pie-chart>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
src/app/home/dashboard/dashboard.component.scss
+5
View File
@@ -0,0 +1,5 @@
.ngx-charts {
position: relative;
}
src/app/home/dashboard/dashboard.component.spec.ts
+28
View File
@@ -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<DashboardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/home/dashboard/dashboard.component.ts
+37
View File
@@ -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() {
}
}
src/app/home/dashboard/data.ts
+58
View File
@@ -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
}
]
}
];
src/app/home/home-routing.module.ts
+3 -1
View File
@@ -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}
])
];
src/app/home/home.module.ts
+6 -2
View File
@@ -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
]
src/app/login/login.component.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@import "src/theme/theme-variables";
@import "../../theme/theme-variables";
@import "~bootstrap/scss/mixins/_breakpoints";
.login-container {