Skip to content

Commit beed042

Browse files
archmojarchmoj
committed
add react tests for treemap and pie uniform text as well as inside text orientation
1 parent 2cb5687 commit beed042

File tree

4 files changed

+337
-3
lines changed

4 files changed

+337
-3
lines changed

‎test/jasmine/tests/funnelarea_test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1755,7 +1755,7 @@ describe('funnelarea uniformtext', function() {
17551755
var fig = {
17561756
data: [{
17571757
type: 'funnelarea',
1758-
lables: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
1758+
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
17591759
values: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
17601760
sort: false,
17611761

‎test/jasmine/tests/pie_test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1836,7 +1836,7 @@ describe('pie inside text orientation', function() {
18361836
var fig = {
18371837
data: [{
18381838
type: 'pie',
1839-
lables: [1, 2, 4, 8, 16, 32, 64],
1839+
labels: [1, 2, 4, 8, 16, 32, 64],
18401840
values: [1, 2, 4, 8, 16, 32, 64],
18411841
sort: false,
18421842

@@ -1940,7 +1940,7 @@ describe('pie uniformtext', function() {
19401940
var fig = {
19411941
data: [{
19421942
type: 'pie',
1943-
lables: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
1943+
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
19441944
values: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
19451945
sort: false,
19461946

‎test/jasmine/tests/sunburst_test.js

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
1717
var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
1818
var checkTextTemplate = require('../assets/check_texttemplate');
1919

20+
var SLICES_TEXT_SELECTOR = '.sunburstlayer text.slicetext';
21+
2022
function _mouseEvent(type, gd, v) {
2123
return function() {
2224
if(Array.isArray(v)) {
@@ -1703,3 +1705,218 @@ describe('Test sunburst texttemplate with *remainder* `values` should work when
17031705
['%{percentParent} of %{parent}', ['20% of Eve', '42% of Seth', '8% of Seth']],
17041706
], /* skipEtra */ true);
17051707
});
1708+
1709+
describe('sunburst inside text orientation', function() {
1710+
'use strict';
1711+
1712+
var gd;
1713+
1714+
beforeEach(function() {
1715+
gd = createGraphDiv();
1716+
});
1717+
1718+
afterEach(destroyGraphDiv);
1719+
1720+
function assertTextRotations(msg, opts) {
1721+
return function() {
1722+
var selection = d3.selectAll(SLICES_TEXT_SELECTOR);
1723+
var size = selection.size();
1724+
['rotations'].forEach(function(e) {
1725+
expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements');
1726+
});
1727+
1728+
for(var i = 0; i < selection[0].length; i++) {
1729+
var transform = selection[0][i].getAttribute('transform');
1730+
var pos0 = transform.indexOf('rotate(');
1731+
var rotate = 0;
1732+
if(pos0 !== -1) {
1733+
pos0 += 'rotate'.length;
1734+
var pos1 = transform.indexOf(')', pos0);
1735+
rotate = +(transform.substring(pos0 + 1, pos1 - 1));
1736+
}
1737+
1738+
expect(opts.rotations[i]).toBeCloseTo(rotate, 1, 'rotation for element ' + i, msg);
1739+
}
1740+
};
1741+
}
1742+
1743+
it('should be able to react to new insidetextorientation option', function(done) {
1744+
var fig = {
1745+
data: [{
1746+
type: 'sunburst',
1747+
parents: ['', '', '', '', '', '', ''],
1748+
labels: [64, 32, 16, 8, 4, 2, 1],
1749+
values: [64, 32, 16, 8, 4, 2, 1],
1750+
1751+
text: [
1752+
'666666',
1753+
'55555',
1754+
'4444',
1755+
'333',
1756+
'22',
1757+
'1',
1758+
''
1759+
],
1760+
1761+
textinfo: 'text'
1762+
}],
1763+
layout: {
1764+
width: 300,
1765+
height: 300
1766+
}
1767+
};
1768+
1769+
Plotly.plot(gd, fig)
1770+
.then(assertTextRotations('using default "auto"', {
1771+
rotations: [-0.71, 0, 0, 31.18, 14.17, -84.33, 0]
1772+
}))
1773+
.then(function() {
1774+
fig.data[0].insidetextorientation = 'horizontal';
1775+
return Plotly.react(gd, fig);
1776+
})
1777+
.then(assertTextRotations('using "horizontal"', {
1778+
rotations: [0, 0, 0, 0, 0, 0, 0]
1779+
}))
1780+
.then(function() {
1781+
fig.data[0].insidetextorientation = 'radial';
1782+
return Plotly.react(gd, fig);
1783+
})
1784+
.then(assertTextRotations('using "radial"', {
1785+
rotations: [89.29, -46.77, 65.20, 31.18, 14.17, 5.67, 1.42]
1786+
}))
1787+
.then(function() {
1788+
fig.data[0].insidetextorientation = 'tangential';
1789+
return Plotly.react(gd, fig);
1790+
})
1791+
.then(assertTextRotations('using "tangential"', {
1792+
rotations: [0, 43.23, -24.80, -58.81, -75.83, -84.33, -88.58]
1793+
}))
1794+
.then(function() {
1795+
fig.data[0].insidetextorientation = 'auto';
1796+
return Plotly.react(gd, fig);
1797+
})
1798+
.then(assertTextRotations('back to "auto"', {
1799+
rotations: [-0.71, 0, 0, 31.18, 14.17, -84.33, 0]
1800+
}))
1801+
.catch(failTest)
1802+
.then(done);
1803+
});
1804+
});
1805+
1806+
describe('sunburst uniformtext', function() {
1807+
'use strict';
1808+
1809+
var gd;
1810+
1811+
beforeEach(function() {
1812+
gd = createGraphDiv();
1813+
});
1814+
1815+
afterEach(destroyGraphDiv);
1816+
1817+
function assertTextSizes(msg, opts) {
1818+
return function() {
1819+
var selection = d3.selectAll(SLICES_TEXT_SELECTOR);
1820+
var size = selection.size();
1821+
['fontsizes', 'scales'].forEach(function(e) {
1822+
expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements');
1823+
});
1824+
1825+
selection.each(function(d, i) {
1826+
var fontSize = this.style.fontSize;
1827+
expect(fontSize).toBe(opts.fontsizes[i] + 'px', 'fontSize for element ' + i, msg);
1828+
});
1829+
1830+
for(var i = 0; i < selection[0].length; i++) {
1831+
var transform = selection[0][i].getAttribute('transform');
1832+
var pos0 = transform.indexOf('scale(');
1833+
var scale = 1;
1834+
if(pos0 !== -1) {
1835+
pos0 += 'scale'.length;
1836+
var pos1 = transform.indexOf(')', pos0);
1837+
scale = +(transform.substring(pos0 + 1, pos1 - 1));
1838+
}
1839+
1840+
expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
1841+
}
1842+
};
1843+
}
1844+
1845+
it('should be able to react with new uniform text options', function(done) {
1846+
var fig = {
1847+
data: [{
1848+
type: 'sunburst',
1849+
parents: ['', '', '', '', '', '', '', '', '', ''],
1850+
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
1851+
values: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
1852+
1853+
text: [
1854+
0,
1855+
'<br>',
1856+
null,
1857+
'',
1858+
' ',
1859+
'.',
1860+
'|',
1861+
'=',
1862+
'$',
1863+
'very long lablel'
1864+
],
1865+
1866+
textinfo: 'text'
1867+
}],
1868+
layout: {
1869+
width: 300,
1870+
height: 300
1871+
}
1872+
};
1873+
1874+
Plotly.plot(gd, fig)
1875+
.then(assertTextSizes('without uniformtext', {
1876+
fontsizes: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
1877+
scales: [1, 1, 1, 1, 1, 1, 1, 1, 1, 0.58],
1878+
}))
1879+
.then(function() {
1880+
fig.layout.uniformtext = {mode: 'hide'}; // default with minsize=0
1881+
return Plotly.react(gd, fig);
1882+
})
1883+
.then(assertTextSizes('using mode: "hide"', {
1884+
fontsizes: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
1885+
scales: [0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58],
1886+
}))
1887+
.then(function() {
1888+
fig.layout.uniformtext.minsize = 9; // set a minsize less than trace font size
1889+
return Plotly.react(gd, fig);
1890+
})
1891+
.then(assertTextSizes('using minsize: 9', {
1892+
fontsizes: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
1893+
scales: [0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0],
1894+
}))
1895+
.then(function() {
1896+
fig.layout.uniformtext.minsize = 32; // set a minsize greater than trace font size
1897+
return Plotly.react(gd, fig);
1898+
})
1899+
.then(assertTextSizes('using minsize: 32', {
1900+
fontsizes: [32, 32, 32, 32, 32, 32, 32, 32, 32, 32],
1901+
scales: [0, 0.22, 0.22, 0.22, 0.22, 0.22, 0.22, 0, 0, 0],
1902+
}))
1903+
.then(function() {
1904+
fig.layout.uniformtext.minsize = 16; // set a minsize greater than trace font size
1905+
return Plotly.react(gd, fig);
1906+
})
1907+
.then(assertTextSizes('using minsize: 16', {
1908+
fontsizes: [16, 16, 16, 16, 16, 16, 16, 16, 16, 16],
1909+
scales: [0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0],
1910+
}))
1911+
.then(function() {
1912+
fig.layout.uniformtext.mode = 'show';
1913+
return Plotly.react(gd, fig);
1914+
})
1915+
.then(assertTextSizes('using mode: "show"', {
1916+
fontsizes: [16, 16, 16, 16, 16, 16, 16, 16, 16, 16],
1917+
scales: [0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44],
1918+
}))
1919+
.catch(failTest)
1920+
.then(done);
1921+
});
1922+
});

‎test/jasmine/tests/treemap_test.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
1717
var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
1818
var checkTextTemplate = require('../assets/check_texttemplate');
1919

20+
var SLICES_TEXT_SELECTOR = '.treemaplayer text.slicetext';
21+
2022
function _mouseEvent(type, gd, v) {
2123
return function() {
2224
if(Array.isArray(v)) {
@@ -1688,3 +1690,118 @@ describe('Test treemap texttemplate with *remainder* `values` should work:', fun
16881690
['path: %{currentPath}', ['Eve', 'path: Eve/', 'Seth', 'path: Eve/', 'path: Eve/', 'path: Eve/Seth/', 'Awan', 'path: Eve/Seth/', 'path: Eve/Awan/']]
16891691
], /* skipEtra */ true);
16901692
});
1693+
1694+
describe('treemap uniformtext', function() {
1695+
'use strict';
1696+
1697+
var gd;
1698+
1699+
beforeEach(function() {
1700+
gd = createGraphDiv();
1701+
});
1702+
1703+
afterEach(destroyGraphDiv);
1704+
1705+
function assertTextSizes(msg, opts) {
1706+
return function() {
1707+
var selection = d3.selectAll(SLICES_TEXT_SELECTOR);
1708+
var size = selection.size();
1709+
['fontsizes', 'scales'].forEach(function(e) {
1710+
expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements');
1711+
});
1712+
1713+
selection.each(function(d, i) {
1714+
var fontSize = this.style.fontSize;
1715+
expect(fontSize).toBe(opts.fontsizes[i] + 'px', 'fontSize for element ' + i, msg);
1716+
});
1717+
1718+
for(var i = 0; i < selection[0].length; i++) {
1719+
var transform = selection[0][i].getAttribute('transform');
1720+
var pos0 = transform.indexOf('scale(');
1721+
var scale = 1;
1722+
if(pos0 !== -1) {
1723+
pos0 += 'scale'.length;
1724+
var pos1 = transform.indexOf(')', pos0);
1725+
scale = +(transform.substring(pos0 + 1, pos1 - 1));
1726+
}
1727+
1728+
expect(opts.scales[i]).toBeCloseTo(scale, 1, 'scale for element ' + i, msg);
1729+
}
1730+
};
1731+
}
1732+
1733+
it('should be able to react with new uniform text options', function(done) {
1734+
var fig = {
1735+
data: [{
1736+
type: 'treemap', tiling: { packing: 'slice' },
1737+
parents: ['', '', '', '', '', '', '', '', '', ''],
1738+
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
1739+
values: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
1740+
1741+
text: [
1742+
0,
1743+
'<br>',
1744+
null,
1745+
'',
1746+
' ',
1747+
'.',
1748+
'|',
1749+
'=',
1750+
'$',
1751+
'very long lablel'
1752+
],
1753+
1754+
textinfo: 'text'
1755+
}],
1756+
layout: {
1757+
width: 225,
1758+
height: 450
1759+
}
1760+
};
1761+
1762+
Plotly.plot(gd, fig)
1763+
.then(assertTextSizes('without uniformtext', {
1764+
fontsizes: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
1765+
scales: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0.58],
1766+
}))
1767+
1768+
.then(function() {
1769+
fig.layout.uniformtext = {mode: 'hide'}; // default with minsize=0
1770+
return Plotly.react(gd, fig);
1771+
})
1772+
.then(assertTextSizes('using mode: "hide"', {
1773+
fontsizes: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
1774+
scales: [0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58],
1775+
}))
1776+
1777+
.then(function() {
1778+
fig.layout.uniformtext.minsize = 9; // set a minsize less than trace font size
1779+
return Plotly.react(gd, fig);
1780+
})
1781+
.then(assertTextSizes('using minsize: 9', {
1782+
fontsizes: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
1783+
scales: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
1784+
}))
1785+
1786+
.then(function() {
1787+
fig.layout.uniformtext.minsize = 16; // set a minsize greater than trace font size
1788+
return Plotly.react(gd, fig);
1789+
})
1790+
.then(assertTextSizes('using minsize: 16', {
1791+
fontsizes: [16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16],
1792+
scales: [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
1793+
}))
1794+
1795+
.then(function() {
1796+
fig.layout.uniformtext.mode = 'show';
1797+
return Plotly.react(gd, fig);
1798+
})
1799+
.then(assertTextSizes('using mode: "show"', {
1800+
fontsizes: [16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16],
1801+
scales: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
1802+
}))
1803+
1804+
.catch(failTest)
1805+
.then(done);
1806+
});
1807+
});

0 commit comments

Comments
 (0)