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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
'use strict';
// All the pie chars
function makePieChart($parent) {
var data = $parent.data('chart');
var chartData = {
datasets: [{
data: data.map(function(x) { return x.value; }),
backgroundColor: data.map(function(x) { return x.color; })
}]
};
var $canv = $('<canvas style="width:100%;height:250px">');
$parent.append($canv);
(function() {
var $dest = $parent.data('chart-dest');
var cur = null;
new Chart($canv[0].getContext('2d'), {
type: 'pie', data: chartData, options: {
animation: false,
onHover: function (_, list) {
if (list.length === 0 || list[0].index !== cur) {
if (cur !== null) {
$($dest + cur).removeClass('slx-bold');
cur = null;
}
}
if (list.length !== 0 && list[0].index !== cur) {
cur = list[0].index;
$($dest + cur).addClass('slx-bold');
}
},
plugins: {
tooltip: {enabled: false},
legend: {display: false}
}
}
});
$canv.mouseout(function() {
if (cur !== null) {
$($dest + cur).removeClass('slx-bold');
cur = null;
}
});
})();
}
function popupFilter(field) {
var $row = addFilter(field, null, null);
if ($row !== null) {
$row.find('.arg').focus();
$row.removeClass('slx-focus')
setTimeout(function() { $row.addClass('slx-focus'); }, 10);
}
}
function addFilter(field, op, argument) {
if (field === null)
return null;
var $row = $('#filter-' + field);
if ($row.length === 0)
return null;
if (argument !== null) {
$row.find('.op').val(op);
$row.find('.arg').val(argument);
}
// Enable checkbox only if we got a predefined value, or if argument is in a select, as the user might want the preselected item and doesn't notice the checkbox is unchecked
if (argument !== null || $row.find('select.arg').length !== 0) {
$row.find('.filter-enable').prop('checked', true);
}
$row.show();
return $row;
}
function refresh() {
$('#query-form').submit();
}
function makeUsagePie($parent) {
var data = $parent.data('chart');
var chartData = {
datasets: [{
data: data.map(function(x) { return x.value; }),
backgroundColor: data.map(function(x) { return x.color; }),
tooltip: data.map(function(x) { return x.tooltip; }),
}]
};
var $canv = $('<canvas style="width:250px;height:250px" width="250" height="250">');
$parent.append($canv);
(function() {
new Chart($canv[0].getContext('2d'), {
type: 'pie', data: chartData, options: {
animation: false,
plugins: {
tooltip: {
enabled: true,
callbacks: {
label: function(context) {
return context.dataset.tooltip[context.dataIndex];
}
}
},
legend: {display: false}
}
}
});
})();
}
|
