Skip to content

Measure text size for autoscale when rotated #5252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
teroman wants to merge 2 commits into from
Closed

Measure text size for autoscale when rotated #5252

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a78d66
Measure text size for autoscale when rotated
teroman Feb 8, 2018
8c6c699
Update core.scale.js
teroman Apr 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Update core.scale.js
  • Loading branch information
@teroman
teroman authored Apr 26, 2018
commit 8c6c6991683da4402d15997ef3ae7d6e004844a2
81 changes: 7 additions & 74 deletions src/core/core.scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,7 +537,6 @@ module.exports = Element.extend({
return rawValue;
},

<<<<<<< HEAD
/**
* Used to get the value to display in the tooltip for the data at the given index
* @param index
Expand Down Expand Up @@ -575,77 +574,6 @@ module.exports = Element.extend({

if (offset) {
pixel += tickWidth / 2;
=======
var finalVal = me.left + Math.round(pixel);
finalVal += me.isFullWidth() ? me.margins.left : 0;
return finalVal;
}
var innerHeight = me.height - (me.paddingTop + me.paddingBottom);
return me.top + (index * (innerHeight / (me._ticks.length - 1)));
},

/**
* Utility for getting the pixel location of a percentage of scale
* The coordinate (0, 0) is at the upper-left corner of the canvas
*/
getPixelForDecimal: function(decimal) {
var me = this;
if (me.isHorizontal()) {
var innerWidth = me.width - (me.paddingLeft + me.paddingRight);
var valueOffset = (innerWidth * decimal) + me.paddingLeft;

var finalVal = me.left + Math.round(valueOffset);
finalVal += me.isFullWidth() ? me.margins.left : 0;
return finalVal;
}
return me.top + (decimal * me.height);
},

/**
* Returns the pixel for the minimum chart value
* The coordinate (0, 0) is at the upper-left corner of the canvas
*/
getBasePixel: function() {
return this.getPixelForValue(this.getBaseValue());
},

getBaseValue: function() {
var me = this;
var min = me.min;
var max = me.max;

return me.beginAtZero ? 0 :
min < 0 && max < 0 ? max :
min > 0 && max > 0 ? min :
0;
},

/**
* Returns a subset of ticks to be plotted to avoid overlapping labels.
* @private
*/
_autoSkip: function(ticks) {
var skipRatio;
var me = this;
var isHorizontal = me.isHorizontal();
var optionTicks = me.options.ticks.minor;
var tickCount = ticks.length;

// take the largest of either the width or height when rotated
// when at 90deg then the height of the text is its width
var labelRotationRadians = helpers.toRadians(me.labelRotation);
var cosRotation = Math.abs(Math.cos(labelRotationRadians));
var sinRotation = Math.abs(Math.sin(labelRotationRadians));
var longestRotatedLabel = Math.max(me.longestLabelWidth * cosRotation, me.options.ticks.fontSize * sinRotation);

var result = [];
var i, tick, shouldSkip;

// figure out the maximum number of gridlines to show
var maxTicks;
if (optionTicks.maxTicksLimit) {
maxTicks = optionTicks.maxTicksLimit;
>>>>>>> Measure text size for autoscale when rotated
}

var finalVal = me.left + Math.round(pixel);
Expand Down Expand Up @@ -702,9 +630,14 @@ module.exports = Element.extend({
var isHorizontal = me.isHorizontal();
var optionTicks = me.options.ticks.minor;
var tickCount = ticks.length;

// take the largest of either the width or height when rotated
// when at 90deg then the height of the text is its width
var labelRotationRadians = helpers.toRadians(me.labelRotation);
var cosRotation = Math.cos(labelRotationRadians);
var longestRotatedLabel = me.longestLabelWidth * cosRotation;
var cosRotation = Math.abs(Math.cos(labelRotationRadians));
var sinRotation = Math.abs(Math.sin(labelRotationRadians));
var longestRotatedLabel = Math.max(me.longestLabelWidth * cosRotation, me.options.ticks.fontSize * sinRotation);
Copy link
Member

@simonbrunel simonbrunel Aug 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure that's correct (neither the original formula) because it works only with a line (width or height), not a box (width and height). When angle is not 0, 90, 180, 270, we should take in account both dimensions:

image

var rot = helpers.toRadians(me.labelRotation);
var cos = Math.abs(Math.cos(rot));
var sin = Math.abs(Math.sin(rot));
var width = me.longestLabelWidth; 
var height = me.options.ticks.fontSize;
var skipSize =  (width * cos) + (height * sin)

// In case we want to support auto-skip on vertical scales
// var skipSize =  (width * sin) + (height * cos)

Also, me.options.ticks.fontSize works only for single line label, should we also support multilines?

Copy link
Member

@etimberg etimberg Sep 27, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great diagram @simonbrunel. I agree that this is the correct formula for the width of the text.

Copy link
Member

@simonbrunel simonbrunel Dec 19, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My suggested skipSize wasn't optimal, correct formula in this pen, implemented in #5922.


var result = [];
var i, tick, shouldSkip;

Expand Down