Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2489 from chartjs/fix/2480

Browse Source 
Use local variables + don't include text width for vertical scales with mirrored text
This commit is contained in:
Evert Timberg 2016-05-07 16:44:26 -04:00
commit b2fd94b131
1 changed files with 39 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/core/core.scale.js
View File

@ -252,49 +252,56 @@ module.exports = function(Chart) {
helpers.callCallback(this.options.beforeFit, [this]); helpers.callCallback(this.options.beforeFit, [this]);
}, },
fit: function() { fit: function() {
// Reset
this.minSize = { var minSize = this.minSize = {
width: 0, width: 0,
height: 0 height: 0
}; };
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); var opts = this.options;
var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); var tickOpts = opts.ticks;
var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); var scaleLabelOpts = opts.scaleLabel;
var globalOpts = Chart.defaults.global;
var display = opts.display;
var isHorizontal = this.isHorizontal();
var tickFontSize = helpers.getValueOrDefault(tickOpts.fontSize, globalOpts.defaultFontSize);
var tickFontStyle = helpers.getValueOrDefault(tickOpts.fontStyle, globalOpts.defaultFontStyle);
var tickFontFamily = helpers.getValueOrDefault(tickOpts.fontFamily, globalOpts.defaultFontFamily);
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize); var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabelOpts.fontSize, globalOpts.defaultFontSize);
var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle); var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabelOpts.fontStyle, globalOpts.defaultFontStyle);
var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily); var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabelOpts.fontFamily, globalOpts.defaultFontFamily);
var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily); var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
var display = this.options.display; var tickMarkLength = opts.gridLines.tickMarkLength;
// Width // Width
if (this.isHorizontal()) { if (isHorizontal) {
// subtract the margins to line up with the chartArea if we are a full width scale // subtract the margins to line up with the chartArea if we are a full width scale
this.minSize.width = this.isFullWidth() ? this.maxWidth - this.margins.left - this.margins.right : this.maxWidth; minSize.width = this.isFullWidth() ? this.maxWidth - this.margins.left - this.margins.right : this.maxWidth;
} else { } else {
this.minSize.width = display ? this.options.gridLines.tickMarkLength : 0; minSize.width = display ? tickMarkLength : 0;
} }
// height // height
if (this.isHorizontal()) { if (isHorizontal) {
this.minSize.height = display ? this.options.gridLines.tickMarkLength : 0; minSize.height = display ? tickMarkLength : 0;
} else { } else {
this.minSize.height = this.maxHeight; // fill all the height minSize.height = this.maxHeight; // fill all the height
} }
// Are we showing a title for the scale? // Are we showing a title for the scale?
if (this.options.scaleLabel.display && display) { if (scaleLabelOpts.display && display) {
if (this.isHorizontal()) { if (isHorizontal) {
this.minSize.height += (scaleLabelFontSize * 1.5); minSize.height += (scaleLabelFontSize * 1.5);
} else { } else {
this.minSize.width += (scaleLabelFontSize * 1.5); minSize.width += (scaleLabelFontSize * 1.5);
} }
} }
if (this.options.ticks.display && display) { if (tickOpts.display && display) {
// Don't bother fitting the ticks if we are not showing them // Don't bother fitting the ticks if we are not showing them
if (!this.longestTextCache) { if (!this.longestTextCache) {
this.longestTextCache = {}; this.longestTextCache = {};
@ -302,14 +309,14 @@ module.exports = function(Chart) {
var largestTextWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache); var largestTextWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
if (this.isHorizontal()) { if (isHorizontal) {
// A horizontal axis is more constrained by the height. // A horizontal axis is more constrained by the height.
this.longestLabelWidth = largestTextWidth; this.longestLabelWidth = largestTextWidth;
// TODO - improve this calculation // TODO - improve this calculation
var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * tickFontSize; var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * tickFontSize;
this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight); minSize.height = Math.min(this.maxHeight, minSize.height + labelHeight);
this.ctx.font = tickLabelFont; this.ctx.font = tickLabelFont;
var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width; var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width;
@ -323,19 +330,23 @@ module.exports = function(Chart) {
this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (tickFontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (tickFontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated
} else { } else {
// A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first // A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first
var maxLabelWidth = this.maxWidth - this.minSize.width; var maxLabelWidth = this.maxWidth - minSize.width;
// Account for padding // Account for padding
if (!this.options.ticks.mirror) { var mirror = tickOpts.mirror;
if (!mirror) {
largestTextWidth += this.options.ticks.padding; largestTextWidth += this.options.ticks.padding;
} else {
// If mirrored text is on the inside so don't expand
largestTextWidth = 0;
} }
if (largestTextWidth < maxLabelWidth) { if (largestTextWidth < maxLabelWidth) {
// We don't need all the room // We don't need all the room
this.minSize.width += largestTextWidth; minSize.width += largestTextWidth;
} else { } else {
// Expand to max size // Expand to max size
this.minSize.width = this.maxWidth; minSize.width = this.maxWidth;
} }
this.paddingTop = tickFontSize / 2; this.paddingTop = tickFontSize / 2;
@ -350,8 +361,8 @@ module.exports = function(Chart) {
this.paddingBottom = Math.max(this.paddingBottom - this.margins.bottom, 0); this.paddingBottom = Math.max(this.paddingBottom - this.margins.bottom, 0);
} }
this.width = this.minSize.width; this.width = minSize.width;
this.height = this.minSize.height; this.height = minSize.height;
}, },
afterFit: function() { afterFit: function() {