refractor: home module (#297)

* Refractor components.
* Redesign home component.
* Add comments.

Fixes #296
This commit is contained in:
Abhay Chawla
2018-08-12 20:46:54 +05:30
committed by GitHub
parent b54e2a2b01
commit 598f239251
16 changed files with 98 additions and 511 deletions
@@ -1,101 +1,7 @@
<!-- <div class="fluid-container">
<div class="container">
<div class="row mt-5">
<div class="col-sm-4">
<div class="container">
<p>
TODO: dashboard component.
</p>
<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>
</div>
</div> -->
</div>
@@ -1,3 +0,0 @@
// .ngx-charts {
// position: relative;
// }
+5 -23
View File
@@ -1,7 +1,9 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { single } from './data';
/**
* Dashboard component.
*/
@Component({
selector: 'mifosx-dashboard',
templateUrl: './dashboard.component.html',
@@ -9,27 +11,7 @@ import { single } from './data';
})
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 });
}
constructor() { }
ngOnInit() {
}
-58
View File
@@ -1,58 +0,0 @@
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
}
]
}
];