1 |
57732
|
stefania.m
|
import {Component, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation} from '@angular/core';
|
2 |
|
|
|
3 |
|
|
import * as Highcharts from 'highcharts';
|
4 |
|
|
import HighchartsMore from 'highcharts/highcharts-more.src.js';
|
5 |
|
|
import solidGauge from 'highcharts/modules/solid-gauge.js';
|
6 |
|
|
|
7 |
|
|
HighchartsMore(Highcharts);
|
8 |
|
|
solidGauge(Highcharts);
|
9 |
|
|
|
10 |
|
|
@Component({
|
11 |
|
|
selector: 'app-gauge-chart',
|
12 |
|
|
templateUrl: './gauge-chart.component.html',
|
13 |
|
|
// styleUrls: ['./top-menu.component.css'],
|
14 |
|
|
encapsulation: ViewEncapsulation.None
|
15 |
|
|
})
|
16 |
|
|
|
17 |
|
|
export class GaugeChartComponent implements OnInit, OnChanges {
|
18 |
|
|
|
19 |
|
|
@Input() chartData: number;
|
20 |
|
|
@Input() color: string;
|
21 |
|
|
|
22 |
|
|
public chartValue = 25;
|
23 |
|
|
|
24 |
|
|
public update = false;
|
25 |
|
|
|
26 |
|
|
Highcharts: typeof Highcharts = Highcharts;
|
27 |
|
|
|
28 |
|
|
// gaugeChartOptions: Highcharts.Options;
|
29 |
|
|
|
30 |
|
|
public gaugeChartOptions = {
|
31 |
|
|
chart: {
|
32 |
|
|
type: 'solidgauge'
|
33 |
|
|
},
|
34 |
|
|
|
35 |
|
|
title: {
|
36 |
|
|
text: ''
|
37 |
|
|
},
|
38 |
|
|
|
39 |
|
|
pane: {
|
40 |
|
|
center: ['50%', '85%'],
|
41 |
|
|
size: '140%',
|
42 |
|
|
startAngle: -90,
|
43 |
|
|
endAngle: 90,
|
44 |
|
|
background: {
|
45 |
|
|
backgroundColor: '#fff',
|
46 |
|
|
innerRadius: '60%',
|
47 |
|
|
outerRadius: '100%',
|
48 |
|
|
shape: 'arc'
|
49 |
|
|
}
|
50 |
|
|
},
|
51 |
|
|
|
52 |
|
|
tooltip: {
|
53 |
|
|
enabled: true
|
54 |
|
|
},
|
55 |
|
|
|
56 |
|
|
credits: {
|
57 |
|
|
enabled: false
|
58 |
|
|
},
|
59 |
|
|
|
60 |
|
|
yAxis: {
|
61 |
|
|
stops: [[0.1, '#DF5353'], [0.5, '#DDDF0D'], [0.9, '#55BF3B']],
|
62 |
|
|
min: 0,
|
63 |
|
|
max: 100,
|
64 |
|
|
lineWidth: 0,
|
65 |
|
|
// tickAmount: 6,
|
66 |
|
|
// labels: {
|
67 |
|
|
// y: 16
|
68 |
|
|
// }
|
69 |
|
|
},
|
70 |
|
|
|
71 |
|
|
plotOptions: {
|
72 |
|
|
solidgauge: {
|
73 |
|
|
dataLabels: {
|
74 |
|
|
y: 5,
|
75 |
|
|
borderWidth: 0,
|
76 |
|
|
useHTML: true
|
77 |
|
|
}
|
78 |
|
|
}
|
79 |
|
|
},
|
80 |
|
|
|
81 |
|
|
series: [
|
82 |
|
|
{
|
83 |
|
|
name: 'Speed',
|
84 |
|
|
data: [this.chartValue],
|
85 |
|
|
dataLabels: {
|
86 |
|
|
allowOverlap: true,
|
87 |
|
|
format:
|
88 |
|
|
'<div style="text-align:center"><span style="font-size:20px;color:black' +
|
89 |
|
|
'">{y:.0f}%</span><br/>' +
|
90 |
|
|
'<span style="font-size:12px;color:silver"> </span></div>'
|
91 |
|
|
}
|
92 |
|
|
}
|
93 |
|
|
]
|
94 |
|
|
};
|
95 |
|
|
|
96 |
|
|
constructor() {}
|
97 |
|
|
|
98 |
|
|
private updateChart(value) {
|
99 |
|
|
this.chartValue = value;
|
100 |
|
|
|
101 |
|
|
// first try - working without transition
|
102 |
|
|
// this.gaugeChartOptions.title.text = value;
|
103 |
|
|
this.gaugeChartOptions.series['0'].data[0] = value;
|
104 |
|
|
// this.gaugeChartOptions.series['0'].update();
|
105 |
|
|
this.update = true;
|
106 |
|
|
}
|
107 |
|
|
|
108 |
|
|
ngOnInit(): void {
|
109 |
|
|
// console.log('onInit');
|
110 |
|
|
this.updateChart(this.chartData);
|
111 |
|
|
}
|
112 |
|
|
|
113 |
|
|
ngOnChanges(changes: SimpleChanges): void {
|
114 |
|
|
// console.log('onChanges');
|
115 |
|
|
// console.log('Chart data: ', this.chartData);
|
116 |
|
|
this.updateChart(this.chartData);
|
117 |
|
|
}
|
118 |
|
|
|
119 |
|
|
}
|