First pass on factoring out graph widgets to seperate classes

This commit is contained in:
Tom Bloor 2017-08-29 16:42:32 +01:00
parent 70a37dbba6
commit 7342db0713
6 changed files with 119 additions and 28 deletions

View 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>

View 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);
}
}