Skip to content

Commit

Permalink
Adjust virtical alignment of tooptip items (chartjs#6292)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nagix @etimberg
nagix authored and etimberg committed Jun 19, 2019
1 parent 1a4d1e1 commit eb3050f
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 44 deletions.
70 changes: 39 additions & 31 deletions src/core/core.tooltip.js
View file
Expand Up @@ -748,25 +748,26 @@ var exports = Element.extend({

drawTitle: function(pt, vm, ctx) {
var title = vm.title;
var length = title.length;
var titleFontSize, titleSpacing, i;

if (title.length) {
if (length) {
pt.x = getAlignedX(vm, vm._titleAlign);

ctx.textAlign = vm._titleAlign;
ctx.textBaseline = 'top';
ctx.textBaseline = 'middle';

var titleFontSize = vm.titleFontSize;
var titleSpacing = vm.titleSpacing;
titleFontSize = vm.titleFontSize;
titleSpacing = vm.titleSpacing;

ctx.fillStyle = vm.titleFontColor;
ctx.font = helpers.fontString(titleFontSize, vm._titleFontStyle, vm._titleFontFamily);

var i, len;
for (i = 0, len = title.length; i < len; ++i) {
ctx.fillText(title[i], pt.x, pt.y);
for (i = 0; i < length; ++i) {
ctx.fillText(title[i], pt.x, pt.y + titleFontSize / 2);
pt.y += titleFontSize + titleSpacing; // Line Height and spacing

if (i + 1 === title.length) {
if (i + 1 === length) {
pt.y += vm.titleMarginBottom - titleSpacing; // If Last, add margin, remove spacing
}
}
Expand All @@ -779,23 +780,22 @@ var exports = Element.extend({
var bodyAlign = vm._bodyAlign;
var body = vm.body;
var drawColorBoxes = vm.displayColors;
var labelColors = vm.labelColors;
var xLinePadding = 0;
var colorX = drawColorBoxes ? getAlignedX(vm, 'left') : 0;
var textColor;

var fillLineOfText = function(line) {
ctx.fillText(line, pt.x + xLinePadding, pt.y + bodyFontSize / 2);
pt.y += bodyFontSize + bodySpacing;
};

var bodyItem, textColor, labelColors, lines, i, j, ilen, jlen;

ctx.textAlign = bodyAlign;
ctx.textBaseline = 'top';
ctx.textBaseline = 'middle';
ctx.font = helpers.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);

pt.x = getAlignedX(vm, bodyAlign);

// Before Body
var fillLineOfText = function(line) {
ctx.fillText(line, pt.x + xLinePadding, pt.y);
pt.y += bodyFontSize + bodySpacing;
};

// Before body lines
ctx.fillStyle = vm.bodyFontColor;
helpers.each(vm.beforeBody, fillLineOfText);
Expand All @@ -805,12 +805,16 @@ var exports = Element.extend({
: 0;

// Draw body lines now
helpers.each(body, function(bodyItem, i) {
for (i = 0, ilen = body.length; i < ilen; ++i) {
bodyItem = body[i];
textColor = vm.labelTextColors[i];
labelColors = vm.labelColors[i];

ctx.fillStyle = textColor;
helpers.each(bodyItem.before, fillLineOfText);

helpers.each(bodyItem.lines, function(line) {
lines = bodyItem.lines;
for (j = 0, jlen = lines.length; j < jlen; ++j) {
// Draw Legend-like boxes if needed
if (drawColorBoxes) {
// Fill a white rect so that colours merge nicely if the opacity is < 1
Expand All @@ -819,20 +823,20 @@ var exports = Element.extend({

// Border
ctx.lineWidth = 1;
ctx.strokeStyle = labelColors[i].borderColor;
ctx.strokeStyle = labelColors.borderColor;
ctx.strokeRect(colorX, pt.y, bodyFontSize, bodyFontSize);

// Inner square
ctx.fillStyle = labelColors[i].backgroundColor;
ctx.fillStyle = labelColors.backgroundColor;
ctx.fillRect(colorX + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
ctx.fillStyle = textColor;
}

fillLineOfText(line);
});
fillLineOfText(lines[j]);
}

helpers.each(bodyItem.after, fillLineOfText);
});
}

// Reset back to 0 for after body
xLinePadding = 0;
Expand All @@ -844,21 +848,25 @@ var exports = Element.extend({

drawFooter: function(pt, vm, ctx) {
var footer = vm.footer;
var length = footer.length;
var footerFontSize, i;

if (footer.length) {
if (length) {
pt.x = getAlignedX(vm, vm._footerAlign);
pt.y += vm.footerMarginTop;

ctx.textAlign = vm._footerAlign;
ctx.textBaseline = 'top';
ctx.textBaseline = 'middle';

footerFontSize = vm.footerFontSize;

ctx.fillStyle = vm.footerFontColor;
ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
ctx.font = helpers.fontString(footerFontSize, vm._footerFontStyle, vm._footerFontFamily);

helpers.each(footer, function(line) {
ctx.fillText(line, pt.x, pt.y);
pt.y += vm.footerFontSize + vm.footerSpacing;
});
for (i = 0; i < length; ++i) {
ctx.fillText(footer[i], pt.x, pt.y + footerFontSize / 2);
pt.y += footerFontSize + vm.footerSpacing;
}
}
},

Expand Down
2 changes: 1 addition & 1 deletion src/plugins/plugin.legend.js
View file
Expand Up @@ -256,7 +256,7 @@ var Legend = Element.extend({
var totalHeight = 0;

ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.textBaseline = 'middle';

helpers.each(me.legendItems, function(legendItem, i) {
var boxWidth = getBoxWidth(labelOpts, fontSize);
Expand Down
24 changes: 12 additions & 12 deletions test/specs/core.tooltip.tests.js
View file
Expand Up @@ -1208,14 +1208,14 @@ describe('Core.Tooltip', function() {
expect(mockContext.getCalls()).toEqual(Array.prototype.concat(drawBody, [
{name: 'setTextAlign', args: ['left']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['title', 105, 105]},
{name: 'fillText', args: ['title', 105, 111]},
{name: 'setTextAlign', args: ['left']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['label', 105, 123]},
{name: 'fillText', args: ['label', 105, 129]},
{name: 'setTextAlign', args: ['left']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['footer', 105, 141]},
{name: 'fillText', args: ['footer', 105, 147]},
{name: 'restore', args: []}
]));
});
Expand All @@ -1228,14 +1228,14 @@ describe('Core.Tooltip', function() {
expect(mockContext.getCalls()).toEqual(Array.prototype.concat(drawBody, [
{name: 'setTextAlign', args: ['right']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['title', 195, 105]},
{name: 'fillText', args: ['title', 195, 111]},
{name: 'setTextAlign', args: ['right']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['label', 195, 123]},
{name: 'fillText', args: ['label', 195, 129]},
{name: 'setTextAlign', args: ['right']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['footer', 195, 141]},
{name: 'fillText', args: ['footer', 195, 147]},
{name: 'restore', args: []}
]));
});
Expand All @@ -1248,14 +1248,14 @@ describe('Core.Tooltip', function() {
expect(mockContext.getCalls()).toEqual(Array.prototype.concat(drawBody, [
{name: 'setTextAlign', args: ['center']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['title', 150, 105]},
{name: 'fillText', args: ['title', 150, 111]},
{name: 'setTextAlign', args: ['center']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['label', 150, 123]},
{name: 'fillText', args: ['label', 150, 129]},
{name: 'setTextAlign', args: ['center']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['footer', 150, 141]},
{name: 'fillText', args: ['footer', 150, 147]},
{name: 'restore', args: []}
]));
});
Expand All @@ -1268,14 +1268,14 @@ describe('Core.Tooltip', function() {
expect(mockContext.getCalls()).toEqual(Array.prototype.concat(drawBody, [
{name: 'setTextAlign', args: ['right']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['title', 195, 105]},
{name: 'fillText', args: ['title', 195, 111]},
{name: 'setTextAlign', args: ['center']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['label', 150, 123]},
{name: 'fillText', args: ['label', 150, 129]},
{name: 'setTextAlign', args: ['left']},
{name: 'setFillStyle', args: ['#fff']},
{name: 'fillText', args: ['footer', 105, 141]},
{name: 'fillText', args: ['footer', 105, 147]},
{name: 'restore', args: []}
]));
});
Expand Down

0 comments on commit eb3050f

Please sign in to comment.