From 8d5b3809f6a607ebf2be7af40fb538ea5e42c4db Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sun, 28 Feb 2016 13:41:17 -0500 Subject: [PATCH] Fix global font settings --- src/core/core.legend.js | 41 ++++++++------- src/core/core.scale.js | 90 ++++++++++++++++++-------------- src/core/core.title.js | 64 +++++++++++------------ src/core/core.tooltip.js | 25 ++++----- src/scales/scale.linear.js | 7 ++- src/scales/scale.radialLinear.js | 49 ++++++++++------- src/scales/scale.time.js | 3 +- test/core.helpers.tests.js | 16 ------ test/core.legend.tests.js | 4 -- test/core.title.tests.js | 15 +++--- test/scale.category.tests.js | 8 --- test/scale.linear.tests.js | 8 --- test/scale.logarithmic.tests.js | 8 --- test/scale.radialLinear.tests.js | 11 ---- test/scale.time.tests.js | 8 --- 15 files changed, 152 insertions(+), 205 deletions(-) diff --git a/src/core/core.legend.js b/src/core/core.legend.js index d695f2df5..0f7468809 100644 --- a/src/core/core.legend.js +++ b/src/core/core.legend.js @@ -22,10 +22,6 @@ module.exports = function(Chart) { labels: { boxWidth: 40, - fontSize: Chart.defaults.global.defaultFontSize, - fontStyle: Chart.defaults.global.defaultFontStyle, - fontColor: Chart.defaults.global.defaultFontColor, - fontFamily: Chart.defaults.global.defaultFontFamily, padding: 10, // Generates labels shown in the legend // Valid properties to return: @@ -156,7 +152,10 @@ module.exports = function(Chart) { fit: function() { var ctx = this.ctx; - var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); + var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize); + var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle); + var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily); + var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily); // Reset hit boxes this.legendHitBoxes = []; @@ -182,16 +181,16 @@ module.exports = function(Chart) { // Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one this.lineWidths = [0]; - var totalHeight = this.legendItems.length ? this.options.labels.fontSize + (this.options.labels.padding) : 0; + var totalHeight = this.legendItems.length ? fontSize + (this.options.labels.padding) : 0; ctx.textAlign = "left"; ctx.textBaseline = 'top'; ctx.font = labelFont; helpers.each(this.legendItems, function(legendItem, i) { - var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + ctx.measureText(legendItem.text).width; + var width = this.options.labels.boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width; if (this.lineWidths[this.lineWidths.length - 1] + width + this.options.labels.padding >= this.width) { - totalHeight += this.options.labels.fontSize + (this.options.labels.padding); + totalHeight += fontSize + (this.options.labels.padding); this.lineWidths[this.lineWidths.length] = this.left; } @@ -200,7 +199,7 @@ module.exports = function(Chart) { left: 0, top: 0, width: width, - height: this.options.labels.fontSize + height: fontSize }; this.lineWidths[this.lineWidths.length - 1] += width + this.options.labels.padding; @@ -234,7 +233,11 @@ module.exports = function(Chart) { line: 0 }; - var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); + var fontColor = helpers.getValueOrDefault(this.options.labels.fontColor, Chart.defaults.global.defaultFontColor); + var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize); + var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle); + var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily); + var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily); // Horizontal if (this.isHorizontal()) { @@ -242,16 +245,16 @@ module.exports = function(Chart) { ctx.textAlign = "left"; ctx.textBaseline = 'top'; ctx.lineWidth = 0.5; - ctx.strokeStyle = this.options.labels.fontColor; // for strikethrough effect - ctx.fillStyle = this.options.labels.fontColor; // render in correct colour + ctx.strokeStyle = fontColor; // for strikethrough effect + ctx.fillStyle = fontColor; // render in correct colour ctx.font = labelFont; helpers.each(this.legendItems, function(legendItem, i) { var textWidth = ctx.measureText(legendItem.text).width; - var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + textWidth; + var width = this.options.labels.boxWidth + (fontSize / 2) + textWidth; if (cursor.x + width >= this.width) { - cursor.y += this.options.labels.fontSize + (this.options.labels.padding); + cursor.y += fontSize + (this.options.labels.padding); cursor.line++; cursor.x = this.left + ((this.width - this.lineWidths[cursor.line]) / 2); } @@ -276,8 +279,8 @@ module.exports = function(Chart) { } // Draw the box - ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize); - ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize); + ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize); + ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize); ctx.restore(); @@ -285,14 +288,14 @@ module.exports = function(Chart) { this.legendHitBoxes[i].top = cursor.y; // Fill the actual label - ctx.fillText(legendItem.text, this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y); + ctx.fillText(legendItem.text, this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y); if (legendItem.hidden) { // Strikethrough the text if hidden ctx.beginPath(); ctx.lineWidth = 2; - ctx.moveTo(this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y + (this.options.labels.fontSize / 2)); - ctx.lineTo(this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x + textWidth, cursor.y + (this.options.labels.fontSize / 2)); + ctx.moveTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y + (fontSize / 2)); + ctx.lineTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x + textWidth, cursor.y + (fontSize / 2)); ctx.stroke(); } diff --git a/src/core/core.scale.js b/src/core/core.scale.js index a7475f1b8..6a51b0bda 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -21,11 +21,6 @@ module.exports = function(Chart) { // scale label scaleLabel: { - fontColor: Chart.defaults.global.defaultFontColor, - fontFamily: Chart.defaults.global.defaultFontFamily, - fontSize: Chart.defaults.global.defaultFontSize, - fontStyle: Chart.defaults.global.defaultFontStyle, - // actual label labelString: '', @@ -36,10 +31,6 @@ module.exports = function(Chart) { // label settings ticks: { beginAtZero: false, - fontSize: Chart.defaults.global.defaultFontSize, - fontStyle: Chart.defaults.global.defaultFontStyle, - fontColor: Chart.defaults.global.defaultFontColor, - fontFamily: Chart.defaults.global.defaultFontFamily, maxRotation: 90, mirror: false, padding: 10, @@ -187,8 +178,11 @@ module.exports = function(Chart) { calculateTickRotation: function() { //Get the width of each grid by calculating the difference //between x offsets between 0 and 1. - var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); - this.ctx.font = labelFont; + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); + var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); + this.ctx.font = tickLabelFont; var firstWidth = this.ctx.measureText(this.ticks[0]).width; var lastWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width; @@ -206,7 +200,7 @@ module.exports = function(Chart) { if (!this.longestTextCache) { this.longestTextCache = {}; } - var originalLabelWidth = helpers.longestText(this.ctx, labelFont, this.ticks, this.longestTextCache); + var originalLabelWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache); var labelWidth = originalLabelWidth; var cosRotation; var sinRotation; @@ -223,11 +217,11 @@ module.exports = function(Chart) { firstRotated = cosRotation * firstWidth; // We're right aligning the text now. - if (firstRotated + this.options.ticks.fontSize / 2 > this.yLabelWidth) { - this.paddingLeft = firstRotated + this.options.ticks.fontSize / 2; + if (firstRotated + tickFontSize / 2 > this.yLabelWidth) { + this.paddingLeft = firstRotated + tickFontSize / 2; } - this.paddingRight = this.options.ticks.fontSize / 2; + this.paddingRight = tickFontSize / 2; if (sinRotation * originalLabelWidth > this.maxHeight) { // go back one step @@ -262,6 +256,16 @@ module.exports = function(Chart) { height: 0 }; + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); + var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); + + var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize); + var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle); + var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily); + var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily); + // Width if (this.isHorizontal()) { // subtract the margins to line up with the chartArea if we are a full width scale @@ -280,34 +284,29 @@ module.exports = function(Chart) { // Are we showing a title for the scale? if (this.options.scaleLabel.display) { if (this.isHorizontal()) { - this.minSize.height += (this.options.scaleLabel.fontSize * 1.5); + this.minSize.height += (scaleLabelFontSize * 1.5); } else { - this.minSize.width += (this.options.scaleLabel.fontSize * 1.5); + this.minSize.width += (scaleLabelFontSize * 1.5); } } if (this.options.ticks.display && this.options.display) { // Don't bother fitting the ticks if we are not showing them - var labelFont = helpers.fontString(this.options.ticks.fontSize, - this.options.ticks.fontStyle, this.options.ticks.fontFamily); - if (!this.longestTextCache) { this.longestTextCache = {}; } - var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.ticks, this.longestTextCache); + var largestTextWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache); if (this.isHorizontal()) { // A horizontal axis is more constrained by the height. this.longestLabelWidth = largestTextWidth; // TODO - improve this calculation - var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * this.options.ticks.fontSize; + var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * tickFontSize; this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight); - - labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); - this.ctx.font = labelFont; + this.ctx.font = tickLabelFont; var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width; var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width; @@ -317,7 +316,7 @@ module.exports = function(Chart) { var cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); var sinRotation = Math.sin(helpers.toRadians(this.labelRotation)); this.paddingLeft = this.labelRotation !== 0 ? (cosRotation * firstLabelWidth) + 3 : firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges - this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (this.options.ticks.fontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated + this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (tickFontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated } else { // 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; @@ -335,8 +334,8 @@ module.exports = function(Chart) { this.minSize.width = this.maxWidth; } - this.paddingTop = this.options.ticks.fontSize / 2; - this.paddingBottom = this.options.ticks.fontSize / 2; + this.paddingTop = tickFontSize / 2; + this.paddingBottom = tickFontSize / 2; } } @@ -447,14 +446,25 @@ module.exports = function(Chart) { maxTicks = this.options.ticks.maxTicksLimit; } - // Make sure we draw text in the correct color and font - this.ctx.fillStyle = this.options.ticks.fontColor; - var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); + var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor); + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); + var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); + + var scaleLabelFontColor = helpers.getValueOrDefault(this.options.scaleLabel.fontColor, Chart.defaults.global.defaultFontColor); + var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize); + var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle); + var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily); + var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily); var cosRotation = Math.cos(helpers.toRadians(this.labelRotation)); var sinRotation = Math.sin(helpers.toRadians(this.labelRotation)); var longestRotatedLabel = this.longestLabelWidth * cosRotation; - var rotatedLabelHeight = this.options.ticks.fontSize * sinRotation; + var rotatedLabelHeight = tickFontSize * sinRotation; + + // Make sure we draw text in the correct color and font + this.ctx.fillStyle = tickFontColor; if (this.isHorizontal()) { setContextLineSettings = true; @@ -529,7 +539,7 @@ module.exports = function(Chart) { this.ctx.save(); this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); - this.ctx.font = labelFont; + this.ctx.font = tickLabelFont; this.ctx.textAlign = (isRotated) ? "right" : "center"; this.ctx.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top"; this.ctx.fillText(label, 0, 0); @@ -541,11 +551,11 @@ module.exports = function(Chart) { // Draw the scale label this.ctx.textAlign = "center"; this.ctx.textBaseline = 'middle'; - this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour - this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily); + this.ctx.fillStyle = scaleLabelFontColor; // render in correct colour + this.ctx.font = scaleLabelFont; scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width - scaleLabelY = this.options.position === 'bottom' ? this.bottom - (this.options.scaleLabel.fontSize / 2) : this.top + (this.options.scaleLabel.fontSize / 2); + scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2); this.ctx.fillText(this.options.scaleLabel.labelString, scaleLabelX, scaleLabelY); } @@ -622,7 +632,7 @@ module.exports = function(Chart) { this.ctx.translate(xLabelValue, yLabelValue); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); - this.ctx.font = labelFont; + this.ctx.font = tickLabelFont; this.ctx.textBaseline = "middle"; this.ctx.fillText(label, 0, 0); this.ctx.restore(); @@ -631,7 +641,7 @@ module.exports = function(Chart) { if (this.options.scaleLabel.display) { // Draw the scale label - scaleLabelX = this.options.position === 'left' ? this.left + (this.options.scaleLabel.fontSize / 2) : this.right - (this.options.scaleLabel.fontSize / 2); + scaleLabelX = this.options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2); scaleLabelY = this.top + ((this.bottom - this.top) / 2); var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI; @@ -639,8 +649,8 @@ module.exports = function(Chart) { this.ctx.translate(scaleLabelX, scaleLabelY); this.ctx.rotate(rotation); this.ctx.textAlign = "center"; - this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour - this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily); + this.ctx.fillStyle =scaleLabelFontColor; // render in correct colour + this.ctx.font = scaleLabelFont; this.ctx.textBaseline = 'middle'; this.ctx.fillText(this.options.scaleLabel.labelString, 0, 0); this.ctx.restore(); diff --git a/src/core/core.title.js b/src/core/core.title.js index 6aa16d2d2..33de0f4a7 100644 --- a/src/core/core.title.js +++ b/src/core/core.title.js @@ -9,9 +9,6 @@ module.exports = function(Chart) { position: 'top', fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes) - fontColor: Chart.defaults.global.defaultFontColor, - fontFamily: Chart.defaults.global.defaultFontFamily, - fontSize: Chart.defaults.global.defaultFontSize, fontStyle: 'bold', padding: 10, @@ -107,7 +104,10 @@ module.exports = function(Chart) { fit: function() { var ctx = this.ctx; - var titleFont = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily); + var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize); + var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle); + var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily); + var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily); // Width if (this.isHorizontal()) { @@ -128,11 +128,11 @@ module.exports = function(Chart) { // Title if (this.options.display) { - this.minSize.height += this.options.fontSize + (this.options.padding * 2); + this.minSize.height += fontSize + (this.options.padding * 2); } } else { if (this.options.display) { - this.minSize.width += this.options.fontSize + (this.options.padding * 2); + this.minSize.width += fontSize + (this.options.padding * 2); } } @@ -153,41 +153,39 @@ module.exports = function(Chart) { var ctx = this.ctx; var titleX, titleY; + var fontColor = helpers.getValueOrDefault(this.options.fontColor, Chart.defaults.global.defaultFontColor); + var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize); + var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle); + var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily); + var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily); + + ctx.fillStyle = fontColor; // render in correct colour + ctx.font = titleFont; + // Horizontal if (this.isHorizontal()) { // Title - if (this.options.display) { + ctx.textAlign = "center"; + ctx.textBaseline = 'middle'; - ctx.textAlign = "center"; - ctx.textBaseline = 'middle'; - ctx.fillStyle = this.options.fontColor; // render in correct colour - ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily); + titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width + titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height - titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width - titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height - - ctx.fillText(this.options.text, titleX, titleY); - } + ctx.fillText(this.options.text, titleX, titleY); } else { // Title - if (this.options.display) { - titleX = this.options.position === 'left' ? this.left + (this.options.fontSize / 2) : this.right - (this.options.fontSize / 2); - titleY = this.top + ((this.bottom - this.top) / 2); - var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI; - - ctx.save(); - ctx.translate(titleX, titleY); - ctx.rotate(rotation); - ctx.textAlign = "center"; - ctx.fillStyle = this.options.fontColor; // render in correct colour - ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily); - ctx.textBaseline = 'middle'; - ctx.fillText(this.options.text, 0, 0); - ctx.restore(); - - } - + titleX = this.options.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2); + titleY = this.top + ((this.bottom - this.top) / 2); + var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI; + + ctx.save(); + ctx.translate(titleX, titleY); + ctx.rotate(rotation); + ctx.textAlign = "center"; + ctx.textBaseline = 'middle'; + ctx.fillText(this.options.text, 0, 0); + ctx.restore(); } } } diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 11401a035..b3a610156 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -9,21 +9,14 @@ module.exports = function(Chart) { custom: null, mode: 'single', backgroundColor: "rgba(0,0,0,0.8)", - titleFontFamily: Chart.defaults.global.defaultFontFamily, - titleFontSize: Chart.defaults.global.defaultFontSize, titleFontStyle: "bold", titleSpacing: 2, titleMarginBottom: 6, titleColor: "#fff", titleAlign: "left", - bodyFontFamily: Chart.defaults.global.defaultFontFamily, - bodyFontSize: Chart.defaults.global.defaultFontSize, - bodyFontStyle: Chart.defaults.global.defaultFontStyle, bodySpacing: 2, bodyColor: "#fff", bodyAlign: "left", - footerFontFamily: Chart.defaults.global.defaultFontFamily, - footerFontSize: Chart.defaults.global.defaultFontSize, footerFontStyle: "bold", footerSpacing: 2, footerMarginTop: 6, @@ -98,26 +91,26 @@ module.exports = function(Chart) { // Body bodyColor: options.tooltips.bodyColor, - _bodyFontFamily: options.tooltips.bodyFontFamily, - _bodyFontStyle: options.tooltips.bodyFontStyle, + _bodyFontFamily: helpers.getValueOrDefault(options.tooltips.bodyFontFamily, Chart.defaults.global.defaultFontFamily), + _bodyFontStyle: helpers.getValueOrDefault(options.tooltips.bodyFontStyle, Chart.defaults.global.defaultFontStyle), _bodyAlign: options.tooltips.bodyAlign, - bodyFontSize: options.tooltips.bodyFontSize, + bodyFontSize: helpers.getValueOrDefault(options.tooltips.bodyFontSize, Chart.defaults.global.defaultFontSize), bodySpacing: options.tooltips.bodySpacing, // Title titleColor: options.tooltips.titleColor, - _titleFontFamily: options.tooltips.titleFontFamily, - _titleFontStyle: options.tooltips.titleFontStyle, - titleFontSize: options.tooltips.titleFontSize, + _titleFontFamily: helpers.getValueOrDefault(options.tooltips.titleFontFamily, Chart.defaults.global.defaultFontFamily), + _titleFontStyle: helpers.getValueOrDefault(options.tooltips.titleFontStyle, Chart.defaults.global.defaultFontStyle), + titleFontSize: helpers.getValueOrDefault(options.tooltips.titleFontSize, Chart.defaults.global.defaultFontSize), _titleAlign: options.tooltips.titleAlign, titleSpacing: options.tooltips.titleSpacing, titleMarginBottom: options.tooltips.titleMarginBottom, // Footer footerColor: options.tooltips.footerColor, - _footerFontFamily: options.tooltips.footerFontFamily, - _footerFontStyle: options.tooltips.footerFontStyle, - footerFontSize: options.tooltips.footerFontSize, + _footerFontFamily: helpers.getValueOrDefault(options.tooltips.footerFontFamily, Chart.defaults.global.defaultFontFamily), + _footerFontStyle: helpers.getValueOrDefault(options.tooltips.footerFontStyle, Chart.defaults.global.defaultFontStyle), + footerFontSize: helpers.getValueOrDefault(options.tooltips.footerFontSize, Chart.defaults.global.defaultFontSize), _footerAlign: options.tooltips.footerAlign, footerSpacing: options.tooltips.footerSpacing, footerMarginTop: options.tooltips.footerMarginTop, diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js index b84fc5e14..3f9aaa2a5 100644 --- a/src/scales/scale.linear.js +++ b/src/scales/scale.linear.js @@ -162,12 +162,11 @@ module.exports = function(Chart) { var maxTicks; if (this.isHorizontal()) { - maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, - Math.ceil(this.width / 50)); + maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.width / 50)); } else { // The factor of 2 used to scale the font size has been experimentally determined. - maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, - Math.ceil(this.height / (2 * this.options.ticks.fontSize))); + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); + maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.height / (2 * tickFontSize))); } // Make sure we always have at least 2 ticks diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 7f56d3f0f..a79a41958 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -34,18 +34,9 @@ module.exports = function(Chart) { }, pointLabels: { - //String - Point label font declaration - fontFamily: Chart.defaults.global.defaultFontFamily, - - //String - Point label font weight - fontStyle: Chart.defaults.global.defaultFontStyle, - //Number - Point label font size in pixels fontSize: 10, - //String - Point label font colour - fontColor: Chart.defaults.global.defaultFontColor, - //Function - Used to convert point labels callback: function(label) { return label; @@ -65,7 +56,8 @@ module.exports = function(Chart) { this.yCenter = Math.round(this.height / 2); var minSize = helpers.min([this.height, this.width]); - this.drawingArea = (this.options.display) ? (minSize / 2) - (this.options.ticks.fontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2); + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); + this.drawingArea = (this.options.display) ? (minSize / 2) - (tickFontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2); }, determineDataLimits: function() { this.min = null; @@ -136,8 +128,8 @@ module.exports = function(Chart) { // the axis area. For now, we say that the minimum tick spacing in pixels must be 50 // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on // the graph - var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, - Math.ceil(this.drawingArea / (1.5 * this.options.ticks.fontSize))); + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); + var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.drawingArea / (1.5 * tickFontSize))); maxTicks = Math.max(2, maxTicks); // Make sure we always have at least 2 ticks // To get a "nice" value for the tick spacing, we will use the appropriately named @@ -213,10 +205,14 @@ module.exports = function(Chart) { * https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif */ + var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize); + var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle); + var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily); + var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily); // Get maximum radius of the polygon. Either half the height (minus the text width) or half the width. // Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points - var largestPossibleRadius = helpers.min([(this.height / 2 - this.options.pointLabels.fontSize - 5), this.width / 2]), + var largestPossibleRadius = helpers.min([(this.height / 2 - pointLabelFontSize - 5), this.width / 2]), pointPosition, i, textWidth, @@ -232,7 +228,8 @@ module.exports = function(Chart) { radiusReductionRight, radiusReductionLeft, maxWidthRadius; - this.ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily); + this.ctx.font = pointLabeFont; + for (i = 0; i < this.getValueCount(); i++) { // 5px to space the text slightly out - similar to what we do in the draw function. pointPosition = this.getPointPosition(i, largestPossibleRadius); @@ -357,22 +354,27 @@ module.exports = function(Chart) { } if (this.options.ticks.display) { - ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); + var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor); + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); + var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); + ctx.font = tickLabelFont; if (this.options.ticks.showLabelBackdrop) { var labelWidth = ctx.measureText(label).width; ctx.fillStyle = this.options.ticks.backdropColor; ctx.fillRect( this.xCenter - labelWidth / 2 - this.options.ticks.backdropPaddingX, - yHeight - this.options.ticks.fontSize / 2 - this.options.ticks.backdropPaddingY, + yHeight - tickFontSize / 2 - this.options.ticks.backdropPaddingY, labelWidth + this.options.ticks.backdropPaddingX * 2, - this.options.ticks.fontSize + this.options.ticks.backdropPaddingY * 2 + tickFontSize + this.options.ticks.backdropPaddingY * 2 ); } ctx.textAlign = 'center'; ctx.textBaseline = "middle"; - ctx.fillStyle = this.options.ticks.fontColor; + ctx.fillStyle = tickFontColor; ctx.fillText(label, this.xCenter, yHeight); } } @@ -393,8 +395,15 @@ module.exports = function(Chart) { } // Extra 3px out for some label spacing var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5); - ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily); - ctx.fillStyle = this.options.pointLabels.fontColor; + + var pointLabelFontColor = helpers.getValueOrDefault(this.options.pointLabels.fontColor, Chart.defaults.global.defaultFontColor); + var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize); + var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle); + var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily); + var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily); + + ctx.font = pointLabeFont; + ctx.fillStyle = pointLabelFontColor; var labelsCount = this.pointLabels.length, halfLabelsCount = this.pointLabels.length / 2, diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js index 3e35b5394..b885ae23b 100644 --- a/src/scales/scale.time.js +++ b/src/scales/scale.time.js @@ -145,8 +145,9 @@ module.exports = function(Chart) { this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit, true)); } else { // Determine the smallest needed unit of the time + var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize); var innerWidth = this.isHorizontal() ? this.width - (this.paddingLeft + this.paddingRight) : this.height - (this.paddingTop + this.paddingBottom); - var labelCapacity = innerWidth / (this.options.ticks.fontSize + 10); + var labelCapacity = innerWidth / (tickFontSize + 10); var buffer = this.options.time.round ? 0 : 1; // Start as small as possible diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js index 2d03289ff..f89a7a90e 100644 --- a/test/core.helpers.tests.js +++ b/test/core.helpers.tests.js @@ -225,19 +225,11 @@ describe('Core helper tests', function() { }, position: "right", scaleLabel: { - fontColor: '#666', - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: 'normal', labelString: '', display: false, }, ticks: { beginAtZero: false, - fontColor: "#666", - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: "normal", maxRotation: 90, mirror: false, padding: 10, @@ -263,19 +255,11 @@ describe('Core helper tests', function() { }, position: "left", scaleLabel: { - fontColor: '#666', - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: 'normal', labelString: '', display: false, }, ticks: { beginAtZero: false, - fontColor: "#666", - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: "normal", maxRotation: 90, mirror: false, padding: 10, diff --git a/test/core.legend.tests.js b/test/core.legend.tests.js index 1e411827a..978baae97 100644 --- a/test/core.legend.tests.js +++ b/test/core.legend.tests.js @@ -18,10 +18,6 @@ describe('Legend block tests', function() { labels: { boxWidth: 40, - fontSize: Chart.defaults.global.defaultFontSize, - fontStyle: Chart.defaults.global.defaultFontStyle, - fontColor: Chart.defaults.global.defaultFontColor, - fontFamily: Chart.defaults.global.defaultFontFamily, padding: 10, generateLabels: jasmine.any(Function) } diff --git a/test/core.title.tests.js b/test/core.title.tests.js index 6ddb3d1bd..c18bf8568 100644 --- a/test/core.title.tests.js +++ b/test/core.title.tests.js @@ -11,9 +11,6 @@ describe('Title block tests', function() { display: false, position: 'top', fullWidth: true, - fontColor: Chart.defaults.global.defaultFontColor, - fontFamily: Chart.defaults.global.defaultFontFamily, - fontSize: Chart.defaults.global.defaultFontSize, fontStyle: 'bold', padding: 10, text: '' @@ -146,6 +143,9 @@ describe('Title block tests', function() { title.draw(); expect(context.getCalls()).toEqual([{ + name: 'setFillStyle', + args: ['#666'] + }, { name: 'save', args: [] }, { @@ -154,9 +154,6 @@ describe('Title block tests', function() { }, { name: 'rotate', args: [-0.5 * Math.PI] - }, { - name: 'setFillStyle', - args: ['#666'] }, { name: 'fillText', args: ['My title', 0, 0] @@ -179,6 +176,9 @@ describe('Title block tests', function() { title.draw(); expect(context.getCalls()).toEqual([{ + name: 'setFillStyle', + args: ['#666'] + }, { name: 'save', args: [] }, { @@ -187,9 +187,6 @@ describe('Title block tests', function() { }, { name: 'rotate', args: [0.5 * Math.PI] - }, { - name: 'setFillStyle', - args: ['#666'] }, { name: 'fillText', args: ['My title', 0, 0] diff --git a/test/scale.category.tests.js b/test/scale.category.tests.js index 6389853ad..dd8e4d762 100644 --- a/test/scale.category.tests.js +++ b/test/scale.category.tests.js @@ -24,19 +24,11 @@ describe('Category scale tests', function() { }, position: "bottom", scaleLabel: { - fontColor: '#666', - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: 'normal', labelString: '', display: false, }, ticks: { beginAtZero: false, - fontColor: "#666", - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: "normal", maxRotation: 90, mirror: false, padding: 10, diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index a838da7e5..be6c803d2 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -23,19 +23,11 @@ describe('Linear Scale', function() { }, position: "left", scaleLabel: { - fontColor: '#666', - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: 'normal', labelString: '', display: false, }, ticks: { beginAtZero: false, - fontColor: "#666", - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: "normal", maxRotation: 90, mirror: false, padding: 10, diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js index 8f5df2656..2d315e9da 100644 --- a/test/scale.logarithmic.tests.js +++ b/test/scale.logarithmic.tests.js @@ -22,19 +22,11 @@ describe('Logarithmic Scale tests', function() { }, position: "left", scaleLabel: { - fontColor: '#666', - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: 'normal', labelString: '', display: false, }, ticks: { beginAtZero: false, - fontColor: "#666", - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: "normal", maxRotation: 90, mirror: false, padding: 10, diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js index 784dde032..cd0386a09 100644 --- a/test/scale.radialLinear.tests.js +++ b/test/scale.radialLinear.tests.js @@ -28,18 +28,11 @@ describe('Test the radial linear scale', function() { }, lineArc: false, pointLabels: { - fontColor: "#666", - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", fontSize: 10, - fontStyle: "normal", callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below }, position: "chartArea", scaleLabel: { - fontColor: '#666', - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: 'normal', labelString: '', display: false, }, @@ -48,10 +41,6 @@ describe('Test the radial linear scale', function() { backdropPaddingY: 2, backdropPaddingX: 2, beginAtZero: false, - fontColor: "#666", - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: "normal", maxRotation: 90, mirror: false, padding: 10, diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js index 502329563..93b963dfb 100644 --- a/test/scale.time.tests.js +++ b/test/scale.time.tests.js @@ -27,19 +27,11 @@ describe('Time scale tests', function() { }, position: "bottom", scaleLabel: { - fontColor: '#666', - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: 'normal', labelString: '', display: false, }, ticks: { beginAtZero: false, - fontColor: "#666", - fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 12, - fontStyle: "normal", maxRotation: 90, mirror: false, padding: 10, -- 2.47.2