Renamed customers widget to graph widget

This commit is contained in:
Tom Bloor 2017-08-30 12:35:25 +01:00
parent 5e2471aebf
commit 8a509e5051
3 changed files with 120 additions and 102 deletions

View file

@ -1,90 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { OrgGraphsService } from '../providers/org-graphs.service';
interface ChartData {
data: Array<number>;
label: string;
}
@Component({
selector: 'widget-customers-last-7-days',
templateUrl: 'customers.component.html',
})
export class Customer7DayWidget implements OnInit {
public lineChartData: Array<ChartData> = [
{
data: [],
label: 'Series A'
}
];
public lineChartLabels: Array<string>;
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 graphService: OrgGraphsService) { }
ngOnInit(): void {
this.graphService.getGraph('customers_last_7_days')
.subscribe(
result => {
console.log(result);
this.lineChartData[0].data = result.graph.count;
this.lineChartLabels = result.graph.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);
}
}

View file

@ -1,17 +1,10 @@
<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>
<button type="button" class="btn btn-transparent p-0 float-right">
<i [ngClass]="graphIcon"></i>
</button>
<h4 class="mb-0">{{ graphSum }}</h4>
<p>{{ graphTitle }}</p>
</div>
<div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart

View file

@ -0,0 +1,115 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { OrgGraphsService } from '../providers/org-graphs.service';
interface ChartData {
data: Array<number>;
label: string;
}
@Component({
selector: 'widget-graph',
templateUrl: 'graph-widget.component.html',
})
export class GraphWidget implements OnInit {
@Input() public graphName: string;
@Input() public graphTitle = 'Graph';
@Input() public graphIcon = 'icon-graph';
@Output() public graphHover = new EventEmitter();
@Output() public graphClick = new EventEmitter();
public graphSum: Number = 0;
public lineChartData: Array<ChartData> = [
{
data: [],
label: 'Series A'
}
];
public lineChartLabels: Array<string>;
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> = [
{
backgroundColor: '#20a8d8',
borderColor: 'rgba(255,255,255,.55)'
}
];
public lineChartLegend = false;
public lineChartType = 'line';
constructor(private graphService: OrgGraphsService) { }
ngOnInit(): void {
if ( this.graphName == null ) {
throw new Error('Attribute \'graphName\' is required on component \'widget-graph\'');
}
this.graphService.getGraph(this.graphName)
.subscribe( result => this.setData(result.graph) );
}
private setData(data: any) {
this.setChartData(data.count);
this.setChartLabels(data.day);
}
private setChartData(data: Array<number>) {
this.lineChartData[0].data = data;
this.graphSum = data.reduce((a, b) => a + b, 0);
// Set point size based on data
if ( data.length < 15 ) {
this.lineChartOptions.elements.point.radius = 4;
this.lineChartOptions.elements.line.borderWidth = 1;
} else {
this.lineChartOptions.elements.point.radius = 2;
this.lineChartOptions.elements.line.borderWidth = 2;
}
}
private setChartLabels(data: Array<string>) {
this.lineChartLabels = data;
}
// events
public chartClicked(e: any): void {
console.log(e);
}
public chartHovered(e: any): void {
console.log(e);
}
}