From: Jukka Kurkela Date: Thu, 31 Dec 2020 06:46:23 +0000 (+0200) Subject: Use provided options in tooltip plugin (#8254) X-Git-Tag: v3.0.0-beta.8~17 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=610461d714b6045776d316596f700378c3602bc0;p=thirdparty%2FChart.js.git Use provided options in tooltip plugin (#8254) --- diff --git a/src/core/core.defaults.js b/src/core/core.defaults.js index 30fc59134..8e0a42773 100644 --- a/src/core/core.defaults.js +++ b/src/core/core.defaults.js @@ -1,4 +1,4 @@ -import {merge, valueOrDefault} from '../helpers/helpers.core'; +import {isObject, merge, valueOrDefault} from '../helpers/helpers.core'; /** * @param {object} node @@ -102,14 +102,19 @@ export class Defaults { Object.defineProperties(scopeObject, { // A private property is defined to hold the actual value, when this property is set in its scope (set in the setter) [privateName]: { + value: scopeObject[name], writable: true }, // The actual property is defined as getter/setter so we can do the routing when value is not locally set. [name]: { enumerable: true, get() { - // @ts-ignore - return valueOrDefault(this[privateName], targetScopeObject[targetName]); + const local = this[privateName]; + const target = targetScopeObject[targetName]; + if (isObject(local)) { + return Object.assign({}, target, local); + } + return valueOrDefault(local, target); }, set(value) { this[privateName] = value; diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index 422069d01..c43cca711 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -1,11 +1,9 @@ import Animations from '../core/core.animations'; -import defaults from '../core/core.defaults'; import Element from '../core/core.element'; -import {valueOrDefault, each, noop, isNullOrUndef, isArray, _elementsEqual, merge} from '../helpers/helpers.core'; +import {each, noop, isNullOrUndef, isArray, _elementsEqual, valueOrDefault} from '../helpers/helpers.core'; import {getRtlAdapter, overrideTextDirection, restoreTextDirection} from '../helpers/helpers.rtl'; import {distanceBetweenPoints} from '../helpers/helpers.math'; -import {toFont} from '../helpers/helpers.options'; -import {drawPoint} from '../helpers'; +import {drawPoint, toFontString} from '../helpers'; /** * @typedef { import("../platform/platform.base").ChartEvent } ChartEvent @@ -133,25 +131,6 @@ function createTooltipItem(chart, item) { }; } -/** - * Helper to get the reset model for the tooltip - * @param options {object} the tooltip options - * @param fallbackFont {object} the fallback font options - */ -function resolveOptions(options, fallbackFont) { - - options = merge(Object.create(null), [defaults.plugins.tooltip, options]); - - options.bodyFont = toFont(options.bodyFont, fallbackFont); - options.titleFont = toFont(options.titleFont, fallbackFont); - options.footerFont = toFont(options.footerFont, fallbackFont); - - options.boxHeight = valueOrDefault(options.boxHeight, options.bodyFont.size); - options.boxWidth = valueOrDefault(options.boxWidth, options.bodyFont.size); - - return options; -} - /** * Get the size of the tooltip */ @@ -196,11 +175,11 @@ function getTooltipSize(tooltip) { ctx.save(); - ctx.font = titleFont.string; + ctx.font = toFontString(titleFont); each(tooltip.title, maxLineWidth); // Body width - ctx.font = bodyFont.string; + ctx.font = toFontString(bodyFont); each(tooltip.beforeBody.concat(tooltip.afterBody), maxLineWidth); // Body lines may include some extra width due to the color box @@ -215,7 +194,7 @@ function getTooltipSize(tooltip) { widthPadding = 0; // Footer width - ctx.font = footerFont.string; + ctx.font = toFontString(footerFont); each(tooltip.footer, maxLineWidth); ctx.restore(); @@ -367,7 +346,7 @@ export class Tooltip extends Element { this._size = undefined; this._cachedAnimations = undefined; this.$animations = undefined; - this.options = undefined; + this.options = config.options; this.dataPoints = undefined; this.title = undefined; this.beforeBody = undefined; @@ -385,15 +364,14 @@ export class Tooltip extends Element { this.labelColors = undefined; this.labelPointStyles = undefined; this.labelTextColors = undefined; - - this.initialize(); } - initialize() { - const me = this; - const chartOpts = me._chart.options; - me.options = resolveOptions(chartOpts.plugins.tooltip, chartOpts.font); - me._cachedAnimations = undefined; + initialize(options) { + const defaultSize = options.bodyFont.size; + options.boxHeight = valueOrDefault(options.boxHeight, defaultSize); + options.boxWidth = valueOrDefault(options.boxWidth, defaultSize); + this.options = options; + this._cachedAnimations = undefined; } /** @@ -654,7 +632,7 @@ export class Tooltip extends Element { titleSpacing = options.titleSpacing; ctx.fillStyle = options.titleColor; - ctx.font = titleFont.string; + ctx.font = toFontString(titleFont); for (i = 0; i < length; ++i) { ctx.fillText(title[i], rtlHelper.x(pt.x), pt.y + titleFont.size / 2); @@ -740,7 +718,7 @@ export class Tooltip extends Element { ctx.textAlign = bodyAlign; ctx.textBaseline = 'middle'; - ctx.font = bodyFont.string; + ctx.font = toFontString(bodyFont); pt.x = getAlignedX(me, bodyAlignForCalculation); @@ -804,7 +782,7 @@ export class Tooltip extends Element { footerFont = options.footerFont; ctx.fillStyle = options.footerColor; - ctx.font = footerFont.string; + ctx.font = toFontString(footerFont); for (i = 0; i < length; ++i) { ctx.fillText(footer[i], rtlHelper.x(pt.x), pt.y + footerFont.size / 2); @@ -1047,23 +1025,21 @@ export default { _element: Tooltip, positioners, - afterInit(chart) { - const tooltipOpts = chart.options.plugins.tooltip; - - if (tooltipOpts) { - chart.tooltip = new Tooltip({_chart: chart}); + afterInit(chart, _args, options) { + if (options) { + chart.tooltip = new Tooltip({_chart: chart, options}); } }, - beforeUpdate(chart) { + beforeUpdate(chart, _args, options) { if (chart.tooltip) { - chart.tooltip.initialize(); + chart.tooltip.initialize(options); } }, - reset(chart) { + reset(chart, _args, options) { if (chart.tooltip) { - chart.tooltip.initialize(); + chart.tooltip.initialize(options); } }, @@ -1214,4 +1190,10 @@ export default { afterFooter: noop } }, + + defaultRoutes: { + bodyFont: 'font', + footerFont: 'font', + titleFont: 'font' + } }; diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js index c353374fc..987361e73 100644 --- a/test/specs/plugin.tooltip.tests.js +++ b/test/specs/plugin.tooltip.tests.js @@ -1344,37 +1344,39 @@ describe('Plugin.Tooltip', function() { yAlign: 'top', options: { + enabled: true, + xPadding: 5, yPadding: 5, // Body bodyFont: { - color: '#fff', family: defaults.font.family, style: defaults.font.style, size: defaults.font.size, }, + bodyColor: '#fff', bodyAlign: body, bodySpacing: 2, // Title titleFont: { - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, }, + titleColor: '#fff', titleAlign: title, titleSpacing: 2, titleMarginBottom: 6, // Footer footerFont: { - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, }, + footerColor: '#fff', footerAlign: footer, footerSpacing: 2, footerMarginTop: 6,