--- /dev/null
- minSize = box.update(box.options.fullWidth ? chartWidth : chartAreaWidth, horizontalBoxHeight);
+(function() {
+ "use strict";
+
+ var root = this,
+ Chart = root.Chart,
+ helpers = Chart.helpers;
+
+ // The layout service is ver self explanatory. It's responsible for the layout within a chart.
+ // Scales, Legends and Plugins all rely on the layout service and can easily register to be placed anywhere they need
+ // It is this service's responsibility of carrying out that layout.
+ Chart.layoutService = {
+ defaults: {},
+
+ // Register a box to a chartInstance. A box is simply a reference to an object that requires layout. eg. Scales, Legend, Plugins.
+ addBox: function(chartInstance, box) {
+ if (!chartInstance.boxes) {
+ chartInstance.boxes = [];
+ }
+ chartInstance.boxes.push(box);
+ },
+
+ removeBox: function(chartInstance, box) {
+ if (!chartInstance.boxes) {
+ return;
+ }
+ chartInstance.boxes.splice(chartInstance.boxes.indexOf(box), 1);
+ },
+
+ // The most important function
+ update: function(chartInstance, width, height) {
+
+ if (!chartInstance) {
+ return;
+ }
+
+ var xPadding = width > 30 ? 5 : 2;
+ var yPadding = height > 30 ? 5 : 2;
+
+ var leftBoxes = helpers.where(chartInstance.boxes, function(box) {
+ return box.options.position == "left";
+ });
+ var rightBoxes = helpers.where(chartInstance.boxes, function(box) {
+ return box.options.position == "right";
+ });
+ var topBoxes = helpers.where(chartInstance.boxes, function(box) {
+ return box.options.position == "top";
+ });
+ var bottomBoxes = helpers.where(chartInstance.boxes, function(box) {
+ return box.options.position == "bottom";
+ });
+
+ // Boxes that overlay the chartarea such as the radialLinear scale
+ var chartAreaBoxes = helpers.where(chartInstance.boxes, function(box) {
+ return box.options.position == "chartArea";
+ });
+
+ function fullWidthSorter(a, b) {
+
+ }
+
+ // Ensure that full width boxes are at the very top / bottom
+ topBoxes.sort(function(a, b) {
+ return (b.options.fullWidth ? 1 : 0) - (a.options.fullWidth ? 1 : 0);
+ });
+ bottomBoxes.sort(function(a, b) {
+ return (a.options.fullWidth ? 1 : 0) - (b.options.fullWidth ? 1 : 0);
+ });
+
+ // 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
+ // B1 is the bottom axis
+ // There are also 4 quadrant-like locations (left to right instead of clockwise) reserved for chart overlays
+ // These locations are single-box locations only, when trying to register a chartArea location that is already taken,
+ // an error will be thrown.
+ //
+ // |----------------------------------------------------|
+ // | T1 (Full Width) |
+ // |----------------------------------------------------|
+ // | | | T2 | |
+ // | |----|-------------------------------------|----|
+ // | | | C1 | | C2 | |
+ // | | |----| |----| |
+ // | | | | |
+ // | L1 | L2 | ChartArea (C0) | R1 |
+ // | | | | |
+ // | | |----| |----| |
+ // | | | C3 | | C4 | |
+ // | |----|-------------------------------------|----|
+ // | | | B1 | |
+ // |----------------------------------------------------|
+ // | B2 (Full Width) |
+ // |----------------------------------------------------|
+ //
+ // What we do to find the best sizing, we do the following
+ // 1. Determine the minimum size of the chart area.
+ // 2. Split the remaining width equally between each vertical axis
+ // 3. Split the remaining height equally between each horizontal axis
+ // 4. Give each layout the maximum size it can be. The layout will return it's minimum size
+ // 5. Adjust the sizes of each axis based on it's minimum reported size.
+ // 6. Refit each axis
+ // 7. Position each axis in the final location
+ // 8. Tell the chart the final location of the chart area
+ // 9. Tell any axes that overlay the chart area the positions of the chart area
+
+ // Step 1
+ var chartWidth = width - (2 * xPadding);
+ var chartHeight = height - (2 * yPadding);
+ var chartAreaWidth = chartWidth / 2; // min 50%
+ var chartAreaHeight = chartHeight / 2; // min 50%
+
+ // Step 2
+ var verticalBoxWidth = (width - chartAreaWidth) / (leftBoxes.length + rightBoxes.length);
+
+ // Step 3
+ var horizontalBoxHeight = (height - chartAreaHeight) / (topBoxes.length + bottomBoxes.length);
+
+ // Step 4
++ var maxChartAreaWidth = chartWidth;
++ var maxChartAreaHeight = chartHeight;
+ var minBoxSizes = [];
+
+ helpers.each(leftBoxes.concat(rightBoxes, topBoxes, bottomBoxes), getMinimumBoxSize);
+
+ function getMinimumBoxSize(box) {
+ var minSize;
+ var isHorizontal = box.isHorizontal();
+
+ if (isHorizontal) {
- // Step 5
- var maxChartAreaWidth = chartWidth;
- var maxChartAreaHeight = chartHeight;
-
- helpers.each(minBoxSizes, function(minimumBoxSize) {
- if (minimumBoxSize.horizontal) {
- maxChartAreaHeight -= minimumBoxSize.minSize.height;
- } else {
- maxChartAreaWidth -= minimumBoxSize.minSize.width;
- }
- });
-
++ minSize = box.update(box.options.fullWidth ? chartWidth : maxChartAreaWidth, horizontalBoxHeight);
++ maxChartAreaHeight -= minSize.height;
+ } else {
+ minSize = box.update(verticalBoxWidth, chartAreaHeight);
++ maxChartAreaWidth -= minSize.width;
+ }
+
+ minBoxSizes.push({
+ horizontal: isHorizontal,
+ minSize: minSize,
+ box: box,
+ });
+ }
+
- // Step 6
+ // 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 = xPadding;
+ var totalRightBoxesWidth = xPadding;
+ var totalTopBoxesHeight = yPadding;
+ var totalBottomBoxesHeight = yPadding;
+
+ // 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;
+ });
+
+ // Set the Left and Right margins for the horizontal boxes
+ helpers.each(topBoxes.concat(bottomBoxes), fitBox);
+
+ // Function to fit a box
+ function fitBox(box) {
+ var minBoxSize = helpers.findNextWhere(minBoxSizes, function(minBoxSize) {
+ return minBoxSize.box === box;
+ });
+
+ if (minBoxSize) {
+ if (box.isHorizontal()) {
+ var scaleMargin = {
+ left: totalLeftBoxesWidth,
+ right: totalRightBoxesWidth,
+ top: 0,
+ bottom: 0,
+ };
+
+ box.update(box.options.fullWidth ? chartWidth : maxChartAreaWidth, minBoxSize.minSize.height, scaleMargin);
+ } else {
+ box.update(minBoxSize.minSize.width, maxChartAreaHeight);
+ }
+ }
+ }
+
+ // 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;
+ });
+
+ // Let the left layout know the final margin
+ helpers.each(leftBoxes.concat(rightBoxes), finalFitVerticalBox);
+
+ function finalFitVerticalBox(box) {
+ var minBoxSize = helpers.findNextWhere(minBoxSizes, function(minBoxSize) {
+ return minBoxSize.box === box;
+ });
+
+ var scaleMargin = {
+ left: 0,
+ right: 0,
+ top: totalTopBoxesHeight,
+ bottom: totalBottomBoxesHeight
+ };
+
+ if (minBoxSize) {
+ box.update(minBoxSize.minSize.width, maxChartAreaHeight, scaleMargin);
+ }
+ }
+
+ // Recalculate because the size of each layout might have changed slightly due to the margins (label rotation for instance)
+ totalLeftBoxesWidth = xPadding;
+ totalRightBoxesWidth = xPadding;
+ totalTopBoxesHeight = yPadding;
+ totalBottomBoxesHeight = yPadding;
+
+ 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;
+ });
+
+ // 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;
+
+ if (newMaxChartAreaWidth !== maxChartAreaWidth || newMaxChartAreaHeight !== maxChartAreaHeight) {
+ helpers.each(leftBoxes, function(box) {
+ box.height = newMaxChartAreaHeight;
+ });
+
+ helpers.each(rightBoxes, function(box) {
+ box.height = newMaxChartAreaHeight;
+ });
+
+ helpers.each(topBoxes, function(box) {
+ box.width = newMaxChartAreaWidth;
+ });
+
+ helpers.each(bottomBoxes, function(box) {
+ box.width = newMaxChartAreaWidth;
+ });
+
+ maxChartAreaHeight = newMaxChartAreaHeight;
+ maxChartAreaWidth = newMaxChartAreaWidth;
+ }
+
+ // Step 7 - Position the boxes
+ var left = xPadding;
+ var top = yPadding;
+ var right = 0;
+ var bottom = 0;
+
+ helpers.each(leftBoxes.concat(topBoxes), placeBox);
+
+ // Account for chart width and height
+ left += maxChartAreaWidth;
+ top += maxChartAreaHeight;
+
+ helpers.each(rightBoxes, placeBox);
+ helpers.each(bottomBoxes, placeBox);
+
+ function placeBox(box) {
+ if (box.isHorizontal()) {
+ box.left = box.options.fullWidth ? xPadding : totalLeftBoxesWidth;
+ box.right = box.options.fullWidth ? width - xPadding : totalLeftBoxesWidth + maxChartAreaWidth;
+ box.top = top;
+ box.bottom = top + box.height;
+
+ // Move to next point
+ top = box.bottom;
+
+ } else {
+
+ box.left = left;
+ box.right = left + box.width;
+ box.top = totalTopBoxesHeight;
+ box.bottom = totalTopBoxesHeight + maxChartAreaHeight;
+
+ // Move to next point
+ left = box.right;
+ }
+ }
+
+ // Step 8
+ chartInstance.chartArea = {
+ left: totalLeftBoxesWidth,
+ top: totalTopBoxesHeight,
+ right: totalLeftBoxesWidth + maxChartAreaWidth,
+ bottom: totalTopBoxesHeight + maxChartAreaHeight,
+ };
+
+ // Step 9
+ helpers.each(chartAreaBoxes, function(box) {
+ box.left = chartInstance.chartArea.left;
+ box.top = chartInstance.chartArea.top;
+ box.right = chartInstance.chartArea.right;
+ box.bottom = chartInstance.chartArea.bottom;
+
+ box.update(maxChartAreaWidth, maxChartAreaHeight);
+ });
+ }
+ };
+
+
+}).call(this);
projects / thirdparty / Chart.js.git / commitdiff
