From 0fa03fad24040d83b713727f2158919f223387b4 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Sat, 31 Oct 2015 18:14:56 -0600 Subject: [PATCH 1/7] Handle opacity in the tooltip update method --- src/core/core.tooltip.js | 103 +++++++++++++++++++++------------------ 1 file changed, 55 insertions(+), 48 deletions(-) diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 055d68eb8..b8ec75b3a 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -197,63 +197,70 @@ var ctx = this._chart.ctx; - var element = this._active[0], - labelColors = [], - tooltipPosition; + if(this._active.length){ + this._model.opacity = 1; - var tooltipItems = []; + var element = this._active[0], + labelColors = [], + tooltipPosition; - if (this._options.tooltips.mode == 'single') { - var yScale = element._yScale || element._scale; // handle radar || polarArea charts - tooltipItems.push({ - xLabel: element._xScale ? element._xScale.getLabelForIndex(element._index, element._datasetIndex) : '', - yLabel: yScale ? yScale.getLabelForIndex(element._index, element._datasetIndex) : '', - index: element._index, - datasetIndex: element._datasetIndex, - }); - tooltipPosition = this._active[0].tooltipPosition(); - } else { - helpers.each(this._data.datasets, function(dataset, datasetIndex) { - if (!helpers.isDatasetVisible(dataset)) { - return; - } - var currentElement = dataset.metaData[element._index]; + var tooltipItems = []; + + if (this._options.tooltips.mode == 'single') { var yScale = element._yScale || element._scale; // handle radar || polarArea charts - tooltipItems.push({ - xLabel: currentElement._xScale ? currentElement._xScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '', - yLabel: yScale ? yScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '', + xLabel: element._xScale ? element._xScale.getLabelForIndex(element._index, element._datasetIndex) : '', + yLabel: yScale ? yScale.getLabelForIndex(element._index, element._datasetIndex) : '', index: element._index, - datasetIndex: datasetIndex, + datasetIndex: element._datasetIndex, }); + tooltipPosition = this._active[0].tooltipPosition(); + } else { + helpers.each(this._data.datasets, function(dataset, datasetIndex) { + if (!helpers.isDatasetVisible(dataset)) { + return; + } + var currentElement = dataset.metaData[element._index]; + var yScale = element._yScale || element._scale; // handle radar || polarArea charts + + tooltipItems.push({ + xLabel: currentElement._xScale ? currentElement._xScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '', + yLabel: yScale ? yScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '', + index: element._index, + datasetIndex: datasetIndex, + }); + }); + + helpers.each(this._active, function(active, i) { + labelColors.push({ + borderColor: active._view.borderColor, + backgroundColor: active._view.backgroundColor + }); + }, this); + + tooltipPosition = this._active[0].tooltipPosition(); + tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5); + } + + // Build the Text Lines + helpers.extend(this._model, { + title: this.getTitle(tooltipItems, this._data), + beforeBody: this.getBeforeBody(tooltipItems, this._data), + body: this.getBody(tooltipItems, this._data), + afterBody: this.getAfterBody(tooltipItems, this._data), + footer: this.getFooter(tooltipItems, this._data), }); - helpers.each(this._active, function(active, i) { - labelColors.push({ - borderColor: active._view.borderColor, - backgroundColor: active._view.backgroundColor - }); - }, this); - - tooltipPosition = this._active[0].tooltipPosition(); - tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5); + helpers.extend(this._model, { + x: Math.round(tooltipPosition.x), + y: Math.round(tooltipPosition.y), + caretPadding: tooltipPosition.padding, + labelColors: labelColors, + }); + } + else{ + this._model.opacity = 0; } - - // Build the Text Lines - helpers.extend(this._model, { - title: this.getTitle(tooltipItems, this._data), - beforeBody: this.getBeforeBody(tooltipItems, this._data), - body: this.getBody(tooltipItems, this._data), - afterBody: this.getAfterBody(tooltipItems, this._data), - footer: this.getFooter(tooltipItems, this._data), - }); - - helpers.extend(this._model, { - x: Math.round(tooltipPosition.x), - y: Math.round(tooltipPosition.y), - caretPadding: tooltipPosition.padding, - labelColors: labelColors, - }); if (this._options.tooltips.custom) { this._options.tooltips.custom.call(this, this._model); From fa33f3158e4bed47624bf1d8a83eaca6aa860a0c Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Sat, 31 Oct 2015 18:15:58 -0600 Subject: [PATCH 2/7] Don't kill lastActives on chart hover exit --- src/core/core.controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index c65f7a12b..df0ca25ac 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -375,8 +375,8 @@ // Find Active Elements for hover and tooltips if (e.type == 'mouseout') { - this.active = this.lastActive = []; - this.tooltipActive = this.lastTooltipActive = []; + this.active = []; + this.tooltipActive = []; } else { this.active = function() { switch (this.options.hover.mode) { From 8398d26d10ee030339cafb77519a98857ce9dd66 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Sat, 31 Oct 2015 18:16:35 -0600 Subject: [PATCH 3/7] Remove Tooltip opacity from core-controller --- src/core/core.controller.js | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index df0ca25ac..da478378c 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -458,20 +458,7 @@ // The usual updates this.tooltip.initialize(); - - // Active - if (this.tooltipActive.length) { - this.tooltip._model.opacity = 1; - - helpers.extend(this.tooltip, { - _active: this.tooltipActive, - }); - - } else { - // Inactive - this.tooltip._model.opacity = 0; - } - this.tooltip.update(); + this.tooltip._active = this.tooltipActive; } // Hover animations From 5ba1ec0d3b3cb53c3b8b6ac6c970722420d0abc7 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Sat, 31 Oct 2015 18:17:06 -0600 Subject: [PATCH 4/7] More concise change detection --- src/core/core.controller.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index da478378c..dd3a05019 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -481,9 +481,8 @@ // If entering, leaving, or changing elements, animate the change via pivot if ((this.lastActive.length !== this.active.length) || - (this.lastActive.length === this.active.length && changed) || (this.lastTooltipActive.length !== this.tooltipActive.length) || - (this.lastTooltipActive.length === this.tooltipActive.length && changed)) { + changed) { this.stop(); console.log('render'); From 22aabdbfab33328a00dbf8b8f0f650827658709c Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Sat, 31 Oct 2015 18:17:32 -0600 Subject: [PATCH 5/7] Update tooltip only when things change (which will only trigger customTooltips when model changes) --- src/core/core.controller.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index dd3a05019..2df469516 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -484,6 +484,9 @@ (this.lastTooltipActive.length !== this.tooltipActive.length) || changed) { + if (this.options.tooltips.enabled || this.options.tooltips.custom) { + this.tooltip.update(); + } this.stop(); console.log('render'); From 93a923d38fc75ccbcbb9c49f1a4f968d78cac287 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Sat, 31 Oct 2015 18:17:42 -0600 Subject: [PATCH 6/7] Remove logs --- src/core/core.controller.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 2df469516..6663229f9 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -488,7 +488,6 @@ this.tooltip.update(); } this.stop(); - console.log('render'); // We only need to render at this point. Updating will cause scales to be recomputed generating flicker & using more // memory than necessary. From 69bff1183f1148f275cdfc040b6684e0d0f37620 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Sat, 31 Oct 2015 18:17:52 -0600 Subject: [PATCH 7/7] Better Example --- samples/line-customTooltips.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/line-customTooltips.html b/samples/line-customTooltips.html index 680db627a..193fa3b82 100644 --- a/samples/line-customTooltips.html +++ b/samples/line-customTooltips.html @@ -39,13 +39,13 @@
- +