74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import {AfterViewInit, Component, Input} from '@angular/core';
|
|
import * as CanvasJS from './canvasjs.min';
|
|
import {v4 as uuidv4} from 'uuid';
|
|
import {ChartDataSeriesOptions} from 'canvasjs';
|
|
|
|
@Component({
|
|
selector: 'app-graph',
|
|
templateUrl: './graph.component.html',
|
|
styleUrls: ['./graph.component.scss']
|
|
})
|
|
export class GraphComponent implements AfterViewInit {
|
|
|
|
@Input()
|
|
monthlyDatas: number[][] = [];
|
|
@Input()
|
|
labels: string[] = [];
|
|
@Input()
|
|
colors: string[] = [];
|
|
|
|
readonly randomId = uuidv4();
|
|
|
|
constructor() {
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
const data: ChartDataSeriesOptions[] = [];
|
|
for (const monthlyData of this.monthlyDatas) {
|
|
data.push({
|
|
type: 'line',
|
|
color: 'black',
|
|
showInLegend: this.labels.length > 0,
|
|
dataPoints: [
|
|
{y: monthlyData[0], x: 1, label: 'January'},
|
|
{y: monthlyData[1], x: 2, label: 'February'},
|
|
{y: monthlyData[2], x: 3, label: 'March'},
|
|
{y: monthlyData[3], x: 4, label: 'April'},
|
|
{y: monthlyData[4], x: 5, label: 'May'},
|
|
{y: monthlyData[5], x: 6, label: 'June'},
|
|
{y: monthlyData[6], x: 7, label: 'July'},
|
|
{y: monthlyData[7], x: 8, label: 'August'},
|
|
{y: monthlyData[8], x: 9, label: 'September'},
|
|
{y: monthlyData[9], x: 10, label: 'October'},
|
|
{y: monthlyData[10], x: 11, label: 'November'},
|
|
{y: monthlyData[11], x: 12, label: 'December'}
|
|
]
|
|
});
|
|
}
|
|
|
|
for (let i = 0; i < this.labels.length; i++) {
|
|
data[i].name = this.labels[i];
|
|
}
|
|
|
|
|
|
for (let i = 0; i < this.colors.length; i++) {
|
|
data[i].color = this.colors[i];
|
|
}
|
|
|
|
|
|
const chart = new CanvasJS.Chart(this.randomId, {
|
|
animationEnabled: true,
|
|
exportEnabled: false,
|
|
legend: {
|
|
verticalAlign: 'bottom',
|
|
horizontalAlign: 'left',
|
|
dockInsidePlotArea: true
|
|
},
|
|
data
|
|
});
|
|
|
|
chart.render();
|
|
}
|
|
|
|
}
|