133 lines
3.6 KiB
133 lines
3.6 KiB
import * as Highcharts from "highcharts"
|
|
// Highcharts.heatmap(Highcharts);
|
|
|
|
export class HighChartHeatMapCreate {
|
|
|
|
private readonly id: string;
|
|
|
|
private highChart: any;
|
|
private chart: any;
|
|
private xAxis: Array<any> = [];
|
|
private yAxis: Array<any> = [];
|
|
private series: Array<any> = [];
|
|
private legend: any = null;
|
|
private tooltip: any = null;
|
|
private colorAxis: any = null;
|
|
|
|
constructor(id: string) {
|
|
this.id = id;
|
|
}
|
|
|
|
public setChart(type: string = 'heatmap'): void{
|
|
this.chart = {
|
|
type: 'heatmap',
|
|
marginTop: 40,
|
|
marginBottom: 80,
|
|
plotBorderWidth: 1
|
|
};
|
|
}
|
|
|
|
public setXAxis(text: string, reversed: boolean = true){
|
|
this.xAxis.push({
|
|
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
|
|
});
|
|
}
|
|
|
|
public setYAxis(text: string, max: number, min: number, tickInterval: number, tickAmount: number, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true){
|
|
this.yAxis.push({
|
|
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
|
title: null
|
|
});
|
|
}
|
|
|
|
public setColorAxis(): void {
|
|
this.colorAxis = {
|
|
min: 0,
|
|
minColor: '#FFFFFF',
|
|
maxColor: Highcharts.getOptions().colors[0]
|
|
}
|
|
}
|
|
|
|
public setLegend(enabled: boolean = false){
|
|
this.legend = {
|
|
align: 'right',
|
|
layout: 'vertical',
|
|
margin: 0,
|
|
verticalAlign: 'top',
|
|
y: 25,
|
|
symbolHeight: 280
|
|
}
|
|
}
|
|
|
|
public setTooltip(pointFormat: string, headerFormat: string = '<b>{series.name}</b><br/>'){
|
|
this.tooltip = {
|
|
formatter: function () {
|
|
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
|
|
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
|
|
}
|
|
}
|
|
}
|
|
|
|
// public setSeries(name: string)
|
|
public setSeries(data: any){
|
|
// let series: any = {
|
|
// name: name,
|
|
// data: [],
|
|
// }
|
|
// if (color == null || valueSuffix == null){
|
|
// this.series.push(series);
|
|
// return
|
|
// }
|
|
|
|
// series.yAxis = yAxis;
|
|
// series.tooltip = {
|
|
// valueSuffix: valueSuffix
|
|
// };
|
|
// series.color = color;
|
|
this.series.push({
|
|
name: 'Sales per employee',
|
|
borderWidth: 1,
|
|
data: data,
|
|
dataLabels: {
|
|
enabled: true,
|
|
color: '#000000'
|
|
}
|
|
});
|
|
}
|
|
|
|
public init(): void{
|
|
const options = this.getOptions();
|
|
this.highChart = Highcharts.chart(this.id, options);
|
|
// return this.highChart;
|
|
}
|
|
|
|
private getOptions(){
|
|
let options: any = {
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
chart: this.chart,
|
|
title: {
|
|
text: null
|
|
},
|
|
xAxis: this.xAxis,
|
|
yAxis: this.yAxis,
|
|
colorAxis: this.colorAxis,
|
|
tooltip: this.tooltip,
|
|
series: this.series
|
|
};
|
|
if (this.legend != null)
|
|
options.legend = this.legend;
|
|
|
|
return options;
|
|
}
|
|
|
|
public updateSeries(index: number, data: Array<any>): void{
|
|
this.highChart.series[index].setData(data);
|
|
}
|
|
|
|
public updateXAxis(categories: Array<any>, index: number = 0){
|
|
this.highChart.xAxis[index].setCategories(categories);
|
|
}
|
|
}
|
|
|
|
|