You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1566 lines
50 KiB
1566 lines
50 KiB
import { d3, initChart } from './c3-helper' |
|
|
|
describe('load without data', function() { |
|
var chart, args |
|
|
|
beforeAll(function() { |
|
args = { |
|
data: {} |
|
} |
|
}) |
|
|
|
it('throws when data is an empty object', () => { |
|
expect(() => initChart(chart, args, () => {})).toThrowError( |
|
Error, |
|
/url or json or rows or columns is required/ |
|
) |
|
}) |
|
}) |
|
|
|
describe('c3 chart data', function() { |
|
'use strict' |
|
|
|
var chart, args |
|
|
|
beforeEach(function(done) { |
|
chart = initChart(chart, args, done) |
|
}) |
|
|
|
describe('load json', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
json: { |
|
data1: [30, 20, 50], |
|
data2: [200, 130, 90] |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should draw correctly', function() { |
|
var expectedCx = [6, 299, 593], |
|
expectedCy = [371, 391, 332] |
|
d3.selectAll('.c3-circles-data1 .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[i], 0) |
|
}) |
|
}) |
|
|
|
describe('more data', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
json: [ |
|
{ |
|
date: '2014-06-03', |
|
'443': '3000', |
|
'995': '500' |
|
}, |
|
{ |
|
date: '2014-06-04', |
|
'443': '1000' |
|
}, |
|
{ |
|
date: '2014-06-05', |
|
'443': '5000', |
|
'995': '1000' |
|
} |
|
], |
|
keys: { |
|
x: 'date', |
|
value: ['443', '995'] |
|
} |
|
}, |
|
axis: { |
|
x: { |
|
type: 'category' |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should draw correctly', function() { |
|
var expectedCx = { 443: [98, 294, 490], 995: [98, 294, 490] }, |
|
expectedCy = { 443: [194, 351, 36], 995: [391, 430, 351] } |
|
d3.selectAll('.c3-circles-443 .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[443][i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[443][i], 0) |
|
}) |
|
d3.selectAll('.c3-circles-995 .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[995][i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[995][i], 0) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with nested JSON args', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
json: [ |
|
{ |
|
date: '2014-06-03', |
|
'443': '3000', |
|
'995': { '996': '500' }, |
|
'112': ['600'], |
|
'223': [{ '224': '100' }], |
|
'334': [[], [{ '335': '300' }]], |
|
'556': { '557': { '558': ['1000'] } }, |
|
'778.889': '700' |
|
}, |
|
{ |
|
date: '2014-06-04', |
|
'443': '1000', |
|
'112': ['700'], |
|
'223': [{ '224': '200' }], |
|
'556': { '557': { '558': ['2000'] } }, |
|
'778.889': '300' |
|
}, |
|
{ |
|
date: '2014-06-05', |
|
'995': { '996': '1000' }, |
|
'112': ['800'], |
|
'223': [{ '224': '300' }], |
|
'443': '5000', |
|
'334': [[], [{ '335': '500' }]], |
|
'556': { '557': { '558': ['3000'] } }, |
|
'778.889': '800' |
|
} |
|
], |
|
keys: { |
|
x: 'date', |
|
value: [ |
|
'443', |
|
'995.996', |
|
'112[0]', |
|
'223[0].224', |
|
'334[1][0].335', |
|
'556.557.558[0]', |
|
'778.889' |
|
] |
|
} |
|
}, |
|
axis: { |
|
x: { |
|
type: 'category' |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should draw nested JSON correctly', function() { |
|
var expectedCx = [98, 294, 490], |
|
expectedCy = { |
|
443: [181, 326, 36], |
|
995: [362, 398, 326], |
|
112: [354, 347, 340], |
|
223: [391, 383, 376], |
|
334: [376, 398, 362], |
|
556: [326, 253, 181], |
|
'778.889': [347, 376, 340] |
|
} |
|
|
|
d3.selectAll('.c3-circles-443 .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[443][i], 0) |
|
}) |
|
|
|
d3.selectAll('.c3-circles-995-996 .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[995][i], 0) |
|
}) |
|
|
|
d3.selectAll('.c3-circles-112-0- .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[112][i], 0) |
|
}) |
|
|
|
d3.selectAll('.c3-circles-223-0--224 .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[223][i], 0) |
|
}) |
|
|
|
d3.selectAll('.c3-circles-334-1--0--335 .c3-circle').each(function( |
|
d, |
|
i |
|
) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[334][i], 0) |
|
}) |
|
|
|
d3.selectAll('.c3-circles-556-557-558-0- .c3-circle').each(function( |
|
d, |
|
i |
|
) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[556][i], 0) |
|
}) |
|
|
|
d3.selectAll('.c3-circles-778-889 .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy['778.889'][i], 0) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('load rows', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
rows: [ |
|
['data1', 'data2', 'data3'], |
|
[90, 120, 300], |
|
[40, 160, 240], |
|
[50, 200, 290], |
|
[120, 160, 230], |
|
[80, 130, 300], |
|
[90, 220, 320] |
|
] |
|
} |
|
} |
|
}) |
|
|
|
it('should draw correctly', function() { |
|
var expectedCx = [6, 124, 241, 358, 475, 593], |
|
expectedCy = [327, 391, 378, 289, 340, 327] |
|
d3.selectAll('.c3-circles-data1 .c3-circle').each(function(d, i) { |
|
var circle = d3.select(this) |
|
expect(+circle.attr('cx')).toBeCloseTo(expectedCx[i], 0) |
|
expect(+circle.attr('cy')).toBeCloseTo(expectedCy[i], 0) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('function in data.order', 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] |
|
], |
|
order: function() { |
|
return 0 |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should return false in isOrderAsc and isOrderDesc functions', function() { |
|
expect(chart.internal.isOrderAsc() || chart.internal.isOrderDesc()).toBe( |
|
false |
|
) |
|
}) |
|
}) |
|
|
|
describe('addHiddenTargetIds if not already hidden', function() { |
|
it('should update args', function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 150, 120, 110, 140, 115, 125] |
|
] |
|
} |
|
} |
|
expect(true).toBeTruthy() |
|
}) |
|
|
|
it('length of hiddenTargetIds should not change if same key added twice', function() { |
|
chart.internal.addHiddenTargetIds('data1') |
|
expect(chart.internal.hiddenTargetIds.length).toBe(1) |
|
chart.internal.addHiddenTargetIds('data1') |
|
expect(chart.internal.hiddenTargetIds.length).toBe(1) |
|
chart.hide('data1') |
|
expect(chart.internal.hiddenTargetIds.length).toBe(1) |
|
chart.internal.addHiddenTargetIds('data2') |
|
expect(chart.internal.hiddenTargetIds.length).toBe(2) |
|
chart.show() |
|
chart.hide(['data1', 'data2']) |
|
expect(chart.internal.hiddenTargetIds.length).toBe(2) |
|
chart.show() |
|
chart.hide() |
|
expect(chart.internal.hiddenTargetIds.length).toBe(2) |
|
}) |
|
}) |
|
|
|
describe('addHiddenLegendIds if not already hidden', function() { |
|
it('should update args', function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 150, 120, 110, 140, 115, 125] |
|
] |
|
} |
|
} |
|
expect(true).toBeTruthy() |
|
}) |
|
|
|
it('length of hiddenLegendIds should not change if same key added twice', function() { |
|
chart.internal.addHiddenLegendIds('data1') |
|
expect(chart.internal.hiddenLegendIds.length).toBe(1) |
|
chart.internal.addHiddenLegendIds('data1') |
|
expect(chart.internal.hiddenLegendIds.length).toBe(1) |
|
chart.hide('data1', { withLegend: true }) |
|
expect(chart.internal.hiddenLegendIds.length).toBe(1) |
|
chart.hide('data2', { withLegend: true }) |
|
expect(chart.internal.hiddenLegendIds.length).toBe(2) |
|
chart.show(['data1', 'data2'], { withLegend: true }) |
|
chart.hide(['data1', 'data2'], { withLegend: true }) |
|
expect(chart.internal.hiddenLegendIds.length).toBe(2) |
|
}) |
|
}) |
|
|
|
describe('data.xs', 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] |
|
] |
|
} |
|
} |
|
}) |
|
|
|
describe('normal x', function() { |
|
it('should have correct number of xs for each', function() { |
|
expect(Object.keys(chart.internal.data.xs).length).toBe(3) |
|
expect(chart.internal.data.xs.data1.length).toBe(6) |
|
expect(chart.internal.data.xs.data2.length).toBe(6) |
|
expect(chart.internal.data.xs.data3.length).toBe(6) |
|
}) |
|
|
|
it('should have integer index as x', function() { |
|
for (var i = 0; i < chart.internal.data.xs.data3.length; i++) { |
|
expect(chart.internal.data.xs.data1[i]).toBe(i) |
|
expect(chart.internal.data.xs.data2[i]).toBe(i) |
|
expect(chart.internal.data.xs.data3[i]).toBe(i) |
|
} |
|
}) |
|
}) |
|
|
|
describe('timeseries x', function() { |
|
describe('without xFormat', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
x: 'date', |
|
columns: [ |
|
['date', '2013-01-01', '2013-01-02', '2013-01-03'], |
|
['data1', 30, 200, 100], |
|
['data2', 130, 300, 200] |
|
] |
|
}, |
|
axis: { |
|
x: { |
|
type: 'timeseries' |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have correct number of xs', function() { |
|
expect(Object.keys(chart.internal.data.xs).length).toBe(2) |
|
expect(chart.internal.data.xs.data1.length).toBe(3) |
|
expect(chart.internal.data.xs.data2.length).toBe(3) |
|
}) |
|
|
|
it('should have Date object as x', function() { |
|
var xs = chart.internal.data.xs |
|
expect(+xs.data1[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0)) |
|
expect(+xs.data1[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0)) |
|
expect(+xs.data1[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0)) |
|
expect(+xs.data2[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0)) |
|
expect(+xs.data2[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0)) |
|
expect(+xs.data2[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0)) |
|
}) |
|
}) |
|
|
|
describe('with xFormat', function() { |
|
describe('timeseries x with xFormat', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
x: 'date', |
|
xFormat: '%Y%m%d', |
|
columns: [ |
|
['date', '20130101', '20130102', '20130103'], |
|
['data1', 30, 200, 100], |
|
['data2', 130, 300, 200] |
|
] |
|
}, |
|
axis: { |
|
x: { |
|
type: 'timeseries' |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have correct number of xs', function() { |
|
expect(Object.keys(chart.internal.data.xs).length).toBe(2) |
|
expect(chart.internal.data.xs.data1.length).toBe(3) |
|
expect(chart.internal.data.xs.data2.length).toBe(3) |
|
}) |
|
|
|
it('should have Date object as x', function() { |
|
var xs = chart.internal.data.xs |
|
expect(+xs.data1[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0)) |
|
expect(+xs.data1[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0)) |
|
expect(+xs.data1[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0)) |
|
expect(+xs.data2[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0)) |
|
expect(+xs.data2[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0)) |
|
expect(+xs.data2[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0)) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('milliseconds timeseries x', function() { |
|
describe('as date string', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
x: 'date', |
|
xFormat: '%Y-%m-%d %H:%M:%S.%L', |
|
columns: [ |
|
['date', '2014-05-20 17:25:00.123', '2014-05-20 17:30:00.345'], |
|
['data1', 30, 200], |
|
['data2', 130, 300] |
|
] |
|
}, |
|
axis: { |
|
x: { |
|
type: 'timeseries', |
|
tick: { |
|
format: '%Y-%m-%d %H:%M:%S.%L', |
|
multiline: false |
|
} |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have correct number of xs', function() { |
|
expect(Object.keys(chart.internal.data.xs).length).toBe(2) |
|
expect(chart.internal.data.xs.data1.length).toBe(2) |
|
expect(chart.internal.data.xs.data2.length).toBe(2) |
|
}) |
|
|
|
it('should have Date object as x', function() { |
|
var xs = chart.internal.data.xs |
|
expect(+xs.data1[0]).toBe(+new Date(2014, 4, 20, 17, 25, 0, 123)) |
|
expect(+xs.data1[1]).toBe(+new Date(2014, 4, 20, 17, 30, 0, 345)) |
|
expect(+xs.data2[0]).toBe(+new Date(2014, 4, 20, 17, 25, 0, 123)) |
|
expect(+xs.data2[1]).toBe(+new Date(2014, 4, 20, 17, 30, 0, 345)) |
|
}) |
|
|
|
it('should have milliseconds tick format', function() { |
|
var expected = ['2014-05-20 17:25:00.123', '2014-05-20 17:30:00.345'] |
|
chart.internal.main |
|
.selectAll('.c3-axis-x g.tick text') |
|
.each(function(d, i) { |
|
expect(d3.select(this).text()).toBe(expected[i]) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('as unixtime number', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
x: 'date', |
|
columns: [ |
|
['date', 1417622461123, 1417622522345], |
|
['data1', 30, 200], |
|
['data2', 130, 300] |
|
] |
|
}, |
|
axis: { |
|
x: { |
|
type: 'timeseries', |
|
tick: { |
|
format: '%Y-%m-%d %H:%M:%S.%L' |
|
} |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have correct number of xs', function() { |
|
expect(Object.keys(chart.internal.data.xs).length).toBe(2) |
|
expect(chart.internal.data.xs.data1.length).toBe(2) |
|
expect(chart.internal.data.xs.data2.length).toBe(2) |
|
}) |
|
|
|
it('should have Date object as x', function() { |
|
var xs = chart.internal.data.xs |
|
expect(+xs.data1[0]).toBe(1417622461123) |
|
expect(+xs.data1[1]).toBe(1417622522345) |
|
expect(+xs.data2[0]).toBe(1417622461123) |
|
expect(+xs.data2[1]).toBe(1417622522345) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data.label', function() { |
|
describe('on line chart', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 1030, 2200, 2100], |
|
['data2', 1150, 2010, 1200], |
|
['data3', -1150, -2010, -1200], |
|
['data4', -1030, -2200, -2100] |
|
], |
|
type: 'line', |
|
labels: true |
|
} |
|
} |
|
}) |
|
|
|
it('should locate data labels in correct position', function() { |
|
var expectedTextY = { |
|
data1: [128, 38, 46], |
|
data2: [119, 53, 115], |
|
data3: [311, 377, 315], |
|
data4: [302, 392, 384] |
|
} |
|
var expectedTextX = { |
|
data1: [6, 294, 583], |
|
data2: [6, 294, 583], |
|
data3: [6, 294, 583], |
|
data4: [6, 294, 583] |
|
} |
|
Object.keys(expectedTextY).forEach(function(key) { |
|
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function( |
|
d, |
|
i |
|
) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with stacked', function() { |
|
beforeAll(function() { |
|
args.data.groups = [ |
|
['data1', 'data2'], |
|
['data3', 'data4'] |
|
] |
|
}) |
|
|
|
it('should locate data labels in correct position', function() { |
|
var expectedTextY = { |
|
data1: [120, 38, 75], |
|
data2: [161, 127, 159], |
|
data3: [269, 303, 271], |
|
data4: [310, 392, 355] |
|
} |
|
var expectedTextX = { |
|
data1: [6, 294, 583], |
|
data2: [6, 294, 583], |
|
data3: [6, 294, 583], |
|
data4: [6, 294, 583] |
|
} |
|
Object.keys(expectedTextY).forEach(function(key) { |
|
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function( |
|
d, |
|
i |
|
) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('on area chart', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 1030, 2200, 2100], |
|
['data2', 1150, 2010, 1200], |
|
['data3', -1150, -2010, -1200], |
|
['data4', -1030, -2200, -2100] |
|
], |
|
type: 'area', |
|
labels: true |
|
} |
|
} |
|
}) |
|
|
|
it('should locate data labels in correct position', function() { |
|
var expectedTextY = { |
|
data1: [128, 38, 46], |
|
data2: [119, 53, 115], |
|
data3: [311, 377, 315], |
|
data4: [302, 392, 384] |
|
} |
|
var expectedTextX = { |
|
data1: [6, 294, 583], |
|
data2: [6, 294, 583], |
|
data3: [6, 294, 583], |
|
data4: [6, 294, 583] |
|
} |
|
Object.keys(expectedTextY).forEach(function(key) { |
|
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function( |
|
d, |
|
i |
|
) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with stacked', function() { |
|
beforeAll(function() { |
|
args.data.groups = [ |
|
['data1', 'data2'], |
|
['data3', 'data4'] |
|
] |
|
}) |
|
|
|
it('should locate data labels in correct position', function() { |
|
var expectedTextY = { |
|
data1: [120, 38, 75], |
|
data2: [161, 127, 159], |
|
data3: [269, 303, 271], |
|
data4: [310, 392, 355] |
|
} |
|
var expectedTextX = { |
|
data1: [6, 294, 583], |
|
data2: [6, 294, 583], |
|
data3: [6, 294, 583], |
|
data4: [6, 294, 583] |
|
} |
|
Object.keys(expectedTextY).forEach(function(key) { |
|
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function( |
|
d, |
|
i |
|
) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('on bar chart', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 1030, 2200, 2100], |
|
['data2', 1150, 2010, 1200], |
|
['data3', -1150, -2010, -1200], |
|
['data4', -1030, -2200, -2100] |
|
], |
|
type: 'bar', |
|
labels: true |
|
} |
|
} |
|
}) |
|
|
|
it('should locate data labels in correct position', function() { |
|
var expectedTextY = { |
|
data1: [128, 38, 46], |
|
data2: [119, 53, 115], |
|
data3: [311, 377, 315], |
|
data4: [302, 392, 384] |
|
} |
|
var expectedTextX = { |
|
data1: [53, 249, 445], |
|
data2: [83, 279, 475], |
|
data3: [112, 308, 504], |
|
data4: [142, 338, 534] |
|
} |
|
Object.keys(expectedTextY).forEach(function(key) { |
|
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function( |
|
d, |
|
i |
|
) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with stacked', function() { |
|
beforeAll(function() { |
|
args.data.groups = [ |
|
['data1', 'data2'], |
|
['data3', 'data4'] |
|
] |
|
}) |
|
|
|
it('should locate data labels in correct position', function() { |
|
var expectedTextY = { |
|
data1: [120, 38, 75], |
|
data2: [161, 127, 159], |
|
data3: [269, 303, 271], |
|
data4: [310, 392, 355] |
|
} |
|
var expectedTextX = { |
|
data1: [68.6, 264, 460], |
|
data2: [68.6, 264, 460], |
|
data3: [127, 323, 519], |
|
data4: [127, 323, 519] |
|
} |
|
Object.keys(expectedTextY).forEach(function(key) { |
|
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function( |
|
d, |
|
i |
|
) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('for all targets', function() { |
|
describe('with data label for all data', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 100, 200, 100, 400, 150, 250], |
|
['data2', 10, 20, 10, 40, 15, 25], |
|
['data3', 1000, 2000, 1000, 4000, 1500, 2500] |
|
], |
|
labels: true |
|
} |
|
} |
|
}) |
|
|
|
it('should have data labels on all data', function() { |
|
d3.selectAll('.c3-texts-data1 text').each(function(d, i) { |
|
expect(d3.select(this).text()).toBe( |
|
args.data.columns[0][i + 1] + '' |
|
) |
|
}) |
|
d3.selectAll('.c3-texts-data2 text').each(function(d, i) { |
|
expect(d3.select(this).text()).toBe( |
|
args.data.columns[1][i + 1] + '' |
|
) |
|
}) |
|
d3.selectAll('.c3-texts-data3 text').each(function(d, i) { |
|
expect(d3.select(this).text()).toBe( |
|
args.data.columns[2][i + 1] + '' |
|
) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('for each target', function() { |
|
describe('as true', function() { |
|
describe('with data label for only data1', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 100, 200, 100, 400, 150, 250], |
|
['data2', 10, 20, 10, 40, 15, 25], |
|
['data3', 1000, 2000, 1000, 4000, 1500, 2500] |
|
], |
|
labels: { |
|
format: { |
|
data1: true |
|
} |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have data labels on all data', function() { |
|
d3.selectAll('.c3-texts-data1 text').each(function(d, i) { |
|
expect(d3.select(this).text()).toBe( |
|
args.data.columns[0][i + 1] + '' |
|
) |
|
}) |
|
d3.selectAll('.c3-texts-data2 text').each(function() { |
|
expect(d3.select(this).text()).toBe('') |
|
}) |
|
d3.selectAll('.c3-texts-data3 text').each(function() { |
|
expect(d3.select(this).text()).toBe('') |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('as function', function() { |
|
describe('with data label for only data1', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 100, 200, 100, 400, 150, 250], |
|
['data2', 10, 20, 10, 40, 15, 25], |
|
['data3', 1000, 2000, 1000, 4000, 1500, 2500] |
|
], |
|
labels: { |
|
format: { |
|
data1: d3.format('$') |
|
} |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have data labels on all data', function() { |
|
d3.selectAll('.c3-texts-data1 text').each(function(d, i) { |
|
expect(d3.select(this).text()).toBe( |
|
'$' + args.data.columns[0][i + 1] |
|
) |
|
}) |
|
d3.selectAll('.c3-texts-data2 text').each(function() { |
|
expect(d3.select(this).text()).toBe('') |
|
}) |
|
d3.selectAll('.c3-texts-data3 text').each(function() { |
|
expect(d3.select(this).text()).toBe('') |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with small values', function() { |
|
describe('with data label', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [['data1', 0.03, 0.2, 0.1, 0.4, 0.15, 0.25]], |
|
labels: true |
|
} |
|
} |
|
}) |
|
|
|
it('should have proper y domain', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-0.02) |
|
expect(domain[1]).toBeCloseTo(0.45) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with positive values and null', function() { |
|
describe('on not rotated axis', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [['data1', 190, 200, 190, null]], |
|
type: 'bar', |
|
labels: { |
|
format: function(v) { |
|
if (v === null) { |
|
return 'Not Applicable' |
|
} |
|
return d3.format('$')(v) |
|
} |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(0, -1) |
|
expect(domain[1]).toBeCloseTo(227, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [67, 49, 67, 423], |
|
expectedXs = [74, 221, 368, 515] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(189, -1) |
|
expect(domain[1]).toBeCloseTo(201, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [375, 40, 375, 422], |
|
expectedXs = [6, 198, 391, 583] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('on rotated axis', function() { |
|
describe('data type bar', function() { |
|
beforeAll(function() { |
|
args.data.type = 'bar' |
|
args.axis = { |
|
rotated: true |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(0, -1) |
|
expect(domain[1]).toBeCloseTo(231, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [57, 163, 269, 375], |
|
expectedXs = [490, 516, 490, 4] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(188, -1) |
|
expect(domain[1]).toBeCloseTo(202, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [9, 147, 286, 424], |
|
expectedXs = [76, 526, 76, 4] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with negative values and null', function() { |
|
describe('on not rotated axis', function() { |
|
describe('type bar', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [['data1', -190, 0, -190, null]], |
|
type: 'bar', |
|
labels: { |
|
format: function(v) { |
|
if (v === null) { |
|
return 'Not Applicable' |
|
} |
|
return d3.format('$')(v) |
|
} |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-215, -1) |
|
expect(domain[1]).toBeCloseTo(0, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [368, 12, 368, 12], |
|
expectedXs = [74, 221, 368, 515] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-215, -1) |
|
expect(domain[1]).toBeCloseTo(25, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [395, 60, 395, 12], |
|
expectedXs = [6, 198, 391, 583] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('on rotated axis', function() { |
|
describe('data type bar', function() { |
|
beforeAll(function() { |
|
args.data.type = 'bar' |
|
args.axis = { |
|
rotated: true |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-220, -1) |
|
expect(domain[1]).toBeCloseTo(0, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [57, 163, 269, 375], |
|
expectedXs = [103, 594, 103, 526] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-220, -1) |
|
expect(domain[1]).toBeCloseTo(24, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [9, 147, 286, 424], |
|
expectedXs = [67, 537, 67, 526] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with positive and negative values and null', function() { |
|
describe('on non rotated axis', function() { |
|
describe('data type bar', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [['data1', -190, 200, 190, null]], |
|
type: 'bar', |
|
labels: { |
|
format: function(v) { |
|
if (v === null) { |
|
return 'Not Applicable' |
|
} |
|
return d3.format('$')(v) |
|
} |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-243, -1) |
|
expect(domain[1]).toBeCloseTo(253, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [392, 43, 52, 215], |
|
expectedXs = [74, 221, 368, 515] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-243, -1) |
|
expect(domain[1]).toBeCloseTo(253, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [392, 40, 49, 212], |
|
expectedXs = [6, 198, 391, 583] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('on rotated axis', function() { |
|
describe('data type bar', function() { |
|
beforeAll(function() { |
|
args.data.type = 'bar' |
|
args.axis = { |
|
rotated: true |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-253, -1) |
|
expect(domain[1]).toBeCloseTo(260, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [57, 163, 269, 375], |
|
expectedXs = [69, 525, 513, 295] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-253, -1) |
|
expect(domain[1]).toBeCloseTo(260, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [9, 147, 286, 424], |
|
expectedXs = [67, 527, 515, 297] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with positive grouped values', function() { |
|
describe('on non rotated axis', function() { |
|
describe('data type bar', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 500], |
|
['data2', 50, 20, 10, 40], |
|
['data3', 250, 220, 210, 240] |
|
], |
|
groups: [['data1', 'data2', 'data3']], |
|
labels: true, |
|
type: 'bar' |
|
} |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(0, -1) |
|
expect(domain[1]).toBeCloseTo(885, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [385, 317, 370, 164], |
|
expectedXs = [74, 221, 368, 515] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-94, -1) |
|
expect(domain[1]).toBeCloseTo(884, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [344, 284, 331, 144], |
|
expectedXs = [6, 198, 391, 583] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('on rotated axis', function() { |
|
describe('data type bar', function() { |
|
beforeAll(function() { |
|
args.data.type = 'bar' |
|
args.axis = { |
|
rotated: true |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(0, -1) |
|
expect(domain[1]).toBeCloseTo(888, -1.2) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [57, 163, 269, 375], |
|
expectedXs = [57, 150, 77, 363] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-87, -1) |
|
expect(domain[1]).toBeCloseTo(887, -1.2) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [9, 147, 286, 424], |
|
expectedXs = [107, 192, 125, 386] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with negative grouped values', function() { |
|
describe('on non rotated axis', function() { |
|
describe('data type bar', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', -30, -200, -100, -500], |
|
['data2', -50, -20, -10, -40], |
|
['data3', -250, -220, -210, -240] |
|
], |
|
groups: [['data1', 'data2', 'data3']], |
|
labels: true, |
|
type: 'bar' |
|
} |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-885, -1) |
|
expect(domain[1]).toBeCloseTo(0, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [51, 118, 65, 272], |
|
expectedXs = [74, 221, 368, 515] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-884, -1) |
|
expect(domain[1]).toBeCloseTo(94, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [88, 149, 101, 288], |
|
expectedXs = [6, 198, 391, 583] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('on rotated axis', function() { |
|
describe('data type bar', function() { |
|
beforeAll(function() { |
|
args.data.type = 'bar' |
|
args.axis = { |
|
rotated: true |
|
} |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-899, -1) |
|
expect(domain[1]).toBeCloseTo(0, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [57, 163, 269, 375], |
|
expectedXs = [533, 440, 513, 230] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data type line', function() { |
|
beforeAll(function() { |
|
args.data.type = 'line' |
|
}) |
|
|
|
it('should have y domain with proper padding', function() { |
|
var domain = chart.internal.y.domain() |
|
expect(domain[0]).toBeCloseTo(-893, -1) |
|
expect(domain[1]).toBeCloseTo(93, -1) |
|
}) |
|
|
|
it('should locate labels above each data point', function() { |
|
var texts = chart.internal.main.selectAll('.c3-texts-data1 text'), |
|
expectedYs = [9, 147, 286, 424], |
|
expectedXs = [480, 397, 462, 205] |
|
texts.each(function(d, i) { |
|
var text = d3.select(this) |
|
expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -2) |
|
expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('data.stack', function() { |
|
beforeAll(() => { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 230, 50, 300], |
|
['data2', 198, 87, 580] |
|
], |
|
type: 'bar', |
|
groups: [['data1', 'data2']], |
|
stack: { |
|
normalize: true |
|
} |
|
} |
|
} |
|
}) |
|
|
|
const getChartHeight = () => |
|
+chart.internal.main.select(`.c3-event-rect`).attr('height') - 1 |
|
|
|
it('check for the normalized y axis tick in percentage', () => { |
|
const tick = chart.internal.main.selectAll(`.c3-axis-y .tick tspan`) |
|
|
|
// check for the y axis to be in percentage |
|
tick.each(function(v, i) { |
|
expect(this.textContent).toEqual(`${i * 10}%`) |
|
}) |
|
}) |
|
|
|
it("check for the normalized bar's height", () => { |
|
const chartHeight = getChartHeight() |
|
const bars = chart.internal.main.selectAll('.c3-bar').nodes() |
|
|
|
bars.splice(0, 3).forEach((v, i) => { |
|
expect(v.getBBox().height + bars[i].getBBox().height).toEqual( |
|
chartHeight |
|
) |
|
}) |
|
}) |
|
|
|
it('check when hiding data', done => { |
|
const chartHeight = getChartHeight() |
|
|
|
// when |
|
chart.hide('data1') |
|
|
|
setTimeout(() => { |
|
chart.internal.main.selectAll(`.c3-target-data2 path`).each(function() { |
|
expect(this.getBBox().height).toBe(chartHeight) |
|
}) |
|
|
|
done() |
|
}, 500) |
|
}) |
|
|
|
describe('timeseries chart', () => { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
x: 'date', |
|
columns: [ |
|
['date', '2012-12-24', '2012-12-25', '2012-12-26'], |
|
['data1', 30, 200, 400], |
|
['data2', 50, 60, 50] |
|
], |
|
groups: [['data1', 'data2']], |
|
type: 'bar', |
|
stack: { |
|
normalize: true |
|
} |
|
}, |
|
axis: { |
|
x: { |
|
type: 'timeseries' |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it("check for the normalized bar's height", () => { |
|
const chartHeight = getChartHeight() |
|
const bars = chart.internal.main.selectAll('.c3-bar').nodes() |
|
|
|
expect(document.hidden).toBeFalsy() |
|
|
|
bars.splice(0, 3).forEach((v, i) => { |
|
expect(v.getBBox().height + bars[i].getBBox().height).toEqual( |
|
chartHeight |
|
) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('area chart', () => { |
|
beforeAll(() => { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 200, 387, 123], |
|
['data2', 200, 387, 123] |
|
], |
|
type: 'area', |
|
groups: [['data1', 'data2']], |
|
stack: { |
|
normalize: true |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it("check for the normalized area's height", () => { |
|
const chartHeight = getChartHeight() |
|
|
|
let areaHeight = 0 |
|
chart.internal.main.selectAll('.c3-area').each(function() { |
|
areaHeight += this.getBBox().height |
|
}) |
|
|
|
expect(document.hidden).toBeFalsy() |
|
expect(areaHeight).toEqual(chartHeight) |
|
}) |
|
}) |
|
}) |
|
})
|
|
|