From ca9b1ae212556cd8269baea168254adcbad29cc2 Mon Sep 17 00:00:00 2001 From: andi-b Date: Mon, 7 Aug 2017 13:44:01 +0100 Subject: [PATCH 01/12] Update to fix responsive chart size in IE11 when parent container has padding as percentage When the chart is responsive to the parent container, the calculations for padding assumes that the figure is in pixels so that 20% is taken to be 20 (pixels), which results in the chart exceeding the parent container. This appears to be an IE11 only issue. --- src/core/core.helpers.js | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 0b9cea52eb3..cd7799f6f04 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -504,8 +504,19 @@ module.exports = function(Chart) { return domNode.clientWidth; } - var paddingLeft = parseInt(helpers.getStyle(container, 'padding-left'), 10); - var paddingRight = parseInt(helpers.getStyle(container, 'padding-right'), 10); + var paddingLeft = helpers.getStyle(container, 'padding-left'); + var paddingRight = helpers.getStyle(container, 'padding-right'); + + if (paddingLeft.indexOf('%') > -1) + paddingLeft = container.clientWidth / parseInt(paddingLeft, 10); + else + paddingLeft = parseInt(paddingLeft, 10); + + if (paddingRight.indexOf('%') > -1) + paddingRight = container.clientWidth / parseInt(paddingRight, 10); + else + paddingRight = parseInt(paddingRight, 10); + var w = container.clientWidth - paddingLeft - paddingRight; var cw = helpers.getConstraintWidth(domNode); return isNaN(cw) ? w : Math.min(w, cw); @@ -516,8 +527,19 @@ module.exports = function(Chart) { return domNode.clientHeight; } - var paddingTop = parseInt(helpers.getStyle(container, 'padding-top'), 10); - var paddingBottom = parseInt(helpers.getStyle(container, 'padding-bottom'), 10); + var paddingTop = helpers.getStyle(container, 'padding-top'); + var paddingBottom = helpers.getStyle(container, 'padding-bottom'); + + if (paddingTop.indexOf('%') > -1) + paddingTop = container.clientHeight / parseInt(paddingTop, 10); + else + paddingTop = parseInt(paddingTop, 10); + + if (paddingBottom.indexOf('%') > -1) + paddingBottom = container.clientHeight / parseInt(paddingBottom, 10); + else + paddingBottom = parseInt(paddingBottom, 10); + var h = container.clientHeight - paddingTop - paddingBottom; var ch = helpers.getConstraintHeight(domNode); return isNaN(ch) ? h : Math.min(h, ch); From 3d4fe3aa882a9feceee5c47b63b342b27f5f34c2 Mon Sep 17 00:00:00 2001 From: andi-b Date: Tue, 8 Aug 2017 09:25:54 +0100 Subject: [PATCH 02/12] Updated code formating --- src/core/core.helpers.js | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index cd7799f6f04..0371563ba26 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -506,17 +506,19 @@ module.exports = function(Chart) { var paddingLeft = helpers.getStyle(container, 'padding-left'); var paddingRight = helpers.getStyle(container, 'padding-right'); - - if (paddingLeft.indexOf('%') > -1) + + if (paddingLeft.indexOf('%') > -1) { paddingLeft = container.clientWidth / parseInt(paddingLeft, 10); - else + } else { paddingLeft = parseInt(paddingLeft, 10); + } - if (paddingRight.indexOf('%') > -1) + if (paddingRight.indexOf('%') > -1){ paddingRight = container.clientWidth / parseInt(paddingRight, 10); - else + } else { paddingRight = parseInt(paddingRight, 10); - + } + var w = container.clientWidth - paddingLeft - paddingRight; var cw = helpers.getConstraintWidth(domNode); return isNaN(cw) ? w : Math.min(w, cw); @@ -530,16 +532,18 @@ module.exports = function(Chart) { var paddingTop = helpers.getStyle(container, 'padding-top'); var paddingBottom = helpers.getStyle(container, 'padding-bottom'); - if (paddingTop.indexOf('%') > -1) + if (paddingTop.indexOf('%') > -1) { paddingTop = container.clientHeight / parseInt(paddingTop, 10); - else + } else { paddingTop = parseInt(paddingTop, 10); + } - if (paddingBottom.indexOf('%') > -1) + if (paddingBottom.indexOf('%') > -1) { paddingBottom = container.clientHeight / parseInt(paddingBottom, 10); - else - paddingBottom = parseInt(paddingBottom, 10); - + } else { + paddingBottom = parseInt(paddingBottom, 10); + } + var h = container.clientHeight - paddingTop - paddingBottom; var ch = helpers.getConstraintHeight(domNode); return isNaN(ch) ? h : Math.min(h, ch); From 5528a6195444220a9ab3e161c09aab6a894b8b58 Mon Sep 17 00:00:00 2001 From: andi-b Date: Tue, 8 Aug 2017 09:28:42 +0100 Subject: [PATCH 03/12] Updated code formatting --- src/core/core.helpers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 0371563ba26..c188a12e41f 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -513,7 +513,7 @@ module.exports = function(Chart) { paddingLeft = parseInt(paddingLeft, 10); } - if (paddingRight.indexOf('%') > -1){ + if (paddingRight.indexOf('%') > -1) { paddingRight = container.clientWidth / parseInt(paddingRight, 10); } else { paddingRight = parseInt(paddingRight, 10); @@ -531,7 +531,7 @@ module.exports = function(Chart) { var paddingTop = helpers.getStyle(container, 'padding-top'); var paddingBottom = helpers.getStyle(container, 'padding-bottom'); - + if (paddingTop.indexOf('%') > -1) { paddingTop = container.clientHeight / parseInt(paddingTop, 10); } else { From 26a56d7337704955aaa539796baa1f8281224569 Mon Sep 17 00:00:00 2001 From: andi-b Date: Tue, 8 Aug 2017 09:39:47 +0100 Subject: [PATCH 04/12] Updated spaces to tabs --- src/core/core.helpers.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index c188a12e41f..8806b043ce5 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -508,15 +508,15 @@ module.exports = function(Chart) { var paddingRight = helpers.getStyle(container, 'padding-right'); if (paddingLeft.indexOf('%') > -1) { - paddingLeft = container.clientWidth / parseInt(paddingLeft, 10); + paddingLeft = container.clientWidth / parseInt(paddingLeft, 10); } else { - paddingLeft = parseInt(paddingLeft, 10); + paddingLeft = parseInt(paddingLeft, 10); } if (paddingRight.indexOf('%') > -1) { - paddingRight = container.clientWidth / parseInt(paddingRight, 10); + paddingRight = container.clientWidth / parseInt(paddingRight, 10); } else { - paddingRight = parseInt(paddingRight, 10); + paddingRight = parseInt(paddingRight, 10); } var w = container.clientWidth - paddingLeft - paddingRight; @@ -533,13 +533,13 @@ module.exports = function(Chart) { var paddingBottom = helpers.getStyle(container, 'padding-bottom'); if (paddingTop.indexOf('%') > -1) { - paddingTop = container.clientHeight / parseInt(paddingTop, 10); + paddingTop = container.clientHeight / parseInt(paddingTop, 10); } else { - paddingTop = parseInt(paddingTop, 10); + paddingTop = parseInt(paddingTop, 10); } if (paddingBottom.indexOf('%') > -1) { - paddingBottom = container.clientHeight / parseInt(paddingBottom, 10); + paddingBottom = container.clientHeight / parseInt(paddingBottom, 10); } else { paddingBottom = parseInt(paddingBottom, 10); } From f31af0e3323bb62477c4afa9ac16e84585d14a4c Mon Sep 17 00:00:00 2001 From: andi-b Date: Tue, 16 Jan 2018 12:02:32 +0000 Subject: [PATCH 05/12] Added calculatePadding function Added calculatePadding function to reduce code duplication --- src/core/core.helpers.js | 42 ++++++++++++++-------------------------- 1 file changed, 14 insertions(+), 28 deletions(-) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 8806b043ce5..aec2f8204cd 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -498,26 +498,24 @@ module.exports = function(Chart) { helpers.getConstraintHeight = function(domNode) { return getConstraintDimension(domNode, 'max-height', 'clientHeight'); }; + helper.calculatePadding = function(padding, parentDimension) { + + padding = helpers.getStyle(container, padding); + + if (padding.indexOf('%') > -1) { + return parentDimension / parseInt(padding, 10); + } else { + return parseInt(padding, 10); + } + }; helpers.getMaximumWidth = function(domNode) { var container = domNode.parentNode; if (!container) { return domNode.clientWidth; } - var paddingLeft = helpers.getStyle(container, 'padding-left'); - var paddingRight = helpers.getStyle(container, 'padding-right'); - - if (paddingLeft.indexOf('%') > -1) { - paddingLeft = container.clientWidth / parseInt(paddingLeft, 10); - } else { - paddingLeft = parseInt(paddingLeft, 10); - } - - if (paddingRight.indexOf('%') > -1) { - paddingRight = container.clientWidth / parseInt(paddingRight, 10); - } else { - paddingRight = parseInt(paddingRight, 10); - } + var paddingLeft = helpers.calculatePadding('padding-left', container.clientWidth); + var paddingRight = helpers.calculatePadding('padding-right', container.clientWidth); var w = container.clientWidth - paddingLeft - paddingRight; var cw = helpers.getConstraintWidth(domNode); @@ -529,20 +527,8 @@ module.exports = function(Chart) { return domNode.clientHeight; } - var paddingTop = helpers.getStyle(container, 'padding-top'); - var paddingBottom = helpers.getStyle(container, 'padding-bottom'); - - if (paddingTop.indexOf('%') > -1) { - paddingTop = container.clientHeight / parseInt(paddingTop, 10); - } else { - paddingTop = parseInt(paddingTop, 10); - } - - if (paddingBottom.indexOf('%') > -1) { - paddingBottom = container.clientHeight / parseInt(paddingBottom, 10); - } else { - paddingBottom = parseInt(paddingBottom, 10); - } + var paddingTop = helpers.calculatePadding('padding-top', container.clientHeight); + var paddingBottom = helpers.calculatePadding('padding-bottom', container.clientHeight); var h = container.clientHeight - paddingTop - paddingBottom; var ch = helpers.getConstraintHeight(domNode); From 52cdccef99d808b3859ff7075a19971e02b3c84f Mon Sep 17 00:00:00 2001 From: andi-b Date: Tue, 16 Jan 2018 12:09:25 +0000 Subject: [PATCH 06/12] Reduced code further Reduced code further by adding to calculatePadding function --- src/core/core.helpers.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index aec2f8204cd..7ed7a344fb8 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -498,8 +498,7 @@ module.exports = function(Chart) { helpers.getConstraintHeight = function(domNode) { return getConstraintDimension(domNode, 'max-height', 'clientHeight'); }; - helper.calculatePadding = function(padding, parentDimension) { - + helpers.calculatePadding = function (container, padding, parentDimension) { padding = helpers.getStyle(container, padding); if (padding.indexOf('%') > -1) { @@ -514,8 +513,8 @@ module.exports = function(Chart) { return domNode.clientWidth; } - var paddingLeft = helpers.calculatePadding('padding-left', container.clientWidth); - var paddingRight = helpers.calculatePadding('padding-right', container.clientWidth); + var paddingLeft = helpers.calculatePadding(container, 'padding-left', container.clientWidth); + var paddingRight = helpers.calculatePadding(container, 'padding-right', container.clientWidth); var w = container.clientWidth - paddingLeft - paddingRight; var cw = helpers.getConstraintWidth(domNode); @@ -527,8 +526,8 @@ module.exports = function(Chart) { return domNode.clientHeight; } - var paddingTop = helpers.calculatePadding('padding-top', container.clientHeight); - var paddingBottom = helpers.calculatePadding('padding-bottom', container.clientHeight); + var paddingTop = helpers.calculatePadding(container, 'padding-top', container.clientHeight); + var paddingBottom = helpers.calculatePadding(container, 'padding-bottom', container.clientHeight); var h = container.clientHeight - paddingTop - paddingBottom; var ch = helpers.getConstraintHeight(domNode); From 083175b8d88ec1262f39a2e66693fdb3679d666e Mon Sep 17 00:00:00 2001 From: andi-b Date: Tue, 16 Jan 2018 12:14:53 +0000 Subject: [PATCH 07/12] Updated to inline if statement Fixed due to code climate: Updated to inline if statement for single return Removed space; --- src/core/core.helpers.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 7ed7a344fb8..672198985d7 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -498,14 +498,10 @@ module.exports = function(Chart) { helpers.getConstraintHeight = function(domNode) { return getConstraintDimension(domNode, 'max-height', 'clientHeight'); }; - helpers.calculatePadding = function (container, padding, parentDimension) { + helpers.calculatePadding = function(container, padding, parentDimension) { padding = helpers.getStyle(container, padding); - if (padding.indexOf('%') > -1) { - return parentDimension / parseInt(padding, 10); - } else { - return parseInt(padding, 10); - } + return padding.indexOf('%') > -1 ? parentDimension / parseInt(padding, 10) : parseInt(padding, 10); }; helpers.getMaximumWidth = function(domNode) { var container = domNode.parentNode; From 4bfe92d6a9b152a09874bf21614c7bdc507856eb Mon Sep 17 00:00:00 2001 From: andi-b Date: Wed, 7 Feb 2018 17:26:20 +0000 Subject: [PATCH 08/12] Testing script added for calculatePadding function Testing script added for calculatePadding function --- test/specs/core.helpers.tests.js | 33 ++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/test/specs/core.helpers.tests.js b/test/specs/core.helpers.tests.js index e6f6264395a..62c40857a1b 100644 --- a/test/specs/core.helpers.tests.js +++ b/test/specs/core.helpers.tests.js @@ -751,6 +751,39 @@ describe('Core helper tests', function() { document.body.removeChild(div); }); + it ('Should get padding of parent as number (pixels) when defined as percent (returns incorrectly in IE11)', function() { + + // Create div with fixed size as a test bed + var div = document.createElement('div'); + div.style.width = '300px'; + div.style.height = '300px'; + document.body.appendChild(div); + + // Inner DIV to have 10% padding of parent + var innerDiv = document.createElement('div'); + + div.appendChild(innerDiv); + + var canvas = document.createElement('canvas'); + innerDiv.appendChild(canvas); + + var container = canvas.parentNode; + + //No padding + expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(0); + expect(helpers.getMaximumWidth(canvas)).toBe(300); + + innerDiv.style.padding = '10%';//test with percentage + expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(30); + expect(helpers.getMaximumWidth(canvas)).toBe(240); + + innerDiv.style.padding = '10px';//test with pixels + expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(10); + expect(helpers.getMaximumWidth(canvas)).toBe(280); + + document.body.removeChild(div); + }); + describe('Color helper', function() { function isColorInstance(obj) { return typeof obj === 'object' && obj.hasOwnProperty('values') && obj.values.hasOwnProperty('rgb'); From cd00af3be8f286d0c14aae92bac6e88ae5e7e2fa Mon Sep 17 00:00:00 2001 From: andi-b Date: Wed, 7 Feb 2018 18:03:54 +0000 Subject: [PATCH 09/12] Update code formatting Update code formatting as per Travis CI --- test/specs/core.helpers.tests.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/test/specs/core.helpers.tests.js b/test/specs/core.helpers.tests.js index 5b9cdce78d6..62219f629dc 100644 --- a/test/specs/core.helpers.tests.js +++ b/test/specs/core.helpers.tests.js @@ -724,8 +724,8 @@ describe('Core helper tests', function() { document.body.removeChild(div); }); - - it ('should leave styled height and width on canvas if explicitly set', function() { + + it ('should leave styled height and width on canvas if explicitly set', function() { var chart = window.acquireChart({}, { canvas: { height: 200, @@ -740,7 +740,7 @@ describe('Core helper tests', function() { expect(canvas.style.height).toBe('400px'); expect(canvas.style.width).toBe('400px'); - }); + }); it ('Should get padding of parent as number (pixels) when defined as percent (returns incorrectly in IE11)', function() { @@ -752,7 +752,7 @@ describe('Core helper tests', function() { // Inner DIV to have 10% padding of parent var innerDiv = document.createElement('div'); - + div.appendChild(innerDiv); var canvas = document.createElement('canvas'); @@ -760,15 +760,17 @@ describe('Core helper tests', function() { var container = canvas.parentNode; - //No padding + // No padding expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(0); expect(helpers.getMaximumWidth(canvas)).toBe(300); - innerDiv.style.padding = '10%';//test with percentage + // test with percentage + innerDiv.style.padding = '10%'; expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(30); expect(helpers.getMaximumWidth(canvas)).toBe(240); - innerDiv.style.padding = '10px';//test with pixels + // test with pixels + innerDiv.style.padding = '10px'; expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(10); expect(helpers.getMaximumWidth(canvas)).toBe(280); From fedda5b6c65ebd0a87670e90f15d130a31887965 Mon Sep 17 00:00:00 2001 From: andi-b Date: Fri, 9 Feb 2018 10:19:07 +0000 Subject: [PATCH 10/12] Added variables and made function private Added variable for clientWidth and clientHeight; Made function calculatePadding private --- src/core/core.helpers.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 8e0de61b7e1..38bbb1da14e 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -466,7 +466,10 @@ module.exports = function(Chart) { helpers.getConstraintHeight = function(domNode) { return getConstraintDimension(domNode, 'max-height', 'clientHeight'); }; - helpers.calculatePadding = function(container, padding, parentDimension) { + /** + * @private + */ + helpers._calculatePadding = function(container, padding, parentDimension) { padding = helpers.getStyle(container, padding); return padding.indexOf('%') > -1 ? parentDimension / parseInt(padding, 10) : parseInt(padding, 10); @@ -477,10 +480,11 @@ module.exports = function(Chart) { return domNode.clientWidth; } - var paddingLeft = helpers.calculatePadding(container, 'padding-left', container.clientWidth); - var paddingRight = helpers.calculatePadding(container, 'padding-right', container.clientWidth); + var clientWidth = container.clientWidth; + var paddingLeft = helpers._calculatePadding(container, 'padding-left', clientWidth); + var paddingRight = helpers._calculatePadding(container, 'padding-right', clientWidth); - var w = container.clientWidth - paddingLeft - paddingRight; + var w = clientWidth - paddingLeft - paddingRight; var cw = helpers.getConstraintWidth(domNode); return isNaN(cw) ? w : Math.min(w, cw); }; @@ -490,10 +494,11 @@ module.exports = function(Chart) { return domNode.clientHeight; } - var paddingTop = helpers.calculatePadding(container, 'padding-top', container.clientHeight); - var paddingBottom = helpers.calculatePadding(container, 'padding-bottom', container.clientHeight); + var clientHeight = container.clientHeight; + var paddingTop = helpers._calculatePadding(container, 'padding-top', clientHeight); + var paddingBottom = helpers._calculatePadding(container, 'padding-bottom', clientHeight); - var h = container.clientHeight - paddingTop - paddingBottom; + var h = clientHeight - paddingTop - paddingBottom; var ch = helpers.getConstraintHeight(domNode); return isNaN(ch) ? h : Math.min(h, ch); }; From ec79652ff90ec4543f1d019c81a9c9a71cf7bddb Mon Sep 17 00:00:00 2001 From: andi-b Date: Fri, 9 Feb 2018 10:50:50 +0000 Subject: [PATCH 11/12] Removed calls to private function Removed calls to private function calculatePadding --- test/specs/core.helpers.tests.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/test/specs/core.helpers.tests.js b/test/specs/core.helpers.tests.js index 62219f629dc..6d83c10924a 100644 --- a/test/specs/core.helpers.tests.js +++ b/test/specs/core.helpers.tests.js @@ -761,17 +761,14 @@ describe('Core helper tests', function() { var container = canvas.parentNode; // No padding - expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(0); expect(helpers.getMaximumWidth(canvas)).toBe(300); // test with percentage innerDiv.style.padding = '10%'; - expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(30); expect(helpers.getMaximumWidth(canvas)).toBe(240); // test with pixels innerDiv.style.padding = '10px'; - expect(helpers.calculatePadding(container, 'padding-right', container.clientWidth)).toBe(10); expect(helpers.getMaximumWidth(canvas)).toBe(280); document.body.removeChild(div); From 76d0c0cbfe975ae2cf12f9f135830957fa9602ca Mon Sep 17 00:00:00 2001 From: andi-b Date: Fri, 9 Feb 2018 11:01:37 +0000 Subject: [PATCH 12/12] Removed unused variable Removed unused variable container --- test/specs/core.helpers.tests.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/specs/core.helpers.tests.js b/test/specs/core.helpers.tests.js index 6d83c10924a..0883618de56 100644 --- a/test/specs/core.helpers.tests.js +++ b/test/specs/core.helpers.tests.js @@ -758,8 +758,6 @@ describe('Core helper tests', function() { var canvas = document.createElement('canvas'); innerDiv.appendChild(canvas); - var container = canvas.parentNode; - // No padding expect(helpers.getMaximumWidth(canvas)).toBe(300);