From dd99005b5ac62f7d616545e65e580f921efa573d Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Thu, 1 Apr 2021 20:47:11 +0300 Subject: [PATCH] Remove line interaction overrides + hover.onHover (#8770) * Remove interaction mode overrides + hover.onHover * Restore bar override --- docs/getting-started/v3-migration.md | 4 +++- src/controllers/controller.bar.js | 2 -- src/controllers/controller.line.js | 6 ----- src/core/core.controller.js | 2 +- src/core/core.defaults.js | 4 +--- test/specs/core.controller.tests.js | 35 ++++++++++++++++------------ types/index.esm.d.ts | 9 +------ 7 files changed, 26 insertions(+), 36 deletions(-) diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md index 954620a20..33b17bbe4 100644 --- a/docs/getting-started/v3-migration.md +++ b/docs/getting-started/v3-migration.md @@ -121,6 +121,7 @@ A number of changes were made to the configuration options passed to the `Chart` * Horizontal Bar default tooltip mode was changed from `'index'` to `'nearest'` to match vertical bar charts * `legend`, `title` and `tooltip` namespaces were moved from `Chart.defaults` to `Chart.defaults.plugins`. * `elements.line.fill` default changed from `true` to `false`. +* Line charts no longer override the default `interaction` mode. Default is changed from `'index'` to `'nearest'`. #### Scales @@ -217,13 +218,14 @@ Animation system was completely rewritten in Chart.js v3. Each property can now #### Interactions * To allow DRY configuration, a root options scope for common interaction options was added. `options.hover` and `options.plugins.tooltip` now both extend from `options.interaction`. Defaults are defined at `defaults.interaction` level, so by default hover and tooltip interactions share the same mode etc. -* `interactions` are now limited to the chart area +* `interactions` are now limited to the chart area + allowed overflow * `{mode: 'label'}` was replaced with `{mode: 'index'}` * `{mode: 'single'}` was replaced with `{mode: 'nearest', intersect: true}` * `modes['X-axis']` was replaced with `{mode: 'index', intersect: false}` * `options.onClick` is now limited to the chart area * `options.onClick` and `options.onHover` now receive the `chart` instance as a 3rd argument * `options.onHover` now receives a wrapped `event` as the first parameter. The previous first parameter value is accessible via `event.native`. +* `options.hover.onHover` was removed, use `options.onHover`. #### Ticks diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index cbac98e51..873cb9547 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -550,8 +550,6 @@ BarController.overrides = { mode: 'index' }, - hover: {}, - scales: { _index_: { type: 'category', diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 85a20da81..da79679e6 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -120,12 +120,6 @@ LineController.defaults = { * @type {any} */ LineController.overrides = { - interaction: { - mode: 'index' - }, - - hover: {}, - scales: { _index_: { type: 'category', diff --git a/src/core/core.controller.js b/src/core/core.controller.js index a0458616f..6e6bfec13 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -1107,7 +1107,7 @@ class Chart { me._lastEvent = null; // Invoke onHover hook - callCallback(options.onHover || hoverOptions.onHover, [e, active, me], me); + callCallback(options.onHover, [e, active, me], me); if (e.type === 'mouseup' || e.type === 'click' || e.type === 'contextmenu') { if (_isPointInArea(e, me.chartArea, me._minPadding)) { diff --git a/src/core/core.defaults.js b/src/core/core.defaults.js index 4d94bbfd2..eb0092894 100644 --- a/src/core/core.defaults.js +++ b/src/core/core.defaults.js @@ -55,9 +55,7 @@ export class Defaults { lineHeight: 1.2, weight: null }; - this.hover = { - onHover: null - }; + this.hover = {}; this.hoverBackgroundColor = (ctx, options) => getHoverColor(options.backgroundColor); this.hoverBorderColor = (ctx, options) => getHoverColor(options.borderColor); this.hoverColor = (ctx, options) => getHoverColor(options.color); diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js index 21603c471..ed393deb3 100644 --- a/test/specs/core.controller.tests.js +++ b/test/specs/core.controller.tests.js @@ -94,10 +94,11 @@ describe('Chart', function() { it('should initialize config with default interaction options', function() { var callback = function() {}; var defaults = Chart.defaults; - var defaultMode = overrides.line.interaction.mode; - defaults.hover.onHover = callback; - overrides.line.interaction.mode = 'test'; + defaults.onHover = callback; + overrides.line.interaction = { + mode: 'test' + }; var chart = acquireChart({ type: 'line' @@ -105,19 +106,21 @@ describe('Chart', function() { var options = chart.options; expect(options.font.size).toBe(defaults.font.size); - expect(options.hover.onHover).toBe(callback); + expect(options.onHover).toBe(callback); expect(options.hover.mode).toBe('test'); - defaults.hover.onHover = null; - overrides.line.interaction.mode = defaultMode; + defaults.onHover = null; + delete overrides.line.interaction; }); it('should initialize config with default hover options', function() { var callback = function() {}; var defaults = Chart.defaults; - defaults.hover.onHover = callback; - overrides.line.hover.mode = 'test'; + defaults.onHover = callback; + overrides.line.hover = { + mode: 'test' + }; var chart = acquireChart({ type: 'line' @@ -125,11 +128,11 @@ describe('Chart', function() { var options = chart.options; expect(options.font.size).toBe(defaults.font.size); - expect(options.hover.onHover).toBe(callback); + expect(options.onHover).toBe(callback); expect(options.hover.mode).toBe('test'); - defaults.hover.onHover = null; - delete overrides.line.hover.mode; + defaults.onHover = null; + delete overrides.line.hover; }); it('should override default options', function() { @@ -137,8 +140,10 @@ describe('Chart', function() { var defaults = Chart.defaults; var defaultSpanGaps = defaults.datasets.line.spanGaps; - defaults.hover.onHover = callback; - overrides.line.hover.mode = 'x-axis'; + defaults.onHover = callback; + overrides.line.hover = { + mode: 'x-axis' + }; defaults.datasets.line.spanGaps = true; var chart = acquireChart({ @@ -161,8 +166,8 @@ describe('Chart', function() { expect(options.hover.mode).toBe('dataset'); expect(options.plugins.title.position).toBe('bottom'); - defaults.hover.onHover = null; - delete overrides.line.hover.mode; + defaults.onHover = null; + delete overrides.line.hover; defaults.datasets.line.spanGaps = defaultSpanGaps; }); diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index fea930603..39cedbc4a 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -1343,13 +1343,6 @@ export interface CoreInteractionOptions { axis: 'x' | 'y' | 'xy'; } -export interface HoverInteractionOptions extends CoreInteractionOptions { - /** - * Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart. - */ - onHover(event: ChartEvent, elements: ActiveElement[], chart: Chart): void; -} - export interface CoreChartOptions extends ParsingOptions, AnimationOptions { datasets: { @@ -1418,7 +1411,7 @@ export interface CoreChartOptions extends ParsingOption interaction: CoreInteractionOptions; - hover: HoverInteractionOptions; + hover: CoreInteractionOptions; /** * The events option defines the browser events that the chart should listen to for tooltips and hovering.