Add warning if filler plugin is used but not registered (#10702)

* add warning if filler plugin is used but not registered

* fix lint

* increase size limit

* add test, only put warning in dataset controller

* fix register in docs, remove commented code

* remove other mr

* add documentation

* Apply suggestions from code review

Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
* Also return false if plugin is disabled by options

* improve warning message

* undo docs changes

* update test

Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>

diff --git a/.size-limit.cjs b/.size-limit.cjs
index 11673e8836dd49ae2bad0220c810d9b96d58ff38..17547708230669a0f1b9fd9a9c08b46c86f0ad0f 100644 (file)
--- a/.size-limit.cjs
+++ b/.size-limit.cjs
@@ -7,7 +7,7 @@ function modifyWebpackConfig(config) {
 module.exports = [
   {
     path: 'dist/chart.js',
-    limit: '77 KB',
+    limit: '77.2 KB',
     webpack: false,
     running: false
   },
@@ -41,7 +41,7 @@ module.exports = [
   },
   {
     path: 'dist/chart.js',
-    limit: '22.2 KB',
+    limit: '22.4 KB',
     import: '{ CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale }',
     running: false,
     modifyWebpackConfig

diff --git a/docs/developers/api.md b/docs/developers/api.md
index 12b78663128fa2e3d12fd8d9264e6046e1a111fd..4720b755f66d162260b35df6d20aecbd798f6835 100644 (file)
--- a/docs/developers/api.md
+++ b/docs/developers/api.md
@@ -200,6 +200,14 @@ chart.setActiveElements([
 ]);
 ```
 
+## isPluginEnabled(pluginId)
+
+Returns a boolean if a plugin with the given ID has been registered to the chart instance.
+
+```javascript
+chart.isPluginEnabled('filler');
+```
+
 ## Static: getChart(key)
 
 Finds the chart instance from the given key. If the key is a `string`, it is interpreted as the ID of the Canvas node for the Chart. The key can also be a `CanvasRenderingContext2D` or an `HTMLDOMElement`. This will return `undefined` if no Chart is found. To be found, the chart must have previously been created.

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 17394c9335d4bfd9b84946ae111aaa7af852ff67..396193a170a42951bbe3cbe8da3d8d8ffcf9466d 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -1136,6 +1136,15 @@ class Chart {
     return this._plugins.notify(this, hook, args, filter);
   }
 
+  /**
+   * Check if a plugin with the specific ID is registered and enabled
+   * @param {string} pluginId - The ID of the plugin of which to check if it is enabled
+   * @returns {boolean}
+   */
+  isPluginEnabled(pluginId) {
+    return this._plugins._cache.filter(p => p.plugin.id === pluginId).length === 1;
+  }
+
   /**
         * @private
         */

diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
index 2d545ec9f7ea28c33b59b0e156f2c4d6ff117d8c..d241ec8f31a5259da9c40fbc1fdf3707fcd77d2e 100644 (file)
--- a/src/core/core.datasetController.js
+++ b/src/core/core.datasetController.js
@@ -267,6 +267,10 @@ export default class DatasetController {
     this.linkScales();
     meta._stacked = isStacked(meta.vScale, meta);
     this.addElements();
+
+    if (this.options.fill && !this.chart.isPluginEnabled('filler')) {
+      console.warn("Tried to use the 'fill' option without the 'Filler' plugin enabled. Please import and register the 'Filler' plugin and make sure it is not disabled in the options");
+    }
   }
 
   updateIndex(datasetIndex) {

diff --git a/test/specs/plugin.filler.tests.js b/test/specs/plugin.filler.tests.js
index 067781ebe4cbd0a401f8af8491704fea1f1d1df9..a01f2ff53ccea0107c0fba2c8b84bc0698e3854f 100644 (file)
--- a/test/specs/plugin.filler.tests.js
+++ b/test/specs/plugin.filler.tests.js
@@ -1,4 +1,5 @@
 describe('Plugin.filler', function() {
+  const fillerPluginRegisterWarning = 'Tried to use the \'fill\' option without the \'Filler\' plugin enabled. Please import and register the \'Filler\' plugin and make sure it is not disabled in the options';
   function decodedFillValues(chart) {
     return chart.data.datasets.map(function(dataset, index) {
       var meta = chart.getDatasetMeta(index) || {};
@@ -10,6 +11,43 @@ describe('Plugin.filler', function() {
   describe('auto', jasmine.fixture.specs('plugin.filler'));
 
   describe('dataset.fill', function() {
+    it('Should show a warning when trying to use the filler plugin in the dataset when it\'s not registered', function() {
+      spyOn(console, 'warn');
+      Chart.unregister(Chart.Filler);
+      window.acquireChart({
+        type: 'line',
+        data: {
+          datasets: [{
+            fill: true
+          }]
+        }
+      });
+
+      expect(console.warn).toHaveBeenCalledWith(fillerPluginRegisterWarning);
+
+      Chart.register(Chart.Filler);
+    });
+
+    it('Should show a warning when trying to use the filler plugin in the root options when it\'s not registered', function() {
+      // jasmine.createSpy('warn');
+      spyOn(console, 'warn');
+      Chart.unregister(Chart.Filler);
+      window.acquireChart({
+        type: 'line',
+        data: {
+          datasets: [{
+          }]
+        },
+        options: {
+          fill: true
+        }
+      });
+
+      expect(console.warn).toHaveBeenCalledWith(fillerPluginRegisterWarning);
+
+      Chart.register(Chart.Filler);
+    });
+
     it('should support boundaries', function() {
       var chart = window.acquireChart({
         type: 'line',

diff --git a/types/index.d.ts b/types/index.d.ts
index 7a49a3e296d99cf4fd986a9d9187291dfa0eb5a6..4304319fdcdd2d13df1a00874511c6ed743c748c 100644 (file)
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -530,6 +530,8 @@ export declare class Chart<
 
   notifyPlugins(hook: string, args?: AnyObject): boolean | void;
 
+  isPluginEnabled(pluginId: string): boolean;
+
   static readonly defaults: Defaults;
   static readonly overrides: Overrides;
   static readonly version: string;