From f5c9a656eff999a07c2e3eebf19ee4c46efdfbfa Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Mon, 6 Sep 2021 09:13:21 -0400 Subject: [PATCH] Configurable tooltip box padding (#9625) --- docs/configuration/tooltip.md | 1 + src/plugins/plugin.tooltip.js | 13 ++-- test/fixtures/plugin.tooltip/box-padding.js | 71 +++++++++++++++++++ test/fixtures/plugin.tooltip/box-padding.png | Bin 0 -> 14617 bytes types/index.esm.d.ts | 5 ++ 5 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 test/fixtures/plugin.tooltip/box-padding.js create mode 100644 test/fixtures/plugin.tooltip/box-padding.png diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 936f9202c57..2c68ed9d773 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -37,6 +37,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips | `displayColors` | `boolean` | `true` | If true, color boxes are shown in the tooltip. | `boxWidth` | `number` | `bodyFont.size` | Width of the color box if displayColors is true. | `boxHeight` | `number` | `bodyFont.size` | Height of the color box if displayColors is true. +| `boxPadding` | `number` | `1` | Padding between the color box and the text. | `usePointStyle` | `boolean` | `false` | 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). | `borderColor` | [`Color`](../general/colors.md) | `'rgba(0, 0, 0, 0)'` | Color of the border. | `borderWidth` | `number` | `0` | Size of the border. diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index 231506b7363..f932cb15fbf 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -187,7 +187,7 @@ function getTooltipSize(tooltip, options) { each(tooltip.beforeBody.concat(tooltip.afterBody), maxLineWidth); // Body lines may include some extra width due to the color box - widthPadding = options.displayColors ? (boxWidth + 2) : 0; + widthPadding = options.displayColors ? (boxWidth + 2 + options.boxPadding) : 0; each(body, (bodyItem) => { each(bodyItem.before, maxLineWidth); each(bodyItem.lines, maxLineWidth); @@ -681,7 +681,7 @@ export class Tooltip extends Element { const me = this; const labelColors = me.labelColors[i]; const labelPointStyle = me.labelPointStyles[i]; - const {boxHeight, boxWidth} = options; + const {boxHeight, boxWidth, boxPadding} = options; const bodyFont = toFont(options.bodyFont); const colorX = getAlignedX(me, 'left', options); const rtlColorX = rtlHelper.x(colorX); @@ -717,8 +717,8 @@ export class Tooltip extends Element { ctx.lineDashOffset = labelColors.borderDashOffset || 0; // Fill a white rect so that colours merge nicely if the opacity is < 1 - const outerX = rtlHelper.leftForLtr(rtlColorX, boxWidth); - const innerX = rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - 2); + const outerX = rtlHelper.leftForLtr(rtlColorX, boxWidth - boxPadding); + const innerX = rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - boxPadding - 2); const borderRadius = toTRBLCorners(labelColors.borderRadius); if (Object.values(borderRadius).some(v => v !== 0)) { @@ -763,7 +763,7 @@ export class Tooltip extends Element { drawBody(pt, ctx, options) { const me = this; const {body} = me; - const {bodySpacing, bodyAlign, displayColors, boxHeight, boxWidth} = options; + const {bodySpacing, bodyAlign, displayColors, boxHeight, boxWidth, boxPadding} = options; const bodyFont = toFont(options.bodyFont); let bodyLineHeight = bodyFont.lineHeight; let xLinePadding = 0; @@ -789,7 +789,7 @@ export class Tooltip extends Element { each(me.beforeBody, fillLineOfText); xLinePadding = displayColors && bodyAlignForCalculation !== 'right' - ? bodyAlign === 'center' ? (boxWidth / 2 + 1) : (boxWidth + 2) + ? bodyAlign === 'center' ? (boxWidth / 2 + boxPadding) : (boxWidth + 2 + boxPadding) : 0; // Draw body lines now @@ -1166,6 +1166,7 @@ export default { boxWidth: (ctx, opts) => opts.bodyFont.size, multiKeyBackground: '#fff', displayColors: true, + boxPadding: 0, borderColor: 'rgba(0,0,0,0)', borderWidth: 0, animation: { diff --git a/test/fixtures/plugin.tooltip/box-padding.js b/test/fixtures/plugin.tooltip/box-padding.js new file mode 100644 index 00000000000..434620eddda --- /dev/null +++ b/test/fixtures/plugin.tooltip/box-padding.js @@ -0,0 +1,71 @@ +const data = []; +for (let x = 0; x < 3; x++) { + for (let y = 0; y < 3; y++) { + data.push({x, y}); + } +} + +module.exports = { + config: { + type: 'scatter', + data: { + datasets: [{ + data, + backgroundColor: 'red', + radius: 1, + hoverRadius: 0 + }], + }, + options: { + scales: { + x: {display: false}, + y: {display: false} + }, + plugins: { + legend: false, + title: false, + filler: false, + tooltip: { + mode: 'point', + intersect: true, + // spriteText: use white background to hide any gaps between fonts + backgroundColor: 'white', + borderColor: 'black', + borderWidth: 1, + callbacks: { + label: () => 'label', + }, + boxPadding: 30 + }, + }, + }, + plugins: [{ + afterDraw: function(chart) { + const canvas = chart.canvas; + const rect = canvas.getBoundingClientRect(); + const meta = chart.getDatasetMeta(0); + let point, event; + + for (let i = 0; i < data.length; i++) { + point = meta.data[i]; + event = { + type: 'mousemove', + target: canvas, + clientX: rect.left + point.x, + clientY: rect.top + point.y + }; + chart._handleEvent(event); + chart.tooltip.handleEvent(event); + chart.tooltip.draw(chart.ctx); + } + } + }] + }, + options: { + spriteText: true, + canvas: { + height: 400, + width: 500 + } + } +}; diff --git a/test/fixtures/plugin.tooltip/box-padding.png b/test/fixtures/plugin.tooltip/box-padding.png new file mode 100644 index 0000000000000000000000000000000000000000..d3cd19e202e565d3d3162feba7ca422f2a928608 GIT binary patch literal 14617 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 { * @default fontSize */ boxHeight: number; + /** + * Padding between the color box and the text + * @default 1 + */ + boxPadding: number; /** * Color of label * @see Defaults.color