archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add initial implementation of constraint percentage width / height support. Added tests for dom sizing methods.

Browse Source
This commit is contained in:
Evert Timberg 2016-04-01 23:11:01 -04:00
parent be6b254d50
commit b6d7ceba1c
2 changed files with 201 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/core/core.helpers.js
View File

@ -718,6 +718,24 @@ module.exports = function(Chart) {
helpers.removeEvent(chartInstance.chart.canvas, eventName, handler);
});
};
// Private helper function to convert max-width/max-height values that may be percentages into a number
function parseMaxStyle(styleValue, node, horizontal) {
var valueInPixels;
if (typeof(styleValue) === 'string') {
valueInPixels = parseInt(styleValue, 10);
if (styleValue.indexOf('%') != -1) {
// percentage * size in dimension
valueInPixels = valueInPixels / 100 * (horizontal ? node.parentNode.clientWidth : node.parentNode.clientHeight);
}
} else {
valueInPixels = styleValue;
}
return valueInPixels;
}
helpers.getConstraintWidth = function(domNode) { // returns Number or undefined if no constraint
var constrainedWidth;
var constrainedWNode = document.defaultView.getComputedStyle(domNode)['max-width'];
@ -726,7 +744,7 @@ module.exports = function(Chart) {
var hasCWContainer = constrainedWContainer !== null && constrainedWContainer !== "none";
if (hasCWNode || hasCWContainer) {
constrainedWidth = Math.min((hasCWNode ? parseInt(constrainedWNode, 10) : Number.POSITIVE_INFINITY), (hasCWContainer ? parseInt(constrainedWContainer, 10) : Number.POSITIVE_INFINITY));
constrainedWidth = Math.min((hasCWNode ? parseMaxStyle(constrainedWNode, domNode, true) : Number.POSITIVE_INFINITY), (hasCWContainer ? parseMaxStyle(constrainedWContainer, domNode.parentNode, true) : Number.POSITIVE_INFINITY));
}
return constrainedWidth;
};
@ -738,8 +756,8 @@ module.exports = function(Chart) {
var hasCHNode = constrainedHNode !== null && constrainedHNode !== "none";
var hasCHContainer = constrainedHContainer !== null && constrainedHContainer !== "none";
if (constrainedHNode || constrainedHContainer) {
constrainedHeight = Math.min((hasCHNode ? parseInt(constrainedHNode, 10) : Number.POSITIVE_INFINITY), (hasCHContainer ? parseInt(constrainedHContainer, 10) : Number.POSITIVE_INFINITY));
if (hasCHNode || hasCHContainer) {
constrainedHeight = Math.min((hasCHNode ? parseMaxStyle(constrainedHNode, domNode) : Number.POSITIVE_INFINITY), (hasCHContainer ? parseMaxStyle(constrainedHContainer, domNode.parentNode) : Number.POSITIVE_INFINITY));
}
return constrainedHeight;
};

180
test/core.helpers.tests.js
View File

@ -484,4 +484,184 @@ describe('Core helper tests', function() {
args: []
}])
});
it ('should get the maximum width and height for a node', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create the div we want to get the max size for
var innerDiv = document.createElement('div');
div.appendChild(innerDiv);
expect(helpers.getMaximumWidth(innerDiv)).toBe(200);
expect(helpers.getMaximumHeight(innerDiv)).toBe(300);
document.body.removeChild(div);
});
it ('should get the maximum width of a node that has a max-width style', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create the div we want to get the max size for and set a max-width style
var innerDiv = document.createElement('div');
innerDiv.style.maxWidth = "150px";
div.appendChild(innerDiv);
expect(helpers.getMaximumWidth(innerDiv)).toBe(150);
document.body.removeChild(div);
});
it ('should get the maximum height of a node that has a max-height style', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create the div we want to get the max size for and set a max-height style
var innerDiv = document.createElement('div');
innerDiv.style.maxHeight = "150px";
div.appendChild(innerDiv);
expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
document.body.removeChild(div);
});
it ('should get the maximum width of a node when the parent has a max-width style', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create an inner wrapper around our div we want to size and give that a max-width style
var parentDiv = document.createElement('div');
parentDiv.style.maxWidth = "150px";
div.appendChild(parentDiv);
// Create the div we want to get the max size for
var innerDiv = document.createElement('div');
parentDiv.appendChild(innerDiv);
expect(helpers.getMaximumWidth(innerDiv)).toBe(150);
document.body.removeChild(div);
});
it ('should get the maximum height of a node when the parent has a max-height style', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create an inner wrapper around our div we want to size and give that a max-height style
var parentDiv = document.createElement('div');
parentDiv.style.maxHeight = "150px";
div.appendChild(parentDiv);
// Create the div we want to get the max size for
var innerDiv = document.createElement('div');
innerDiv.style.height = "300px"; // make it large
parentDiv.appendChild(innerDiv);
expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
document.body.removeChild(div);
});
it ('should get the maximum width of a node that has a percentage max-width style', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create the div we want to get the max size for and set a max-width style
var innerDiv = document.createElement('div');
innerDiv.style.maxWidth = "50%";
div.appendChild(innerDiv);
expect(helpers.getMaximumWidth(innerDiv)).toBe(100);
document.body.removeChild(div);
});
it ('should get the maximum height of a node that has a percentage max-height style', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create the div we want to get the max size for and set a max-height style
var innerDiv = document.createElement('div');
innerDiv.style.maxHeight = "50%";
div.appendChild(innerDiv);
expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
document.body.removeChild(div);
});
it ('should get the maximum width of a node when the parent has a percentage max-width style', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create an inner wrapper around our div we want to size and give that a max-width style
var parentDiv = document.createElement('div');
parentDiv.style.maxWidth = "50%";
div.appendChild(parentDiv);
// Create the div we want to get the max size for
var innerDiv = document.createElement('div');
parentDiv.appendChild(innerDiv);
expect(helpers.getMaximumWidth(innerDiv)).toBe(100);
document.body.removeChild(div);
});
it ('should get the maximum height of a node when the parent has a percentage max-height style', function() {
// Create div with fixed size as a test bed
var div = document.createElement('div');
div.style.width = "200px";
div.style.height = "300px";
document.body.appendChild(div);
// Create an inner wrapper around our div we want to size and give that a max-height style
var parentDiv = document.createElement('div');
parentDiv.style.maxHeight = "50%";
div.appendChild(parentDiv);
var innerDiv = document.createElement('div');
innerDiv.style.height = "300px"; // make it large
parentDiv.appendChild(innerDiv);
expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
document.body.removeChild(div);
});
});