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.
423 lines
12 KiB
423 lines
12 KiB
import { d3, initChart } from './c3-helper' |
|
|
|
describe('c3 chart legend', function() { |
|
'use strict' |
|
|
|
var chart, args |
|
|
|
beforeEach(function(done) { |
|
chart = initChart(chart, args, done) |
|
}) |
|
|
|
describe('legend when multiple charts rendered', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30], |
|
['data2', 50], |
|
['data3', 100] |
|
] |
|
} |
|
} |
|
}) |
|
|
|
describe('long data names', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['long data name 1', 30], |
|
['long data name 2', 50], |
|
['long data name 3', 50] |
|
] |
|
} |
|
} |
|
}) |
|
|
|
it('should have properly computed legend width', function() { |
|
var expectedLeft = [148, 226, 384], |
|
expectedWidth = [118, 118, 108] |
|
d3.selectAll('.c3-legend-item').each(function(d, i) { |
|
var rect = (d3.select(this).node() as any).getBoundingClientRect() |
|
expect(rect.left).toBeCloseTo(expectedLeft[i], -2) |
|
expect(rect.width).toBeCloseTo(expectedWidth[i], -2) |
|
}) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('legend position', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 50, 20, 10, 40, 15, 25] |
|
] |
|
} |
|
} |
|
}) |
|
|
|
it('should be located on the center of chart', function() { |
|
var box = chart.internal.legend.node().getBoundingClientRect() |
|
expect(box.left + box.right).toBe(638) |
|
}) |
|
}) |
|
|
|
describe('legend as inset', function() { |
|
describe('should change the legend to "inset" successfully', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 50, 20, 10, 40, 15, 25] |
|
] |
|
}, |
|
legend: { |
|
position: 'inset', |
|
inset: { |
|
step: null |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('should be positioned properly', function() { |
|
var box = (d3 |
|
.select('.c3-legend-background') |
|
.node() as any).getBoundingClientRect() |
|
expect(box.top).toBe(5.5) |
|
expect(box.left).toBeGreaterThan(30) |
|
}) |
|
|
|
it('should have automatically calculated height', function() { |
|
var box = (d3 |
|
.select('.c3-legend-background') |
|
.node() as any).getBoundingClientRect() |
|
expect(box.height).toBe(48) |
|
}) |
|
}) |
|
|
|
describe('should change the legend step to 1 successfully', function() { |
|
beforeAll(function() { |
|
args.legend.inset.step = 1 |
|
}) |
|
|
|
it('should have automatically calculated height', function() { |
|
var box = (d3 |
|
.select('.c3-legend-background') |
|
.node() as any).getBoundingClientRect() |
|
expect(box.height).toBe(28) |
|
}) |
|
}) |
|
|
|
describe('should change the legend step to 2 successfully', function() { |
|
beforeAll(function() { |
|
args.legend.inset.step = 2 |
|
}) |
|
|
|
it('should have automatically calculated height', function() { |
|
var box = (d3 |
|
.select('.c3-legend-background') |
|
.node() as any).getBoundingClientRect() |
|
expect(box.height).toBe(48) |
|
}) |
|
}) |
|
|
|
describe('with only one series', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [['data1', 30, 200, 100, 400, 150, 250]] |
|
}, |
|
legend: { |
|
position: 'inset' |
|
} |
|
} |
|
}) |
|
|
|
it('should locate legend properly', function() { |
|
var box = (d3 |
|
.select('.c3-legend-background') |
|
.node() as any).getBoundingClientRect() |
|
expect(box.height).toBe(28) |
|
expect(box.width).toBeGreaterThan(64) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('legend.hide', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 130, 100, 200, 100, 250, 150] |
|
] |
|
}, |
|
legend: { |
|
hide: true |
|
} |
|
} |
|
}) |
|
|
|
it('should not show legends', function() { |
|
d3.selectAll('.c3-legend-item').each(function() { |
|
expect(d3.select(this).style('visibility')).toBe('hidden') |
|
}) |
|
}) |
|
|
|
describe('hidden legend', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 130, 100, 200, 100, 250, 150] |
|
] |
|
}, |
|
legend: { |
|
hide: 'data2' |
|
} |
|
} |
|
}) |
|
|
|
it('should not show legends', function() { |
|
expect(d3.select('.c3-legend-item-data1').style('visibility')).toBe( |
|
'visible' |
|
) |
|
expect(d3.select('.c3-legend-item-data2').style('visibility')).toBe( |
|
'hidden' |
|
) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('legend.show', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 130, 100, 200, 100, 250, 150] |
|
] |
|
}, |
|
legend: { |
|
show: false |
|
} |
|
} |
|
}) |
|
|
|
it('should not initially have rendered any legend items', function() { |
|
expect(d3.selectAll('.c3-legend-item').empty()).toBe(true) |
|
}) |
|
|
|
it('allows us to show the legend on showLegend call', function() { |
|
chart.legend.show() |
|
d3.selectAll('.c3-legend-item').each(function() { |
|
expect(d3.select(this).style('visibility')).toBe('visible') |
|
// This selects all the children, but we expect it to be empty |
|
expect((d3.select(this).selectAll('*') as any).length).not.toEqual(0) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('with legend.show is true', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 130, 100, 200, 100, 250, 150] |
|
] |
|
}, |
|
legend: { |
|
show: true |
|
} |
|
} |
|
}) |
|
|
|
it('should initially have rendered some legend items', function() { |
|
expect(d3.selectAll('.c3-legend-item').empty()).toBe(false) |
|
}) |
|
|
|
it('should remove rendered every legend items', function() { |
|
chart.legend.hide() |
|
d3.selectAll('.c3-legend-item').each(function() { |
|
expect(d3.select(this).style('visibility')).toBe('hidden') |
|
// This selects all the children, but we expect it to be empty |
|
expect((d3.select(this).selectAll('*') as any).length).toEqual( |
|
undefined |
|
) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('custom legend size', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['data1', 30, 200, 100, 400, 150, 250], |
|
['data2', 130, 100, 200, 100, 250, 150] |
|
] |
|
}, |
|
legend: { |
|
item: { |
|
tile: { |
|
width: 15, |
|
height: 2 |
|
} |
|
} |
|
} |
|
} |
|
}) |
|
|
|
it('renders the legend item with the correct width and height', function() { |
|
d3.selectAll('.c3-legend-item-tile').each(function() { |
|
expect(d3.select(this).style('stroke-width')).toBe( |
|
args.legend.item.tile.height + 'px' |
|
) |
|
var tileWidth = |
|
Number(d3.select(this).attr('x2')) - |
|
Number(d3.select(this).attr('x1')) |
|
expect(tileWidth).toBe(args.legend.item.tile.width) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('custom legend padding', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['padded1', 30, 200, 100, 400, 150, 250], |
|
['padded2', 130, 100, 200, 100, 250, 150] |
|
] |
|
}, |
|
legend: { |
|
padding: 10 |
|
} |
|
} |
|
}) |
|
|
|
it('renders the correct amount of padding on the legend element', function() { |
|
d3.selectAll( |
|
'.c3-legend-item-padded1 .c3-legend-item-tile, .c3-legend-item-padded2 .c3-legend-item-tile' |
|
).each(function(el, index) { |
|
var itemWidth = (d3.select(this).node() as any).parentNode.getBBox() |
|
.width, |
|
textBoxWidth = (d3 |
|
.select((d3.select(this).node() as any).parentNode) |
|
.select('text') |
|
.node() as any).getBBox().width, |
|
tileWidth = 17, // default value is 10, plus 7 more for padding @TODO verify this, seems PhantomJS@^2 adds another 1px to each side |
|
expectedWidth = |
|
textBoxWidth + tileWidth + (index ? 0 : 10) + args.legend.padding |
|
|
|
expect(itemWidth).toBe(expectedWidth) |
|
}) |
|
}) |
|
}) |
|
|
|
describe('legend item tile coloring with color_treshold', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['padded1', 100], |
|
['padded2', 90], |
|
['padded3', 50], |
|
['padded4', 20] |
|
] |
|
}, |
|
type: 'gauge', |
|
color: { |
|
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], |
|
threshold: { |
|
values: [30, 80, 95] |
|
} |
|
} |
|
} |
|
}) |
|
|
|
// espacially for gauges with multiple arcs to have the same coloring between legend tiles, tooltip tiles and arc |
|
it('selects the color from color_pattern if color_treshold is given', function() { |
|
var tileColor = [] |
|
d3.selectAll('.c3-legend-item-tile').each(function() { |
|
tileColor.push(d3.select(this).style('stroke')) |
|
}) |
|
expect(tileColor[0]).toBe('rgb(96, 176, 68)') |
|
expect(tileColor[1]).toBe('rgb(246, 198, 0)') |
|
expect(tileColor[2]).toBe('rgb(249, 118, 0)') |
|
expect(tileColor[3]).toBe('rgb(255, 0, 0)') |
|
}) |
|
}) |
|
|
|
describe('legend item tile coloring with color_treshold (more than one data value)', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['padded1', 40, 60], |
|
['padded2', 100, -10], |
|
['padded3', 0, 50], |
|
['padded4', 20, 0] |
|
] |
|
}, |
|
type: 'gauge', |
|
color: { |
|
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], |
|
threshold: { |
|
values: [30, 80, 95] |
|
} |
|
} |
|
} |
|
}) |
|
|
|
// espacially for gauges with multiple arcs to have the same coloring between legend tiles, tooltip tiles and arc |
|
it('selects the color from color_pattern if color_treshold is given', function() { |
|
var tileColor = [] |
|
d3.selectAll('.c3-legend-item-tile').each(function() { |
|
tileColor.push(d3.select(this).style('stroke')) |
|
}) |
|
expect(tileColor[0]).toBe('rgb(96, 176, 68)') |
|
expect(tileColor[1]).toBe('rgb(246, 198, 0)') |
|
expect(tileColor[2]).toBe('rgb(249, 118, 0)') |
|
expect(tileColor[3]).toBe('rgb(255, 0, 0)') |
|
}) |
|
}) |
|
|
|
describe('legend item tile coloring without color_treshold', function() { |
|
beforeAll(function() { |
|
args = { |
|
data: { |
|
columns: [ |
|
['padded1', 100], |
|
['padded2', 90], |
|
['padded3', 50], |
|
['padded4', 20] |
|
], |
|
colors: { |
|
padded1: '#60b044', |
|
padded4: '#8b008b' |
|
} |
|
}, |
|
type: 'gauge' |
|
} |
|
}) |
|
|
|
it('selects the color from data_colors, data_color or default', function() { |
|
var tileColor = [] |
|
d3.selectAll('.c3-legend-item-tile').each(function() { |
|
tileColor.push(d3.select(this).style('stroke')) |
|
}) |
|
expect(tileColor[0]).toBe('rgb(96, 176, 68)') |
|
expect(tileColor[1]).toBe('rgb(31, 119, 180)') |
|
expect(tileColor[2]).toBe('rgb(255, 127, 14)') |
|
expect(tileColor[3]).toBe('rgb(139, 0, 139)') |
|
}) |
|
}) |
|
})
|
|
|