describe('test edge', function() {
const scaleX = Scale.linear({
field: 'x',
min: 0,
max: 5
});
const scaleY = Scale.linear({
field: 'y',
min: 0,
max: 5
});
const scaleVh = Scale.identity({
field: 'vhv',
value: 'vhv'
});
const data = [
{ x: [ 1, 2 ], y: [ 3, 4 ] },
{ x: [ 2, 3 ], y: [ 1, 5 ] }
];
const group = canvas.addGroup();
const geom = new Geom.Edge({
data,
coord,
container: group,
scales: { x: scaleX, y: scaleY, vhv: scaleVh, red: ScaleRed }
});
const shapeContainer = geom.get('shapeContainer');
it('init', function() {
expect(geom.get('type')).equal('edge');
});
it('draw two point', function() {
geom.position('x*y').color('red');
geom.init();
geom.paint();
expect(shapeContainer.getCount()).equal(2);
expect(shapeContainer.getFirst().attr('path').length).equal(2);
canvas.draw();
});
it('draw vhv', function() {
geom.reset();
geom.position('x*y').shape('vhv');
geom.init();
geom.paint();
expect(shapeContainer.getCount()).equal(2);
expect(shapeContainer.getFirst().attr('path').length).equal(4);
canvas.draw();
});
it('final destroy', function() {
canvas.destroy();
document.body.removeChild(div);
});
});
describe('test polygon', function() {
const data = [
{ x: [ 1, 2, 2, 1 ], y: [ 0, 0, 2, 1 ] },
{ x: [ 4, 3, 4, 2 ], y: [ 0, 0, 2, 4 ] }
];
const scaleX = Scale.linear({
field: 'x',
min: 0,
max: 5
});
const scaleY = Scale.linear({
field: 'y',
min: 0,
max: 5
});
const group = canvas.addGroup();
const geom = new Geom.Polygon({
data,
coord,
container: group,
scales: { x: scaleX, y: scaleY }
});
const shapeContainer = geom.get('shapeContainer');
it('test init', () => {
expect(geom.get('type')).equal('polygon');
expect(geom.get('generatePoints')).equal(true);
});
it('draw', function() {
geom.position('x*y');
geom.init();
geom.paint();
expect(shapeContainer.getCount()).equal(2);
canvas.draw();
});
it('destroy', function() {
geom.destroy();
expect(geom.destroyed).equal(true);
});
});
describe('interval labels', () => {
const div = document.createElement('div');
div.id = 'gl1';
document.body.appendChild(div);
const canvas = new Canvas({
containerId: 'gl1',
width: 500,
height: 500
});
const coord = new Coord.Cartesian({
start: {
x: 80, y: 168
},
end: {
x: 970, y: 20
}
});
const labelScale = Scale.linear({
field: 'percent',
formatter: val => { return val.toFixed(4) * 100 + '%'; },
values: [ 0.5169927909371782, 0.5545851528384279 ]
});
const points = [
{ _origin: { country: 'Asia', year: '1750', value: 502, percent: 0.5169927909371782 }, points: [{ x: 0.03571428571428571, y: 0.48300720906282185 }, { x: 0.03571428571428571, y: 1 }, { x: 0.10714285714285714, y: 1 }, { x: 0.10714285714285714, y: 0.48300720906282185 }], nextPoints: [{ x: 0.03571428571428571, y: 0.3738414006179197 }, { x: 0.03571428571428571, y: 0.48300720906282185 }, { x: 0.10714285714285714, y: 0.48300720906282185 }, { x: 0.10714285714285714, y: 0.3738414006179197 }], x: 143.57142857142856, y: [ 219.04222451081358, 20 ], color: '#FF6A84', shape: 'top-line' },
{ _origin: { country: 'Asia', year: '1800', value: 635, percent: 0.5545851528384279 }, points: [{ x: 0.17857142857142855, y: 0.4454148471615721 }, { x: 0.17857142857142855, y: 1 }, { x: 0.25, y: 1 }, { x: 0.25, y: 0.4454148471615721 }], x: 270.71428571428567, y: [ 233.51528384279476, 20 ], color: '#FF6A84', shape: 'top-line' }
];
/* const labelScale1 = Scale.cat({
field: 'z',
values: [[ '1', '2' ], [ '3', '4' ]]
});
const points1 = [
{ x: 100, y: [ 10, 20 ], z: [ '1', '2' ], _origin: { x: 100, y: [ 10, 20 ], z: [ '1', '2' ] } },
{ x: 100, y: [ 30, 40 ], z: [ '3', '4' ], _origin: { x: 100, y: [ 30, 40 ], z: [ '3', '4' ] } }
];*/
it('single label position middle', () => {
const gLabels = canvas.addGroup(IntervalLabels, {
coord,
labelCfg: {
cfg: {
position: 'middle',
offset: 0
},
scales: [ labelScale ]
},
geomType: 'interval'
});
const cfg = gLabels.get('label');
expect(cfg.position).to.equal('middle');
const items = gLabels.getLabelsItems(points);
expect(items[0].x).to.equal(143.57142857142856);
expect(items[0].y).to.equal(58.257466529351184);
expect(items[1].x).to.equal(270.71428571428567);
expect(items[1].y).to.equal(61.03930131004366);
});
it('single label position left', () => {
const gLabels = canvas.addGroup(IntervalLabels, {
coord,
labelCfg: {
cfg: {
position: 'left',
offset: 0
},
scales: [ labelScale ]
},
geomType: 'interval'
});
const cfg = gLabels.get('label');
expect(cfg.position).to.equal('left');
const items = gLabels.getLabelsItems(points);
expect(items[0].x).to.equal(111.78571428571428);
expect(items[0].y).to.equal(58.257466529351184);
expect(items[0].textAlign).to.equal('right');
expect(items[1].x).to.equal(238.9285714285714);
expect(items[1].y).to.equal(61.03930131004366);
expect(items[1].textAlign).to.equal('right');
});
it('single label position right', () => {
const gLabels = canvas.addGroup(IntervalLabels, {
coord,
labelCfg: {
cfg: {
position: 'right',
offset: 0
},
scales: [ labelScale ]
},
geomType: 'interval'
});
const cfg = gLabels.get('label');
expect(cfg.position).to.equal('right');
const items = gLabels.getLabelsItems(points);
expect(items[0].x).to.equal(175.35714285714283);
expect(items[0].y).to.equal(58.257466529351184);
expect(items[0].textAlign).to.equal('left');
expect(items[1].x).to.equal(302.49999999999994);
expect(items[1].y).to.equal(61.03930131004366);
expect(items[1].textAlign).to.equal('left');
});
});
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 schema', function() {
const scaleX = Scale.linear({
field: 'x',
min: 0,
values: [ 0, 1, 2, 3, 4, 5 ],
max: 10
});
const scaleY = Scale.linear({
field: 'y',
min: 0,
max: 5
});
const scaleBox = Scale.identity({
field: 'box',
value: 'box'
});
const scaleCandle = Scale.identity({
field: 'candle',
value: 'candle'
});
const group = canvas.addGroup();
describe('test box', function() {
const data = [
{ x: 1, y: [ 0, 1, 2, 3, 4 ] },
{ x: 2, y: [ 1, 2, 3, 4 ] },
{ x: 3, y: [ 0, 4 ] }
];
const geom = new Geom.Schema({
data,
coord,
container: group,
scales: { x: scaleX, y: scaleY, box: scaleBox }
});
const shapeContainer = geom.get('shapeContainer');
it('init', function() {
geom.position('x*y').shape('box');
expect(geom.get('type')).equal('schema');
});
it('draw', function() {
geom.init();
expect(geom.getNormalizedSize()).equal(1 / 10 / 2);
geom.paint();
expect(shapeContainer.getCount()).equal(3);
canvas.draw();
});
it('destroy', function() {
geom.destroy();
expect(geom.destroyed).equal(true);
});
});
describe('test candle', function() {
const data = [
{ x: 1, y: [ 0, 1, 2, 3 ] },
{ x: 2, y: [ 1, 2, 3, 4 ] },
{ x: 3, y: [ 0, 4 ] }
];
const geom = new Geom.Schema({
data,
coord,
container: group,
scales: { x: scaleX, y: scaleY, candle: scaleCandle }
});
const shapeContainer = geom.get('shapeContainer');
it('init', function() {
geom.position('x*y').shape('candle');
expect(geom.get('type')).equal('schema');
});
it('draw', function() {
geom.init();
expect(geom.getNormalizedSize()).equal(1 / 10 / 2);
geom.paint();
expect(shapeContainer.getCount()).equal(3);
canvas.draw();
});
it('destroy', function() {
geom.destroy();
expect(geom.destroyed).equal(true);
});
});
});
describe('test geom line', function() {
let data = [{ a: 4, b: 3, c: '1' }, { a: 2, b: 2, c: '2' }];
const scaleA = Scale.linear({
field: 'a',
min: 0,
max: 10
});
const scaleB = Scale.linear({
field: 'b',
min: 0,
max: 5,
nice: false
});
const group = canvas.addGroup();
const geom = new Geom.Line({
data,
coord,
container: group,
scales: { a: scaleA, b: scaleB, c: scaleC, red: ScaleRed }
});
const shapeContainer = geom.get('shapeContainer');
it('draw path', function() {
expect(geom.get('type')).eql('line');
geom.position('a*b');
geom.init();
geom.paint();
expect(shapeContainer.getCount()).equal(1);
const path = shapeContainer.getFirst();
expect(path.attr('path').length).eql(2);
expect(path.attr('path')[0]).eqls([ 'M', 100, 200 ]);
expect(path.attr('path')[1]).eqls([ 'L', 200, 300 ]);
canvas.draw();
});
it('draw multiple path', function() {
data = [{ a: 4, b: [ 3, 5 ], c: '1' }, { a: 5, b: [ 2, 4 ], c: '2' }];
geom.reset();
geom.set('data', data);
geom.position('a*b');
geom.init();
geom.paint();
expect(shapeContainer.getCount()).equal(1);
const path = shapeContainer.getFirst();
expect(path.attr('path').length).eql(4);
canvas.draw();
});
it('draw path with color', function() {
const data = [{ a: 1, b: 3, c: '1' }, { a: 2, b: 3.5, c: '1' }, { a: 1, b: 2, c: '2' }, { a: 2, b: 1.5, c: '2' }];
geom.reset();
geom.set('data', data);
geom.position('a*b').color('c');
geom.init();
geom.paint();
expect(shapeContainer.getCount()).equal(2);
const path = shapeContainer.getFirst();
expect(path.attr('path').length).eql(2);
canvas.draw();
});
it('destroy & reset', function() {
geom.destroy();
expect(geom.destroyed).equal(true);
canvas.draw();
});
});
describe('test paint', function() {
const newData = data.slice(0);
const group = canvas.addGroup();
let geom;
const scaleA = Scale.linear({
field: 'a',
min: 0,
max: 10
});
const scaleB = Scale.linear({
field: 'b',
min: 0,
max: 5,
nice: false
});
it('test generate points and ', function() {
geom = new Geom({
shapeType: 'point',
coord,
data: newData,
container: group,
generatePoints: true,
scales: { a: scaleA, b: scaleB, c: scaleC, red: ScaleRed }
});
geom.position('a*b').color('red');
geom.init();
const data = [
{ a: 1, b: [ 1, 2 ], c: '1' },
{ a: 2, b: [ 2, 3 ], c: '2' }
];
geom._beforeMapping([ data ]);
expect(data[0].points).eqls([{ x: 0.1, y: 0.2 }, { x: 0.1, y: 0.4 }]);
});
it('test mapping', function() {
const data = [
{ a: 1, b: [ 1, 2 ], c: '1' },
{ a: 2, b: [ 2, 3 ], c: '2' }
];
coord.isTransposed = false;
geom._beforeMapping([ data ]);
const mappedData = geom._mapping(data);
const obj1 = mappedData[0];
expect(obj1.x).equal(50);
expect(obj1.y).eqls([ 100, 200 ]);
expect(obj1.color).equal('red');
});
it('test paint', function() {
geom.reset();
geom.position('a*b').color('c');
geom.init();
geom.paint();
expect(geom.get('shapeContainer').getCount()).to.be.equal(6);
canvas.draw();
});
it('test style no fields', function() {
geom.reset();
geom.position('a*b').color('c').style({
fill: 'blue',
cursor: 'pointer'
});
geom.init();
geom.paint();
const shape = geom.get('shapeContainer').getFirst();
expect(shape.attr('fill')).equal('blue');
expect(shape.attr('cursor')).equal('pointer');
canvas.draw();
});
it('test style with fields', function() {
geom.reset();
geom.position('a*b').color('c').style('a', {
fill: 'blue',
lineWidth(a) {
return a * 2;
}
});
geom.init();
geom.paint();
const shape = geom.get('shapeContainer').getFirst();
expect(shape.attr('fill')).equal('blue');
expect(shape.attr('lineWidth')).equal(data[0].a * 2);
canvas.draw();
});
it('geom.tooltip(false)', function() {
geom.reset();
geom.position('a*b').color('c').tooltip(false);
geom.init();
geom.paint();
expect(geom.get('tooltipCfg')).eql({});
canvas.draw();
});
it('geom.tooltip("x*y", callback)', function() {
geom.reset();
geom.position('a*b').color('c').tooltip('b*c', (b, c) => {
return {
name: b,
value: c
};
});
geom.init();
geom.paint();
expect(geom.get('tooltipCfg')).to.be.an.instanceof(Object);
expect(geom.get('tooltipCfg').fields).to.eql([ 'b', 'c' ]);
canvas.draw();
});
});
const Scale = require('@antv/scale');
const Coord = require('@antv/coord/lib/index');
const Util = require('../../../src/util');
const div = document.createElement('div');
div.id = 'cgbase';
document.body.appendChild(div);
const canvas = new Canvas({
containerId: 'cgbase',
width: 500,
height: 500
});
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' ]
});