From e534445130856fc70db5ba1a61bc11621550bb61 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Sun, 14 Mar 2021 13:06:58 +0200 Subject: [PATCH] Allow tooltip callback override in dataset --- docs/docs/configuration/tooltip.md | 34 ++++++++++++++++-------------- src/plugins/plugin.tooltip.js | 19 +++++++++++------ 2 files changed, 31 insertions(+), 22 deletions(-) diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md index 494fbb3bb8e..6e928fcf132 100644 --- a/docs/docs/configuration/tooltip.md +++ b/docs/docs/configuration/tooltip.md @@ -102,24 +102,26 @@ Allows filtering of [tooltip items](#tooltip-item-context). Must implement at mi Namespace: `options.plugins.tooltip.callbacks`, the tooltip has the following callbacks for providing text. For all functions, `this` will be the tooltip object created from the `Tooltip` constructor. +Namespace: `data.datasets[].tooltip.callbacks`, items marked with `Yes` in the column `Dataset override` can be overridden per dataset. + All functions are called with the same arguments: a [tooltip item context](#tooltip-item-context). All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text. -| Name | Arguments | Description -| ---- | --------- | ----------- -| `beforeTitle` | `TooltipItem[], object` | Returns the text to render before the title. -| `title` | `TooltipItem[], object` | Returns text to render as the title of the tooltip. -| `afterTitle` | `TooltipItem[], object` | Returns text to render after the title. -| `beforeBody` | `TooltipItem[], object` | Returns text to render before the body section. -| `beforeLabel` | `TooltipItem, object` | Returns text to render before an individual label. This will be called for each item in the tooltip. -| `label` | `TooltipItem, object` | Returns text to render for an individual item in the tooltip. [more...](#label-callback) -| `labelColor` | `TooltipItem, Chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback) -| `labelTextColor` | `TooltipItem, Chart` | Returns the colors for the text of the label for the tooltip item. -| `labelPointStyle` | `TooltipItem, Chart` | Returns the point style to use instead of color boxes if usePointStyle is true (object with values `pointStyle` and `rotation`). Default implementation uses the point style from the dataset points. [more...](#label-point-style-callback) -| `afterLabel` | `TooltipItem, object` | Returns text to render after an individual label. -| `afterBody` | `TooltipItem[], object` | Returns text to render after the body section. -| `beforeFooter` | `TooltipItem[], object` | Returns text to render before the footer section. -| `footer` | `TooltipItem[], object` | Returns text to render as the footer of the tooltip. -| `afterFooter` | `TooltipItem[], object` | Text to render after the footer section. +| Name | Arguments | Dataset override | Description +| ---- | --------- | ---------------- | ----------- +| `beforeTitle` | `TooltipItem[], object` | | Returns the text to render before the title. +| `title` | `TooltipItem[], object` | | Returns text to render as the title of the tooltip. +| `afterTitle` | `TooltipItem[], object` | | Returns text to render after the title. +| `beforeBody` | `TooltipItem[], object` | | Returns text to render before the body section. +| `beforeLabel` | `TooltipItem, object` | Yes | Returns text to render before an individual label. This will be called for each item in the tooltip. +| `label` | `TooltipItem, object` | Yes | Returns text to render for an individual item in the tooltip. [more...](#label-callback) +| `labelColor` | `TooltipItem, Chart` | Yes | Returns the colors to render for the tooltip item. [more...](#label-color-callback) +| `labelTextColor` | `TooltipItem, Chart` | Yes | Returns the colors for the text of the label for the tooltip item. +| `labelPointStyle` | `TooltipItem, Chart` | Yes | Returns the point style to use instead of color boxes if usePointStyle is true (object with values `pointStyle` and `rotation`). Default implementation uses the point style from the dataset points. [more...](#label-point-style-callback) +| `afterLabel` | `TooltipItem, object` | Yes | Returns text to render after an individual label. +| `afterBody` | `TooltipItem[], object` | | Returns text to render after the body section. +| `beforeFooter` | `TooltipItem[], object` | | Returns text to render before the footer section. +| `footer` | `TooltipItem[], object` | | Returns text to render as the footer of the tooltip. +| `afterFooter` | `TooltipItem[], object` | | Text to render after the footer section. ### Label Callback diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index 9660e2cfd2c..fa6859b03ec 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -350,6 +350,11 @@ function createTooltipContext(parent, tooltip, tooltipItems) { }); } +function overrideCallbacks(callbacks, context) { + const override = context && context.dataset && context.dataset.tooltip && context.dataset.tooltip.callbacks; + return override ? callbacks.override(override) : callbacks; +} + export class Tooltip extends Element { constructor(config) { super(); @@ -451,9 +456,10 @@ export class Tooltip extends Element { lines: [], after: [] }; - pushOrConcat(bodyItem.before, splitNewlines(callbacks.beforeLabel.call(me, context))); - pushOrConcat(bodyItem.lines, callbacks.label.call(me, context)); - pushOrConcat(bodyItem.after, splitNewlines(callbacks.afterLabel.call(me, context))); + const scoped = overrideCallbacks(callbacks, context); + pushOrConcat(bodyItem.before, splitNewlines(scoped.beforeLabel.call(me, context))); + pushOrConcat(bodyItem.lines, scoped.label.call(me, context)); + pushOrConcat(bodyItem.after, splitNewlines(scoped.afterLabel.call(me, context))); bodyItems.push(bodyItem); }); @@ -511,9 +517,10 @@ export class Tooltip extends Element { // Determine colors for boxes each(tooltipItems, (context) => { - labelColors.push(options.callbacks.labelColor.call(me, context)); - labelPointStyles.push(options.callbacks.labelPointStyle.call(me, context)); - labelTextColors.push(options.callbacks.labelTextColor.call(me, context)); + const scoped = overrideCallbacks(options.callbacks, context); + labelColors.push(scoped.labelColor.call(me, context)); + labelPointStyles.push(scoped.labelPointStyle.call(me, context)); + labelTextColors.push(scoped.labelTextColor.call(me, context)); }); me.labelColors = labelColors;