From 65ec618a48d1514f4354d9cf09b5de8aa7517493 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 6 Jun 2015 08:12:13 -0400 Subject: [PATCH 1/3] Some improvements to the linear scale. Made the tick marks smaller (5px vs 10px) and tightened up the drawing. Removed the use of maxWidth in ctx.fillText since that is not supported in Safari --- src/Chart.Scale.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Chart.Scale.js b/src/Chart.Scale.js index d87f80e57..86885c3cf 100644 --- a/src/Chart.Scale.js +++ b/src/Chart.Scale.js @@ -406,7 +406,7 @@ // ----------------------------------------------------- // | | | | | // - minSize.height = this.options.gridLines.show ? 25 : 0; + minSize.height = this.options.gridLines.show ? 10 : 0; } else { minSize.height = maxHeight; // fill all the height @@ -422,7 +422,7 @@ // | // | // -| - minSize.width = this.options.gridLines.show ? 25 : 0; + minSize.width = this.options.gridLines.show ? 10 : 0; } if (this.options.labels.show) { @@ -473,8 +473,8 @@ hasZero = helpers.findNextWhere(this.ticks, function(tick) { return tick === 0; }) !== undefined; - var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 10; - var yTickEnd = this.options.position == "bottom" ? this.top + 10 : this.bottom; + var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 5; + var yTickEnd = this.options.position == "bottom" ? this.top + 5 : this.bottom; helpers.each(this.ticks, function(tick, index) { // Grid lines are vertical @@ -542,8 +542,8 @@ hasZero = helpers.findNextWhere(this.ticks, function(tick) { return tick === 0; }) !== undefined; - var xTickStart = this.options.position == "right" ? this.left : this.right - 10; - var xTickEnd = this.options.position == "right" ? this.left + 10 : this.right; + var xTickStart = this.options.position == "right" ? this.left : this.right - 5; + var xTickEnd = this.options.position == "right" ? this.left + 5 : this.right; helpers.each(this.ticks, function(tick, index) { // Grid lines are horizontal @@ -584,22 +584,22 @@ // Draw the labels var labelStartX; - var maxLabelWidth = this.width - 25; - + if (this.options.position == "left") { - labelStartX = this.left; + labelStartX = this.right - 10; + this.ctx.textAlign = "right"; } else { // right side - labelStartX = this.left + 20; + labelStartX = this.left + 5; + this.ctx.textAlign = "left" } - this.ctx.textAlign = "left"; this.ctx.textBaseline = "middle"; this.ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); helpers.each(this.labels, function(label, index) { var yValue = this.getPixelForValue(this.ticks[index]); - this.ctx.fillText(label, labelStartX, yValue, maxLabelWidth); + this.ctx.fillText(label, labelStartX, yValue); }, this); } } From a89ede0d72d91f483c0b1f4d119fd8019115471d Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 6 Jun 2015 08:21:16 -0400 Subject: [PATCH 2/3] Bring linear axis labels closer to the tick marks when in a horizontal configuration. Reduced excess whitespace. --- src/Chart.Scale.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/Chart.Scale.js b/src/Chart.Scale.js index 86885c3cf..9a99e9127 100644 --- a/src/Chart.Scale.js +++ b/src/Chart.Scale.js @@ -11,8 +11,8 @@ Chart.scaleService = { // The interesting function fitScalesForChart: function(chartInstance, width, height) { - var xPadding = 10; - var yPadding = 10; + var xPadding = 5; + var yPadding = 5; if (chartInstance) { var leftScales = helpers.where(chartInstance.scales, function(scaleInstance) { @@ -518,14 +518,15 @@ var labelStartY; if (this.options.position == "top") { - labelStartY = this.top; + labelStartY = this.bottom - 10; + this.ctx.textBaseline = "bottom"; } else { // bottom side - labelStartY = this.top + 20; + labelStartY = this.top + 10; + this.ctx.textBaseline = "top"; } this.ctx.textAlign = "center"; - this.ctx.textBaseline = "top"; this.ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); helpers.each(this.labels, function(label, index) { @@ -584,7 +585,7 @@ // Draw the labels var labelStartX; - + if (this.options.position == "left") { labelStartX = this.right - 10; this.ctx.textAlign = "right"; From 4a3a9f1a214d2729f9ff409c68ace6224281ed73 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 6 Jun 2015 09:27:03 -0400 Subject: [PATCH 3/3] Change the scale fitting code from 2 pass fit to a 2.5 pass fit. The fit function is now passed a margin object that contains the margins on the left, top, right, and bottom of the scale. This is useful to know if you can draw outside of the width. This is used by the dataset scale so that extra padding is only added for long labels if absolutely required. If there is unused space underneath the vertical axes, that space is used first. --- src/Chart.Scale.js | 89 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 74 insertions(+), 15 deletions(-) diff --git a/src/Chart.Scale.js b/src/Chart.Scale.js index 9a99e9127..d42fe9c69 100644 --- a/src/Chart.Scale.js +++ b/src/Chart.Scale.js @@ -176,30 +176,81 @@ return wrapper.scale === scaleInstance; }); + var scaleMargin = { + left: totalLeftWidth, + right: totalRightWidth, + top: 0, + bottom: 0, + }; + if (wrapper) { - scaleInstance.fit(maxChartWidth, wrapper.minSize.width); + scaleInstance.fit(maxChartWidth, wrapper.minSize.height, scaleMargin); } }; + var totalLeftWidth = xPadding; + var totalRightWidth = xPadding; + var totalTopHeight = yPadding; + var totalBottomHeight = yPadding; + helpers.each(leftScales, verticalScaleFitFunction); helpers.each(rightScales, verticalScaleFitFunction); - helpers.each(topScales, horizontalScaleFitFunction); - helpers.each(bottomScales, horizontalScaleFitFunction); - // Step 7 - var totalLeftWidth = xPadding; - var totalTopHeight = yPadding; - - // Calculate total width of all left axes + // Figure out how much margin is on the left and right of the horizontal axes helpers.each(leftScales, function(scaleInstance) { totalLeftWidth += scaleInstance.width; }); - // Calculate total height of all top axes + helpers.each(rightScales, function(scaleInstance) { + totalRightWidth += scaleInstance.width; + }); + + helpers.each(topScales, horizontalScaleFitFunction); + helpers.each(bottomScales, horizontalScaleFitFunction); + helpers.each(topScales, function(scaleInstance) { totalTopHeight += scaleInstance.height; }); + helpers.each(bottomScales, function(scaleInstance) { + totalBottomHeight += scaleInstance.height; + }); + // Let the left scale know the final margin + helpers.each(leftScales, function(scaleInstance) { + var wrapper = helpers.findNextWhere(minimumScaleSizes, function(wrapper) { + return wrapper.scale === scaleInstance; + }); + + var scaleMargin = { + left: 0, + right: 0, + top: totalTopHeight, + bottom: totalBottomHeight + }; + + if (wrapper) { + scaleInstance.fit(wrapper.minSize.width, maxChartHeight, scaleMargin); + } + }); + + helpers.each(rightScales, function(scaleInstance) { + var wrapper = helpers.findNextWhere(minimumScaleSizes, function(wrapper) { + return wrapper.scale === scaleInstance; + }); + + var scaleMargin = { + left: 0, + right: 0, + top: totalTopHeight, + bottom: totalBottomHeight + }; + + if (wrapper) { + scaleInstance.fit(wrapper.minSize.width, maxChartHeight, scaleMargin); + } + }); + + // Step 7 // Position the scales var left = xPadding; var top = yPadding; @@ -592,7 +643,7 @@ } else { // right side labelStartX = this.left + 5; - this.ctx.textAlign = "left" + this.ctx.textAlign = "left"; } this.ctx.textBaseline = "middle"; @@ -633,7 +684,7 @@ return this.top + (index * (this.height / this.max)); } }, - calculateLabelRotation: function(maxHeight) { + calculateLabelRotation: function(maxHeight, margins) { //Get the width of each grid by calculating the difference //between x offsets between 0 and 1. var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); @@ -688,8 +739,16 @@ } } else { this.labelWidth = 0; - this.paddingRight = this.padding; - this.paddingLeft = this.padding; + this.paddingRight = 0; + this.paddingLeft = 0; + } + + if (margins) { + this.paddingLeft -= margins.left; + this.paddingRight -= margins.right; + + this.paddingLeft = Math.max(this.paddingLeft, 0); + this.paddingRight = Math.max(this.paddingRight, 0); } }, @@ -697,9 +756,9 @@ // @param {number} maxWidth : the max width the axis can be // @param {number} maxHeight: the max height the axis can be // @return {object} minSize : the minimum size needed to draw the axis - fit: function(maxWidth, maxHeight) { + fit: function(maxWidth, maxHeight, margins) { this.calculateRange(); - this.calculateLabelRotation(); + this.calculateLabelRotation(maxHeight, margins); var minSize = { width: 0,