Skip to content
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

Jump to bottom

Add scale.pointLabels.lineHeight and scale.ticks.lineHeight options #5914

Merged
merged 4 commits into from Dec 20, 2018
Merged

Add scale.pointLabels.lineHeight and scale.ticks.lineHeight options #5914

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6535e7f
Add scale.pointLabels.lineHeight and scale.ticks.lineHeight options
nagix Dec 14, 2018
6b44d39
Add helpers.options.toFontString and helpers.options._parseFont
nagix Dec 16, 2018
b6f1d94
Move toFontString outside the export to make it fully private
nagix Dec 18, 2018
4780832
Remove code duplication
nagix Dec 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/axes/radial/linear.md
View file
Open in desktop
Expand Up @@ -109,3 +109,4 @@ The following options are used to configure the point labels that are shown on t
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels.
| `fontSize` | `Number` | 10 | font size in pixels.
| `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels.
| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
3 changes: 3 additions & 0 deletions docs/axes/styling.md
View file
Open in desktop
Expand Up @@ -35,6 +35,7 @@ The tick configuration is nested under the scale configuration in the `ticks` ke
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
| `fontSize` | `Number` | `12` | Font size for the tick labels.
| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
| `reverse` | `Boolean` | `false` | Reverses order of tick labels.
| `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above.
| `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above.
Expand All @@ -50,6 +51,7 @@ The minorTick configuration is nested under the ticks configuration in the `mino
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
| `fontSize` | `Number` | `12` | Font size for the tick labels.
| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).

