refractor: home module (#297)
* Refractor components. * Redesign home component. * Add comments. Fixes #296
This commit is contained in:
@@ -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;
|
||||
// }
|
||||
|
||||
@@ -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() {
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user