Add documentation on how plugin hooks interact with the chart (#8634)

* Add documentation on how plugin hooks interact with the chart

* Add draw.io file for flowcharts

diff --git a/docs/docs/developers/plugin_flowcharts.drawio b/docs/docs/developers/plugin_flowcharts.drawio
new file mode 100644 (file)
index 0000000..280f987
--- /dev/null
+++ b/docs/docs/developers/plugin_flowcharts.drawio
@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2021-03-14T02:13:51.799Z" agent="5.0 (Windows)" etag="MhdoO5B3fqm3WUufCaS0" version="14.4.8" type="device" pages="3"><diagram id="GnJziOrIlQhF6Q0E3uKP" name="Chart render">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</diagram><diagram id="qz6xZkkN5_TWD1aOfnxG" name="Chart Init">7Zhbc5pAFMc/jY/JILfgY7w1bU0n1U4SnzKLHGAjsnRZvH36LrAIBG+xVWOmMz6wZ+//c36cIzWlNZl/oShw74kFXk2WrHlNaddkua7Kci3+SdYitdzoSmpwKLbEoNwwwEsQRklYI2xBWBrICPEYDsrGEfF9GLGSDVFKZuVhNvHKuwbIgYphMEJe1fqELeamVkOTcvsdYMfNdq5LomeCssHCELrIIrOCSenUlBYlhKVPk3kLvFi8TJdHeq+/Pv5uah2r8+vb83T8Yjau0sW675myugIFnx28dFN+GuDmy/feGGyzjZzx9KGfLR2yRaYXWFw+0SSUucQhPvI6ubVJSeRbEK8q8VY+pkdIwI11bnwFxhYiFlDECDe5bOKJXphj9hxPv9ZEa1joac/FykljkTV8RheFSXFzWOzLpyWtbF56v/hSb8Jhh5aZMCSiIzF1RtzGgDZd0B6e7trd17DRWwrNJYaoA2yL0HnAcNKATIAfks+j4CGGp+XDIRHyzmpc7lb+IDy73svbDjlFXiR2armIspg6CohxX1aiwPM4oLG3Zy5mMAhQosKMvyPKvkRhkFJr43kcE0LwKVAG8wMkr0okVlEMcQvxHsqonBWgFia3wHNm+xtNw+Uwsn9OdbPboYP+cKBd9YPLIecfErA5svcgQD4RAdsOWSDgB2HYjg9ggk0ofPUxq3g091d9Nwk29rwW8QhN5iqWBoalcnvIKBlDoceQTUXXj4mKXkalvoaVla0Ii3osWJRzwlIvoJKD82HTzGZ4ypCtFfpUkK3dXK1ANuSV3zrP95DJy8xyIvGw4/PnERcMOCnNmAvM67hb0THBlpUGBoR4icxkvVj7gGCfJXfRmjWtvQ0sUWSKyXlpV/TT5gDeCNyVdK2XiBNK7C27WPkhvklhCLHtEFjFL6sDHO4qfc378FIS2qUzqu2KJe2Q6LmlFC0KAwQV1eAS+6hyOUko0pu/D+8bzx/SExwzlLfJXgjlPoQB8cNEum41qbtkYkbh7oR+ukr2zKXszX/y9yZ/c9Y9nPzTZOcqJ6sSOMmo8FnKX/UtX8a5y9/GpQB2bFC0PUExzgmKthkUZPPa9DP/VVy1z8aKUVE/1hujeGIUWIhV31Mf/2OVqh4txfNm/gk6ranyD/lK5w8=</diagram><diagram id="6Hx3QUBt-kPyE_5nGTOz" name="Chart update">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</diagram></mxfile>
\ No newline at end of file

diff --git a/docs/docs/developers/plugins.md b/docs/docs/developers/plugins.md
index 09417f6098fb1ea032116e611dd8743dd78cf8ac..e3b280e4d429f3945fb3e9fdf65e434181347761 100644 (file)
--- a/docs/docs/developers/plugins.md
+++ b/docs/docs/developers/plugins.md
@@ -1,6 +1,7 @@
 ---
 title: Plugins
 ---
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 Plugins are the most efficient way to customize or change the default behavior of a chart. They have been introduced at [version 2.1.0](https://github.com/chartjs/Chart.js/releases/tag/2.1.0) (global plugins only) and extended at [version 2.5.0](https://github.com/chartjs/Chart.js/releases/tag/v2.5.0) (per chart plugins and options).
 
@@ -119,3 +120,21 @@ var chart = new Chart(ctx, {
 ## Plugin Core API
 
 Read more about the [existing plugin extension hooks](https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts#L733).
+
+### Chart Initialization
+
+Plugins are notified during the initialization process. These hooks can be used to setup data needed for the plugin to operate.
+
+<img alt="Chart.js init flowchart" src={useBaseUrl('img/init_flowchart.png')} />
+
+### Chart Update
+
+Plugins are notified during throughout the update process.
+
+<img alt="Chart.js update flowchart" src={useBaseUrl('img/update_flowchart.png')} />
+
+### Rendering
+
+Plugins can interact with the chart throughout the render process. The rendering process is documented in the flowchart below. Each of the green processes is a plugin notification. The red lines indicate how cancelling part of the render process can occur when a plugin returns `false` from a hook. Not all hooks are cancelable, however, in general most `before*` hooks can be cancelled.
+
+<img alt="Chart.js render pipeline flowchart" src={useBaseUrl('img/render_flowchart.png')} />

diff --git a/docs/static/img/init_flowchart.png b/docs/static/img/init_flowchart.png
new file mode 100644 (file)
index 0000000..49a8671
Binary files /dev/null and b/docs/static/img/init_flowchart.png differ

diff --git a/docs/static/img/render_flowchart.png b/docs/static/img/render_flowchart.png
new file mode 100644 (file)
index 0000000..a140c55
Binary files /dev/null and b/docs/static/img/render_flowchart.png differ

diff --git a/docs/static/img/update_flowchart.png b/docs/static/img/update_flowchart.png
new file mode 100644 (file)
index 0000000..13329de
Binary files /dev/null and b/docs/static/img/update_flowchart.png differ