Quite good looking graph derived from d3.js http://c3js.org
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.

374 lines
13 KiB

describe('c3 chart legend', function () {
'use strict';
10 years ago
var chart, args;
beforeEach(function (done) {
10 years ago
chart = window.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().getBoundingClientRect();
expect(rect.left).toBeCloseTo(expectedLeft[i], -2);
expect(rect.width).toBeCloseTo(expectedWidth[i], -2);
});
});
});
});
describe('legend position', function () {
beforeAll(function () {
10 years ago
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
}
10 years ago
}
};
});
it('should be positioned properly', function () {
var box = d3.select('.c3-legend-background').node().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().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().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().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().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("*").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("*").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 = d3.select(this).attr('x2') - 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().parentNode.getBBox().width,
textBoxWidth = d3.select(d3.select(this).node().parentNode).select('text').node().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);
});
});
});
Squashed commit of the following: commit 547311d30ca334c4bcd1c51cf13fa20ae28eb740 Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Fri Jun 23 14:35:09 2017 +0200 for multi-arc-gauge the radius has changed to let the label fit in the chart commit 43ba49dd154995bdfac4ac5d756076616824ae8f Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Fri Jun 23 13:00:29 2017 +0200 fixed warnings of travis check commit 7f5a025de45b06683f08866da2e9680dd149422f Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Thu Feb 4 15:14:34 2016 +0100 rebased, conflict resolved, bugfixed, refactored and tests added commit 013f0666a7e0583a698667a0b8a6702490804ea0 Merge: ff175d1 c343243 Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Fri Jun 23 12:40:39 2017 +0200 Merge remote-tracking branch 'upstream/master' into feature/multi-arc-gauge # Conflicts: # src/arc.js # src/data.js commit ff175d15ea04786b72303d76d2b74ed28d5731f6 Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Thu Feb 4 15:14:34 2016 +0100 optimized position of arc label line commit 0bf2cefff3644852119f5f739208b46779d0db42 Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Thu Feb 4 14:44:50 2016 +0100 wrong tooltip position for gauges fixed commit 155c08c045421775a9b2c378c3e1e3d83c651091 Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Thu Feb 4 14:49:25 2016 +0100 also hide arc label line when gauge_label_show is false commit e145b5c2a5878abe60d2b5a68aeca060778917bd Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Fri Aug 28 09:36:31 2015 +0200 draw line from arc end to its label to highlight the relation commit 28616bf8104ec261ae8c7ee76a9240ef84bc9688 Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Fri Aug 28 09:36:31 2015 +0200 add background for every single arc commit cb2aaf16721d2e32ce7aec0a3213d382d7842f72 Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Fri Aug 28 09:36:31 2015 +0200 label placement for more than one arc commit 6ecc60987826c2d095406a5d26dfdb914b90d5df Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Fri Aug 28 09:36:31 2015 +0200 gauge_arcs_minWidth property to determine the minimal width of gaugearcs until the innerRadius disappears commit 5689dee384e02faf35f5de085a404d0970fdb9dc Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Thu Aug 27 10:24:18 2015 +0200 visibleTargetCount for cleaner arc calculation commit 9a2686c37f6dcae833fe32f793280bd77479e564 Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Thu Aug 27 10:21:13 2015 +0200 more than one arc are possible for gauges commit 0866234001c25ce81a4d7d25804b74e0a9e5d83f Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de> Date: Mon Aug 10 17:07:48 2015 +0200 show legend for gauges which have more than one arc
7 years ago
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 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)');
});
});
});