1 | $(document).ready(() => { |
||
2 | $('.selectpicker').selectpicker(); |
||
3 | |||
4 | loadInitialProduct(); |
||
5 | |||
6 | $('#id_after').on('dp.change', reloadCharts); |
||
7 | $('#id_before').on('dp.change', reloadCharts); |
||
8 | document.getElementById('id_select_test_plan').onchange = reloadCharts; |
||
9 | document.getElementById('id_select_product').onchange = updateTestPlanSelect; |
||
10 | }); |
||
11 | |||
12 | function loadInitialProduct() { |
||
13 | jsonRPC('Product.filter', {}, data => { |
||
14 | updateSelect(data, '#id_select_product', 'id', 'name'); |
||
15 | reloadCharts(); |
||
16 | }); |
||
17 | } |
||
18 | |||
19 | function updateTestPlanSelect() { |
||
20 | const productId = $('#id_select_product').val(); |
||
21 | |||
22 | if (!productId) { |
||
23 | updateSelect([], '#id_select_test_plan', 'plan_id', 'name'); |
||
24 | reloadCharts(); |
||
25 | return; |
||
26 | } |
||
27 | jsonRPC('TestPlan.filter', {'product_id': productId}, data => { |
||
28 | updateSelect(data, '#id_select_test_plan', 'plan_id', 'name'); |
||
29 | reloadCharts(); |
||
30 | }) |
||
31 | } |
||
32 | |||
33 | function reloadCharts() { |
||
34 | const query = {}; |
||
35 | |||
36 | const testPlanId = $('#id_select_test_plan').val(); |
||
37 | const productId = $('#id_select_product').val(); |
||
38 | |||
39 | if (testPlanId) { |
||
40 | query['plan'] = testPlanId; |
||
41 | } else if (productId) { |
||
42 | query['category__product_id'] = productId; |
||
43 | } |
||
44 | |||
45 | const dateBefore = $('#id_before'); |
||
46 | if (dateBefore.val()) { |
||
47 | query['create_date__lte'] = dateBefore.data('DateTimePicker').date().format('YYYY-MM-DD 23:59:59'); |
||
48 | } |
||
49 | |||
50 | const dateAfter = $('#id_after'); |
||
51 | if (dateAfter.val()) { |
||
52 | query['create_date__gte'] = dateAfter.data('DateTimePicker').date().format('YYYY-MM-DD 00:00:00'); |
||
53 | } |
||
54 | |||
55 | jsonRPC('Testing.breakdown', query, result => { |
||
56 | drawAutomatedBar(result.count); |
||
57 | drawPrioritiesChart(result.priorities); |
||
58 | drawCategoriesChart(result.categories); |
||
59 | }, true); |
||
60 | } |
||
61 | |||
62 | function drawAutomatedBar(count) { |
||
63 | d3.select('#total-count') |
||
0 ignored issues
–
show
|
|||
64 | .style('font-weight', 'bold') |
||
65 | .style('font-size', '18px') |
||
66 | .text(count.all); |
||
67 | |||
68 | d3.selectAll('.progress-bar') |
||
69 | .attr('aria-valuemin', '0') |
||
70 | .attr('aria-valuemax', '100'); |
||
71 | |||
72 | d3.select('.automated-legend-text > span').remove(); |
||
73 | d3.select('.manual-legend-text > span').remove(); |
||
74 | |||
75 | d3.select('.automated-legend-text') |
||
76 | .append('span') |
||
77 | .text(` - ${count.automated}`); |
||
78 | |||
79 | d3.select('.manual-legend-text') |
||
80 | .append('span') |
||
81 | .text(` - ${count.manual}`); |
||
82 | |||
83 | const automatedPercent = count.automated / count.all * 100; |
||
84 | |||
85 | d3.select('.automated-bar') |
||
86 | .attr('aria-valuenow', `${automatedPercent}`) |
||
87 | .attr('title', `${count.automated} Automated`) |
||
88 | .style('width', `${automatedPercent}%`); |
||
89 | |||
90 | const manualPercent = count.manual / count.all * 100; |
||
91 | |||
92 | d3.select('.manual-bar') |
||
93 | .attr('aria-valuenow', `${manualPercent}`) |
||
94 | .attr('title', `${count.manual} Manual`) |
||
95 | .style('width', `${manualPercent}%`); |
||
96 | } |
||
97 | |||
98 | function drawPrioritiesChart(priorities) { |
||
99 | drawChart(priorities, 'priority', '#priorities-chart'); |
||
100 | } |
||
101 | |||
102 | function drawCategoriesChart(categories) { |
||
103 | drawChart(categories, 'category', '#categories-chart'); |
||
104 | } |
||
105 | |||
106 | function drawChart(data, type, selector) { |
||
107 | const categories = new Set(); |
||
108 | let groups = [[]]; |
||
109 | let chartData = []; |
||
110 | |||
111 | Object.values(data).forEach(entry => { |
||
112 | Object.keys(entry).forEach(key => categories.add(key)); |
||
113 | }); |
||
114 | |||
115 | Object.entries(data).forEach(entry => { |
||
116 | let group = entry[0]; |
||
117 | groups[0].push(group); |
||
118 | |||
119 | let dataEntry = [group]; |
||
120 | |||
121 | categories.forEach(cat => { |
||
122 | let count = entry[1][cat]; |
||
123 | if (!count) { |
||
124 | count = 0; |
||
125 | } |
||
126 | dataEntry.push(count); |
||
127 | }); |
||
128 | |||
129 | chartData.push(dataEntry); |
||
130 | }); |
||
131 | |||
132 | let chartConfig = $().c3ChartDefaults().getDefaultStackedBarConfig(); |
||
133 | chartConfig.bindto = selector; |
||
134 | chartConfig.axis = { |
||
135 | x: { |
||
136 | categories: Array.from(categories), |
||
137 | type: 'category', |
||
138 | }, |
||
139 | y: { |
||
140 | tick: { |
||
141 | format: showOnlyRoundNumbers |
||
142 | } |
||
143 | } |
||
144 | }; |
||
145 | chartConfig.data = { |
||
146 | columns: chartData, |
||
147 | groups: groups, |
||
148 | type: 'bar', |
||
149 | order: null |
||
150 | }; |
||
151 | chartConfig.color = { |
||
152 | pattern: [ |
||
153 | $.pfPaletteColors.blue, |
||
154 | $.pfPaletteColors.red100, |
||
155 | ] |
||
156 | }; |
||
157 | chartConfig.grid = { |
||
158 | show: false |
||
159 | }; |
||
160 | |||
161 | c3.generate(chartConfig); |
||
0 ignored issues
–
show
The variable
c3 seems to be never declared. If this is a global, consider adding a /** global: c3 */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN.
Loading history...
|
|||
162 | } |
||
163 | |||
164 | function showOnlyRoundNumbers(number) { |
||
165 | if (number % 1 === 0) { |
||
166 | return number; |
||
167 | } |
||
168 | return ''; |
||
169 | } |
||
170 |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.