From 9279dbaa826a147685bbebce63194359d691edfc Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Sat, 19 Jan 2019 21:52:43 +0200 Subject: [PATCH 1/5] utilize indexScale/valueScale for tooltips --- src/controllers/controller.horizontalBar.js | 21 --------------------- src/core/core.tooltip.js | 19 +++++++++---------- test/specs/core.tooltip.tests.js | 4 ++-- 3 files changed, 11 insertions(+), 33 deletions(-) diff --git a/src/controllers/controller.horizontalBar.js b/src/controllers/controller.horizontalBar.js index 85d31ba515e..62bd07d3b83 100644 --- a/src/controllers/controller.horizontalBar.js +++ b/src/controllers/controller.horizontalBar.js @@ -35,27 +35,6 @@ defaults._set('horizontalBar', { }, tooltips: { - callbacks: { - title: function(item, data) { - // Pick first xLabel for now - var title = ''; - - if (item.length > 0) { - if (item[0].yLabel) { - title = item[0].yLabel; - } else if (data.labels.length > 0 && item[0].index < data.labels.length) { - title = data.labels[item[0].index]; - } - } - - return title; - }, - - label: function(item, data) { - var datasetLabel = data.datasets[item.datasetIndex].label || ''; - return datasetLabel + ': ' + item.xLabel; - } - }, mode: 'index', axis: 'y' } diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index a04bec3fb6d..c99c8d355f6 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -39,19 +39,13 @@ defaults._set('global', { callbacks: { // Args are: (tooltipItems, data) beforeTitle: helpers.noop, - title: function(tooltipItems, data) { - // Pick first xLabel for now + title: function(tooltipItems) { var title = ''; - var labels = data.labels; - var labelCount = labels ? labels.length : 0; if (tooltipItems.length > 0) { var item = tooltipItems[0]; - - if (item.xLabel) { - title = item.xLabel; - } else if (labelCount > 0 && item.index < labelCount) { - title = labels[item.index]; + if (item.indexLabel) { + title = item.indexLabel; } } @@ -70,7 +64,7 @@ defaults._set('global', { if (label) { label += ': '; } - label += tooltipItem.yLabel; + label += tooltipItem.valueLabel; return label; }, labelColor: function(tooltipItem, chart) { @@ -206,10 +200,15 @@ function createTooltipItem(element) { var yScale = element._yScale || element._scale; // handle radar || polarArea charts var index = element._index; var datasetIndex = element._datasetIndex; + var controller = element._chart.getDatasetMeta(datasetIndex).controller; + var indexScale = controller._getIndexScale(); + var valueScale = controller._getValueScale(); return { xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '', yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '', + indexLabel: indexScale ? indexScale.getLabelForIndex(index, datasetIndex) : '', + valueLabel: valueScale ? valueScale.getLabelForIndex(index, datasetIndex) : '', index: index, datasetIndex: datasetIndex, x: element._model.x, diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index a994b4ac214..303efd4f748 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -15,8 +15,8 @@ describe('Core.Tooltip', function() { var tooltipItem = { index: 1, datasetIndex: 0, - xLabel: 'Point 2', - yLabel: '20' + indexLabel: 'Point 2', + valueLabel: '20' }; var label = Chart.defaults.global.tooltips.callbacks.label(tooltipItem, data); From f10abe909df372e60ad7fccfed924a2e79b6a565 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 22 Jan 2019 10:50:46 +0200 Subject: [PATCH 2/5] backward compatibility, conversation starter for value formatting --- src/core/core.scale.js | 13 +++++++++++++ src/core/core.tooltip.js | 22 ++++++++++++++++------ test/specs/core.tooltip.tests.js | 4 ++-- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index ff73d98115f..3fb73b8edcc 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -537,6 +537,19 @@ module.exports = Element.extend({ return rawValue; }, + /** + * @private + */ + _getLabel: function(index, datasetIndex) { + var me = this; + var format = me.options.format; + var value = me.getLabelForIndex(index, datasetIndex); + if (typeof format === 'function') { + value = format(value); + } + return value; + }, + /** * Used to get the value to display in the tooltip for the data at the given index * @param index diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index c99c8d355f6..8418a85e247 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -39,13 +39,19 @@ defaults._set('global', { callbacks: { // Args are: (tooltipItems, data) beforeTitle: helpers.noop, - title: function(tooltipItems) { + title: function(tooltipItems, data) { var title = ''; + var labels = data.labels; + var labelCount = labels ? labels.length : 0; if (tooltipItems.length > 0) { var item = tooltipItems[0]; - if (item.indexLabel) { - title = item.indexLabel; + if (item.label) { + title = item.label; + } else if (item.xLabel) { + title = item.xLabel; + } else if (labelCount > 0 && item.index < labelCount) { + title = labels[item.index]; } } @@ -64,7 +70,11 @@ defaults._set('global', { if (label) { label += ': '; } - label += tooltipItem.valueLabel; + if (!helpers.isNullOrUndef(tooltipItem.value)) { + label += tooltipItem.value; + } else { + label += tooltipItem.yLabel; + } return label; }, labelColor: function(tooltipItem, chart) { @@ -207,8 +217,8 @@ function createTooltipItem(element) { return { xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '', yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '', - indexLabel: indexScale ? indexScale.getLabelForIndex(index, datasetIndex) : '', - valueLabel: valueScale ? valueScale.getLabelForIndex(index, datasetIndex) : '', + label: indexScale ? indexScale._getLabel(index, datasetIndex) : '', + value: valueScale ? valueScale._getLabel(index, datasetIndex) : '', index: index, datasetIndex: datasetIndex, x: element._model.x, diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index 303efd4f748..a994b4ac214 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -15,8 +15,8 @@ describe('Core.Tooltip', function() { var tooltipItem = { index: 1, datasetIndex: 0, - indexLabel: 'Point 2', - valueLabel: '20' + xLabel: 'Point 2', + yLabel: '20' }; var label = Chart.defaults.global.tooltips.callbacks.label(tooltipItem, data); From 52d7bcca54b879bf67ff6afcdbb4a4f0b015d547 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Wed, 23 Jan 2019 11:28:52 +0200 Subject: [PATCH 3/5] remove value formatting --- src/core/core.scale.js | 13 ------------- src/core/core.tooltip.js | 4 ++-- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 3fb73b8edcc..ff73d98115f 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -537,19 +537,6 @@ module.exports = Element.extend({ return rawValue; }, - /** - * @private - */ - _getLabel: function(index, datasetIndex) { - var me = this; - var format = me.options.format; - var value = me.getLabelForIndex(index, datasetIndex); - if (typeof format === 'function') { - value = format(value); - } - return value; - }, - /** * Used to get the value to display in the tooltip for the data at the given index * @param index diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 8418a85e247..1c260f3e9fc 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -217,8 +217,8 @@ function createTooltipItem(element) { return { xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '', yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '', - label: indexScale ? indexScale._getLabel(index, datasetIndex) : '', - value: valueScale ? valueScale._getLabel(index, datasetIndex) : '', + label: indexScale ? indexScale.getLabelForIndex(index, datasetIndex) : '', + value: valueScale ? valueScale.getLabelForIndex(index, datasetIndex) : '', index: index, datasetIndex: datasetIndex, x: element._model.x, From 68b2fdb963544bbd1d0f3430fa32286e96ca5f13 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Wed, 23 Jan 2019 22:58:56 +0200 Subject: [PATCH 4/5] little documentation --- docs/configuration/tooltip.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 891d6e1e632..b46711c26d9 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -161,10 +161,16 @@ The tooltip items passed to the tooltip callbacks implement the following interf ```javascript { - // X Value of the tooltip as a string + // Label for the tooltip + label: String, + + // Value for the tooltip + value: String, + + // (deprecated) X Value of the tooltip xLabel: String, - // Y value of the tooltip as a string + // (deprecated) Y value of the tooltip yLabel: String, // Index of the dataset the item comes from From 8bab4bf815605878f8c014854c919270efa6d2f4 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Thu, 24 Jan 2019 11:01:38 +0200 Subject: [PATCH 5/5] update docs --- docs/configuration/tooltip.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index b46711c26d9..ba932b6c754 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -167,10 +167,12 @@ The tooltip items passed to the tooltip callbacks implement the following interf // Value for the tooltip value: String, - // (deprecated) X Value of the tooltip + // X Value of the tooltip + // (deprecated) use `value` or `label` instead xLabel: String, - // (deprecated) Y value of the tooltip + // Y value of the tooltip + // (deprecated) use `value` or `label` instead yLabel: String, // Index of the dataset the item comes from