<div class="row">
		<div class="col-md-12">
			<div class="page-header bg-white mb-3 box-perspective">
				<div class="header-title">
					<span class="f-lgreen f-20 f-bold">Gráfico de peso dos resíduos coletados</span>
					<div class="days-select">
						<span class="f-lgreen f-16 f-bold">Visualizar</span> : <span [class]="daySelected(7)" (click)="changeRange(7)">7 dias</span> | <span [class]="daySelected(15)" (click)="changeRange(15)">15 dias</span> | <span [class]="daySelected(30)" (click)="changeRange(30)">30 dias</span>
					</div>
				</div>
				<hr>
				<div class="content-map">
					<canvas baseChart #coletaChart="base-chart" height="100" class="defaultChart" [datasets]="coletaChartData" [labels]="coletaChartLabels"
					 [options]="coletaChartOptions" [colors]="monthlyChartColors" [legend]="monthlyChartLegend" [chartType]="monthlyChartType"></canvas>
				</div>
			</div>
		</div>
	</div>






----


	changeRange(value) {
		this.rangePeso = value;
		this.loadChartsColeta();
	}



	loadChartsColeta() {
		this.ordemColetaService.getPesosPorDia().then((res: any) => {
			let dadosColeta = [];
			let numberOfDays = this.rangePeso;
			let today = new Date();
			for (let i = 0; i < numberOfDays; i++) {
				let date = new Date(today.getFullYear(), today.getMonth(), today.getDate() - i);
				let day = String(date.getDate());
				let month = String(date.getMonth() + 1);
				let key = day + '/' + month;

				let dataFound = res.find((elem) => elem.dia === key);
				dadosColeta[i] = {
					day: new Date(today.getFullYear(), today.getMonth(), today.getDate() - i),
					count: dataFound ? dataFound.peso : 0
				};
			}
			this.loadColetaChart(dadosColeta, this.rangePeso);
		}).catch((err) => {
			console.log(err);
		});
	}


	daySelected(value) {
		if (value === this.rangePeso) {
			return 'f-lgreen f-16 f-bold days-button';
		} else {
			return 'f-lgreen f-16 f-bold clickable';
		}
	}

  	public coletaChartOptions: any = {
		responsive: true,
		legend: {
			display: false
		},
		title: {
			display: true,
			text: ''
		},
		scales: {
			yAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'Peso (KG)'
				}
			}]
		}
	};