Update to fix responsive chart size in IE11 when parent container has…

[andi-b]

… 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.

Issue may be seen in IE11 here:
https://jsfiddle.net/digits/e8g4ux20/

[andi-b]

Codeclimate seems to lie :) Click on 'Details' and all appears fine

[benmccann]

Does this issue happen only on IE11?

[andi-b]

Strangely it does seem to only happen in IE11. Was fine in Firefox as uses computed value and think it was fine in Chrome and Edge.

[benmccann]

Perhaps you could add a helper function to cut down on code duplication:

function calculatePadding(padding, parentDimension) {
	if (padding.indexOf('%') > -1) {
		return parentDimension / parseInt(padding, 10);
	} else {
		return parseInt(padding, 10);
	}
}

[etimberg]

I think this needs some tests written as well

[benmccann]

@andi-b will you be able to respond to the comments on this PR?

[andi-b]

I have made the update locally - just need to test myself before submitting change.

Do I need to write tests and how do I go about doing this?

Thanks

[benmccann]

Yes, please add tests as well. You can add them to the file test/specs/core.helpers.tests.js. You can create a dom node and call the function on it and check if the results are as expected

[benmccann]

@andi-b do you plan on updating this PR?

[andi-b]

@benmccann Sorry, just need to find some time to figure out how to add a test case as this is new to me. I'll hopefully find some time this week.

[simonbrunel]

We don't want this method to be part of the public API.

Can you prefix the method with _ and add a private comment:

/**
 * @private
 */
helpers._calculatePadding = function(...

[simonbrunel]

We should cache clientWidth since it's used multiple times:

var clientWidth = container.clientWidth;
var paddingLeft = helpers.calculatePadding(container, 'padding-left', clientWidth );
var paddingRight = helpers.calculatePadding(container, 'padding-right', clientWidth );
var w = clientWidth  - paddingLeft - paddingRight;
// ...

[simonbrunel]

Same here (var clientHeight = container.clientHeight;)

[simonbrunel]

Ideally, we would need a unit test that doesn't check internals but creates a chart inside a container with percent padding and verify the chart dimensions (something similar to this test)

[andi-b]

I've removed call to now private function calculatePadding.
I attempted to write test with chart but require a parent DIV to the wrapper so I can set the width as the padding percentage is taken from this and not from the wrapper.

[andi-b]

it('**********Should calculate padding of parent container in pixels if as percent (IE11)', function(done) {
	var chart = acquireChart({
		type: 'pie',
		options: {
			responsive: true,
			maintainAspectRatio: true
		}
	}, {
		canvas: {
			style: 'width: 300px; height: 300px; position: relative'
		},
		wrapper: {
			style: 'padding: 10%; width: 300px; height: 300px;'
		}
	});

	expect(chart).toBeChartOfSize({
		dw: 240, dh: 240,
		rw: 240, rh: 240,
	});
});

[andi-b]

codeclimate complaining about an existing function - should this be ignored?

[etimberg]

The code climate stuff about an existing function can be ignored.

[chtheis]

I think the calculation of padding in % is wrong, it just divides the size by the padding in percent.
Instead line 502 in src/core/core.helpers.js should read:

return padding.indexOf('%') > -1 ? parentDimension * parseInt(padding, 10) / 100 : parseInt(padding, 10);

I have a padding of 2% of the surrounding div, IE (Edge) returns just that value and the old code would return half the width as padding, thus the canvas would have 0 width.

[chtheis]

And in the test you use 10% as padding. In this case, and only this case, the old code would return a correct result. Maybe use something like 5% as the test case.

[simonbrunel]

@chtheis you are right, I'm surprised that nobody noticed that error in this PR.