65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';
|
|
|
|
import { LineData } from './line-data';
|
|
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
|
|
import { LabelData } from "./label-data";
|
|
|
|
@Component({
|
|
selector: 'line-chart',
|
|
templateUrl: './chart.component.html'
|
|
})
|
|
export class LineChartComponent implements OnInit, OnChanges {
|
|
|
|
@Input()data:LineData;
|
|
@Input()label:LabelData;
|
|
|
|
@ViewChild(BaseChartDirective) public chart: BaseChartDirective;
|
|
|
|
// lineChart
|
|
public lineChartData:Array<any> = [
|
|
{data: [0,0,0,0,0,0,0], label: 'Verbruik'}
|
|
];
|
|
public lineChartLabels:Array<any> = ['-1', '-2', '-3', '-4', '-5', '-6', '-7'];
|
|
public lineChartOptions:any = {
|
|
responsive: true,
|
|
title: {
|
|
display: true,
|
|
position: 'left',
|
|
text: 'KiloWatt'
|
|
}
|
|
};
|
|
public lineChartColors:Array<any> = [
|
|
{ // grey
|
|
backgroundColor: 'rgba(148,159,177,0.2)',
|
|
borderColor: 'rgba(148,159,177,1)',
|
|
pointBackgroundColor: 'rgba(148,159,177,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
|
}
|
|
];
|
|
public lineChartLegend:boolean = true;
|
|
public lineChartType:string = 'line';
|
|
|
|
constructor() {}
|
|
|
|
ngOnInit(): void {
|
|
|
|
this.lineChartLabels = this.label.data.slice();
|
|
|
|
const newDataSet = [];
|
|
const newLine = {data: this.data.data, label: this.data.label};
|
|
newDataSet.push(newLine);
|
|
this.lineChartData = newDataSet;
|
|
}
|
|
|
|
ngOnChanges(): void {
|
|
if(this.chart.chart != undefined){
|
|
this.chart.chart.update();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|