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.

1211 lines
34 KiB

import { d3, c3, initChart } from './c3-helper'
describe('c3 chart axis', function() {
'use strict'
var chart
var args: any = {
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 = 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 x timeseries with seconds', function() {
beforeAll(function() {
args = {
data: {
type: 'line',
columns: [
['epoch', 1401879600000, 1401883200000, 1401886800000],
['y', 1955, 2419, 2262]
],
xs: {
y: 'epoch'
}
},
axis: {
x: {
type: 'timeseries',
min: new Date(1401879600000),
max: new Date(1401969600000),
localtime: false
}
}
}
})
it('should have 3 ticks on x axis', function() {
var ticksSize = d3
.select('.c3-axis-x')
.selectAll('g.tick')
.size()
expect(ticksSize).toBe(3)
})
it('should have specified 1 hour intervals', function() {
var prevValue
d3.select('.c3-axis-x')
.selectAll('g.tick')
.each(function(d: any, i) {
if (i !== 0) {
var result = d - prevValue
expect(result).toEqual(3600000) // expressed in milliseconds
}
prevValue = d
})
})
describe('changing min x time and columns', function() {
beforeAll(function() {
args.axis.x.min = new Date(1401876000000)
args.axis.x.max = new Date(1401876075000)
args.data.columns = [
[
'epoch',
1401876000000,
1401876015000,
1401876030000,
1401876045000,
1401876060000,
1401876075000
],
['y', 1968, 1800, 1955, 2419, 2262, 1940]
]
})
it('should have 6 ticks on x axis', function() {
var ticksSize = d3
.select('.c3-axis-x')
.selectAll('g.tick')
.size()
expect(ticksSize).toBe(6) // the count starts at initial value and increments by the set interval
})
it('should have specified 15 seconds intervals', function() {
var prevValue
d3.select('.c3-axis-x')
.selectAll('g.tick')
.each(function(d: any, i) {
if (i !== 0) {
var result = d - prevValue
expect(result).toEqual(15000) // expressed in milliseconds
}
prevValue = d
})
})
describe('with axis.x.time.format %Y-%m-%d %H:%M:%S', function() {
beforeAll(function() {
args.axis.x.tick = {
format: '%M:%S' // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
})
var textDates = ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15']
it('should format x ticks as dates with time', function() {
var ticks = d3
.select('.c3-axis-x')
.selectAll('g.tick')
.selectAll('tspan')
.each(function(d: any) {
expect(d.splitted).toEqual(textDates[d.index])
})
expect(ticks.size()).toBe(6)
})
})
})
})
describe('axis x timeseries with iso dates', function() {
beforeAll(function() {
args = {
data: {
type: 'line',
columns: [
['epoch', 1527811200000, 1527897600000, 1527984000000],
['y', 1955, 2419, 2262]
],
xs: {
y: 'epoch'
}
},
axis: {
x: {
type: 'timeseries',
min: new Date('2018-06-01'),
max: new Date('2018-06-03'),
localtime: false,
tick: {
format: '%Y-%m-%dT%H:%M:%S' // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
}
})
var textDates = [
'2018-06-01T00:00:00',
'2018-06-02T00:00:00',
'2018-06-03T00:00:00'
]
it('should format x ticks as dates', function() {
var ticks = d3
.select('.c3-axis-x')
.selectAll('g.tick')
.selectAll('tspan')
.each(function(d: any) {
expect(d.splitted).toEqual(textDates[d.index])
})
expect(ticks.size()).toBe(3)
})
})
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: any, 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 = {
type: d3.timeSecond,
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: any, i) {
if (i !== 0) {
var result = d - prevValue
expect(result).toEqual(60000) // expressed in milliseconds
}
prevValue = d
})
})
})
})
describe('axis.y.type', function() {
describe('type=log', function() {
beforeAll(function() {
args = {
data: {
columns: [
['linear', 318, 37, 0, 4, 0, 1],
['log', 318, 37, 0, 4, 0, 1]
],
type: 'bar',
axes: {
log: 'y',
linear: 'y2'
},
labels: true
},
axis: {
y: {
type: 'log'
},
y2: {
show: true
}
}
}
})
it('should have bars from y bigger than y2', function() {
expect(
(d3.select('.c3-bars-log .c3-bar-5').node() as any).getBBox().height
).toBeGreaterThan(
(d3.select('.c3-bars-linear .c3-bar-5').node() as any).getBBox()
.height
)
})
it('should not have truncated data label', () => {
const text = d3.select('.c3-texts-log .c3-text-0').node() as any
expect(text).not.toBeUndefined()
const bbox = text.getBBox()
expect(Math.abs(bbox.y) - bbox.height).toBeGreaterThan(0)
})
})
})
describe('axis.x.tick.values', function() {
describe('formatted correctly when negative', function() {
var xValues = [-3.3, -2.2, -1.1, 1.1, 2.2, 3.3]
beforeEach(function() {
args.data = {
x: 'x',
columns: [
['x'].concat(xValues as any),
['data1', 30, 200, 100, 400, 150, 250]
]
}
})
it('should not generate whole number for negative values', function() {
var tickValues = []
d3.select('.c3-axis-x')
.selectAll('g.tick')
.selectAll('tspan')
.each(function(d: any, i) {
expect(tickValues.push(parseFloat(d.splitted)) === xValues[i])
})
})
})
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 = c3.generate(args)
;(window as any).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 as any).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 multilineMax', function() {
beforeAll(function() {
args.axis.x.tick = {
multiline: true,
multilineMax: 2
}
})
it('should ellipsify x tick properly', function() {
var tick = chart.internal.main.select('.c3-axis-x').select('g.tick')
var tspans = tick.selectAll('tspan')
var expectedTickText = [
'this is a very long',
'tick text on categ...'
]
expect(tspans.size()).toBe(2)
tspans.each(function(d, i) {
var tspan = d3.select(this)
expect(tspan.text()).toBe(expectedTickText[i])
})
})
})
})
})
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)
})
})
})
})
describe('axis.x.label', function() {
beforeAll(function() {
args = {
data: {
columns: [
['somewhat long 1', 30, 200, 100, 400, 150, 250],
['somewhat long 2', 50, 20, 10, 40, 15, 25]
]
},
axis: {
x: {
show: true,
label: {
text: 'Label of X axis'
}
}
}
}
})
it('renders label text properly', () => {
expect(d3.select('.c3-axis-x-label').text()).toEqual('Label of X axis')
})
describe('outer label position', function() {
beforeAll(function() {
args.axis.x.label.position = 'outer-center'
})
it('renders position properly', () => {
const label = d3.select('.c3-axis-x-label')
expect(label.attr('dy')).toEqual('30')
})
describe('with rotated tick', function() {
beforeAll(function() {
args.axis.x.tick = {
rotate: 90
}
})
it('renders position properly', () => {
const label = d3.select('.c3-axis-x-label')
expect(label.attr('dy')).toBeGreaterThan(30)
})
})
})
describe('inner label position', function() {
beforeAll(function() {
args.axis.x.label.position = 'inner-center'
})
it('renders position properly', () => {
const label = d3.select('.c3-axis-x-label')
expect(label.attr('dy')).toEqual('-0.5em')
})
describe('with rotated tick', function() {
beforeAll(function() {
args.axis.x.tick = {
rotate: 90
}
})
it('renders position properly', () => {
const label = d3.select('.c3-axis-x-label')
expect(label.attr('dy')).toEqual('-0.5em')
})
})
})
})
})