-
Notifications
You must be signed in to change notification settings - Fork 3
/
usage-demo.component.js
80 lines (73 loc) · 1.64 KB
/
usage-demo.component.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import Chart from '../dist/angular-highcharts';
class UsageDemo {
constructor() {
this.loading = false;
this.chart = new Chart({
chart: {
type: 'line',
},
title: {
text: null,
},
});
// Separate chart initialization from adding series so that
// upon receiving data, the chart will only rerender without it jumping.
// This removes the need to create a placeholder with the right size.
this.chart.addSeries({
id: 'foo',
name: 'Line 1',
data: [1, 5, 3],
});
}
addSeries() {
const barData = [
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
];
const bazData = [
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
Math.floor(Math.random() * 10),
];
this.chart.addSeries({
id: 'bar',
name: 'Line 2',
data: barData
}, {
id: 'baz',
name: 'Line 3',
data: bazData
});
}
removeSeries() {
this.chart.removeSeries('bar');
}
removeAllSeries() {
this.chart.removeAllSeries();
}
toggleLoading() {
this.loading = !this.loading;
}
}
export default {
controller: UsageDemo,
template: `
<button ng-click="$ctrl.addSeries();">
ADD NEW SERIES
</button>
<button ng-click="$ctrl.removeSeries();">
REMOVE BAR SERIES
</button>
<button ng-click="$ctrl.removeAllSeries();">
REMOVE All SERIES
</button>
<button ng-click="$ctrl.toggleLoading();">
TOGGLE LOADING
</button>
<chart
loading="$ctrl.loading"
chart="$ctrl.chart">
</chart>
`
}