98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { TranslateService } from '@ngx-translate/core';
|
|
import { ChartConfiguration, ChartData } from 'chart.js';
|
|
|
|
import { ServiceComm } from '../../services/service-comm.service';
|
|
import { TunnelFlightService } from "../../services/tunnel-flight.service";
|
|
|
|
@Component({
|
|
selector: 'app-list-of-tunnel-flights',
|
|
templateUrl: './list-of-tunnel-flights.component.html',
|
|
styleUrls: ['./list-of-tunnel-flights.component.css']
|
|
})
|
|
export class ListOfTunnelFlightsComponent implements OnInit {
|
|
public barChartLegend = true;
|
|
public barChartPlugins = [];
|
|
public barChartData: ChartData<'bar'>;
|
|
public barChartOptions: ChartConfiguration['options'];
|
|
public barChartType: string;
|
|
public isLoading: boolean = false;
|
|
public selectedPeriod: string;
|
|
|
|
constructor(private serviceComm: ServiceComm,
|
|
private serviceTunnelFlight: TunnelFlightService,
|
|
private translateService: TranslateService) { }
|
|
|
|
ngOnInit() {
|
|
this.serviceComm.forceTranslateTitle.subscribe((data) => {
|
|
if (data === true) {
|
|
this.updateTitle();
|
|
}
|
|
});
|
|
this.updateTitle();
|
|
|
|
this.isLoading = true;
|
|
this.selectedPeriod = "currentYear"
|
|
this.getData();
|
|
}
|
|
|
|
private updateTitle() {
|
|
this.translateService.get("ListTunnelFlight_Title").subscribe(
|
|
data => { this.serviceComm.updatedComponentTitle(data); }
|
|
);
|
|
}
|
|
|
|
private getData(): void {
|
|
this.barChartType = "bar";
|
|
this.barChartData = {
|
|
labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
|
|
datasets: [
|
|
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
|
|
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
|
|
]
|
|
};
|
|
|
|
this.barChartOptions = {
|
|
responsive: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
footer: this.footer,
|
|
}
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'nearest',
|
|
axis: 'x'
|
|
},
|
|
scales: {
|
|
x: {
|
|
stacked: true
|
|
},
|
|
y: {
|
|
stacked: true
|
|
}
|
|
}
|
|
};
|
|
|
|
this.isLoading = false;
|
|
}
|
|
|
|
private footer = (tooltipItems) => {
|
|
let sum = 0;
|
|
|
|
tooltipItems.forEach(function (tooltipItem) {
|
|
sum += tooltipItem.parsed.y;
|
|
});
|
|
return 'Sum: ' + sum;
|
|
};
|
|
|
|
public onPeriodChange() {
|
|
console.log(this.selectedPeriod);
|
|
}
|
|
}
|