Skip to content

Commit 1282011

Browse files
thomasneirynckthomasneirynck
committed
tagcloud squashed
1 parent 62c2e31 commit 1282011

12 files changed

Lines changed: 747 additions & 13 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
"commander": "2.8.1",
102102
"css-loader": "0.17.0",
103103
"d3": "3.5.6",
104+
"d3-cloud": "1.2.1",
104105
"dragula": "3.7.0",
105106
"elasticsearch": "12.0.0-rc5",
106107
"elasticsearch-browser": "12.0.0-rc5",

‎src/core_plugins/tagcloud/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function (kibana) {
2+
3+
return new kibana.Plugin({
4+
uiExports: {
5+
visTypes: ['plugins/tagcloud/tag_cloud_vis']
6+
}
7+
});
8+
};

‎src/core_plugins/tagcloud/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "tagcloud",
3+
"version": "kibana"
4+
}

‎src/core_plugins/tagcloud/public/__tests__/tag_cloud.js‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import expect from 'expect.js';
2+
import _ from 'lodash';
3+
import TagCloud from 'plugins/tagcloud/tag_cloud';
4+
5+
describe('tag cloud', function () {
6+
7+
let domNode;
8+
9+
beforeEach(function () {
10+
domNode = document.createElement('div');
11+
domNode.style.top = '0';
12+
domNode.style.left = '0';
13+
domNode.style.width = '512px';
14+
domNode.style.height = '512px';
15+
domNode.style.position = 'fixed';
16+
domNode.style['pointer-events'] = 'none';
17+
document.body.appendChild(domNode);
18+
});
19+
20+
afterEach(function () {
21+
document.body.removeChild(domNode);
22+
});
23+
24+
25+
const baseTestConfig = {
26+
data: [
27+
{text: 'foo', size: 1},
28+
{text: 'bar', size: 5},
29+
{text: 'foobar', size: 9},
30+
],
31+
options: {
32+
orientation: 'single',
33+
scale: 'linear',
34+
minFontSize: 10,
35+
maxFontSize: 36
36+
},
37+
expected: [
38+
{
39+
text: 'foo',
40+
fontSize: '10px'
41+
},
42+
{
43+
text: 'bar',
44+
fontSize: '23px'
45+
},
46+
{
47+
text: 'foobar',
48+
fontSize: '36px'
49+
}
50+
]
51+
};
52+
53+
const singleLayout = _.cloneDeep(baseTestConfig);
54+
const rightAngleLayout = _.cloneDeep(baseTestConfig);
55+
rightAngleLayout.options.orientation = 'right angled';
56+
const multiLayout = _.cloneDeep(baseTestConfig);
57+
multiLayout.options.orientation = 'multiple';
58+
const logScale = _.cloneDeep(baseTestConfig);
59+
logScale.options.scale = 'log';
60+
logScale.expected[1].fontSize = '31px';
61+
const sqrtScale = _.cloneDeep(baseTestConfig);
62+
sqrtScale.options.scale = 'square root';
63+
sqrtScale.expected[1].fontSize = '27px';
64+
const biggerFont = _.cloneDeep(baseTestConfig);
65+
biggerFont.options.minFontSize = 36;
66+
biggerFont.options.maxFontSize = 72;
67+
biggerFont.expected[0].fontSize = '36px';
68+
biggerFont.expected[1].fontSize = '54px';
69+
biggerFont.expected[2].fontSize = '72px';
70+
71+
[
72+
singleLayout,
73+
rightAngleLayout,
74+
multiLayout,
75+
logScale,
76+
sqrtScale,
77+
biggerFont
78+
].forEach((test, index) => {
79+
80+
it(`should position elements correctly: ${index}`, done => {
81+
const tagCloud = new TagCloud(domNode);
82+
tagCloud.setData(test.data);
83+
tagCloud.setOptions(test.options);
84+
tagCloud.on('renderComplete', function onRender() {
85+
tagCloud.removeListener('renderComplete', onRender);
86+
const textElements = domNode.querySelectorAll('text');
87+
verifyTagProperties(test.expected, textElements);
88+
expect(tagCloud.getStatus()).to.equal(TagCloud.STATUS.COMPLETE);
89+
done();
90+
});
91+
});
92+
});
93+
94+
it(`should not put elements in view when container to small`, function (done) {
95+
96+
domNode.style.width = '1px';
97+
domNode.style.height = '1px';
98+
99+
const tagCloud = new TagCloud(domNode);
100+
tagCloud.setData(baseTestConfig.data);
101+
tagCloud.setOptions(baseTestConfig.options);
102+
tagCloud.on('renderComplete', function onRender() {
103+
tagCloud.removeListener('renderComplete', onRender);
104+
expect(tagCloud.getStatus()).to.equal(TagCloud.STATUS.INCOMPLETE);
105+
const textElements = domNode.querySelectorAll('text');
106+
for (let i = 0; i < textElements; i++) {
107+
const bbox = textElements[i].getBoundingClientRect();
108+
verifyBbox(bbox, false);
109+
}
110+
done();
111+
});
112+
});
113+
114+
115+
it(`tags should fit after making container bigger`, function (done) {
116+
117+
domNode.style.width = '1px';
118+
domNode.style.height = '1px';
119+
120+
const tagCloud = new TagCloud(domNode);
121+
tagCloud.setData(baseTestConfig.data);
122+
tagCloud.setOptions(baseTestConfig.options);
123+
tagCloud.on('renderComplete', function onRender() {
124+
tagCloud.removeListener('renderComplete', onRender);
125+
expect(tagCloud.getStatus()).to.equal(TagCloud.STATUS.INCOMPLETE);
126+
127+
domNode.style.width = '512px';
128+
domNode.style.height = '512px';
129+
tagCloud.on('renderComplete', _ => {
130+
expect(tagCloud.getStatus()).to.equal(TagCloud.STATUS.COMPLETE);
131+
done();
132+
});
133+
tagCloud.resize();
134+
135+
});
136+
});
137+
138+
it(`tags should no longer fit after making container smaller`, function (done) {
139+
140+
const tagCloud = new TagCloud(domNode);
141+
tagCloud.setData(baseTestConfig.data);
142+
tagCloud.setOptions(baseTestConfig.options);
143+
tagCloud.on('renderComplete', function onRender() {
144+
tagCloud.removeListener('renderComplete', onRender);
145+
expect(tagCloud.getStatus()).to.equal(TagCloud.STATUS.COMPLETE);
146+
147+
domNode.style.width = '1px';
148+
domNode.style.height = '1px';
149+
tagCloud.on('renderComplete', _ => {
150+
expect(tagCloud.getStatus()).to.equal(TagCloud.STATUS.INCOMPLETE);
151+
done();
152+
});
153+
tagCloud.resize();
154+
155+
});
156+
157+
});
158+
159+
function verifyTagProperties(expectedValues, actualElements) {
160+
expect(actualElements.length).to.equal(expectedValues.length);
161+
expectedValues.forEach((test, index) => {
162+
expect(actualElements[index].style.fontSize).to.equal(test.fontSize);
163+
expect(actualElements[index].innerHTML).to.equal(test.text);
164+
isInsideContainer(actualElements[index]);
165+
});
166+
}
167+
168+
function isInsideContainer(actualElement) {
169+
const bbox = actualElement.getBoundingClientRect();
170+
verifyBbox(bbox, true);
171+
}
172+
173+
function verifyBbox(bbox, shouldBeInside) {
174+
expect(bbox.top >= 0 && bbox.top <= domNode.offsetHeight).to.be(shouldBeInside);
175+
expect(bbox.bottom >= 0 && bbox.bottom <= domNode.offsetHeight).to.be(shouldBeInside);
176+
expect(bbox.left >= 0 && bbox.left <= domNode.offsetWidth).to.be(shouldBeInside);
177+
expect(bbox.right >= 0 && bbox.right <= domNode.offsetWidth).to.be(shouldBeInside);
178+
}
179+
180+
181+
});

0 commit comments

Comments
 (0)