Skip to content

Commit

Permalink
add documentation of destroy lifecylce, add afterDestroy hook and dep…
Browse files Browse the repository at this point in the history
…recate destroy
  • Loading branch information
LeeLenaleee committed Dec 1, 2021
1 parent ac69e2b commit ff47c55
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 1 deletion.
Binary file added docs/developers/destroy_flowchart.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions docs/developers/plugins.md
Expand Up @@ -147,3 +147,11 @@ Plugins can interact with the chart throughout the render process. The rendering
Plugins can interact with the chart during the event handling process. The event handling flow is documented in the flowchart below. Each of the green processes is a plugin notification. If a plugin makes changes that require a re-render, the plugin can set `args.changed` to `true` to indicate that a render is needed. The built-in tooltip plugin uses this method to indicate when the tooltip has changed.

![Chart.js event handling flowchart](./event_flowchart.png)


### Chart destroy

Plugins are notified during the destroy process. These hooks can be used to destroy things that the plugin made and used during its life.
The `destroy` hook has been deprecated since Chart.js version 3.7.0, use the `afterDestroy` hook instead.

![Chart.js destroy flowchart](./destroy_flowchart.png)
1 change: 1 addition & 0 deletions src/core/core.controller.js
Expand Up @@ -906,6 +906,7 @@ class Chart {
}

this.notifyPlugins('destroy');
this.notifyPlugins('afterDestroy');

delete instances[this.id];
}
Expand Down
2 changes: 1 addition & 1 deletion src/core/core.plugins.js
Expand Up @@ -41,7 +41,7 @@ export default class PluginService {
const descriptors = filter ? this._descriptors(chart).filter(filter) : this._descriptors(chart);
const result = this._notify(descriptors, chart, hook, args);

if (hook === 'destroy') {
if (hook === 'afterDestroy') {
this._notify(descriptors, chart, 'stop');
this._notify(this._init, chart, 'uninstall');
}
Expand Down
8 changes: 8 additions & 0 deletions types/index.esm.d.ts
Expand Up @@ -1065,8 +1065,16 @@ export interface Plugin<TType extends ChartType = ChartType, O = AnyObject> exte
* @param {Chart} chart - The chart instance.
* @param {object} args - The call arguments.
* @param {object} options - The plugin options.
* @deprecated since version 3.7.0 in favour of afterDestroy
*/
destroy?(chart: Chart, args: EmptyObject, options: O): void;
/**
* Called after the chart has been destroyed.
* @param {Chart} chart - The chart instance.
* @param {object} args - The call arguments.
* @param {object} options - The plugin options.
*/
afterDestroy?(chart: Chart, args: EmptyObject, options: O): void;
/**
* Called after chart is destroyed on all plugins that were installed for that chart. This hook is also invoked for disabled plugins (options === false).
* @param {Chart} chart - The chart instance.
Expand Down

0 comments on commit ff47c55

Please sign in to comment.