|
1
|
|
|
function init_chart(grid_id) { |
|
2
|
|
|
|
|
3
|
|
|
const ctx = document.getElementById('chart-' + grid_id); |
|
4
|
|
|
var chart, |
|
5
|
|
|
chart_shown = false, |
|
6
|
|
|
chart_toggle = $('#' + grid_id + '-chart'); |
|
7
|
|
|
|
|
8
|
|
|
function render_chart() { |
|
9
|
|
|
let group_data = $('#' + grid_id).jqGrid('getGridParam', 'groupingView'), |
|
10
|
|
|
chart_labels = [], |
|
11
|
|
|
chart_data = [], |
|
12
|
|
|
datasets = []; |
|
13
|
|
|
|
|
14
|
|
|
group_data.groups.forEach(function(group) { |
|
15
|
|
|
chart_labels.push(group.value.replace(/<\/?[^>]+(>|$)/g, "")); |
|
16
|
|
|
chart_data.push(group.summary[0].v); |
|
17
|
|
|
}); |
|
18
|
|
|
|
|
19
|
|
|
var label = ''; |
|
20
|
|
|
$('#' + grid_id).jqGrid('getGridParam', 'colModel').forEach(function(col, index) { |
|
21
|
|
|
if (col.name == 'sum') { |
|
22
|
|
|
label = $('#' + grid_id).jqGrid('getGridParam', 'colNames')[index]; |
|
23
|
|
|
} |
|
24
|
|
|
}); |
|
25
|
|
|
|
|
26
|
|
|
datasets.push({ |
|
27
|
|
|
label: label, |
|
28
|
|
|
type: 'bar', |
|
29
|
|
|
data: chart_data, |
|
30
|
|
|
borderWidth: 1 |
|
31
|
|
|
}); |
|
32
|
|
|
|
|
33
|
|
|
if (group_data.groupField[0] == 'month' || group_data.groupField[0] == 'year') { |
|
34
|
|
|
let averages = [], |
|
35
|
|
|
periods = Math.min(Math.floor(chart_data.length / 6), 11); |
|
36
|
|
|
chart_data.forEach(function(value, index) { |
|
37
|
|
|
if (index >= periods) { |
|
38
|
|
|
let sum = value; |
|
39
|
|
|
for (let i = 1; i <= periods; i++) { |
|
40
|
|
|
sum += chart_data[index - i]; |
|
41
|
|
|
} |
|
42
|
|
|
averages.push(sum / (periods + 1)); |
|
43
|
|
|
} else { |
|
44
|
|
|
averages.push(null); |
|
45
|
|
|
} |
|
46
|
|
|
}); |
|
47
|
|
|
datasets.push({ |
|
48
|
|
|
label: 'Avg (' + (periods + 1) + ')', |
|
49
|
|
|
type: 'line', |
|
50
|
|
|
tension: .4, |
|
51
|
|
|
pointStyle: false, |
|
52
|
|
|
data: averages |
|
53
|
|
|
}); |
|
54
|
|
|
} |
|
55
|
|
|
|
|
56
|
|
|
chart = new Chart(ctx, { |
|
57
|
|
|
data: { |
|
58
|
|
|
labels: chart_labels, |
|
59
|
|
|
datasets: datasets |
|
60
|
|
|
}, |
|
61
|
|
|
options: { |
|
62
|
|
|
scales: { |
|
63
|
|
|
y: { |
|
64
|
|
|
beginAtZero: true |
|
65
|
|
|
} |
|
66
|
|
|
} |
|
67
|
|
|
} |
|
68
|
|
|
}); |
|
69
|
|
|
} |
|
70
|
|
|
|
|
71
|
|
|
$('#chgrouping_' + grid_id).on('change', function() { |
|
72
|
|
|
if (chart) { |
|
73
|
|
|
chart.destroy(); |
|
74
|
|
|
} |
|
75
|
|
|
if ($('#' + grid_id).jqGrid('getGridParam', 'grouping')) { |
|
76
|
|
|
$(ctx).show(); |
|
77
|
|
|
render_chart(); |
|
78
|
|
|
chart_toggle.prop('disabled', false); |
|
79
|
|
|
} else { |
|
80
|
|
|
$(ctx).hide(); |
|
81
|
|
|
chart_toggle.prop('disabled', true); |
|
82
|
|
|
$(window).trigger('resize'); |
|
83
|
|
|
} |
|
84
|
|
|
}).trigger('change'); |
|
85
|
|
|
|
|
86
|
|
|
chart_toggle.on('click', function() { |
|
87
|
|
|
chart_shown = !chart_shown && !chart_toggle.prop('disabled'); |
|
88
|
|
|
|
|
89
|
|
|
if (chart_shown) { |
|
90
|
|
|
$('body').addClass('chart-shown'); |
|
91
|
|
|
} else { |
|
92
|
|
|
$('body').removeClass('chart-shown'); |
|
93
|
|
|
} |
|
94
|
|
|
$(window).trigger('resize'); |
|
95
|
|
|
}).trigger('click'); |
|
96
|
|
|
} |
flack /
openpsa
