archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

expose boxWidth and boxHeight on tooltip (#6995)

Browse Source
This commit is contained in:
bjones526 2020-03-06 12:17:59 -05:00 committed by GitHub
parent 53205457dc
commit e1796d361f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/configuration/tooltip.md
View File

@ -42,6 +42,8 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
| `cornerRadius` | `number` | `6` | Radius of tooltip corner curves.
| `multiKeyBackground` | `Color` | `'#fff'` | Color to draw behind the colored boxes when multiple items are in the tooltip.
| `displayColors` | `boolean` | `true` | If true, color boxes are shown in the tooltip.
| `boxWidth` | `number` | `bodyFontSize` | Width of the color box if displayColors is true.
| `boxHeight` | `number` | `bodyFontSize` | Height of the color box if displayColors is true.
| `borderColor` | `Color` | `'rgba(0, 0, 0, 0)'` | Color of the border.
| `borderWidth` | `number` | `0` | Size of the border.
| `rtl` | `boolean` | | `true` for rendering the legends from right to left.

36
src/plugins/plugin.tooltip.js
View File

@ -242,6 +242,9 @@ function resolveOptions(options) {
options.bodyFontStyle = valueOrDefault(options.bodyFontStyle, defaults.fontStyle);
options.bodyFontSize = valueOrDefault(options.bodyFontSize, defaults.fontSize);
options.boxHeight = valueOrDefault(options.boxHeight, options.bodyFontSize);
options.boxWidth = valueOrDefault(options.boxWidth, options.bodyFontSize);
options.titleFontFamily = valueOrDefault(options.titleFontFamily, defaults.fontFamily);
options.titleFontStyle = valueOrDefault(options.titleFontStyle, defaults.fontStyle);
options.titleFontSize = valueOrDefault(options.titleFontSize, defaults.fontSize);
@ -259,9 +262,10 @@ function resolveOptions(options) {
function getTooltipSize(tooltip) {
const ctx = tooltip._chart.ctx;
const {body, footer, options, title} = tooltip;
const {bodyFontSize, footerFontSize, titleFontSize} = options;
const {bodyFontSize, footerFontSize, titleFontSize, boxWidth, boxHeight} = options;
const titleLineCount = title.length;
const footerLineCount = footer.length;
const bodyLineItemCount = body.length;
let height = options.yPadding * 2; // Tooltip Padding
let width = 0;
@ -276,7 +280,10 @@ function getTooltipSize(tooltip) {
+ options.titleMarginBottom;
}
if (combinedBodyLength) {
height += combinedBodyLength * bodyFontSize
// Body lines may include some extra height depending on boxHeight
const bodyLineHeight = options.displayColors ? Math.max(boxHeight, bodyFontSize) : bodyFontSize;
height += bodyLineItemCount * bodyLineHeight
+ (combinedBodyLength - bodyLineItemCount) * bodyFontSize
+ (combinedBodyLength - 1) * options.bodySpacing;
}
if (footerLineCount) {
@ -301,7 +308,7 @@ function getTooltipSize(tooltip) {
helpers.each(tooltip.beforeBody.concat(tooltip.afterBody), maxLineWidth);
// Body lines may include some extra width due to the color box
widthPadding = options.displayColors ? (bodyFontSize + 2) : 0;
widthPadding = options.displayColors ? (boxWidth + 2) : 0;
helpers.each(body, (bodyItem) => {
helpers.each(bodyItem.before, maxLineWidth);
helpers.each(bodyItem.lines, maxLineWidth);
@ -757,22 +764,24 @@ export class Tooltip extends Element {
const me = this;
const options = me.options;
const labelColors = me.labelColors[i];
const bodyFontSize = options.bodyFontSize;
const {boxHeight, boxWidth, bodyFontSize} = options;
const colorX = getAlignedX(me, 'left');
const rtlColorX = rtlHelper.x(colorX);
const yOffSet = boxHeight < bodyFontSize ? (bodyFontSize - boxHeight) / 2 : 0;
const colorY = pt.y + yOffSet;
// Fill a white rect so that colours merge nicely if the opacity is < 1
ctx.fillStyle = options.multiKeyBackground;
ctx.fillRect(rtlHelper.leftForLtr(rtlColorX, bodyFontSize), pt.y, bodyFontSize, bodyFontSize);
ctx.fillRect(rtlHelper.leftForLtr(rtlColorX, boxWidth), colorY, boxWidth, boxHeight);
// Border
ctx.lineWidth = 1;
ctx.strokeStyle = labelColors.borderColor;
ctx.strokeRect(rtlHelper.leftForLtr(rtlColorX, bodyFontSize), pt.y, bodyFontSize, bodyFontSize);
ctx.strokeRect(rtlHelper.leftForLtr(rtlColorX, boxWidth), colorY, boxWidth, boxHeight);
// Inner square
ctx.fillStyle = labelColors.backgroundColor;
ctx.fillRect(rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), bodyFontSize - 2), pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
ctx.fillRect(rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - 2), colorY + 1, boxWidth - 2, boxHeight - 2);
// restore fillStyle
ctx.fillStyle = me.labelTextColors[i];
@ -781,14 +790,15 @@ export class Tooltip extends Element {
drawBody(pt, ctx) {
const me = this;
const {body, options} = me;
const {bodyFontSize, bodySpacing, bodyAlign, displayColors} = options;
const {bodyFontSize, bodySpacing, bodyAlign, displayColors, boxHeight, boxWidth} = options;
let bodyLineHeight = bodyFontSize;
let xLinePadding = 0;
const rtlHelper = getRtlHelper(options.rtl, me.x, me.width);
const fillLineOfText = function(line) {
ctx.fillText(line, rtlHelper.x(pt.x + xLinePadding), pt.y + bodyFontSize / 2);
pt.y += bodyFontSize + bodySpacing;
ctx.fillText(line, rtlHelper.x(pt.x + xLinePadding), pt.y + bodyLineHeight / 2);
pt.y += bodyLineHeight + bodySpacing;
};
const bodyAlignForCalculation = rtlHelper.textAlign(bodyAlign);
@ -805,7 +815,7 @@ export class Tooltip extends Element {
helpers.each(me.beforeBody, fillLineOfText);
xLinePadding = displayColors && bodyAlignForCalculation !== 'right'
? bodyAlign === 'center' ? (bodyFontSize / 2 + 1) : (bodyFontSize + 2)
? bodyAlign === 'center' ? (boxWidth / 2 + 1) : (boxWidth + 2)
: 0;
// Draw body lines now
@ -820,10 +830,13 @@ export class Tooltip extends Element {
// Draw Legend-like boxes if needed
if (displayColors && lines.length) {
me._drawColorBox(ctx, pt, i, rtlHelper);
bodyLineHeight = Math.max(bodyFontSize, boxHeight);
}
for (j = 0, jlen = lines.length; j < jlen; ++j) {
fillLineOfText(lines[j]);
// Reset for any lines that don't include colorbox
bodyLineHeight = bodyFontSize;
}
helpers.each(bodyItem.after, fillLineOfText);
@ -831,6 +844,7 @@ export class Tooltip extends Element {
// Reset back to 0 for after body
xLinePadding = 0;
bodyLineHeight = bodyFontSize;
// After body lines
helpers.each(me.afterBody, fillLineOfText);