Adjust virtical alignment of tooptip items (#6292)

diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index f85055b2e6ce12d5484ef0d4feb97a1631213014..00e97ca38109f3ea86dc9d7c1ad49998b8764a4c 100644 (file)
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -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
                                }
                        }
@@ -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);
@@ -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
@@ -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;
@@ -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;
+                       }
                }
        },
 

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index b6101561dc8fdab7f71a671b447918db0a8821ae..91ff07a20bd18940210b28036e7d3f311d271c74 100644 (file)
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -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);

diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js
index a7403eb81ec10bd1dde38e05d6a3e66fc7becc65..29c449a8be4b39d8aa06323a7aba854444a825bb 100755 (executable)
--- a/test/specs/core.tooltip.tests.js
+++ b/test/specs/core.tooltip.tests.js
@@ -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: []}
                        ]));
                });
@@ -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: []}
                        ]));
                });
@@ -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: []}
                        ]));
                });
@@ -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: []}
                        ]));
                });