]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Interactions cleanup (#6825)
authorBen McCann <322311+benmccann@users.noreply.github.com>
Sat, 14 Dec 2019 18:09:50 +0000 (10:09 -0800)
committerEvert Timberg <evert.timberg+github@gmail.com>
Sat, 14 Dec 2019 18:09:50 +0000 (13:09 -0500)
docs/configuration/tooltip.md
docs/developers/charts.md
docs/getting-started/v3-migration.md
src/core/core.interaction.js
src/core/core.tooltip.js
test/specs/core.tooltip.tests.js

index 7ffefd93ddf9fe657af4f2e80228fc7c5aa284e1..30d2e121dc402b4cc99ee5a87ebf4297844e9611 100644 (file)
@@ -187,13 +187,7 @@ The tooltip items passed to the tooltip callbacks implement the following interf
     datasetIndex: number,
 
     // Index of this data item in the dataset
-    index: number,
-
-    // X position of matching point
-    x: number,
-
-    // Y position of matching point
-    y: number
+    index: number
 }
 ```
 
index e3949b064cb9926267cfa9cb7bacb42718eed9d1..2e2e5c231c9d4d368f34ca71b65192fd2bbbf7f7 100644 (file)
@@ -34,10 +34,10 @@ Dataset controllers must implement the following interface.
     draw: function(ease) {},
 
     // Remove hover styling from the given element
-    removeHoverStyle: function(element) {},
+    removeHoverStyle: function(element, datasetIndex, index) {},
 
     // Add hover styling to the given element
-    setHoverStyle: function(element) {},
+    setHoverStyle: function(element, datasetIndex, index) {},
 
     // Update the elements in response to new data
     // @param reset : if true, put the elements into a reset state so they can animate to their final values
index ffa87614f9f374211ba58b65a1721a596cdb909b..dd8d3a222bdd3dd87c38e90f6750f9e7396a6ac7 100644 (file)
@@ -83,6 +83,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 * `Scale.ticksAsNumbers`
 * `Scale.handleDirectionalChanges` is now private
 * `Scale.tickValues` is now private
+* The tooltip item's `x` and `y` attributes were removed. Use `datasetIndex` and `index` to get the element and any corresponding data from it
 
 #### Removal of private APIs
 
@@ -142,7 +143,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 
 ##### Dataset Controllers
 
-* `setHoverStyle` now additionally takes the `datasetIndex` and `index`
+* `setHoverStyle` and `removeHoverStyle` now additionally take the `datasetIndex` and `index`
 
 #### Interactions
 
index 792ce2ecb3577a2c2b7cfc49733f6307e7193f4f..ad1ec471793529808a5467ba0b12827fe3ca2ae8 100644 (file)
@@ -58,7 +58,7 @@ function getIntersectItems(chart, position) {
 }
 
 /**
- * Helper function to get the items nearest to the event position considering all visible items in teh chart
+ * Helper function to get the items nearest to the event position considering all visible items in the chart
  * @param {Chart} chart - the chart to look at elements from
  * @param {object} position - the point to be nearest to
  * @param {boolean} intersect - if true, only consider items that intersect the position
@@ -104,31 +104,6 @@ function getDistanceMetricForAxis(axis) {
        };
 }
 
-function indexMode(chart, e, options) {
-       var position = getRelativePosition(e, chart);
-       // Default axis for index mode is 'x' to match old behaviour
-       options.axis = options.axis || 'x';
-       var distanceMetric = getDistanceMetricForAxis(options.axis);
-       var items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
-       var elements = [];
-
-       if (!items.length) {
-               return [];
-       }
-
-       chart._getSortedVisibleDatasetMetas().forEach(function(meta) {
-               var index = items[0].index;
-               var element = meta.data[index];
-
-               // don't count items that are skipped (null data)
-               if (element && !element._view.skip) {
-                       elements.push({element, datasetIndex: meta.index, index});
-               }
-       });
-
-       return elements;
-}
-
 /**
  * @interface IInteractionOptions
  */
@@ -155,7 +130,29 @@ module.exports = {
                 * @param {IInteractionOptions} options - options to use during interaction
                 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
                 */
-               index: indexMode,
+               index: function(chart, e, options) {
+                       const position = getRelativePosition(e, chart);
+                       // Default axis for index mode is 'x' to match old behaviour
+                       const distanceMetric = getDistanceMetricForAxis(options.axis || 'x');
+                       const items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
+                       const elements = [];
+
+                       if (!items.length) {
+                               return [];
+                       }
+
+                       chart._getSortedVisibleDatasetMetas().forEach(function(meta) {
+                               const index = items[0].index;
+                               const element = meta.data[index];
+
+                               // don't count items that are skipped (null data)
+                               if (element && !element._view.skip) {
+                                       elements.push({element, datasetIndex: meta.index, index});
+                               }
+                       });
+
+                       return elements;
+               },
 
                /**
                 * Returns items in the same dataset. If the options.intersect parameter is true, we only return items if we intersect something
@@ -167,10 +164,9 @@ module.exports = {
                 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
                 */
                dataset: function(chart, e, options) {
-                       var position = getRelativePosition(e, chart);
-                       options.axis = options.axis || 'xy';
-                       var distanceMetric = getDistanceMetricForAxis(options.axis);
-                       var items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
+                       const position = getRelativePosition(e, chart);
+                       const distanceMetric = getDistanceMetricForAxis(options.axis || 'xy');
+                       let items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
 
                        if (items.length > 0) {
                                items = [{datasetIndex: items[0].datasetIndex}]; // when mode: 'dataset' we only need to return datasetIndex
@@ -188,7 +184,7 @@ module.exports = {
                 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
                 */
                point: function(chart, e) {
-                       var position = getRelativePosition(e, chart);
+                       const position = getRelativePosition(e, chart);
                        return getIntersectItems(chart, position);
                },
 
@@ -201,9 +197,8 @@ module.exports = {
                 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
                 */
                nearest: function(chart, e, options) {
-                       var position = getRelativePosition(e, chart);
-                       options.axis = options.axis || 'xy';
-                       var distanceMetric = getDistanceMetricForAxis(options.axis);
+                       const position = getRelativePosition(e, chart);
+                       const distanceMetric = getDistanceMetricForAxis(options.axis || 'xy');
                        return getNearestItems(chart, position, options.intersect, distanceMetric);
                },
 
@@ -216,9 +211,9 @@ module.exports = {
                 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
                 */
                x: function(chart, e, options) {
-                       var position = getRelativePosition(e, chart);
-                       var items = [];
-                       var intersectsItem = false;
+                       const position = getRelativePosition(e, chart);
+                       const items = [];
+                       let intersectsItem = false;
 
                        parseVisibleItems(chart, function(element, datasetIndex, index) {
                                if (element.inXRange(position.x)) {
@@ -233,7 +228,7 @@ module.exports = {
                        // If we want to trigger on an intersect and we don't have any items
                        // that intersect the position, return nothing
                        if (options.intersect && !intersectsItem) {
-                               items = [];
+                               return [];
                        }
                        return items;
                },
@@ -247,9 +242,9 @@ module.exports = {
                 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
                 */
                y: function(chart, e, options) {
-                       var position = getRelativePosition(e, chart);
-                       var items = [];
-                       var intersectsItem = false;
+                       const position = getRelativePosition(e, chart);
+                       const items = [];
+                       let intersectsItem = false;
 
                        parseVisibleItems(chart, function(element, datasetIndex, index) {
                                if (element.inYRange(position.y)) {
@@ -264,7 +259,7 @@ module.exports = {
                        // If we want to trigger on an intersect and we don't have any items
                        // that intersect the position, return nothing
                        if (options.intersect && !intersectsItem) {
-                               items = [];
+                               return [];
                        }
                        return items;
                }
index c23a4073ab6b417e1b6b83b3f470340f88b54f0c..73122f8df50073ec709f50c5948e6e085db0a31b 100644 (file)
@@ -205,16 +205,14 @@ function splitNewlines(str) {
  * @return new tooltip item
  */
 function createTooltipItem(chart, item) {
-       const {datasetIndex, element, index} = item;
+       const {datasetIndex, index} = item;
        const {label, value} = chart.getDatasetMeta(datasetIndex).controller._getLabelAndValue(index);
 
        return {
                label: label,
                value: value,
                index: index,
-               datasetIndex: datasetIndex,
-               x: element._model.x,
-               y: element._model.y
+               datasetIndex: datasetIndex
        };
 }
 
index 5b4a6142bc967f130381f5b06ee4ea73ed31aa57..f0ad7441e0332317bec946732055dfe60831ee1b 100755 (executable)
@@ -913,8 +913,6 @@ describe('Core.Tooltip', function() {
                        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(tooltipItem.x).toBeCloseToPixel(point._model.x);
-                       expect(tooltipItem.y).toBeCloseToPixel(point._model.y);
                });
        });