Renamed customers widget to graph widget
This commit is contained in:
parent
5e2471aebf
commit
8a509e5051
3 changed files with 120 additions and 102 deletions
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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
|
115
src/app/widgets/graph-widget.component.ts
Normal file
115
src/app/widgets/graph-widget.component.ts
Normal 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);
|
||||
}
|
||||
}
|
Reference in a new issue