breakdown.js ➔ drawChart - Code Metrics - Inspection of "Generate translation strings" - kiwitcms/Kiwi - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 69eaf4...82ce9d )

by Alexander

created 2019-05-16 11:39 UTC

breakdown.js ➔ drawChart B

↳ Parent: tcms/telemetry/static/telemetry/js/testing/breakdown.js

Complexity

Conditions	1
Paths	1

Size

Total Lines	57
Code Lines	37

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
eloc	37
dl	0
loc	57
rs	8.9919
c	1
b	0
f	0
cc	1
nop	3
nc	1

1 Function

Rating	Name	Duplication	Size	Complexity
A	breakdown.js ➔ ... ➔ ???	0	3	1

How to fix Long Method

$(document).ready(() => {
    $('.selectpicker').selectpicker();

    loadInitialProduct();

    $('#id_after').on('dp.change', reloadCharts);
    $('#id_before').on('dp.change', reloadCharts);
    document.getElementById('id_select_test_plan').onchange = reloadCharts;
    document.getElementById('id_select_product').onchange = updateTestPlanSelect;
});

function loadInitialProduct() {
    jsonRPC('Product.filter', {}, data => {
        updateSelect(data, '#id_select_product', 'id', 'name');
        reloadCharts();
    });
}

function updateTestPlanSelect() {
    const productId = $('#id_select_product').val();

    if (!productId) {
        updateSelect([], '#id_select_test_plan', 'plan_id', 'name');
        reloadCharts();
        return;
    }
    jsonRPC('TestPlan.filter', {'product_id': productId}, data => {
        updateSelect(data, '#id_select_test_plan', 'plan_id', 'name');
        reloadCharts();
    })
}

function reloadCharts() {
    const query = {};

    const testPlanId = $('#id_select_test_plan').val();
    const productId = $('#id_select_product').val();

    if (testPlanId) {
        query['plan'] = testPlanId;
    } else if (productId) {
        query['category__product_id'] = productId;
    }

    const dateBefore = $('#id_before');
    if (dateBefore.val()) {
        query['create_date__lte'] = dateBefore.data('DateTimePicker').date().format('YYYY-MM-DD 23:59:59');
    }

    const dateAfter = $('#id_after');
    if (dateAfter.val()) {
        query['create_date__gte'] = dateAfter.data('DateTimePicker').date().format('YYYY-MM-DD 00:00:00');
    }

    jsonRPC('Testing.breakdown', query, result => {
        drawAutomatedBar(result.count);
        drawPrioritiesChart(result.priorities);
        drawCategoriesChart(result.categories);
    }, true);
}

function drawAutomatedBar(count) {
    d3.select('#total-count')

        .style('font-weight', 'bold')
        .style('font-size', '18px')
        .text(count.all);

    d3.selectAll('.progress-bar')
        .attr('aria-valuemin', '0')
        .attr('aria-valuemax', '100');

    d3.select('.automated-legend-text > span').remove();
    d3.select('.manual-legend-text > span').remove();

    d3.select('.automated-legend-text')
        .append('span')
        .text(` - ${count.automated}`);

    d3.select('.manual-legend-text')
        .append('span')
        .text(` - ${count.manual}`);

    const automatedPercent = count.automated / count.all * 100;

    d3.select('.automated-bar')
        .attr('aria-valuenow', `${automatedPercent}`)
        .attr('title', `${count.automated} Automated`)
        .style('width', `${automatedPercent}%`);

    const manualPercent = count.manual / count.all * 100;

    d3.select('.manual-bar')
        .attr('aria-valuenow', `${manualPercent}`)
        .attr('title', `${count.manual} Manual`)
        .style('width', `${manualPercent}%`);
}

function drawPrioritiesChart(priorities) {
    drawChart(priorities, 'priority', '#priorities-chart');
}

function drawCategoriesChart(categories) {
    drawChart(categories, 'category', '#categories-chart');
}

function drawChart(data, type, selector) {
    const categories = new Set();
    let groups = [[]];
    let chartData = [];

    Object.values(data).forEach(entry => {
        Object.keys(entry).forEach(key => categories.add(key));
    });

    Object.entries(data).forEach(entry => {
        let group = entry[0];
        groups[0].push(group);

        let dataEntry = [group];

        categories.forEach(cat => {
            let count = entry[1][cat];
            if (!count) {
                count = 0;
            }
            dataEntry.push(count);
        });

        chartData.push(dataEntry);
    });

    let chartConfig = $().c3ChartDefaults().getDefaultStackedBarConfig();
    chartConfig.bindto = selector;
    chartConfig.axis = {
        x: {
            categories: Array.from(categories),
            type: 'category',
        },
        y: {
            tick: {
                format: showOnlyRoundNumbers
            }
        }
    };
    chartConfig.data = {
        columns: chartData,
        groups: groups,
        type: 'bar',
        order: null
    };
    chartConfig.color = {
        pattern: [
            $.pfPaletteColors.blue,
            $.pfPaletteColors.red100,
        ]
    };
    chartConfig.grid = {
        show: false
    };

    c3.generate(chartConfig);

}

function showOnlyRoundNumbers(number) {
    if (number % 1 === 0) {
        return number;
    }
    return '';
}


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 Bug introduced 2019-05-03 22:53 UTC by Report Bug Copy Issue Report The variable `d3` seems to be never declared. If this is a global, consider adding a `/** global: d3 */` 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...
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 Bug introduced 2019-05-03 22:53 UTC by Report Bug Copy Issue Report 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

kiwitcms / Kiwi

Push — master ( 69eaf4...82ce9d )

breakdown.js ➔ drawChart B

Complexity

Size

Duplication

Importance

1 Function

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like