it('create area', function() {
scaleA = Scale.cat({
field: 'a',
values: [ '1', '2', '3' ],
range: [ 0.2, 0.8 ]
});
geom = new Geom.Area({
data,
coord,
container: group,
scales: { a: scaleA, b: scaleB, c: scaleC, red: ScaleRed, 10: ScaleTen }
});
shapeContainer = geom.get('shapeContainer');
expect(geom.get('type')).equal('area');
expect(geom.get('shapeType')).equal('area');
});
describe('GuideController', function() {
const canvas = new Canvas({
containerId: 'guideTest',
width: 200,
height: 200
});
const frontContainer = canvas.addGroup();
const backContainer = canvas.addGroup();
const xScale = Scale.cat({
range: [ 0.1, 0.9 ],
values: [ 'a', 'b', 'c', 'd', 'e' ],
ticks: [ 'a', 'b', 'c', 'd', 'e' ],
field: 'x'
});
const yScale1 = Scale.linear({
min: 100,
max: 600,
values: [ 250, 350, 150, 450, 550 ],
ticks: [ 250, 350, 150, 450, 550 ],
field: 'y1'
});
const yScale2 = Scale.linear({
min: 0,
max: 100,
values: [ 0, 20, 40, 60, 80, 100 ],
ticks: [ 0, 20, 40, 60, 80, 100 ],
field: 'y2'
});
const xScales = {
x: xScale
};
const yScales = {
y1: yScale1,
y2: yScale2
};
const coord = new Coord.Rect({
start: {
x: 0,
y: 200
},
end: {
x: 200,
y: 0
}
});
const data = [
{ x: 'a', y1: 250 },
{ x: 'b', y1: 350 },
{ x: 'c', y1: 150 },
{ x: 'd', y1: 450 },
{ x: 'e', y1: 550 }
];
const view = {
data,
get() {
return this.data;
}
};
let guideController;
it('Initialization.', function() {
guideController = new GuideController({
backContainer,
frontContainer,
xScales,
yScales,
view
});
expect(guideController).to.be.an.instanceof(GuideController);
expect(guideController.guides).to.be.empty;
});
it('添加辅助线, line', function() {
const lineCfg = {
start: {
x: 'a',
y1: 250
},
end: {
x: 'd',
y2: 50
},
text: {
content: '辅助线的辅助文本'
},
top: true
};
guideController.line(lineCfg);
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(1);
expect(guidesOptions[0]).to.eql({
type: 'line',
start: {
x: 'a',
y1: 250
},
end: {
x: 'd',
y2: 50
},
text: {
content: '辅助线的辅助文本'
},
top: true
});
});
it('添加图片, image', function() {
guideController.image({
start: {
x: 'a',
y1: 250
},
src: 'http://gtms02.alicdn.com/tps/i2/TB1LEzAIVXXXXaZXFXXKC07OVXX-160-230.png',
width: 50,
height: 50
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(2);
expect(guidesOptions[1]).to.eql({
type: 'image',
start: {
x: 'a',
y1: 250
},
src: 'http://gtms02.alicdn.com/tps/i2/TB1LEzAIVXXXXaZXFXXKC07OVXX-160-230.png',
width: 50,
height: 50
});
});
it('添加框, region', function() {
guideController.region({
start: {
x: 'a',
y1: 250
},
end: {
x: 'e',
y1: 550
}
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(3);
expect(guidesOptions[2]).to.eql({
type: 'region',
start: {
x: 'a',
y1: 250
},
end: {
x: 'e',
y1: 550
}
});
});
it('添加文本, text', function() {
guideController.text({
start: {
x: 'b',
y1: 350
},
content: '我是一条美丽的文本。',
top: true
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(4);
expect(guidesOptions[3]).to.eql({
type: 'text',
start: {
x: 'b',
y1: 350
},
content: '我是一条美丽的文本。',
top: true
});
});
it('添加垂直于 x 轴的辅助线', function() {
guideController.line({
start: {
x: 'd',
y1: 'min'
},
end: {
x: 'd',
y1: 'max'
},
top: true
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(5);
expect(guidesOptions[4]).to.eql({
type: 'line',
start: {
x: 'd',
y1: 'min'
},
end: {
x: 'd',
y1: 'max'
},
top: true
});
});
it('添加中间段水平辅助线', function() {
guideController.line({
start: {
x: 'a',
y1: 'median'
},
end: {
x: 'd',
y1: 'median'
},
lineStyle: {
stroke: 'red',
lineWidth: 3
},
top: true
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(6);
expect(guidesOptions[5]).to.eql({
type: 'line',
start: {
x: 'a',
y1: 'median'
},
end: {
x: 'd',
y1: 'median'
},
lineStyle: {
stroke: 'red',
lineWidth: 3
},
top: true
});
});
it('动态文本', function() {
guideController.text({
content: '我是一条动态的文本。',
style: {
fill: 'red',
textAlign: 'center',
fontSize: 20
},
start: (xScales, yScales) => {
return {
x: xScales.x.values[0],
y1: yScales.y1.min
};
},
top: true // 展示在最上层
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(7);
expect(guidesOptions[6].type).to.equal('text');
expect(guidesOptions[6].start).to.be.an.instanceOf(Function);
});
it('添加html.', function() {
guideController.html({
position: {
x: 'e',
y1: 550
},
alignX: 'left',
alignY: 'top',
htmlContent: '<div>哈哈你妹呀</div>'
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(8);
expect(guidesOptions[7]).to.eql({
type: 'html',
position: {
x: 'e',
y1: 550
},
alignX: 'left',
alignY: 'top',
htmlContent: '<div>哈哈你妹呀</div>'
});
});
it('添加 DataRegion', function() {
guideController.dataRegion({
start: {
x: 'b',
y1: 350
},
end: {
x: 'e',
y1: 550
},
content: '这是一个特殊的区域',
style: {
region: {
lineWidth: 1,
fill: '#1890ff',
opacity: 0.5
},
text: {
fontSize: 18
}
},
top: false
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(9);
expect(guidesOptions[8]).to.eql({
type: 'dataRegion',
start: {
x: 'b',
y1: 350
},
end: {
x: 'e',
y1: 550
},
content: '这是一个特殊的区域',
style: {
region: {
lineWidth: 1,
fill: '#1890ff',
opacity: 0.5
},
text: {
fontSize: 18
}
},
top: false
});
});
it('绘制 DataMarker', function() {
guideController.dataMarker({
top: true,
position: [ '50%', '50%' ],
content: '请注意这一点'
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(10);
expect(guidesOptions[9]).to.eql({
type: 'dataMarker',
top: true,
position: [ '50%', '50%' ],
content: '请注意这一点'
});
});
it('绘制 Arc', function() {
guideController.arc({
start: [ 0, 'min' ],
end: [ 4, 'max' ]
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(11);
expect(guidesOptions[10]).to.eql({
type: 'arc',
start: [ 0, 'min' ],
end: [ 4, 'max' ]
});
guidesOptions.pop();
});
it('绘制 RegionFilter', function() {
// guideController.clear();
guideController.regionFilter({
start: [ 'min', '0%' ],
end: [ '50%', '50%' ],
color: 'red'
});
const guidesOptions = guideController.options;
expect(guidesOptions.length).to.equal(11);
expect(guidesOptions[10]).to.eql({
type: 'regionFilter',
start: [ 'min', '0%' ],
end: [ '50%', '50%' ],
color: 'red'
});
guidesOptions.pop();
});
it('绘制.', function() {
guideController.render(coord);
canvas.draw();
const dom = div.getElementsByClassName('g-guide');
expect(dom).not.to.be.empty;
expect(dom.length).to.equal(1);
const frontGroup = guideController.frontGroup;
const backGroup = guideController.backGroup;
expect(frontGroup.get('children').length).to.equal(6); // 文本默认在最上面
expect(backGroup.get('children').length).to.equal(3);
});
it('changeVisible', function() {
guideController.changeVisible(false);
canvas.draw();
const guides = guideController.guides;
for (let i = 0; i < guides.length; i++) {
const guide = guides[i];
expect(guide.get('visible')).to.be.false;
}
});
it('clear', function() {
guideController.clear();
const dom = div.getElementsByClassName('g-guide');
expect(guideController.options.length).to.equal(0);
expect(dom).to.be.empty;
expect(canvas.get('children').length).to.equal(2);
expect(frontContainer.get('children').length).to.equal(0);
expect(backContainer.get('children').length).to.equal(0);
const guides = guideController.guides;
expect(guides.length).to.equal(0);
});
it('destroy', function() {
canvas.destroy();
});
});
describe('test geom interval', function() {
const data = [
{ a: '1', b: 2, c: '1' },
{ a: '2', b: 5, c: '1' },
{ a: '3', b: 4, c: '1' },
{ a: '1', b: 3, c: '2' },
{ a: '2', b: 1, c: '2' },
{ a: '3', b: 2, c: '2' }
];
scaleA = Scale.cat({
field: 'a',
values: [ '1', '2', '3' ],
range: [ 0.2, 0.8 ]
});
const group = canvas.addGroup();
const geom = new Geom.Interval({
data,
coord,
container: group,
scales: { a: scaleA, b: scaleB, c: scaleC, red: ScaleRed, 10: ScaleTen }
});
const shapeContainer = geom.get('shapeContainer');
it('draw interval', function() {
expect(geom.get('type')).eql('interval');
geom.position('a*b').color('c').adjust('dodge');
geom.init();
geom.paint();
expect(shapeContainer.getCount()).equal(data.length);
});
it('size test dodge', function() {
const path = shapeContainer.getFirst();
const arr = path.attr('path');
expect(arr.length).eql(6);
expect(arr[2][1] - arr[0][1]).equal((500) / 3 * 1 / 4);
});
it('size test no dodge', function() {
geom.reset();
geom.position('a*b').color('c').adjust(null);
geom.set('data', [
{ a: '1', b: 2, c: '1' },
{ a: '2', b: 5, c: '1' },
{ a: '3', b: 4, c: '1' }
]);
geom.init();
geom.paint();
const path = shapeContainer.getFirst();
const arr = path.attr('path');
expect(arr.length).eql(6);
// expect(arr[2][1] - arr[0][1]).equal(0);
expect(equal((arr[2][1] - arr[0][1]), (500) / 3 / 2)).equal(true);
expect(geom.getSize()).equal((500) / 3 / 2);
});
it('size test dodge by', function() {
geom.reset();
geom.position('a*b').color('c')
.adjust([{ type: 'dodge', dodgeBy: 'a' }]);
geom.set('data', data);
geom.init();
geom.paint();
const path = shapeContainer.getFirst();
const arr = path.attr('path');
expect(arr.length).eql(6);
expect(geom.getSize()).equal((500) / 3 / 6);
});
it('custom size', function() {
geom.reset();
geom.position('a*b').color('c')
.size(10)
.adjust(null);
geom.set('data', [
{ a: '1', b: 2, c: '1' },
{ a: '2', b: 5, c: '1' },
{ a: '3', b: 4, c: '1' }
]);
geom.init();
geom.paint();
const path = shapeContainer.getFirst();
const arr = path.attr('path');
expect(arr.length).eql(6);
expect(equal((arr[2][1] - arr[0][1]), 10)).equal(true);
expect(geom.getSize()).equal(10);
});
it('polar coord, draw interval', function() {
const coord1 = new Coord.Polar({
start: {
x: 0,
y: 0
},
end: {
x: 500,
y: 500
}
});
scaleA.range = [ 1 / 6, 1 - 1 / 6 ];
geom.set('coord', coord1);
geom.reset();
geom.position('a*b');
geom.init();
geom.paint();
const path = shapeContainer.getFirst();
const points = path.get('origin').points;
expect(path.attr('path').length).eql(5);
expect(Math.abs(points[2].x - points[0].x - 1 / 3) < 0.001).equal(true);
});
it('polar coord dodge size', function() {
scaleA.range = [ 0, 1 - 1 / 3 ];
geom.reset();
geom.set('data', data);
geom.position('a*b').adjust('dodge').color('c');
geom.init();
geom.paint();
expect(shapeContainer.getCount()).equal(6);
canvas.draw();
});
it('ploar transpose', function() {
scaleA.range = [ 0, 1 - 1 / 6 ];
geom.get('coord').isTransposed = true;
geom.reset();
geom.position('a*b').color('c').adjust('dodge');
geom.init();
geom.paint();
canvas.draw();
});
it('geom destroy', () => {
geom.destroy();
canvas.draw();
expect(geom.destroyed).equal(true);
});
});
let scaleA = Scale.linear({
field: 'a',
min: 0,
max: 10
});
const scaleB = Scale.linear({
field: 'b',
min: 0,
max: 5,
nice: false
});
const scaleC = Scale.cat({
field: 'c',
values: [ '1', '2' ]
});
const ScaleRed = Scale.identity({
field: 'red',
value: 'red'
});
const ScaleTen = Scale.identity({
field: '10',
value: 10
});
const coord = new Coord.Rect({
start: {
x: 0,
y: 0