From 063ac1616b125a3a853bddb2f8b76cfbe19dc857 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Thu, 21 Sep 2017 15:56:29 +0200 Subject: [PATCH 1/4] added scope for tooltip position mode call and added docs --- docs/configuration/tooltip.md | 22 ++++++++++++++++++++++ src/core/core.tooltip.js | 2 +- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index bb3b7a6aefb..aadeab8169f 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -51,6 +51,28 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g New modes can be defined by adding functions to the Chart.Tooltip.positioners map. +Example: +```javascript +/** + * Custom positioner + * @function Chart.Tooltip.positioners.custom + * @param elements {Chart.Element[]} the tooltip elements + * @param eventPosition {Point} the position of the event in canvas coordinates + * @returns {Point} the tooltip position + */ +Chart.Tooltip.positioners.custom = function(elements, eventPosition) { + /** @type {Chart.Tooltip} */ + var tooltip = this; + + /* ... */ + + return { + x: 0, + y: 0 + }; +} +``` + ### Sort Callback Allows sorting of [tooltip items](#tooltip-item-interface). Must implement at minimum a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). This function can also accept a third parameter that is the data object passed to the chart. diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 048e1a08a69..638fd65c3ba 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -495,7 +495,7 @@ module.exports = function(Chart) { var labelColors = []; var labelTextColors = []; - tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition); + tooltipPosition = Chart.Tooltip.positioners[opts.position].call(me, active, me._eventPosition); var tooltipItems = []; for (i = 0, len = active.length; i < len; ++i) { From 67871484d4f16ce1089d36438ef1c9eb1e9ab3cd Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Mon, 9 Oct 2017 12:43:43 +0200 Subject: [PATCH 2/4] added test for positioner --- test/specs/core.tooltip.tests.js | 59 ++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index 73d943bd853..46c4c082581 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -822,4 +822,63 @@ describe('Core.Tooltip', function() { node.dispatchEvent(firstEvent); expect(tooltip.update).not.toHaveBeenCalled(); }); + + describe('positioners', function() { + it('Should call custom positioner with correct parameters and scope', function() { + + Chart.Tooltip.positioners.test = function test(elements, eventPosition) { + + expect(this instanceof Chart.Tooltip).toBe(true); + expect(elements instanceof Array).toBe(true); + expect(eventPosition.hasOwnProperty('x') && eventPosition.hasOwnProperty('y')).toBe(true); + + return { + x: 0, + y: 0 + }; + }; + + var chart = window.acquireChart({ + type: 'line', + data: { + datasets: [{ + label: 'Dataset 1', + data: [10, 20, 30], + pointHoverBorderColor: 'rgb(255, 0, 0)', + pointHoverBackgroundColor: 'rgb(0, 255, 0)' + }, { + label: 'Dataset 2', + data: [40, 40, 40], + pointHoverBorderColor: 'rgb(0, 0, 255)', + pointHoverBackgroundColor: 'rgb(0, 255, 255)' + }], + labels: ['Point 1', 'Point 2', 'Point 3'] + }, + options: { + tooltips: { + mode: 'nearest', + position: 'test' + } + } + }); + + // Trigger an event over top of the + var pointIndex = 1; + var datasetIndex = 0; + var meta = chart.getDatasetMeta(datasetIndex); + var point = meta.data[pointIndex]; + var node = chart.canvas; + var rect = node.getBoundingClientRect(); + var evt = new MouseEvent('mousemove', { + view: window, + bubbles: true, + cancelable: true, + clientX: rect.left + point._model.x, + clientY: rect.top + point._model.y + }); + + // Manually trigger rather than having an async test + node.dispatchEvent(evt); + }); + }); }); From d4152c71f2f99587f7dd97111a5f1a493a85767a Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Mon, 9 Oct 2017 12:53:21 +0200 Subject: [PATCH 3/4] removed named func for lint --- test/specs/core.tooltip.tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index 46c4c082581..2aeece5491d 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -826,7 +826,7 @@ describe('Core.Tooltip', function() { describe('positioners', function() { it('Should call custom positioner with correct parameters and scope', function() { - Chart.Tooltip.positioners.test = function test(elements, eventPosition) { + Chart.Tooltip.positioners.test = function(elements, eventPosition) { expect(this instanceof Chart.Tooltip).toBe(true); expect(elements instanceof Array).toBe(true); From c90b4c0446e01a636e56602813b3b02d241bdc0b Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Tue, 10 Oct 2017 09:18:46 +0200 Subject: [PATCH 4/4] resolved pull-request comments --- test/specs/core.tooltip.tests.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index 2aeece5491d..632f8121daf 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -826,18 +826,12 @@ describe('Core.Tooltip', function() { describe('positioners', function() { it('Should call custom positioner with correct parameters and scope', function() { - Chart.Tooltip.positioners.test = function(elements, eventPosition) { - - expect(this instanceof Chart.Tooltip).toBe(true); - expect(elements instanceof Array).toBe(true); - expect(eventPosition.hasOwnProperty('x') && eventPosition.hasOwnProperty('y')).toBe(true); - - return { - x: 0, - y: 0 - }; + Chart.Tooltip.positioners.test = function() { + return {x: 0, y: 0}; }; + spyOn(Chart.Tooltip.positioners, 'test').and.callThrough(); + var chart = window.acquireChart({ type: 'line', data: { @@ -879,6 +873,13 @@ describe('Core.Tooltip', function() { // Manually trigger rather than having an async test node.dispatchEvent(evt); + + var fn = Chart.Tooltip.positioners.test; + expect(fn.calls.count()).toBe(1); + expect(fn.calls.first().args[0] instanceof Array).toBe(true); + expect(fn.calls.first().args[1].hasOwnProperty('x')).toBe(true); + expect(fn.calls.first().args[1].hasOwnProperty('y')).toBe(true); + expect(fn.calls.first().object instanceof Chart.Tooltip).toBe(true); }); }); });