First pass on factoring out graph widgets to seperate classes
This commit is contained in:
parent
70a37dbba6
commit
7342db0713
6 changed files with 119 additions and 28 deletions
28
src/app/widgets/customers.component.html
Normal file
28
src/app/widgets/customers.component.html
Normal file
|
@ -0,0 +1,28 @@
|
|||
<div class="card card-inverse card-primary">
|
||||
<div class="card-block pb-0">
|
||||
<div class="btn-group float-right" dropdown>
|
||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="mb-0">{{ customerSum }}</h4>
|
||||
<p>Customers this week</p>
|
||||
</div>
|
||||
<div class="chart-wrapper px-3" style="height:70px;">
|
||||
<canvas baseChart
|
||||
class="chart"
|
||||
[datasets]="lineChartData"
|
||||
[labels]="lineChartLabels"
|
||||
[options]="lineChartOptions"
|
||||
[colors]="lineChartColours"
|
||||
[legend]="lineChartLegend"
|
||||
[chartType]="lineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
85
src/app/widgets/customers.component.ts
Normal file
85
src/app/widgets/customers.component.ts
Normal file
|
@ -0,0 +1,85 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ApiService } from '../providers/api-service';
|
||||
|
||||
@Component({
|
||||
selector: 'widget-customer-7-days',
|
||||
templateUrl: 'customers.component.html',
|
||||
})
|
||||
export class Customer7DayWidget implements OnInit {
|
||||
public lineChartData: Array<any> = [
|
||||
{
|
||||
data: [],
|
||||
label: 'Series A'
|
||||
}
|
||||
];
|
||||
public lineChartLabels: Array<any> = [];
|
||||
public lineChartOptions: any = {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent',
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
}
|
||||
}],
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
};
|
||||
public lineChartColours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: '#20a8d8',
|
||||
borderColor: 'rgba(255,255,255,.55)'
|
||||
}
|
||||
];
|
||||
public lineChartLegend = false;
|
||||
public lineChartType = 'line';
|
||||
|
||||
public customerSum: Number = 0;
|
||||
|
||||
constructor(private api: ApiService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.api.graph_data(undefined)
|
||||
.subscribe(
|
||||
result => {
|
||||
console.log(result);
|
||||
const customersThisWeek = result.data.customersthisweek;
|
||||
this.lineChartData[0].data = customersThisWeek.customerno;
|
||||
this.lineChartLabels = customersThisWeek.day;
|
||||
this.customerSum = this.lineChartData[0].data.reduce((a, b) => a + b, 0);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
Reference in a new issue