describe('c3 chart shape bar', function () { 'use strict'; var chart, args; beforeEach(function (done) { chart = window.initChart(chart, args, done); }); describe('Path boxes', function () { beforeAll(function () { args = { data: { columns: [ ['data1', 30] ], type: 'bar', }, bar: { width: { max: 40 } } }; }); it('bars should have expected Path Box', function () { var expected = { x: 279, y: 40, width: 40, height: 387 }; var shapes = chart.internal.main .selectAll('.' + chart.internal.CLASS.shapes) .selectAll('.' + chart.internal.CLASS.shape); shapes.each(function () { var pathBox = chart.internal.getPathBox(this); expect(pathBox.x).toBeCloseTo(expected.x, -1); expect(pathBox.y).toBeCloseTo(expected.y, -1); expect(pathBox.width).toBeCloseTo(expected.width, -1); expect(pathBox.height).toBeCloseTo(expected.height, -1); }); }); }); describe('with groups', function () { describe('with indexed data', function () { beforeAll(function () { args = { data: { columns: [ ['data1', 30, 200, -100, 400, -150, 250], ['data2', 50, 20, 10, 40, 15, 25], ], groups: [ ['data1', 'data2'], ], type: 'bar' }, }; }); it('should be stacked', function () { var expectedBottom = [275, 293, 365, 281, 395, 290]; chart.internal.main.selectAll('.c3-bars-data1 .c3-bar').each(function (d, i) { var rect = d3.select(this).node().getBoundingClientRect(); expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1); }); }); }); describe('with timeseries data', function () { beforeAll(function () { args = { data: { x: 'date', columns: [ ['date', '2012-12-24', '2012-12-25', '2012-12-26', '2012-12-27', '2012-12-28', '2012-12-29'], ['data1', 30, 200, -100, 400, -150, 250], ['data2', 50, 20, 10, 40, 15, 25], ], groups: [ ['data1', 'data2'], ], type: 'bar' }, axis: { x: { type: 'timeseries', } } }; }); it('should be stacked', function () { var expectedBottom = [275, 293, 365, 281, 395, 290]; chart.internal.main.selectAll('.c3-bars-data1 .c3-bar').each(function (d, i) { var rect = d3.select(this).node().getBoundingClientRect(); expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1); }); }); }); describe('with category data', function () { beforeAll(function () { args = { data: { x: 'date', columns: [ ['date', '2012-12-24', '2012-12-25', '2012-12-26', '2012-12-27', '2012-12-28', '2012-12-29'], ['data1', 30, 200, -100, 400, -150, 250], ['data2', 50, 20, 10, 40, 15, 25], ], groups: [ ['data1', 'data2'], ], type: 'bar' }, axis: { x: { type: 'category', } } }; }); it('should be stacked', function () { var expectedBottom = [275, 293, 365, 281, 395, 290]; chart.internal.main.selectAll('.c3-bars-data1 .c3-bar').each(function (d, i) { var rect = d3.select(this).node().getBoundingClientRect(); expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1); }); }); }); }); describe('internal.isWithinBar', function () { describe('with normal axis', function () { beforeAll(function () { args = { data: { columns: [ ['data1', 30, 200, 100, 400, -150, 250], ['data2', 50, 20, 10, 40, 15, 25], ['data3', -150, 120, 110, 140, 115, 125] ], type: 'bar' }, axis: { rotated: false } }; }); it('should not be within bar', function () { var bar = d3.select('.c3-target-data1 .c3-bar-0').node(); expect(chart.internal.isWithinBar([0, 0], bar)).toBeFalsy(); }); it('should be within bar', function () { var bar = d3.select('.c3-target-data1 .c3-bar-0').node(); expect(chart.internal.isWithinBar([31, 280], bar)).toBeTruthy(); }); it('should not be within bar of negative value', function () { var bar = d3.select('.c3-target-data3 .c3-bar-0').node(); expect(chart.internal.isWithinBar([68, 280], bar)).toBeFalsy(); }); it('should be within bar of negative value', function () { var bar = d3.select('.c3-target-data3 .c3-bar-0').node(); expect(chart.internal.isWithinBar([68, 350], bar)).toBeTruthy(); }); }); describe('with rotated axis', function () { beforeAll(function () { args.axis.rotated = true; }); it('should not be within bar', function () { var bar = d3.select('.c3-target-data1 .c3-bar-0').node(); expect(chart.internal.isWithinBar([0, 0], bar)).toBeFalsy(); }); it('should be within bar', function () { var bar = d3.select('.c3-target-data1 .c3-bar-0').node(); expect(chart.internal.isWithinBar([190, 20], bar)).toBeTruthy(); }); it('should be within bar of negative value', function () { var bar = d3.select('.c3-target-data3 .c3-bar-0').node(); expect(chart.internal.isWithinBar([68, 50], bar)).toBeTruthy(); }); }); }); describe('bar spacing', function () { var createArgs = function (spacing) { return { size: { width: 500 }, data: { columns: [ ['data1', 30, 200, 100], ['data2', 50, 20, 10], ['data3', 150, 120, 110], ['data4', 12, 24, 20] ], type: 'bar', groups: [ ['data1', 'data4'] ] }, bar: { space: spacing } }; }; var getBBox = function (selector) { return d3.select(selector).node().getBBox(); }; var getBarContainerWidth = function () { return parseInt(getBBox('.c3-chart-bars').width); }; var getBarContainerOffset = function () { return parseInt(getBBox('.c3-chart-bars').x); }; var getBarBBox = function (name, idx) { return getBBox('.c3-target-' + name + ' .c3-bar-' + (idx || 0)); }; var getBarWidth = function (name, idx) { return parseInt(getBarBBox(name, idx).width); }; var getBarOffset = function (name1, name2, idx) { var bbox1 = getBarBBox(name1, idx); var bbox2 = getBarBBox(name2, idx); return parseInt(bbox2.x - (bbox1.x + bbox1.width)); }; it('should set bar spacing to 0', function () { args = createArgs(0); expect(true).toBeTruthy(); }); it('should display the bars without any spacing', function () { // all bars should have the same width expect(getBarWidth('data1', 0)).toEqual(30); expect(getBarWidth('data2', 0)).toEqual(30); expect(getBarWidth('data3', 0)).toEqual(30); expect(getBarWidth('data1', 1)).toEqual(30); expect(getBarWidth('data2', 1)).toEqual(30); expect(getBarWidth('data3', 1)).toEqual(30); expect(getBarWidth('data1', 2)).toEqual(30); expect(getBarWidth('data2', 2)).toEqual(30); expect(getBarWidth('data3', 2)).toEqual(30); // all offsets should be the same expect(getBarOffset('data1', 'data2', 0)).toEqual(0); expect(getBarOffset('data2', 'data3', 0)).toEqual(0); expect(getBarOffset('data1', 'data2', 1)).toEqual(0); expect(getBarOffset('data2', 'data3', 1)).toEqual(0); expect(getBarOffset('data1', 'data2', 2)).toEqual(0); expect(getBarOffset('data2', 'data3', 2)).toEqual(0); // default width/offset of the container for this chart expect(getBarContainerWidth()).toEqual(396); expect(getBarContainerOffset()).toEqual(31); }); it('should set bar spacing to 0.25', function () { args = createArgs(0.25); expect(true).toBeTruthy(); }); it('should display the bars with a spacing ratio of 0.25', function () { // with bar_space of 0.25, the space between bars is // expected to be 25% of the original bar's width // which is ~7 // expect all bars to be the same width expect(getBarWidth('data1', 0)).toEqual(22); expect(getBarWidth('data2', 0)).toEqual(22); expect(getBarWidth('data3', 0)).toEqual(22); expect(getBarWidth('data1', 1)).toEqual(22); expect(getBarWidth('data2', 1)).toEqual(22); expect(getBarWidth('data3', 1)).toEqual(22); expect(getBarWidth('data1', 2)).toEqual(22); expect(getBarWidth('data2', 2)).toEqual(22); expect(getBarWidth('data3', 2)).toEqual(22); // all offsets should be the same expect(getBarOffset('data1', 'data2', 0)).toEqual(7); expect(getBarOffset('data2', 'data3', 0)).toEqual(7); expect(getBarOffset('data1', 'data2', 1)).toEqual(7); expect(getBarOffset('data2', 'data3', 1)).toEqual(7); expect(getBarOffset('data1', 'data2', 2)).toEqual(7); expect(getBarOffset('data2', 'data3', 2)).toEqual(7); // expect the container to shrink a little because of // the offsets from the first/last chart // we add/subtract 1 because of approximation due to rounded values expect(getBarContainerWidth()).toEqual(396 - 7 - 1); expect(getBarContainerOffset()).toEqual(31 + (parseInt(7 / 2) + 1)); }); it('should set bar spacing to 0.5', function () { args = createArgs(0.5); expect(true).toBeTruthy(); }); it('should display the bars with a spacing ratio of 0.5', function () { // with bar_space of 0.5, the space between bars is // expected to be 50% of the original bar's width // which is ~15 // expect all bars to be the same width expect(getBarWidth('data1', 0)).toEqual(15); expect(getBarWidth('data2', 0)).toEqual(15); expect(getBarWidth('data3', 0)).toEqual(15); expect(getBarWidth('data1', 1)).toEqual(15); expect(getBarWidth('data2', 1)).toEqual(15); expect(getBarWidth('data3', 1)).toEqual(15); expect(getBarWidth('data1', 2)).toEqual(15); expect(getBarWidth('data2', 2)).toEqual(15); expect(getBarWidth('data3', 2)).toEqual(15); // all offsets should be the same expect(getBarOffset('data1', 'data2', 0)).toEqual(15); expect(getBarOffset('data2', 'data3', 0)).toEqual(15); expect(getBarOffset('data1', 'data2', 1)).toEqual(15); expect(getBarOffset('data2', 'data3', 1)).toEqual(15); expect(getBarOffset('data1', 'data2', 2)).toEqual(15); expect(getBarOffset('data2', 'data3', 2)).toEqual(15); // expect the container to shrink a little because of // the offsets from the first/last chart expect(getBarContainerWidth()).toEqual(396 - 15); expect(getBarContainerOffset()).toEqual(31 + parseInt(15 / 2)); }); }); });