Skip to content

Commit eb3050f

Browse files
nagixetimberg
nagix
authored and
etimberg
committed
Adjust virtical alignment of tooptip items (chartjs#6292)
1 parent 1a4d1e1 commit eb3050f

File tree

3 files changed

+52
-44
lines changed

3 files changed

+52
-44
lines changed

‎src/core/core.tooltip.js

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -748,25 +748,26 @@ var exports = Element.extend({
748748

749749
drawTitle: function(pt, vm, ctx) {
750750
var title = vm.title;
751+
var length = title.length;
752+
var titleFontSize, titleSpacing, i;
751753

752-
if (title.length) {
754+
if (length) {
753755
pt.x = getAlignedX(vm, vm._titleAlign);
754756

755757
ctx.textAlign = vm._titleAlign;
756-
ctx.textBaseline = 'top';
758+
ctx.textBaseline = 'middle';
757759

758-
var titleFontSize = vm.titleFontSize;
759-
var titleSpacing = vm.titleSpacing;
760+
titleFontSize = vm.titleFontSize;
761+
titleSpacing = vm.titleSpacing;
760762

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

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

769-
if (i + 1 === title.length) {
770+
if (i + 1 === length) {
770771
pt.y += vm.titleMarginBottom - titleSpacing; // If Last, add margin, remove spacing
771772
}
772773
}
@@ -779,23 +780,22 @@ var exports = Element.extend({
779780
var bodyAlign = vm._bodyAlign;
780781
var body = vm.body;
781782
var drawColorBoxes = vm.displayColors;
782-
var labelColors = vm.labelColors;
783783
var xLinePadding = 0;
784784
var colorX = drawColorBoxes ? getAlignedX(vm, 'left') : 0;
785-
var textColor;
785+
786+
var fillLineOfText = function(line) {
787+
ctx.fillText(line, pt.x + xLinePadding, pt.y + bodyFontSize / 2);
788+
pt.y += bodyFontSize + bodySpacing;
789+
};
790+
791+
var bodyItem, textColor, labelColors, lines, i, j, ilen, jlen;
786792

787793
ctx.textAlign = bodyAlign;
788-
ctx.textBaseline = 'top';
794+
ctx.textBaseline = 'middle';
789795
ctx.font = helpers.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
790796

791797
pt.x = getAlignedX(vm, bodyAlign);
792798

793-
// Before Body
794-
var fillLineOfText = function(line) {
795-
ctx.fillText(line, pt.x + xLinePadding, pt.y);
796-
pt.y += bodyFontSize + bodySpacing;
797-
};
798-
799799
// Before body lines
800800
ctx.fillStyle = vm.bodyFontColor;
801801
helpers.each(vm.beforeBody, fillLineOfText);
@@ -805,12 +805,16 @@ var exports = Element.extend({
805805
: 0;
806806

807807
// Draw body lines now
808-
helpers.each(body, function(bodyItem, i) {
808+
for (i = 0, ilen = body.length; i < ilen; ++i) {
809+
bodyItem = body[i];
809810
textColor = vm.labelTextColors[i];
811+
labelColors = vm.labelColors[i];
812+
810813
ctx.fillStyle = textColor;
811814
helpers.each(bodyItem.before, fillLineOfText);
812815

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

820824
// Border
821825
ctx.lineWidth = 1;
822-
ctx.strokeStyle = labelColors[i].borderColor;
826+
ctx.strokeStyle = labelColors.borderColor;
823827
ctx.strokeRect(colorX, pt.y, bodyFontSize, bodyFontSize);
824828

825829
// Inner square
826-
ctx.fillStyle = labelColors[i].backgroundColor;
830+
ctx.fillStyle = labelColors.backgroundColor;
827831
ctx.fillRect(colorX + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
828832
ctx.fillStyle = textColor;
829833
}
830834

831-
fillLineOfText(line);
832-
});
835+
fillLineOfText(lines[j]);
836+
}
833837

834838
helpers.each(bodyItem.after, fillLineOfText);
835-
});
839+
}
836840

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

845849
drawFooter: function(pt, vm, ctx) {
846850
var footer = vm.footer;
851+
var length = footer.length;
852+
var footerFontSize, i;
847853

848-
if (footer.length) {
854+
if (length) {
849855
pt.x = getAlignedX(vm, vm._footerAlign);
850856
pt.y += vm.footerMarginTop;
851857

852858
ctx.textAlign = vm._footerAlign;
853-
ctx.textBaseline = 'top';
859+
ctx.textBaseline = 'middle';
860+
861+
footerFontSize = vm.footerFontSize;
854862

855863
ctx.fillStyle = vm.footerFontColor;
856-
ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
864+
ctx.font = helpers.fontString(footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
857865

858-
helpers.each(footer, function(line) {
859-
ctx.fillText(line, pt.x, pt.y);
860-
pt.y += vm.footerFontSize + vm.footerSpacing;
861-
});
866+
for (i = 0; i < length; ++i) {
867+
ctx.fillText(footer[i], pt.x, pt.y + footerFontSize / 2);
868+
pt.y += footerFontSize + vm.footerSpacing;
869+
}
862870
}
863871
},
864872

‎src/plugins/plugin.legend.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ var Legend = Element.extend({
256256
var totalHeight = 0;
257257

258258
ctx.textAlign = 'left';
259-
ctx.textBaseline = 'top';
259+
ctx.textBaseline = 'middle';
260260

261261
helpers.each(me.legendItems, function(legendItem, i) {
262262
var boxWidth = getBoxWidth(labelOpts, fontSize);

‎test/specs/core.tooltip.tests.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1208,14 +1208,14 @@ describe('Core.Tooltip', function() {
12081208
expect(mockContext.getCalls()).toEqual(Array.prototype.concat(drawBody, [
12091209
{name: 'setTextAlign', args: ['left']},
12101210
{name: 'setFillStyle', args: ['#fff']},
1211-
{name: 'fillText', args: ['title', 105, 105]},
1211+
{name: 'fillText', args: ['title', 105, 111]},
12121212
{name: 'setTextAlign', args: ['left']},
12131213
{name: 'setFillStyle', args: ['#fff']},
12141214
{name: 'setFillStyle', args: ['#fff']},
1215-
{name: 'fillText', args: ['label', 105, 123]},
1215+
{name: 'fillText', args: ['label', 105, 129]},
12161216
{name: 'setTextAlign', args: ['left']},
12171217
{name: 'setFillStyle', args: ['#fff']},
1218-
{name: 'fillText', args: ['footer', 105, 141]},
1218+
{name: 'fillText', args: ['footer', 105, 147]},
12191219
{name: 'restore', args: []}
12201220
]));
12211221
});
@@ -1228,14 +1228,14 @@ describe('Core.Tooltip', function() {
12281228
expect(mockContext.getCalls()).toEqual(Array.prototype.concat(drawBody, [
12291229
{name: 'setTextAlign', args: ['right']},
12301230
{name: 'setFillStyle', args: ['#fff']},
1231-
{name: 'fillText', args: ['title', 195, 105]},
1231+
{name: 'fillText', args: ['title', 195, 111]},
12321232
{name: 'setTextAlign', args: ['right']},
12331233
{name: 'setFillStyle', args: ['#fff']},
12341234
{name: 'setFillStyle', args: ['#fff']},
1235-
{name: 'fillText', args: ['label', 195, 123]},
1235+
{name: 'fillText', args: ['label', 195, 129]},
12361236
{name: 'setTextAlign', args: ['right']},
12371237
{name: 'setFillStyle', args: ['#fff']},
1238-
{name: 'fillText', args: ['footer', 195, 141]},
1238+
{name: 'fillText', args: ['footer', 195, 147]},
12391239
{name: 'restore', args: []}
12401240
]));
12411241
});
@@ -1248,14 +1248,14 @@ describe('Core.Tooltip', function() {
12481248
expect(mockContext.getCalls()).toEqual(Array.prototype.concat(drawBody, [
12491249
{name: 'setTextAlign', args: ['center']},
12501250
{name: 'setFillStyle', args: ['#fff']},
1251-
{name: 'fillText', args: ['title', 150, 105]},
1251+
{name: 'fillText', args: ['title', 150, 111]},
12521252
{name: 'setTextAlign', args: ['center']},
12531253
{name: 'setFillStyle', args: ['#fff']},
12541254
{name: 'setFillStyle', args: ['#fff']},
1255-
{name: 'fillText', args: ['label', 150, 123]},
1255+
{name: 'fillText', args: ['label', 150, 129]},
12561256
{name: 'setTextAlign', args: ['center']},
12571257
{name: 'setFillStyle', args: ['#fff']},
1258-
{name: 'fillText', args: ['footer', 150, 141]},
1258+
{name: 'fillText', args: ['footer', 150, 147]},
12591259
{name: 'restore', args: []}
12601260
]));
12611261
});
@@ -1268,14 +1268,14 @@ describe('Core.Tooltip', function() {
12681268
expect(mockContext.getCalls()).toEqual(Array.prototype.concat(drawBody, [
12691269
{name: 'setTextAlign', args: ['right']},
12701270
{name: 'setFillStyle', args: ['#fff']},
1271-
{name: 'fillText', args: ['title', 195, 105]},
1271+
{name: 'fillText', args: ['title', 195, 111]},
12721272
{name: 'setTextAlign', args: ['center']},
12731273
{name: 'setFillStyle', args: ['#fff']},
12741274
{name: 'setFillStyle', args: ['#fff']},
1275-
{name: 'fillText', args: ['label', 150, 123]},
1275+
{name: 'fillText', args: ['label', 150, 129]},
12761276
{name: 'setTextAlign', args: ['left']},
12771277
{name: 'setFillStyle', args: ['#fff']},
1278-
{name: 'fillText', args: ['footer', 105, 141]},
1278+
{name: 'fillText', args: ['footer', 105, 147]},
12791279
{name: 'restore', args: []}
12801280
]));
12811281
});

0 commit comments

Comments
 (0)