import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
import { Passenger } from '../passenger';
import { PASSENGERS } from '../mock-passengers';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
bsValue = new Date();
bsRangeValue: Date[];
maxDate = new Date();
startDate = '';
finishDate = '';
travelDate = '';
checkstatus = '';
doughnutChartLabels = [];
doughnutChartData = [];
doughnutChartType = 'doughnut';
public passengers = PASSENGERS;
public count = 1;
public c = [];
constructor(
private http: HttpClient) {
this.maxDate.setDate(this.maxDate.getDate() + 7);
this.bsValue.setDate(this.bsValue.getDate() - 70);
this.bsRangeValue = [this.bsValue, this.maxDate];
}
ngOnInit() {
}
onClickGC() {
this.doughnutChartLabels = [];
this.doughnutChartData = [];
this.startDate = this.bsRangeValue[0].toString().slice(4, 15);
this.finishDate = this.bsRangeValue[1].toString().slice(4, 15);
var months = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
this.startDate = this.startDate.replace(this.startDate.slice(0, 3).toString(),
(months.indexOf(this.startDate.slice(0, 3)) + 1).toString());
this.finishDate = this.finishDate.replace(this.finishDate.slice(0, 3).toString(),
(months.indexOf(this.finishDate.slice(0, 3)) + 1).toString());
this.startDate = this.startDate.split(' ').join('/');
this.finishDate = this.finishDate.split(' ').join('/');
var from = new Date(this.startDate);
var to = new Date(this.finishDate);
for (var i = 0; i < this.passengers.length; i++) {
this.c = this.passengers[i].travelDate.split("/");
var check = new Date(parseInt(this.c[2]), parseInt(this.c[1]) - 1, parseInt(this.c[0]));
//check.parseInt
this.checkstatus = check.toString();
if (check.valueOf() >= from.valueOf() && check.valueOf() <= to.valueOf()) {
var checkdate = this.doughnutChartLabels.indexOf(this.passengers[i].travelDate);
if (checkdate > -1) {
this.doughnutChartData[checkdate] = this.doughnutChartData[checkdate] + 1;
} else {
this.doughnutChartLabels.push(this.passengers[i].travelDate);
this.doughnutChartData.push(this.count);
}
}
}
this.travelDate = this.doughnutChartData.toString() + this.doughnutChartLabels.toString();
}
}
<h2>Passengers List</h2>
<div>
<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text" placeholder="Daterangepicker" class="form-control" bsDaterangepicker [(ngModel)]="bsRangeValue">
</div>
<div>
<button type="button" class="btn btn-primary" (click)="onClickGC()">
Display Doughnut Chart
</button></div>
checkingDate: {{checkstatus}}
startDate: {{startDate}}
finishing date: {{finishDate}}
{{travelDate}}
</div>
<div>
<div style="display: block" *ngIf="doughnutChartLabels.length > 0 && doughnutChartData.length >0">
<canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType">
</canvas>
</div>
</div>
</div>