## Major Tick Configuration
The majorTick configuration is nested under the ticks configuration in the `major` key. It defines options for the major tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration.
Expand All @@ -61,3 +63,4 @@ The majorTick configuration is nested under the ticks configuration in the `majo
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
| `fontSize` | `Number` | `12` | Font size for the tick labels.
| `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
1 change: 1 addition & 0 deletions src/core/core.js
View file
Open in desktop
Expand Up @@ -19,6 +19,7 @@ defaults._set('global', {
defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
defaultFontSize: 12,
defaultFontStyle: 'normal',
defaultLineHeight: 1.2,
showLines: true,

// Element defaults defined in element extensions
Expand Down
71 changes: 22 additions & 49 deletions src/core/core.scale.js
View file
Open in desktop
Expand Up @@ -5,6 +5,8 @@ var Element = require('./core.element');
var helpers = require('../helpers/index');
var Ticks = require('./core.ticks');

var globalDefaults = defaults.global;

defaults._set('scale', {
display: true,
position: 'left',
Expand Down Expand Up @@ -36,9 +38,6 @@ defaults._set('scale', {
// actual label
labelString: '',

// line height
lineHeight: 1.2,

// top/bottom padding
padding: {
top: 4,
Expand Down Expand Up @@ -99,27 +98,6 @@ function computeTextSize(context, tick, font) {
context.measureText(tick).width;
}

function parseFontOptions(options) {
var valueOrDefault = helpers.valueOrDefault;
var globalDefaults = defaults.global;
var size = valueOrDefault(options.fontSize, globalDefaults.defaultFontSize);
var style = valueOrDefault(options.fontStyle, globalDefaults.defaultFontStyle);
var family = valueOrDefault(options.fontFamily, globalDefaults.defaultFontFamily);

return {
size: size,
style: style,
family: family,
font: helpers.fontString(size, style, family)
};
}

function parseLineHeight(options) {
return helpers.options.toLineHeight(
helpers.valueOrDefault(options.lineHeight, 1.2),
helpers.valueOrDefault(options.fontSize, defaults.global.defaultFontSize));
}

module.exports = Element.extend({
/**
* Get the padding needed for the scale
Expand Down Expand Up @@ -341,7 +319,7 @@ module.exports = Element.extend({

// Get the width of each grid by calculating the difference
// between x offsets between 0 and 1.
var tickFont = parseFontOptions(tickOpts);
var tickFont = helpers.options.parseFontOptions(tickOpts, globalDefaults);
Copy link
Member

Choose a reason for hiding this comment

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

Would it make sense to capture helpers.options.parseFontOptions into a variable to help minification?

context.font = tickFont.font;

var labelRotation = tickOpts.minRotation || 0;
Expand Down Expand Up @@ -400,7 +378,7 @@ module.exports = Element.extend({
var position = opts.position;
var isHorizontal = me.isHorizontal();

var tickFont = parseFontOptions(tickOpts);
var tickFont = helpers.options.parseFontOptions(tickOpts, globalDefaults);
var tickMarkLength = opts.gridLines.tickMarkLength;

// Width
Expand All @@ -420,9 +398,9 @@ module.exports = Element.extend({

// Are we showing a title for the scale?
if (scaleLabelOpts.display && display) {
var scaleLabelLineHeight = parseLineHeight(scaleLabelOpts);
var scaleLabelFont = helpers.options.parseFontOptions(scaleLabelOpts, globalDefaults);
var scaleLabelPadding = helpers.options.toPadding(scaleLabelOpts.padding);
var deltaHeight = scaleLabelLineHeight + scaleLabelPadding.height;
var deltaHeight = scaleLabelFont.lineHeight + scaleLabelPadding.height;

if (isHorizontal) {
minSize.height += deltaHeight;
Expand All @@ -448,8 +426,7 @@ module.exports = Element.extend({

// TODO - improve this calculation
var labelHeight = (sinRotation * largestTextWidth)
+ (tickFont.size * tallestLabelHeightInLines)
+ (lineSpace * (tallestLabelHeightInLines - 1))
+ (tickFont.lineHeight * tallestLabelHeightInLines)
+ lineSpace; // padding

minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight + tickPadding);
Expand Down Expand Up @@ -689,7 +666,6 @@ module.exports = Element.extend({

var chart = me.chart;
var context = me.ctx;
var globalDefaults = defaults.global;
var optionTicks = options.ticks.minor;
var optionMajorTicks = options.ticks.major || optionTicks;
var gridLines = options.gridLines;
Expand All @@ -702,16 +678,16 @@ module.exports = Element.extend({

var ticks = optionTicks.autoSkip ? me._autoSkip(me.getTicks()) : me.getTicks();
var tickFontColor = helpers.valueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor);
var tickFont = parseFontOptions(optionTicks);
var tickFont = helpers.options.parseFontOptions(optionTicks, globalDefaults);
var majorTickFontColor = helpers.valueOrDefault(optionMajorTicks.fontColor, globalDefaults.defaultFontColor);
var majorTickFont = parseFontOptions(optionMajorTicks);
var majorTickFont = helpers.options.parseFontOptions(optionMajorTicks, globalDefaults);
var tickPadding = optionTicks.padding;
var labelOffset = optionTicks.labelOffset;

var tl = gridLines.drawTicks ? gridLines.tickMarkLength : 0;

var scaleLabelFontColor = helpers.valueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
var scaleLabelFont = parseFontOptions(scaleLabel);
var scaleLabelFont = helpers.options.parseFontOptions(scaleLabel, globalDefaults);
var scaleLabelPadding = helpers.options.toPadding(scaleLabel.padding);
var labelRotationRadians = helpers.toRadians(me.labelRotation);

Expand Down Expand Up @@ -763,8 +739,8 @@ module.exports = Element.extend({
}

// Common properties
var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY, textAlign;
var textBaseline = 'middle';
var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY, textOffset, textAlign;
var labelCount = helpers.isArray(label) ? label.length : 1;
var lineValue = getPixelForGridLine(me, index, gridLines.offsetGridLines);

if (isHorizontal) {
Expand All @@ -782,13 +758,13 @@ module.exports = Element.extend({
if (position === 'top') {
y1 = alignPixel(chart, chartArea.top, axisWidth) + axisWidth / 2;
y2 = chartArea.bottom;
textBaseline = !isRotated ? 'bottom' : 'middle';
textOffset = ((!isRotated ? 0.5 : 1) - labelCount) * tickFont.lineHeight;
simonbrunel marked this conversation as resolved.
Show resolved Hide resolved
textAlign = !isRotated ? 'center' : 'left';
labelY = me.bottom - labelYOffset;
} else {
y1 = chartArea.top;
y2 = alignPixel(chart, chartArea.bottom, axisWidth) - axisWidth / 2;
textBaseline = !isRotated ? 'top' : 'middle';
textOffset = (!isRotated ? 0.5 : 0) * tickFont.lineHeight;
textAlign = !isRotated ? 'center' : 'right';
labelY = me.top + labelYOffset;
}
Expand All @@ -803,6 +779,7 @@ module.exports = Element.extend({
tx2 = tickEnd;
ty1 = ty2 = y1 = y2 = alignPixel(chart, lineValue, lineWidth);
labelY = me.getPixelForTick(index) + labelOffset;
textOffset = (1 - labelCount) * tickFont.lineHeight / 2;

if (position === 'left') {
x1 = alignPixel(chart, chartArea.left, axisWidth) + axisWidth / 2;
Expand Down Expand Up @@ -835,7 +812,7 @@ module.exports = Element.extend({
rotation: -1 * labelRotationRadians,
label: label,
major: tick.major,
textBaseline: textBaseline,
textOffset: textOffset,
textAlign: textAlign
});
});
Expand Down Expand Up @@ -877,23 +854,19 @@ module.exports = Element.extend({
context.rotate(itemToDraw.rotation);
context.font = itemToDraw.major ? majorTickFont.font : tickFont.font;
context.fillStyle = itemToDraw.major ? majorTickFontColor : tickFontColor;
context.textBaseline = itemToDraw.textBaseline;
context.textBaseline = 'middle';
context.textAlign = itemToDraw.textAlign;

var label = itemToDraw.label;
var y = itemToDraw.textOffset;
if (helpers.isArray(label)) {
var lineCount = label.length;
var lineHeight = tickFont.size * 1.5;
var y = isHorizontal ? 0 : -lineHeight * (lineCount - 1) / 2;

for (var i = 0; i < lineCount; ++i) {
for (var i = 0; i < label.length; ++i) {
// We just make sure the multiline element is a string here..
context.fillText('' + label[i], 0, y);
// apply same lineSpacing as calculated @ L#320
y += lineHeight;
y += tickFont.lineHeight;
}
} else {
context.fillText(label, 0, 0);
context.fillText(label, 0, y);
}
context.restore();
}
Expand All @@ -904,7 +877,7 @@ module.exports = Element.extend({
var scaleLabelX;
var scaleLabelY;
var rotation = 0;
var halfLineHeight = parseLineHeight(scaleLabel) / 2;
var halfLineHeight = scaleLabelFont.lineHeight / 2;

if (isHorizontal) {
scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width
Expand Down
16 changes: 16 additions & 0 deletions src/helpers/helpers.options.js
View file
Open in desktop
Expand Up @@ -65,6 +65,22 @@ module.exports = {
};
},

parseFontOptions: function(options, globalDefaults) {
simonbrunel marked this conversation as resolved.
Show resolved Hide resolved
var valueOrDefault = helpers.valueOrDefault;
var size = valueOrDefault(options.fontSize, globalDefaults.defaultFontSize);
var style = valueOrDefault(options.fontStyle, globalDefaults.defaultFontStyle);
var family = valueOrDefault(options.fontFamily, globalDefaults.defaultFontFamily);
var lineHeight = valueOrDefault(options.lineHeight, globalDefaults.defaultlineHeight);

return {
size: size,
style: style,
family: family,
font: helpers.fontString(size, style, family),
simonbrunel marked this conversation as resolved.
Show resolved Hide resolved
lineHeight: this.toLineHeight(lineHeight, size)
};
},

/**
* Evaluates the given `inputs` sequentially and returns the first defined value.
* @param {Array[]} inputs - An array of values, falling back to the last value.
Expand Down
21 changes: 8 additions & 13 deletions src/plugins/plugin.legend.js
View file
Open in desktop
Expand Up @@ -7,6 +7,8 @@ var layouts = require('../core/core.layouts');

var noop = helpers.noop;

var globalDefault = defaults.global;

defaults._set('global', {
legend: {
display: true,
Expand Down Expand Up @@ -211,12 +213,8 @@ var Legend = Element.extend({

var ctx = me.ctx;

var globalDefault = defaults.global;
var valueOrDefault = helpers.valueOrDefault;
var fontSize = valueOrDefault(labelOpts.fontSize, globalDefault.defaultFontSize);
var fontStyle = valueOrDefault(labelOpts.fontStyle, globalDefault.defaultFontStyle);
var fontFamily = valueOrDefault(labelOpts.fontFamily, globalDefault.defaultFontFamily);
var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
var labelFont = helpers.options.parseFontOptions(labelOpts, globalDefault);
var fontSize = labelFont.size;

// Reset hit boxes
var hitboxes = me.legendHitBoxes = [];
Expand All @@ -234,7 +232,7 @@ var Legend = Element.extend({

// Increase sizes here
if (display) {
ctx.font = labelFont;
ctx.font = labelFont.font;

if (isHorizontal) {
// Labels
Expand Down Expand Up @@ -323,7 +321,6 @@ var Legend = Element.extend({
var me = this;
var opts = me.options;
var labelOpts = opts.labels;
var globalDefault = defaults.global;
var lineDefault = globalDefault.elements.line;
var legendWidth = me.width;
var lineWidths = me.lineWidths;
Expand All @@ -332,10 +329,8 @@ var Legend = Element.extend({
var ctx = me.ctx;
var valueOrDefault = helpers.valueOrDefault;
var fontColor = valueOrDefault(labelOpts.fontColor, globalDefault.defaultFontColor);
var fontSize = valueOrDefault(labelOpts.fontSize, globalDefault.defaultFontSize);
var fontStyle = valueOrDefault(labelOpts.fontStyle, globalDefault.defaultFontStyle);
var fontFamily = valueOrDefault(labelOpts.fontFamily, globalDefault.defaultFontFamily);
var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
var labelFont = helpers.options.parseFontOptions(labelOpts, globalDefault);
var fontSize = labelFont.size;
var cursor;

// Canvas setup
Expand All @@ -344,7 +339,7 @@ var Legend = Element.extend({
ctx.lineWidth = 0.5;
ctx.strokeStyle = fontColor; // for strikethrough effect
ctx.fillStyle = fontColor; // render in correct colour
ctx.font = labelFont;
ctx.font = labelFont.font;

var boxWidth = getBoxWidth(labelOpts, fontSize);
var hitboxes = me.legendHitBoxes;
Expand Down
21 changes: 8 additions & 13 deletions src/plugins/plugin.title.js
View file
Open in desktop
Expand Up @@ -7,12 +7,13 @@ var layouts = require('../core/core.layouts');

var noop = helpers.noop;

var globalDefaults = defaults.global;

defaults._set('global', {
title: {
display: false,
fontStyle: 'bold',
fullWidth: true,
lineHeight: 1.2,
padding: 10,
position: 'top',
text: '',
Expand Down Expand Up @@ -111,14 +112,12 @@ var Title = Element.extend({
beforeFit: noop,
fit: function() {
var me = this;
var valueOrDefault = helpers.valueOrDefault;
var opts = me.options;
var display = opts.display;
var fontSize = valueOrDefault(opts.fontSize, defaults.global.defaultFontSize);
var minSize = me.minSize;
var lineCount = helpers.isArray(opts.text) ? opts.text.length : 1;
var lineHeight = helpers.options.toLineHeight(opts.lineHeight, fontSize);
var textSize = display ? (lineCount * lineHeight) + (opts.padding * 2) : 0;
var fontOpts = helpers.options.parseFontOptions(opts, globalDefaults);
var textSize = display ? (lineCount * fontOpts.lineHeight) + (opts.padding * 2) : 0;

if (me.isHorizontal()) {
minSize.width = me.maxWidth; // fill all the width
Expand Down Expand Up @@ -146,14 +145,10 @@ var Title = Element.extend({
var ctx = me.ctx;
var valueOrDefault = helpers.valueOrDefault;
var opts = me.options;
var globalDefaults = defaults.global;

if (opts.display) {
var fontSize = valueOrDefault(opts.fontSize, globalDefaults.defaultFontSize);
var fontStyle = valueOrDefault(opts.fontStyle, globalDefaults.defaultFontStyle);
var fontFamily = valueOrDefault(opts.fontFamily, globalDefaults.defaultFontFamily);
var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
var lineHeight = helpers.options.toLineHeight(opts.lineHeight, fontSize);
var fontOpts = helpers.options.parseFontOptions(opts, globalDefaults);
var lineHeight = fontOpts.lineHeight;
var offset = lineHeight / 2 + opts.padding;
var rotation = 0;
var top = me.top;
Expand All @@ -163,7 +158,7 @@ var Title = Element.extend({
var maxWidth, titleX, titleY;

ctx.fillStyle = valueOrDefault(opts.fontColor, globalDefaults.defaultFontColor); // render in correct colour
ctx.font = titleFont;
ctx.font = fontOpts.font;

// Horizontal
if (me.isHorizontal()) {
Expand Down Expand Up @@ -236,7 +231,7 @@ module.exports = {
var titleBlock = chart.titleBlock;

if (titleOpts) {
helpers.mergeIf(titleOpts, defaults.global.title);
helpers.mergeIf(titleOpts, globalDefaults.title);

if (titleBlock) {
layouts.configure(chart, titleBlock, titleOpts);
Expand Down