Tooltip: add dataPoint and rename value to formattedValue (#7618)

* Tooltip: add dataPoint and rename value to formattedValue
* Add a test

diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md
index e4b6dfb94a4398c6aec582bc307671f5aff8b9dc..fcecd887e39c4c9c94618f667edfbc254fd8a3c8 100644 (file)
--- a/docs/docs/configuration/tooltip.md
+++ b/docs/docs/configuration/tooltip.md
@@ -134,8 +134,8 @@ var chart = new Chart(ctx, {
                     if (label) {
                         label += ': ';
                     }
-                    if (!helpers.isNullOrUndef(context.value)) {
-                        label += '$' + context.value;
+                    if (!isNaN(context.dataPoint.y)) {
+                        label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.dataPoint.y);
                     }
                     return label;
                 }
@@ -184,8 +184,11 @@ The tooltip items passed to the tooltip callbacks implement the following interf
     // Label for the tooltip
     label: string,
 
-    // Value for the tooltip
-    value: string,
+    // Parsed data values for the given `dataIndex` and `datasetIndex`
+    dataPoint: object,
+
+    // Formatted value for the tooltip
+    formattedValue: string,
 
     // The dataset the item comes from
     dataset: object

diff --git a/docs/docs/general/options.md b/docs/docs/general/options.md
index 42d744c3ba0aaf52badcd7b551a2dc9eca208e87..f7074356651fe95062952b0de574a6a392bc0f7d 100644 (file)
--- a/docs/docs/general/options.md
+++ b/docs/docs/general/options.md
@@ -41,6 +41,7 @@ The option context is used to give contextual information when resolving options
 The context object contains the following properties:
 
 - `chart`: the associated chart
+- `dataPoint`: the parsed data values for the given `dataIndex` and `datasetIndex`
 - `dataIndex`: index of the current data
 - `dataset`: dataset at index `datasetIndex`
 - `datasetIndex`: index of the current dataset

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index 8db298d4399f4f67bdd1def1e4a03a7a69647eee..d296ea60b30b79bed1d89767bb3f0a84f05999c2 100644 (file)
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -186,12 +186,12 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 
 #### Tooltip
 
-* `xLabel` and `yLabel` were removed. Please use `index` and `value`
+* `xLabel` and `yLabel` were removed. Please use `label` and `formattedValue`
 * The `filter` option will now be passed additional parameters when called and should have the method signature `function(tooltipItem, index, tooltipItems, data)`
 * The `custom` callback now takes a context object that has `tooltip` and `chart` properties
 * All properties of tooltip model related to the tooltip options have been moved to reside within the `options` property.
 * The callbacks no longer are given a `data` parameter. The tooltip item parameter contains the chart and dataset instead
-* The tooltip item's `index` parameter was renamed to `dataIndex`
+* The tooltip item's `index` parameter was renamed to `dataIndex` and `value` was renamed to `formattedValue`
 
 ## Developer migration
 

diff --git a/samples/scriptable/bar.html b/samples/scriptable/bar.html
index cfb18f15e4724e72e6adee7506510e021bc2e713..d7504f97b9d48e952885593be00e29a16b574062 100644 (file)
--- a/samples/scriptable/bar.html
+++ b/samples/scriptable/bar.html
@@ -27,7 +27,7 @@
                utils.srand(110);
 
                function colorize(opaque, ctx) {
-                       var v = ctx.dataset.data[ctx.dataIndex];
+                       var v = ctx.dataPoint.y;
                        var c = v < -50 ? '#D60000'
                                : v < 0 ? '#F46300'
                                : v < 50 ? '#0358B6'

diff --git a/samples/scriptable/line.html b/samples/scriptable/line.html
index 3de95d1c08002a6206c98060271e71bf513d99e6..8116216c3602a52a9f896370bb30d2e2ebba783d 100644 (file)
--- a/samples/scriptable/line.html
+++ b/samples/scriptable/line.html
@@ -40,7 +40,7 @@
                }
 
                function adjustRadiusBasedOnData(ctx) {
-                       var v = ctx.dataset.data[ctx.dataIndex];
+                       var v = ctx.dataPoint.y;
                        return v < 10 ? 5
                                : v < 25 ? 7
                                : v < 50 ? 9

diff --git a/samples/scriptable/pie.html b/samples/scriptable/pie.html
index af7fb08db7fe69af39b571f408457c3bae216826..78993a3872164fddff53b5f54c1a773fbacd04a6 100644 (file)
--- a/samples/scriptable/pie.html
+++ b/samples/scriptable/pie.html
@@ -27,7 +27,7 @@
                utils.srand(110);
 
                function colorize(opaque, hover, ctx) {
-                       var v = ctx.dataset.data[ctx.dataIndex];
+                       var v = ctx.dataPoint;
                        var c = v < -50 ? '#D60000'
                                : v < 0 ? '#F46300'
                                : v < 50 ? '#0358B6'

diff --git a/samples/scriptable/radar.html b/samples/scriptable/radar.html
index 6a58eae470226a017867f5af5a38d087d05b3ba7..cc0d9cbe06125bad9578f910bedfa42266e2841c 100644 (file)
--- a/samples/scriptable/radar.html
+++ b/samples/scriptable/radar.html
@@ -44,7 +44,7 @@
                }
 
                function adjustRadiusBasedOnData(ctx) {
-                       var v = ctx.dataset.data[ctx.dataIndex];
+                       var v = ctx.dataPoint.y;
                        return v < 10 ? 5
                                : v < 25 ? 7
                                : v < 50 ? 9

diff --git a/samples/tooltips/callbacks.html b/samples/tooltips/callbacks.html
index 453250aba36cdbe7142467366e7cd4c8761adf49..c544405e11867f8760c6d3ed05674ff7aef9e1db 100644 (file)
--- a/samples/tooltips/callbacks.html
+++ b/samples/tooltips/callbacks.html
@@ -67,7 +67,7 @@
                                                        var sum = 0;
 
                                                        tooltipItems.forEach(function(tooltipItem) {
-                                                               sum += tooltipItem.dataset.data[tooltipItem.dataIndex];
+                                                               sum += tooltipItem.dataPoint.y;
                                                        });
                                                        return 'Sum: ' + sum;
                                                },

diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js
index 3dd89e9f187b378e45c5f731aaa7b3068b297a12..b7be677bcbaff5fefcfea71b6fda4bc37cb3770e 100644 (file)
--- a/src/controllers/controller.bubble.js
+++ b/src/controllers/controller.bubble.js
@@ -113,6 +113,7 @@ export default class BubbleController extends DatasetController {
                // Scriptable options
                const context = {
                        chart,
+                       dataPoint: parsed,
                        dataIndex: index,
                        dataset,
                        datasetIndex: me.index

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 760428bb19a3e1c3c9836e9713e7d67930447ba2..06bc216985c11ca3e16a3e74ddca243511aeb38d 100644 (file)
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -123,6 +123,7 @@ export default class PolarAreaController extends DatasetController {
                // Scriptable options
                const context = {
                        chart: me.chart,
+                       dataPoint: this.getParsed(index),
                        dataIndex: index,
                        dataset,
                        datasetIndex: me.index
@@ -219,7 +220,7 @@ PolarAreaController.defaults = {
                                return '';
                        },
                        label(context) {
-                               return context.chart.data.labels[context.dataIndex] + ': ' + context.value;
+                               return context.chart.data.labels[context.dataIndex] + ': ' + context.formattedValue;
                        }
                }
        }

diff --git a/src/controllers/controller.scatter.js b/src/controllers/controller.scatter.js
index 01200f86a490a0d9f94a41f8b5274c1ccafc65c2..06f9c8425120ebc78cc24e321abe6e5b55412d7e 100644 (file)
--- a/src/controllers/controller.scatter.js
+++ b/src/controllers/controller.scatter.js
@@ -30,7 +30,7 @@ ScatterController.defaults = {
                                return '';     // doesn't make sense for scatter since data are formatted as a point
                        },
                        label(item) {
-                               return '(' + item.label + ', ' + item.value + ')';
+                               return '(' + item.label + ', ' + item.formattedValue + ')';
                        }
                }
        }

diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
index fb15a4b5131accdf6cbe9dad913f4c128d6c8e2d..9f9213650ce2498daca1ea2d75d8a462964c56af 100644 (file)
--- a/src/core/core.datasetController.js
+++ b/src/core/core.datasetController.js
@@ -693,6 +693,7 @@ export default class DatasetController {
        _getContext(index, active) {
                return {
                        chart: this.chart,
+                       dataPoint: this.getParsed(index),
                        dataIndex: index,
                        dataset: this.getDataset(),
                        datasetIndex: this.index,

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 95d4000a3ffa0318e95f614acf95b113941ee238..d1fe58d9969276d778c7b704418bb7d68b89c35e 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -124,7 +124,8 @@ function createTooltipItem(chart, item) {
        return {
                chart,
                label,
-               value,
+               dataPoint: controller.getParsed(index),
+               formattedValue: value,
                dataset,
                dataIndex: index,
                datasetIndex
@@ -1085,7 +1086,7 @@ export default {
                                if (label) {
                                        label += ': ';
                                }
-                               const value = tooltipItem.value;
+                               const value = tooltipItem.formattedValue;
                                if (!isNullOrUndef(value)) {
                                        label += value;
                                }

diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js
index 2fa26724d166219baa82371705427a4b51d1a5f6..a117b2d41e4341c1ba111d422b4d50d4ee71ea24 100644 (file)
--- a/test/specs/plugin.tooltip.tests.js
+++ b/test/specs/plugin.tooltip.tests.js
@@ -20,7 +20,7 @@ describe('Plugin.Tooltip', function() {
                                datasetIndex: 0,
                                dataset: data.datasets[0],
                                label: 'Point 2',
-                               value: '20'
+                               formattedValue: '20'
                        };
 
                        var label = Chart.defaults.plugins.tooltip.callbacks.label(tooltipItem);
@@ -470,6 +470,47 @@ describe('Plugin.Tooltip', function() {
                jasmine.triggerMouseEvent(chart, 'mousemove', point);
        });
 
+
+       it('Should provide context object to user callbacks', function(done) {
+               const chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       label: 'Dataset 1',
+                                       data: [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}]
+                               }]
+                       },
+                       options: {
+                               scales: {
+                                       x: {
+                                               type: 'linear'
+                                       }
+                               },
+                               tooltips: {
+                                       mode: 'index',
+                                       callbacks: {
+                                               beforeLabel: function(ctx) {
+                                                       return ctx.dataPoint.x + ',' + ctx.dataPoint.y;
+                                               }
+                                       }
+                               }
+                       }
+               });
+
+               // Trigger an event over top of the
+               const meta = chart.getDatasetMeta(0);
+               const point = meta.data[1];
+
+               afterEvent(chart, 'mousemove', function() {
+                       const tooltip = chart.tooltip;
+
+                       expect(tooltip.body[0].before).toEqual(['2,20']);
+
+                       done();
+               });
+               jasmine.triggerMouseEvent(chart, 'mousemove', point);
+       });
+
        it('Should allow sorting items', function(done) {
                var chart = window.acquireChart({
                        type: 'line',
@@ -840,8 +881,8 @@ describe('Plugin.Tooltip', function() {
                                expect(tooltipItem.datasetIndex).toBe(datasetIndex);
                                expect(typeof tooltipItem.label).toBe('string');
                                expect(tooltipItem.label).toBe(chart.data.labels[pointIndex]);
-                               expect(typeof tooltipItem.value).toBe('string');
-                               expect(tooltipItem.value).toBe('' + chart.data.datasets[datasetIndex].data[pointIndex]);
+                               expect(typeof tooltipItem.formattedValue).toBe('string');
+                               expect(tooltipItem.formattedValue).toBe('' + chart.data.datasets[datasetIndex].data[pointIndex]);
 
                                done();
                        });