diff --git a/ubcpi/static/js/spec/d3-pibar_spec.js b/ubcpi/static/js/spec/d3-pibar_spec.js index 5c1b3de..59dc0ef 100644 --- a/ubcpi/static/js/spec/d3-pibar_spec.js +++ b/ubcpi/static/js/spec/d3-pibar_spec.js @@ -19,18 +19,23 @@ describe('D3 bar chart', function () { it('should provide getters and setters', function() { var defaultChartWidth = chart.width(); var defaultChartHeight = chart.height(); + var defaultMinTotalFrequency = chart.minTotalFrequency(); chart.width(100) - .height(50); + .height(50) + .minTotalFrequency(20); var newChartWidth = chart.width(); var newChartHeight = chart.height(); + var newMinTotalFrequency = chart.minTotalFrequency(); expect(defaultChartWidth).not.toBe(100); expect(defaultChartHeight).not.toBe(50); + expect(defaultMinTotalFrequency).not.toBe(20); expect(newChartWidth).toBe(100); expect(newChartHeight).toBe(50); + expect(newMinTotalFrequency).toBe(20); }); //it('should render a chart with minimal requirements', function() { diff --git a/ubcpi/static/js/spec/ubcpi-barchar-directive_spec.js b/ubcpi/static/js/spec/ubcpi-barchar-directive_spec.js index e300a5d..dda6780 100644 --- a/ubcpi/static/js/spec/ubcpi-barchar-directive_spec.js +++ b/ubcpi/static/js/spec/ubcpi-barchar-directive_spec.js @@ -52,43 +52,61 @@ describe('UBCPI', function () { "image_position": "below", "show_image_fields": 0 }]; - var stats = {0:4, 2:4}; var answer = 1; var correct = 0; - beforeEach(function() { - scope.$apply(function () { - scope.options = options; - scope.stats = stats; - scope.answer = answer; - scope.correct = correct; + describe('with enough submissions', function() { + var stats = {0:5, 2:5}; + beforeEach(function() { + scope.$apply(function () { + scope.options = options; + scope.stats = stats; + scope.answer = answer; + scope.correct = correct; + }); }); - }); - it('should render the template with given data', function() { - expect(element.find('svg').length).toBe(1); - expect(element.find('g.axis').length).toBe(2); - }); + it('should render the template with given data', function() { + expect(element.find('svg').length).toBe(1); + expect(element.find('g.axis').length).toBe(2); + }); - it('should bind the data', function() { - expect(element.find('g rect.ubcpibar').length).toBe(options.length); - }); + it('should bind the data', function() { + expect(element.find('g rect.ubcpibar').length).toBe(options.length); + }); - it('should mark the correct answer label', function () { - expect(element.find('g.axis').eq(0).find('text').eq(correct).text()) - .toBe('Option ' + (correct + 1) + '(correct)'); + it('should mark the correct answer label', function () { + expect(element.find('g.axis').eq(0).find('text').eq(correct).text()) + .toBe('Option ' + (correct + 1) + '(correct)'); + }); + + it('should calculate percentage correctly', function() { + expect(element.find('svg>g:not(.axis)>text').length).toBe(options.length); + expect(element.find('svg>g:not(.axis)>text').eq(0).text()).toBe('50.0%'); + expect(element.find('svg>g:not(.axis)>text').eq(1).text()).toBe('0.0%'); + expect(element.find('svg>g:not(.axis)>text').eq(2).text()).toBe('50.0%'); + }); }); - it('should calculate percentage correctly', function() { - expect(element.find('svg>g:not(.axis)>text').length).toBe(options.length); - expect(element.find('svg>g:not(.axis)>text').eq(0).text()).toBe('50.0%'); - expect(element.find('svg>g:not(.axis)>text').eq(1).text()).toBe('0.0%'); - expect(element.find('svg>g:not(.axis)>text').eq(2).text()).toBe('50.0%'); + describe('with enough submissions', function() { + var stats = {0:2, 2:2}; + beforeEach(function() { + scope.$apply(function () { + scope.options = options; + scope.stats = stats; + scope.answer = answer; + scope.correct = correct; + }); + }); + it('should not generate chart if minial total frequency is not satisfied', function () { + expect(element.find('span').length).toBe(1); + expect(element.text()).toEqual('Not enough data to generate the chart. Please check back later.'); + }); }); xit('should update when stats changed', function() { scope.$apply(function() { - scope.stats = {0:2, 1:4} + scope.stats = {0:4, 1:8} }); expect(element.find('svg>g:not(.axis)>text').length).toBe(options.length); expect(element.find('svg>g:not(.axis)>text').eq(0).text()).toBe('33.3%'); diff --git a/ubcpi/static/js/src/d3-pibar.js b/ubcpi/static/js/src/d3-pibar.js index 2e66a07..335c206 100644 --- a/ubcpi/static/js/src/d3-pibar.js +++ b/ubcpi/static/js/src/d3-pibar.js @@ -14,40 +14,11 @@ d3.custom.barChart = function() { // Private Variables var chartWidth = 750; var chartHeight = 250; + var minTotalFrequency = 10; function chart(selection) { selection.each(function(data) { - //var i; - //var modifiedData = []; - //var thisFreq; - //for (i = 0; i < data.length; ++i) { - // thisFreq = data[i][1]; - // var thisLabel = 'Option ' + (i + 1); - // - // var thisObject = {}; - // - // thisObject.class = 'ubcpibar'; - // thisObject.frequency = thisFreq; - // - // // If this is the 'correct' answer, then add that to the label - // if (self.correct_answer == (i)) { - // thisLabel += ' (correct option)'; - // thisObject.class = 'ubcpibar correct-answer'; - // } - // - // thisObject.label = thisLabel; - // modifiedData.push(thisObject); - //} - // - //data = modifiedData; - - var totalFreq = 0; - - // Calculate the total number of submissions - for (var i = 0; i < data.length; i++) { - thisFreq = data[i].frequency; - totalFreq += thisFreq; - } + var totalFreq = d3.sum(data, function(d) { return d.frequency; }); // Layout var margin = { @@ -57,6 +28,13 @@ d3.custom.barChart = function() { left: 0 }; + if (totalFreq < minTotalFrequency) { + d3.select(this) + .append("span") + .text("Not enough data to generate the chart. Please check back later."); + return; + } + var width = chartWidth - margin.left - margin.right; var height = chartHeight - margin.top - margin.bottom; @@ -163,5 +141,12 @@ d3.custom.barChart = function() { return this; }; + chart.minTotalFrequency = function(min) { + if (!arguments.length) return minTotalFrequency; + minTotalFrequency = min; + + return this; + }; + return chart; }; \ No newline at end of file