describe('c3 chart axis', function () { 'use strict'; var chart; var args = { data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25], ['data3', 150, 120, 110, 140, 115, 125] ] }, axis: { y: { tick: { values: null, count: undefined } }, y2: { tick: { values: null, count: undefined } } } }; beforeEach(function (done) { chart = window.initChart(chart, args, done); }); describe('axis.y.tick.count', function () { describe('with only 1 tick on y axis', function () { beforeAll(function(){ args.axis.y.tick.count = 1; }); it('should have only 1 tick on y axis', function () { var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); expect(ticksSize).toBe(1); }); }); describe('with 2 ticks on y axis', function () { beforeAll(function(){ args.axis.y.tick.count = 2; }); it('should have 2 ticks on y axis', function () { var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); expect(ticksSize).toBe(2); }); }); describe('with 3 ticks on y axis', function () { beforeAll(function(){ args.axis.y.tick.count = 3; }); it('should have 3 ticks on y axis', function () { var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); expect(ticksSize).toBe(3); }); }); }); describe('axis.y.tick.values', function () { var values = [100, 500]; describe('with only 2 ticks on y axis', function () { beforeAll(function(){ args.axis.y.tick.values = values; }); it('should have only 2 tick on y axis', function () { var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); expect(ticksSize).toBe(2); }); it('should have specified tick texts', function () { d3.select('.c3-axis-y').selectAll('g.tick').each(function (d, i) { var text = d3.select(this).select('text').text(); expect(+text).toBe(values[i]); }); }); }); }); describe('axis y timeseries', function () { beforeAll(function () { args = { data: { columns: [ ["times", 60000, 120000, 180000, 240000] ] }, axis: { y: { type : 'timeseries', tick: { time: { } } } } }; }); it('should have 7 ticks on y axis', function () { var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); expect(ticksSize).toBe(7); // the count starts at initial value and increments by the set interval }); it('should have specified 30 second intervals', function () { var prevValue; d3.select('.c3-axis-y').selectAll('g.tick').each(function (d, i) { if (i !== 0) { var result = d - prevValue; expect(result).toEqual(30000); // expressed in milliseconds } prevValue = d; }); }); describe('with axis.y.time', function () { beforeAll(function(){ args.axis.y.tick.time = { value : 'seconds', interval : 60 }; }); it('should have 4 ticks on y axis', function () { var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); expect(ticksSize).toBe(4); // the count starts at initial value and increments by the set interval }); it('should have specified 60 second intervals', function () { var prevValue; d3.select('.c3-axis-y').selectAll('g.tick').each(function (d, i) { if (i !== 0) { var result = d - prevValue; expect(result).toEqual(60000); // expressed in milliseconds } prevValue = d; }); }); }); }); describe('axis.x.tick.values', function () { describe('function is provided', function () { var tickGenerator = function () { var values = []; for (var i = 0; i <= 300; i += 50) { values.push(i); } return values; }; beforeEach(function () { args.axis.x = { tick: { values: tickGenerator } }; chart = window.c3.generate(args); window.generatedTicks = tickGenerator(); // This should be removed from window }); it('should use function to generate ticks', function () { d3.select('.c3-axis-x').selectAll('g.tick').each(function (d, i) { var tick = d3.select(this).select('text').text(); expect(+tick).toBe(window.generatedTicks[i]); }); }); }); }); describe('axis.x.tick.width', function () { describe('indexed x axis and y/y2 axis', function () { describe('not rotated', function () { beforeAll(function () { args = { data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ], axes: { data2: 'y2' } }, axis: { y2: { show: true } } }; }); it('should construct indexed x axis properly', function () { var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'), expectedX = '0', expectedDy = '.71em'; expect(ticks.size()).toBe(6); ticks.each(function (d, i) { var tspans = d3.select(this).selectAll('tspan'); expect(tspans.size()).toBe(1); tspans.each(function () { var tspan = d3.select(this); expect(tspan.text()).toBe(i + ''); expect(tspan.attr('x')).toBe(expectedX); expect(tspan.attr('dy')).toBe(expectedDy); }); }); }); describe('should set axis.x.tick.format', function () { beforeAll(function(){ args.axis.x = { tick: { format: function () { return 'very long tick text on x axis'; } } }; }); it('should split x axis tick text to multiple lines', function () { var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'), expectedTexts = ['very long tick text on x', 'axis'], expectedX = '0'; expect(ticks.size()).toBe(6); ticks.each(function () { var tspans = d3.select(this).selectAll('tspan'); expect(tspans.size()).toBe(2); tspans.each(function (d, i) { var tspan = d3.select(this); expect(tspan.text()).toBe(expectedTexts[i]); expect(tspan.attr('x')).toBe(expectedX); if (i === 0) { expect(tspan.attr('dy')).toBe('.71em'); } else { expect(tspan.attr('dy')).toBeGreaterThan(8); } }); }); }); it('should construct y axis properly', function () { var ticks = chart.internal.main.select('.c3-axis-y').selectAll('g.tick'), expectedX = '-9', expectedDy = '3'; expect(ticks.size()).toBe(9); ticks.each(function (d) { var tspans = d3.select(this).selectAll('tspan'); expect(tspans.size()).toBe(1); tspans.each(function () { var tspan = d3.select(this); expect(tspan.text()).toBe(d + ''); expect(tspan.attr('x')).toBe(expectedX); expect(tspan.attr('dy')).toBe(expectedDy); }); }); }); it('should construct y2 axis properly', function () { var ticks = chart.internal.main.select('.c3-axis-y2').selectAll('g.tick'), expectedX = '9', expectedDy = '3'; expect(ticks.size()).toBe(9); ticks.each(function (d) { var tspans = d3.select(this).selectAll('tspan'); expect(tspans.size()).toBe(1); tspans.each(function () { var tspan = d3.select(this); expect(tspan.text()).toBe(d + ''); expect(tspan.attr('x')).toBe(expectedX); expect(tspan.attr('dy')).toBe(expectedDy); }); }); }); }); describe('should set big values in y', function () { beforeAll(function(){ args.data.columns = [ ['data1', 3000000000000000, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ]; }); it('should not split y axis tick text to multiple lines', function () { var ticks = chart.internal.main.select('.c3-axis-y2').selectAll('g.tick'); ticks.each(function () { var tspans = d3.select(this).selectAll('tspan'); expect(tspans.size()).toBe(1); }); }); }); }); describe('rotated', function () { beforeAll(function () { args.axis.rotated = true; }); it('should split x axis tick text to multiple lines', function () { var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'), expectedTexts = ['very long tick text on', 'x axis'], expectedX = '-9'; expect(ticks.size()).toBe(6); ticks.each(function () { var tspans = d3.select(this).selectAll('tspan'); expect(tspans.size()).toBe(2); tspans.each(function (d, i) { var tspan = d3.select(this); expect(tspan.text()).toBe(expectedTexts[i]); expect(tspan.attr('x')).toBe(expectedX); if (i === 0) { expect(tspan.attr('dy')).toBeLessThan(0); } else { expect(tspan.attr('dy')).toBeGreaterThan(9); } }); }); }); it('should not split y axis tick text to multiple lines', function () { var ticks = chart.internal.main.select('.c3-axis-y').selectAll('g.tick'), expectedTexts = [ '0', '500000000000000', '1000000000000000', '1500000000000000', '2000000000000000', '2500000000000000', '3000000000000000' ], expectedX = '0', expectedDy = '.71em'; expect(ticks.size()).toBe(7); ticks.each(function (d, i) { var tspans = d3.select(this).selectAll('tspan'); expect(tspans.size()).toBe(1); tspans.each(function () { var tspan = d3.select(this); expect(tspan.text()).toBe(expectedTexts[i]); expect(tspan.attr('x')).toBe(expectedX); expect(tspan.attr('dy')).toBe(expectedDy); }); }); }); }); }); describe('category axis', function () { describe('not rotated', function () { beforeAll(function () { args = { data: { x: 'x', columns: [ ['x', 'this is a very long tick text on category axis', 'cat1', 'cat2', 'cat3', 'cat4', 'cat5'], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] }, axis: { x: { type: 'category' } } }; }); it('should locate ticks properly', function () { var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'); ticks.each(function (d, i) { var tspans = d3.select(this).selectAll('tspan'), expectedX = '0', expectedDy = '.71em'; if (i > 0) { // i === 0 should be checked in next test expect(tspans.size()).toBe(1); tspans.each(function () { var tspan = d3.select(this); expect(tspan.attr('x')).toBe(expectedX); expect(tspan.attr('dy')).toBe(expectedDy); }); } }); }); xit('should split tick text properly', function () { var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), tspans = tick.selectAll('tspan'), expectedTickTexts = [ 'this is a very long', 'tick text on category', 'axis' ], expectedX = '0'; expect(tspans.size()).toBe(3); tspans.each(function (d, i) { var tspan = d3.select(this); expect(tspan.text()).toBe(expectedTickTexts[i]); expect(tspan.attr('x')).toBe(expectedX); // unable to define pricise number because it differs depends on environment.. if (i === 0) { expect(tspan.attr('dy')).toBe('.71em'); } else { expect(tspan.attr('dy')).toBeGreaterThan(8); } }); }); }); describe('rotated', function () { beforeAll(function () { args.axis.rotated = true; }); it('should locate ticks on rotated axis properly', function () { var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'); ticks.each(function (d, i) { var tspans = d3.select(this).selectAll('tspan'), expectedX = '-9', expectedDy = '3'; if (i > 0) { // i === 0 should be checked in next test expect(tspans.size()).toBe(1); tspans.each(function () { var tspan = d3.select(this); expect(tspan.attr('x')).toBe(expectedX); expect(tspan.attr('dy')).toBe(expectedDy); }); } }); }); it('should split tick text on rotated axis properly', function () { var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), tspans = tick.selectAll('tspan'), expectedTickTexts = [ 'this is a very long', 'tick text on category', 'axis' ], expectedX = '-9'; expect(tspans.size()).toBe(3); tspans.each(function (d, i) { var tspan = d3.select(this); expect(tspan.text()).toBe(expectedTickTexts[i]); expect(tspan.attr('x')).toBe(expectedX); // unable to define pricise number because it differs depends on environment.. if (i === 0) { expect(tspan.attr('dy')).toBeLessThan(0); } else { expect(tspan.attr('dy')).toBeGreaterThan(8); } }); }); }); describe('option used', function () { describe('as null', function () { beforeAll(function () { //'without split ticks', args.axis.x.tick = { multiline: false }; }); it('should split x tick', function () { var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), tspans = tick.selectAll('tspan'); expect(tspans.size()).toBe(1); }); }); describe('as value', function () { beforeAll(function () { // 'without split ticks', args.axis.x.tick = { width: 150 }; }); it('should split x tick to 2 lines properly', function () { var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), tspans = tick.selectAll('tspan'), expectedTickTexts = [ 'this is a very long tick text on', 'category axis' ], expectedX = '-9'; expect(tspans.size()).toBe(2); tspans.each(function (d, i) { var tspan = d3.select(this); expect(tspan.text()).toBe(expectedTickTexts[i]); expect(tspan.attr('x')).toBe(expectedX); // unable to define pricise number because it differs depends on environment.. if (i === 0) { expect(tspan.attr('dy')).toBeLessThan(0); } else { expect(tspan.attr('dy')).toBeGreaterThan(8); } }); }); }); }); }); describe('with axis.x.tick.format', function () { beforeAll(function () { // 'with axis.x.tick.format', args.axis.x.tick.format = function () { return ['this is a very long tick text', 'on category axis']; }; }); it('should have multiline tick text', function () { var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'), tspans = tick.selectAll('tspan'), expectedTickTexts = ['this is a very long tick text', 'on category axis']; expect(tspans.size()).toBe(2); tspans.each(function (d, i) { var tspan = d3.select(this); expect(tspan.text()).toBe(expectedTickTexts[i]); }); }); }); }); describe('axis.x.tick.rotate', function () { describe('not rotated', function () { beforeAll(function () { args = { data: { x: 'x', columns: [ ['x', 'category 1', 'category 2', 'category 3', 'category 4', 'category 5', 'category 6'], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] }, axis: { x: { type: 'category', tick: { rotate: 60 } } } }; }); it('should rotate tick texts', function () { chart.internal.main.selectAll('.c3-axis-x g.tick').each(function () { var tick = d3.select(this), text = tick.select('text'), tspan = text.select('tspan'); expect(text.attr('transform')).toBe('rotate(60)'); expect(text.attr('y')).toBe('1.5'); expect(tspan.attr('dx')).toBe('6.928203230275509'); }); }); it('should have automatically calculated x axis height', function () { var box = chart.internal.main.select('.c3-axis-x').node().getBoundingClientRect(), height = chart.internal.getHorizontalAxisHeight('x'); expect(box.height).toBeGreaterThan(50); expect(height).toBeCloseTo(76, -1.3); // @TODO make this test better }); }); }); describe('axis.y.tick.rotate', function () { describe('not rotated', function () { beforeAll(function () { args = { data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250, 100, 600], ['data2', 50, 20, 10, 40, 15, 25], ] }, axis: { rotated: true, y: { tick: { rotate: 45 } } } }; }); it('should rotate tick texts', function () { chart.internal.main.selectAll('.c3-axis-y g.tick').each(function () { var tick = d3.select(this), text = tick.select('text'), tspan = text.select('tspan'); expect(text.attr('transform')).toBe('rotate(45)'); expect(text.attr('y')).toBe('4'); expect(tspan.attr('dx')).toBeCloseTo('5.6', 0); }); }); it('should have automatically calculated y axis width', function () { var box = chart.internal.main.select('.c3-axis-y').node().getBoundingClientRect(); expect(box.width).toBeCloseTo(590, 1); }); }); }); describe('axis.x.tick.fit', function () { describe('axis.x.tick.fit = true', function () { beforeAll(function () { // 'should set args for indexed data', args = { data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25], ['data3', 150, 120, 110, 140, 115, 125] ] } }; }); it('should show fitted ticks on indexed data', function () { var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); expect(ticks.size()).toBe(6); }); describe('should set args for x-based data', function () { beforeAll(function(){ args = { data: { x: 'x', columns: [ ['x', 10, 20, 100, 110, 200, 1000], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25], ['data3', 150, 120, 110, 140, 115, 125] ] } }; }); it('should show fitted ticks on indexed data', function () { var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); expect(ticks.size()).toBe(6); }); it('should show fitted ticks after hide and show', function () { chart.hide(); chart.show(); var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); expect(ticks.size()).toBe(6); }); }); }); describe('axis.x.tick.fit = false', function () { describe('should set args for indexed data', 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] ] }, axis: { x: { tick: { fit: false } } } }; }); it('should show fitted ticks on indexed data', function () { var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); expect(ticks.size()).toBe(11); }); }); describe('should set args for x-based data', function () { beforeAll(function(){ args.data = { x: 'x', columns: [ ['x', 10, 20, 100, 110, 200, 1000], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25], ['data3', 150, 120, 110, 140, 115, 125] ] }; }); it('should show fitted ticks on indexed data', function () { var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); expect(ticks.size()).toBe(10); }); it('should show fitted ticks after hide and show', function () { chart.hide(); chart.show(); var ticks = chart.internal.main.selectAll('.c3-axis-x g.tick'); expect(ticks.size()).toBe(10); }); }); }); }); describe('axis.y.inner', function () { beforeAll(function () { args = { data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] }, axis: { y: { inner: false } } }; }); it('should not have inner y axis', function () { var paddingLeft = chart.internal.getCurrentPaddingLeft(), tickTexts = chart.internal.main.selectAll('.c3-axis-y g.tick text'); expect(paddingLeft).toBeGreaterThan(19); tickTexts.each(function () { expect(+d3.select(this).attr('x')).toBeLessThan(0); }); }); describe('with inner y axis', function () { beforeAll(function(){ args.axis.y.inner = true; }); it('should have inner y axis', function () { var paddingLeft = chart.internal.getCurrentPaddingLeft(), tickTexts = chart.internal.main.selectAll('.c3-axis-y g.tick text'); expect(paddingLeft).toBe(1); tickTexts.each(function () { expect(+d3.select(this).attr('x')).toBeGreaterThan(0); }); }); }); }); describe('axis.y2.inner', function () { beforeAll(function () { args = { data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] }, axis: { y2: { show: true, inner: false } } }; }); it('should not have inner y axis', function () { var paddingRight = chart.internal.getCurrentPaddingRight(), tickTexts = chart.internal.main.selectAll('.c3-axis-2y g.tick text'); expect(paddingRight).toBeGreaterThan(19); tickTexts.each(function () { expect(+d3.select(this).attr('x')).toBeGreaterThan(0); }); }); describe('with inner y axis', function () { beforeAll(function(){ args.axis.y2.inner = true; }); it('should have inner y axis', function () { var paddingRight = chart.internal.getCurrentPaddingRight(), tickTexts = chart.internal.main.selectAll('.c3-axis-2y g.tick text'); expect(paddingRight).toBe(2); tickTexts.each(function () { expect(+d3.select(this).attr('x')).toBeLessThan(0); }); }); }); }); });