Skip to content

Commit

Permalink
a little refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@kurkle
kurkle committed Jan 28, 2019
1 parent 5aa6c63 commit abe74a6
Showing 1 changed file with 66 additions and 98 deletions.
164 changes: 66 additions & 98 deletions src/core/core.layouts.js
View file
Expand Up @@ -26,6 +26,33 @@ function sortByWeight(array, reverse) {
});
}

function findMaxPadding(boxes) {
var maxPadding = {top: 0, left: 0, bottom: 0, right: 0};
helpers.each(boxes, function(box) {
if (box.getPadding) {
var boxPadding = box.getPadding();
maxPadding.left = Math.max(maxPadding.left, boxPadding.left);
maxPadding.right = Math.max(maxPadding.right, boxPadding.right);
maxPadding.top = Math.max(maxPadding.top, boxPadding.top);
maxPadding.bottom = Math.max(maxPadding.bottom, boxPadding.bottom);
}
});
return maxPadding;
}

function addHeightByPosition(boxes, size) {
helpers.each(boxes, function(box) {
size[box.position] += box.height;
});
}

function addWidthByPosition(boxes, size) {
helpers.each(boxes, function(box) {
size[box.position] += box.width;
});
}


defaults._set('global', {
layout: {
padding: {
Expand Down Expand Up @@ -142,6 +169,10 @@ module.exports = {
sortByWeight(topBoxes, true);
sortByWeight(bottomBoxes, false);

var verticalBoxes = leftBoxes.concat(rightBoxes);
var horizontalBoxes = topBoxes.concat(bottomBoxes);
var outerBoxes = verticalBoxes.concat(horizontalBoxes);

// Essentially we now have any number of boxes on each of the 4 sides.
// Our canvas looks like the following.
// The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and
Expand Down Expand Up @@ -184,7 +215,7 @@ module.exports = {
var chartAreaWidth = chartWidth / 2; // min 50%

// Step 2
var verticalBoxWidth = (width - chartAreaWidth) / (leftBoxes.length + rightBoxes.length);
var verticalBoxWidth = (width - chartAreaWidth) / verticalBoxes.length;


// Step 4
Expand All @@ -211,37 +242,15 @@ module.exports = {
});
}

helpers.each(leftBoxes.concat(rightBoxes, topBoxes, bottomBoxes), getMinimumBoxSize);
helpers.each(outerBoxes, getMinimumBoxSize);

// If a horizontal box has padding, we move the left boxes over to avoid ugly charts (see issue #2478)
var maxHorizontalLeftPadding = 0;
var maxHorizontalRightPadding = 0;
var maxVerticalTopPadding = 0;
var maxVerticalBottomPadding = 0;

helpers.each(topBoxes.concat(bottomBoxes), function(horizontalBox) {
if (horizontalBox.getPadding) {
var boxPadding = horizontalBox.getPadding();
maxHorizontalLeftPadding = Math.max(maxHorizontalLeftPadding, boxPadding.left);
maxHorizontalRightPadding = Math.max(maxHorizontalRightPadding, boxPadding.right);
}
});

helpers.each(leftBoxes.concat(rightBoxes), function(verticalBox) {
if (verticalBox.getPadding) {
var boxPadding = verticalBox.getPadding();
maxVerticalTopPadding = Math.max(maxVerticalTopPadding, boxPadding.top);
maxVerticalBottomPadding = Math.max(maxVerticalBottomPadding, boxPadding.bottom);
}
});
var maxPadding = findMaxPadding(outerBoxes);

// At this point, maxChartAreaHeight and maxChartAreaWidth are the size the chart area could
// be if the axes are drawn at their minimum sizes.
// Steps 5 & 6
var totalLeftBoxesWidth = leftPadding;
var totalRightBoxesWidth = rightPadding;
var totalTopBoxesHeight = topPadding;
var totalBottomBoxesHeight = bottomPadding;
var outerBoxSizes = {top: topPadding, left: leftPadding, bottom: bottomPadding, right: rightPadding};

// Function to fit a box
function fitBox(box) {
Expand All @@ -250,10 +259,10 @@ module.exports = {
});

if (minBoxSize) {
if (box.isHorizontal()) {
if (minBoxSize.horizontal) {
var scaleMargin = {
left: Math.max(totalLeftBoxesWidth, maxHorizontalLeftPadding),
right: Math.max(totalRightBoxesWidth, maxHorizontalRightPadding),
left: Math.max(outerBoxSizes.left, maxPadding.left),
right: Math.max(outerBoxSizes.right, maxPadding.right),
top: 0,
bottom: 0
};
Expand All @@ -268,27 +277,12 @@ module.exports = {
}

// Update, and calculate the left and right margins for the horizontal boxes
helpers.each(leftBoxes.concat(rightBoxes), fitBox);

helpers.each(leftBoxes, function(box) {
totalLeftBoxesWidth += box.width;
});

helpers.each(rightBoxes, function(box) {
totalRightBoxesWidth += box.width;
});
helpers.each(verticalBoxes, fitBox);
addWidthByPosition(verticalBoxes, outerBoxSizes);

// Set the Left and Right margins for the horizontal boxes
helpers.each(topBoxes.concat(bottomBoxes), fitBox);

// Figure out how much margin is on the top and bottom of the vertical boxes
helpers.each(topBoxes, function(box) {
totalTopBoxesHeight += box.height;
});

helpers.each(bottomBoxes, function(box) {
totalBottomBoxesHeight += box.height;
});
helpers.each(horizontalBoxes, fitBox);
addHeightByPosition(horizontalBoxes, outerBoxSizes);

function finalFitVerticalBox(box) {
var minBoxSize = helpers.findNextWhere(minBoxSizes, function(minSize) {
Expand All @@ -298,8 +292,8 @@ module.exports = {
var scaleMargin = {
left: 0,
right: 0,
top: totalTopBoxesHeight,
bottom: totalBottomBoxesHeight
top: outerBoxSizes.top,
bottom: outerBoxSizes.bottom
};

if (minBoxSize) {
Expand All @@ -308,60 +302,34 @@ module.exports = {
}

// Let the left layout know the final margin
helpers.each(leftBoxes.concat(rightBoxes), finalFitVerticalBox);
helpers.each(verticalBoxes, finalFitVerticalBox);

// Recalculate because the size of each layout might have changed slightly due to the margins (label rotation for instance)
totalLeftBoxesWidth = leftPadding;
totalRightBoxesWidth = rightPadding;
totalTopBoxesHeight = topPadding;
totalBottomBoxesHeight = bottomPadding;

helpers.each(leftBoxes, function(box) {
totalLeftBoxesWidth += box.width;
});

helpers.each(rightBoxes, function(box) {
totalRightBoxesWidth += box.width;
});

helpers.each(topBoxes, function(box) {
totalTopBoxesHeight += box.height;
});
helpers.each(bottomBoxes, function(box) {
totalBottomBoxesHeight += box.height;
});
outerBoxSizes = {top: topPadding, left: leftPadding, bottom: bottomPadding, right: rightPadding};
addWidthByPosition(verticalBoxes, outerBoxSizes);
addHeightByPosition(horizontalBoxes, outerBoxSizes);

// We may be adding some padding to account for rotated x axis labels
var leftPaddingAddition = Math.max(maxHorizontalLeftPadding - totalLeftBoxesWidth, 0);
totalLeftBoxesWidth += leftPaddingAddition;
totalRightBoxesWidth += Math.max(maxHorizontalRightPadding - totalRightBoxesWidth, 0);
var leftPaddingAddition = Math.max(maxPadding.left - outerBoxSizes.left, 0);
outerBoxSizes.left += leftPaddingAddition;
outerBoxSizes.right += Math.max(maxPadding.right - outerBoxSizes.right, 0);

var topPaddingAddition = Math.max(maxVerticalTopPadding - totalTopBoxesHeight, 0);
totalTopBoxesHeight += topPaddingAddition;
totalBottomBoxesHeight += Math.max(maxVerticalBottomPadding - totalBottomBoxesHeight, 0);
var topPaddingAddition = Math.max(maxPadding.top - outerBoxSizes.top, 0);
outerBoxSizes.top += topPaddingAddition;
outerBoxSizes.bottom += Math.max(maxPadding.bottom - outerBoxSizes.bottom, 0);

// Figure out if our chart area changed. This would occur if the dataset layout label rotation
// changed due to the application of the margins in step 6. Since we can only get bigger, this is safe to do
// without calling `fit` again
var newMaxChartAreaHeight = height - totalTopBoxesHeight - totalBottomBoxesHeight;
var newMaxChartAreaWidth = width - totalLeftBoxesWidth - totalRightBoxesWidth;
var newMaxChartAreaHeight = height - outerBoxSizes.top - outerBoxSizes.bottom;
var newMaxChartAreaWidth = width - outerBoxSizes.left - outerBoxSizes.right;

if (newMaxChartAreaWidth !== maxChartAreaWidth || newMaxChartAreaHeight !== maxChartAreaHeight) {
helpers.each(leftBoxes, function(box) {
box.height = newMaxChartAreaHeight;
});

helpers.each(rightBoxes, function(box) {
helpers.each(verticalBoxes, function(box) {
box.height = newMaxChartAreaHeight;
});

helpers.each(topBoxes, function(box) {
if (!box.fullWidth) {
box.width = newMaxChartAreaWidth;
}
});

helpers.each(bottomBoxes, function(box) {
helpers.each(horizontalBoxes, function(box) {
if (!box.fullWidth) {
box.width = newMaxChartAreaWidth;
}
Expand All @@ -377,8 +345,8 @@ module.exports = {

function placeBox(box) {
if (box.isHorizontal()) {
box.left = box.fullWidth ? leftPadding : totalLeftBoxesWidth;
box.right = box.fullWidth ? width - rightPadding : totalLeftBoxesWidth + maxChartAreaWidth;
box.left = box.fullWidth ? leftPadding : outerBoxSizes.left;
box.right = box.fullWidth ? width - rightPadding : outerBoxSizes.left + maxChartAreaWidth;
box.top = top;
box.bottom = top + box.height;

Expand All @@ -389,8 +357,8 @@ module.exports = {

box.left = left;
box.right = left + box.width;
box.top = totalTopBoxesHeight;
box.bottom = totalTopBoxesHeight + maxChartAreaHeight;
box.top = outerBoxSizes.top;
box.bottom = outerBoxSizes.top + maxChartAreaHeight;

// Move to next point
left = box.right;
Expand All @@ -408,10 +376,10 @@ module.exports = {

// Step 8
chart.chartArea = {
left: totalLeftBoxesWidth,
top: totalTopBoxesHeight,
right: totalLeftBoxesWidth + maxChartAreaWidth,
bottom: totalTopBoxesHeight + maxChartAreaHeight
left: outerBoxSizes.left,
top: outerBoxSizes.top,
right: outerBoxSizes.left + maxChartAreaWidth,
bottom: outerBoxSizes.top + maxChartAreaHeight
};

// Step 9
Expand Down

0 comments on commit abe74a6

Please sign in to comment.