From 6a8096ea2135aec7180c1f667acb07259089df94 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Tue, 2 Mar 2021 17:39:16 -0500 Subject: [PATCH 1/5] Update plugin to use it's own tooltip context --- src/plugins/plugin.tooltip.js | 133 +++++++++++++++++++--------------- 1 file changed, 75 insertions(+), 58 deletions(-) diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index 7adcd2604e5..16aef128d7e 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -136,9 +136,9 @@ function createTooltipItem(chart, item) { /** * Get the size of the tooltip */ -function getTooltipSize(tooltip) { +function getTooltipSize(tooltip, options) { const ctx = tooltip._chart.ctx; - const {body, footer, options, title} = tooltip; + const {body, footer, title} = tooltip; const {bodyFont, footerFont, titleFont, boxWidth, boxHeight} = options; const titleLineCount = title.length; const footerLineCount = footer.length; @@ -322,8 +322,7 @@ function getBackgroundPoint(options, size, alignment, chart) { return {x, y}; } -function getAlignedX(tooltip, align) { - const options = tooltip.options; +function getAlignedX(tooltip, align, options) { const padding = toPadding(options.padding); return align === 'center' @@ -340,6 +339,14 @@ function getBeforeAfterBodyLines(callback) { return pushOrConcat([], splitNewlines(callback)); } +function createTooltipContext(parent, tooltip, tooltipItems) { + return Object.assign(Object.create(parent), { + tooltip, + tooltipItems, + type: 'tooltip' + }); +} + export class Tooltip extends Element { constructor(config) { super(); @@ -350,7 +357,9 @@ export class Tooltip extends Element { this._eventPosition = undefined; this._size = undefined; this._cachedAnimations = undefined; + this._tooltipItems = []; this.$animations = undefined; + this.$context = undefined; this.options = config.options; this.dataPoints = undefined; this.title = undefined; @@ -374,6 +383,7 @@ export class Tooltip extends Element { initialize(options) { this.options = options; this._cachedAnimations = undefined; + this.$context = undefined; } /** @@ -388,7 +398,7 @@ export class Tooltip extends Element { } const chart = me._chart; - const options = me.options; + const options = me.options.setContext(me.getContext()); const opts = options.enabled && chart.options.animation && options.animations; const animations = new Animations(me._chart, opts); if (opts._cacheable) { @@ -398,10 +408,18 @@ export class Tooltip extends Element { return animations; } - getTitle(context) { + /** + * @protected + */ + getContext() { + const me = this; + return me.$context || + (me.$context = createTooltipContext(me._chart.getContext(), me, me._tooltipItems)); + } + + getTitle(context, options) { const me = this; - const opts = me.options; - const callbacks = opts.callbacks; + const {callbacks} = options; const beforeTitle = callbacks.beforeTitle.apply(me, [context]); const title = callbacks.title.apply(me, [context]); @@ -415,13 +433,13 @@ export class Tooltip extends Element { return lines; } - getBeforeBody(tooltipItems) { - return getBeforeAfterBodyLines(this.options.callbacks.beforeBody.apply(this, [tooltipItems])); + getBeforeBody(tooltipItems, options) { + return getBeforeAfterBodyLines(options.callbacks.beforeBody.apply(this, [tooltipItems])); } - getBody(tooltipItems) { + getBody(tooltipItems, options) { const me = this; - const callbacks = me.options.callbacks; + const {callbacks} = options; const bodyItems = []; each(tooltipItems, (context) => { @@ -440,14 +458,14 @@ export class Tooltip extends Element { return bodyItems; } - getAfterBody(tooltipItems) { - return getBeforeAfterBodyLines(this.options.callbacks.afterBody.apply(this, [tooltipItems])); + getAfterBody(tooltipItems, options) { + return getBeforeAfterBodyLines(options.callbacks.afterBody.apply(this, [tooltipItems])); } // Get the footer and beforeFooter and afterFooter lines - getFooter(tooltipItems) { + getFooter(tooltipItems, options) { const me = this; - const callbacks = me.options.callbacks; + const {callbacks} = options; const beforeFooter = callbacks.beforeFooter.apply(me, [tooltipItems]); const footer = callbacks.footer.apply(me, [tooltipItems]); @@ -464,10 +482,9 @@ export class Tooltip extends Element { /** * @private */ - _createItems() { + _createItems(options) { const me = this; const active = me._active; - const options = me.options; const data = me._chart.data; const labelColors = []; const labelPointStyles = []; @@ -505,9 +522,10 @@ export class Tooltip extends Element { update(changed) { const me = this; - const options = me.options; + const options = me.options.setContext(me.getContext()); const active = me._active; let properties; + let tooltipItems = []; if (!active.length) { if (me.opacity !== 0) { @@ -517,15 +535,15 @@ export class Tooltip extends Element { } } else { const position = positioners[options.position].call(me, active, me._eventPosition); - const tooltipItems = me._createItems(); + tooltipItems = me._createItems(options); - me.title = me.getTitle(tooltipItems); - me.beforeBody = me.getBeforeBody(tooltipItems); - me.body = me.getBody(tooltipItems); - me.afterBody = me.getAfterBody(tooltipItems); - me.footer = me.getFooter(tooltipItems); + me.title = me.getTitle(tooltipItems, options); + me.beforeBody = me.getBeforeBody(tooltipItems, options); + me.body = me.getBody(tooltipItems, options); + me.afterBody = me.getAfterBody(tooltipItems, options); + me.footer = me.getFooter(tooltipItems, options); - const size = me._size = getTooltipSize(me); + const size = me._size = getTooltipSize(me, options); const positionAndSize = Object.assign({}, position, size); const alignment = determineAlignment(me._chart, options, positionAndSize); const backgroundPoint = getBackgroundPoint(options, positionAndSize, alignment, me._chart); @@ -544,6 +562,9 @@ export class Tooltip extends Element { }; } + me._tooltipItems = tooltipItems; + me.$context = undefined; + if (properties) { me._resolveAnimations().update(me, properties); } @@ -553,16 +574,16 @@ export class Tooltip extends Element { } } - drawCaret(tooltipPoint, ctx, size) { - const caretPosition = this.getCaretPosition(tooltipPoint, size); + drawCaret(tooltipPoint, ctx, size, options) { + const caretPosition = this.getCaretPosition(tooltipPoint, size, options); ctx.lineTo(caretPosition.x1, caretPosition.y1); ctx.lineTo(caretPosition.x2, caretPosition.y2); ctx.lineTo(caretPosition.x3, caretPosition.y3); } - getCaretPosition(tooltipPoint, size) { - const {xAlign, yAlign, options} = this; + getCaretPosition(tooltipPoint, size, options) { + const {xAlign, yAlign} = this; const {cornerRadius, caretSize} = options; const {x: ptX, y: ptY} = tooltipPoint; const {width, height} = size; @@ -617,9 +638,8 @@ export class Tooltip extends Element { return {x1, x2, x3, y1, y2, y3}; } - drawTitle(pt, ctx) { + drawTitle(pt, ctx, options) { const me = this; - const options = me.options; const title = me.title; const length = title.length; let titleFont, titleSpacing, i; @@ -627,7 +647,7 @@ export class Tooltip extends Element { if (length) { const rtlHelper = getRtlAdapter(options.rtl, me.x, me.width); - pt.x = getAlignedX(me, options.titleAlign); + pt.x = getAlignedX(me, options.titleAlign, options); ctx.textAlign = rtlHelper.textAlign(options.titleAlign); ctx.textBaseline = 'middle'; @@ -652,13 +672,12 @@ export class Tooltip extends Element { /** * @private */ - _drawColorBox(ctx, pt, i, rtlHelper) { + _drawColorBox(ctx, pt, i, rtlHelper, options) { const me = this; - const options = me.options; const labelColors = me.labelColors[i]; const labelPointStyle = me.labelPointStyles[i]; const {boxHeight, boxWidth, bodyFont} = options; - const colorX = getAlignedX(me, 'left'); + const colorX = getAlignedX(me, 'left', options); const rtlColorX = rtlHelper.x(colorX); const yOffSet = boxHeight < bodyFont.size ? (bodyFont.size - boxHeight) / 2 : 0; const colorY = pt.y + yOffSet; @@ -703,9 +722,9 @@ export class Tooltip extends Element { ctx.fillStyle = me.labelTextColors[i]; } - drawBody(pt, ctx) { + drawBody(pt, ctx, options) { const me = this; - const {body, options} = me; + const {body} = me; const {bodyFont, bodySpacing, bodyAlign, displayColors, boxHeight, boxWidth} = options; let bodyLineHeight = bodyFont.size; let xLinePadding = 0; @@ -724,7 +743,7 @@ export class Tooltip extends Element { ctx.textBaseline = 'middle'; ctx.font = toFontString(bodyFont); - pt.x = getAlignedX(me, bodyAlignForCalculation); + pt.x = getAlignedX(me, bodyAlignForCalculation, options); // Before body lines ctx.fillStyle = options.bodyColor; @@ -745,7 +764,7 @@ export class Tooltip extends Element { lines = bodyItem.lines; // Draw Legend-like boxes if needed if (displayColors && lines.length) { - me._drawColorBox(ctx, pt, i, rtlHelper); + me._drawColorBox(ctx, pt, i, rtlHelper, options); bodyLineHeight = Math.max(bodyFont.size, boxHeight); } @@ -767,9 +786,8 @@ export class Tooltip extends Element { pt.y -= bodySpacing; // Remove last body spacing } - drawFooter(pt, ctx) { + drawFooter(pt, ctx, options) { const me = this; - const options = me.options; const footer = me.footer; const length = footer.length; let footerFont, i; @@ -777,7 +795,7 @@ export class Tooltip extends Element { if (length) { const rtlHelper = getRtlAdapter(options.rtl, me.x, me.width); - pt.x = getAlignedX(me, options.footerAlign); + pt.x = getAlignedX(me, options.footerAlign, options); pt.y += options.footerMarginTop; ctx.textAlign = rtlHelper.textAlign(options.footerAlign); @@ -795,8 +813,8 @@ export class Tooltip extends Element { } } - drawBackground(pt, ctx, tooltipSize) { - const {xAlign, yAlign, options} = this; + drawBackground(pt, ctx, tooltipSize, options) { + const {xAlign, yAlign} = this; const {x, y} = pt; const {width, height} = tooltipSize; const radius = options.cornerRadius; @@ -808,22 +826,22 @@ export class Tooltip extends Element { ctx.beginPath(); ctx.moveTo(x + radius, y); if (yAlign === 'top') { - this.drawCaret(pt, ctx, tooltipSize); + this.drawCaret(pt, ctx, tooltipSize, options); } ctx.lineTo(x + width - radius, y); ctx.quadraticCurveTo(x + width, y, x + width, y + radius); if (yAlign === 'center' && xAlign === 'right') { - this.drawCaret(pt, ctx, tooltipSize); + this.drawCaret(pt, ctx, tooltipSize, options); } ctx.lineTo(x + width, y + height - radius); ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); if (yAlign === 'bottom') { - this.drawCaret(pt, ctx, tooltipSize); + this.drawCaret(pt, ctx, tooltipSize, options); } ctx.lineTo(x + radius, y + height); ctx.quadraticCurveTo(x, y + height, x, y + height - radius); if (yAlign === 'center' && xAlign === 'left') { - this.drawCaret(pt, ctx, tooltipSize); + this.drawCaret(pt, ctx, tooltipSize, options); } ctx.lineTo(x, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); @@ -840,10 +858,9 @@ export class Tooltip extends Element { * Update x/y animation targets when _active elements are animating too * @private */ - _updateAnimationTarget() { + _updateAnimationTarget(options) { const me = this; const chart = me._chart; - const options = me.options; const anims = me.$animations; const animX = anims && anims.x; const animY = anims && anims.y; @@ -852,7 +869,7 @@ export class Tooltip extends Element { if (!position) { return; } - const size = me._size = getTooltipSize(me); + const size = me._size = getTooltipSize(me, options); const positionAndSize = Object.assign({}, position, me._size); const alignment = determineAlignment(chart, options, positionAndSize); const point = getBackgroundPoint(options, positionAndSize, alignment, chart); @@ -870,14 +887,14 @@ export class Tooltip extends Element { draw(ctx) { const me = this; - const options = me.options; + const options = me.options.setContext(me.getContext()); let opacity = me.opacity; if (!opacity) { return; } - me._updateAnimationTarget(); + me._updateAnimationTarget(options); const tooltipSize = { width: me.width, @@ -901,20 +918,20 @@ export class Tooltip extends Element { ctx.globalAlpha = opacity; // Draw Background - me.drawBackground(pt, ctx, tooltipSize); + me.drawBackground(pt, ctx, tooltipSize, options); overrideTextDirection(ctx, options.textDirection); pt.y += padding.top; // Titles - me.drawTitle(pt, ctx); + me.drawTitle(pt, ctx, options); // Body - me.drawBody(pt, ctx); + me.drawBody(pt, ctx, options); // Footer - me.drawFooter(pt, ctx); + me.drawFooter(pt, ctx, options); restoreTextDirection(ctx, options.textDirection); From a2bdac31c4e0307400ff0e0ccd8903b22e8e116a Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Tue, 2 Mar 2021 17:59:51 -0500 Subject: [PATCH 2/5] Scriptable tooltip option types --- types/index.esm.d.ts | 72 ++++++++++--------- .../tooltip_scriptable_background_color.ts | 18 +++++ 2 files changed, 58 insertions(+), 32 deletions(-) create mode 100644 types/tests/plugins/plugin.tooltip/tooltip_scriptable_background_color.ts diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 370ff849550..786e29e46c2 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2315,12 +2315,20 @@ export interface ExtendedPlugin< */ afterTooltipDraw?(chart: Chart, args: { tooltip: Model }, options: O): void; } + +export interface ScriptableTooltipContext { + chart: Chart; + tooltip: TooltipModel; + tooltipItems: TooltipItem[]; +} +export type ScriptableTooltip = T | (TType extends ChartType ? { [TT in TType]: ((ctx: ScriptableTooltipContext) => T) }[TType] : ((ctx: TType) => T)); + export interface TooltipOptions extends CoreInteractionOptions { /** * Are on-canvas tooltips enabled? * @default true */ - enabled: boolean; + enabled: ScriptableTooltip; /** * See custom tooltip section. */ @@ -2328,13 +2336,13 @@ export interface TooltipOptions extends CoreInteraction /** * The mode for positioning the tooltip */ - position: 'average' | 'nearest'; + position: ScriptableTooltip<'average' | 'nearest', TType> /** * Override the tooltip alignment calculations */ - xAlign: TooltipAlignment; - yAlign: TooltipAlignment; + xAlign: ScriptableTooltip; + yAlign: ScriptableTooltip; /** * Sort tooltip items. @@ -2347,142 +2355,142 @@ export interface TooltipOptions extends CoreInteraction * Background color of the tooltip. * @default 'rgba(0, 0, 0, 0.8)' */ - backgroundColor: Color; + backgroundColor: ScriptableTooltip; /** * Color of title * @default '#fff' */ - titleColor: Color; + titleColor: ScriptableTooltip; /** * See Fonts * @default {style: 'bold'} */ - titleFont: FontSpec; + titleFont: ScriptableTooltip; /** * Spacing to add to top and bottom of each title line. * @default 2 */ - titleSpacing: number; + titleSpacing: ScriptableTooltip; /** * Margin to add on bottom of title section. * @default 6 */ - titleMarginBottom: number; + titleMarginBottom: ScriptableTooltip; /** * Horizontal alignment of the title text lines. * @default 'left' */ - titleAlign: TextAlign; + titleAlign: ScriptableTooltip; /** * Spacing to add to top and bottom of each tooltip item. * @default 2 */ - bodySpacing: number; + bodySpacing: ScriptableTooltip; /** * Color of body * @default '#fff' */ - bodyColor: Color; + bodyColor: ScriptableTooltip; /** * See Fonts. * @default {} */ - bodyFont: FontSpec; + bodyFont: ScriptableTooltip; /** * Horizontal alignment of the body text lines. * @default 'left' */ - bodyAlign: TextAlign; + bodyAlign: ScriptableTooltip; /** * Spacing to add to top and bottom of each footer line. * @default 2 */ - footerSpacing: number; + footerSpacing: ScriptableTooltip; /** * Margin to add before drawing the footer. * @default 6 */ - footerMarginTop: number; + footerMarginTop: ScriptableTooltip; /** * Color of footer * @default '#fff' */ - footerColor: Color; + footerColor: ScriptableTooltip; /** * See Fonts * @default {style: 'bold'} */ - footerFont: FontSpec; + footerFont: ScriptableTooltip; /** * Horizontal alignment of the footer text lines. * @default 'left' */ - footerAlign: TextAlign; + footerAlign: ScriptableTooltip; /** * Padding to add to the tooltip * @default 6 */ - padding: number | ChartArea; + padding: ScriptableTooltip; /** * Extra distance to move the end of the tooltip arrow away from the tooltip point. * @default 2 */ - caretPadding: number; + caretPadding: ScriptableTooltip; /** * Size, in px, of the tooltip arrow. * @default 5 */ - caretSize: number; + caretSize: ScriptableTooltip; /** * Radius of tooltip corner curves. * @default 6 */ - cornerRadius: number; + cornerRadius: ScriptableTooltip; /** * Color to draw behind the colored boxes when multiple items are in the tooltip. * @default '#fff' */ - multiKeyBackground: Color; + multiKeyBackground: ScriptableTooltip; /** * If true, color boxes are shown in the tooltip. * @default true */ - displayColors: boolean; + displayColors: ScriptableTooltip; /** * Width of the color box if displayColors is true. * @default bodyFont.size */ - boxWidth: number; + boxWidth: ScriptableTooltip; /** * Height of the color box if displayColors is true. * @default bodyFont.size */ - boxHeight: number; + boxHeight: ScriptableTooltip; /** * Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight) * @default false */ - usePointStyle: boolean; + usePointStyle: ScriptableTooltip; /** * Color of the border. * @default 'rgba(0, 0, 0, 0)' */ - borderColor: Color; + borderColor: ScriptableTooltip; /** * Size of the border. * @default 0 */ - borderWidth: number; + borderWidth: ScriptableTooltip; /** * true for rendering the legends from right to left. */ - rtl: boolean; + rtl: ScriptableTooltip; /** * This will force the text direction 'rtl' or 'ltr on the canvas for rendering the tooltips, regardless of the css specified on the canvas * @default canvas's default */ - textDirection: string; + textDirection: ScriptableTooltip; animation: AnimationSpec; animations: AnimationsSpec; diff --git a/types/tests/plugins/plugin.tooltip/tooltip_scriptable_background_color.ts b/types/tests/plugins/plugin.tooltip/tooltip_scriptable_background_color.ts new file mode 100644 index 00000000000..a55d4454781 --- /dev/null +++ b/types/tests/plugins/plugin.tooltip/tooltip_scriptable_background_color.ts @@ -0,0 +1,18 @@ +import { Chart } from '../../../index.esm'; + +const chart = new Chart('id', { + type: 'bar', + data: { + labels: [], + datasets: [{ + data: [] + }] + }, + options: { + plugins: { + tooltip: { + backgroundColor: (ctx) => 'black', + } + } + }, +}); From 9d38d29b93810fe1d1a4c0e513c27667645213a7 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Tue, 2 Mar 2021 18:19:18 -0500 Subject: [PATCH 3/5] Tests --- test/specs/plugin.tooltip.tests.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js index 9a7291d6216..836b499fa78 100644 --- a/test/specs/plugin.tooltip.tests.js +++ b/test/specs/plugin.tooltip.tests.js @@ -1265,7 +1265,7 @@ describe('Plugin.Tooltip', function() { describe('text align', function() { var defaults = Chart.defaults; var makeView = function(title, body, footer) { - return { + const model = { // Positioning x: 100, y: 100, @@ -1275,6 +1275,7 @@ describe('Plugin.Tooltip', function() { yAlign: 'top', options: { + setContext: () => model.options, enabled: true, padding: 5, @@ -1343,6 +1344,7 @@ describe('Plugin.Tooltip', function() { backgroundColor: 'rgb(0, 255, 255)' }] }; + return model; }; var drawBody = [ {name: 'save', args: []}, @@ -1370,6 +1372,7 @@ describe('Plugin.Tooltip', function() { var mockContext = window.createMockContext(); var tooltip = new Tooltip({ _chart: { + getContext: () => ({}), options: { plugins: { tooltip: { From 9761d9570c665d7b8497f85679d1247d945ac1da Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Wed, 3 Mar 2021 16:44:35 -0500 Subject: [PATCH 4/5] Update types to use UnionToIntersection --- types/index.esm.d.ts | 71 ++++++++++++++++++++++---------------------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 786e29e46c2..52f42ced7bb 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2317,18 +2317,17 @@ export interface ExtendedPlugin< } export interface ScriptableTooltipContext { - chart: Chart; - tooltip: TooltipModel; - tooltipItems: TooltipItem[]; + chart: UnionToIntersection>; + tooltip: UnionToIntersection>; + tooltipItems: UnionToIntersection[]>; } -export type ScriptableTooltip = T | (TType extends ChartType ? { [TT in TType]: ((ctx: ScriptableTooltipContext) => T) }[TType] : ((ctx: TType) => T)); export interface TooltipOptions extends CoreInteractionOptions { /** * Are on-canvas tooltips enabled? * @default true */ - enabled: ScriptableTooltip; + enabled: Scriptable>; /** * See custom tooltip section. */ @@ -2336,13 +2335,13 @@ export interface TooltipOptions extends CoreInteraction /** * The mode for positioning the tooltip */ - position: ScriptableTooltip<'average' | 'nearest', TType> + position: Scriptable<'average' | 'nearest', ScriptableTooltipContext> /** * Override the tooltip alignment calculations */ - xAlign: ScriptableTooltip; - yAlign: ScriptableTooltip; + xAlign: Scriptable>; + yAlign: Scriptable>; /** * Sort tooltip items. @@ -2355,142 +2354,142 @@ export interface TooltipOptions extends CoreInteraction * Background color of the tooltip. * @default 'rgba(0, 0, 0, 0.8)' */ - backgroundColor: ScriptableTooltip; + backgroundColor: Scriptable>; /** * Color of title * @default '#fff' */ - titleColor: ScriptableTooltip; + titleColor: Scriptable>; /** * See Fonts * @default {style: 'bold'} */ - titleFont: ScriptableTooltip; + titleFont: Scriptable>; /** * Spacing to add to top and bottom of each title line. * @default 2 */ - titleSpacing: ScriptableTooltip; + titleSpacing: Scriptable>; /** * Margin to add on bottom of title section. * @default 6 */ - titleMarginBottom: ScriptableTooltip; + titleMarginBottom: Scriptable>; /** * Horizontal alignment of the title text lines. * @default 'left' */ - titleAlign: ScriptableTooltip; + titleAlign: Scriptable>; /** * Spacing to add to top and bottom of each tooltip item. * @default 2 */ - bodySpacing: ScriptableTooltip; + bodySpacing: Scriptable>; /** * Color of body * @default '#fff' */ - bodyColor: ScriptableTooltip; + bodyColor: Scriptable>; /** * See Fonts. * @default {} */ - bodyFont: ScriptableTooltip; + bodyFont: Scriptable>; /** * Horizontal alignment of the body text lines. * @default 'left' */ - bodyAlign: ScriptableTooltip; + bodyAlign: Scriptable>; /** * Spacing to add to top and bottom of each footer line. * @default 2 */ - footerSpacing: ScriptableTooltip; + footerSpacing: Scriptable>; /** * Margin to add before drawing the footer. * @default 6 */ - footerMarginTop: ScriptableTooltip; + footerMarginTop: Scriptable>; /** * Color of footer * @default '#fff' */ - footerColor: ScriptableTooltip; + footerColor: Scriptable>; /** * See Fonts * @default {style: 'bold'} */ - footerFont: ScriptableTooltip; + footerFont: Scriptable>; /** * Horizontal alignment of the footer text lines. * @default 'left' */ - footerAlign: ScriptableTooltip; + footerAlign: Scriptable>; /** * Padding to add to the tooltip * @default 6 */ - padding: ScriptableTooltip; + padding: Scriptable>; /** * Extra distance to move the end of the tooltip arrow away from the tooltip point. * @default 2 */ - caretPadding: ScriptableTooltip; + caretPadding: Scriptable>; /** * Size, in px, of the tooltip arrow. * @default 5 */ - caretSize: ScriptableTooltip; + caretSize: Scriptable>; /** * Radius of tooltip corner curves. * @default 6 */ - cornerRadius: ScriptableTooltip; + cornerRadius: Scriptable>; /** * Color to draw behind the colored boxes when multiple items are in the tooltip. * @default '#fff' */ - multiKeyBackground: ScriptableTooltip; + multiKeyBackground: Scriptable>; /** * If true, color boxes are shown in the tooltip. * @default true */ - displayColors: ScriptableTooltip; + displayColors: Scriptable>; /** * Width of the color box if displayColors is true. * @default bodyFont.size */ - boxWidth: ScriptableTooltip; + boxWidth: Scriptable>; /** * Height of the color box if displayColors is true. * @default bodyFont.size */ - boxHeight: ScriptableTooltip; + boxHeight: Scriptable>; /** * Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight) * @default false */ - usePointStyle: ScriptableTooltip; + usePointStyle: Scriptable>; /** * Color of the border. * @default 'rgba(0, 0, 0, 0)' */ - borderColor: ScriptableTooltip; + borderColor: Scriptable>; /** * Size of the border. * @default 0 */ - borderWidth: ScriptableTooltip; + borderWidth: Scriptable>; /** * true for rendering the legends from right to left. */ - rtl: ScriptableTooltip; + rtl: Scriptable>; /** * This will force the text direction 'rtl' or 'ltr on the canvas for rendering the tooltips, regardless of the css specified on the canvas * @default canvas's default */ - textDirection: ScriptableTooltip; + textDirection: Scriptable>; animation: AnimationSpec; animations: AnimationsSpec; From 45f674c59c210a4eb204e9b16314940351459694 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Wed, 3 Mar 2021 20:59:23 -0500 Subject: [PATCH 5/5] Update TooltipItem to use UnionToIntersection --- types/index.esm.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 52f42ced7bb..29f66fb1dea 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2319,7 +2319,7 @@ export interface ExtendedPlugin< export interface ScriptableTooltipContext { chart: UnionToIntersection>; tooltip: UnionToIntersection>; - tooltipItems: UnionToIntersection[]>; + tooltipItems: TooltipItem[]; } export interface TooltipOptions extends CoreInteractionOptions { @@ -2510,7 +2510,7 @@ export interface TooltipItem { /** * Parsed data values for the given `dataIndex` and `datasetIndex` */ - parsed: ParsedDataType; + parsed: UnionToIntersection>; /** * Raw data values for the given `dataIndex` and `datasetIndex`