[Chart.js] Add "pre-connect" event

Author: fabienCambournac

src/Chartjs/README.md

@@ -79,14 +79,34 @@ import { Controller } from 'stimulus';
 
 export default class extends Controller {
     connect() {
+        this.element.addEventListener('chartjs:pre-connect', this._onPreConnect);
         this.element.addEventListener('chartjs:connect', this._onConnect);
     }
 
     disconnect() {
         // You should always remove listeners when the controller is disconnected to avoid side effects
+        this.element.removeEventListener('chartjs:pre-connect', this._onPreConnect);
         this.element.removeEventListener('chartjs:connect', this._onConnect);
     }
 
+    _onPreConnect(event) {
+        // The chart is not yet created
+        console.log(event.detail.options); // You can access the chart options using the event details
+
+        // For instance you can format Y axis
+        event.detail.options.scales = {
+            yAxes: [
+                {
+                    ticks: {
+                        callback: function (value, index, values) {
+                            /* ... */
+                        },
+                    },
+                },
+            ],
+        };
+    }
+
     _onConnect(event) {
         // The chart was just created
         console.log(event.detail.chart); // You can access the chart instance using the event details

src/Chartjs/Resources/assets/dist/controller.js

@@ -59,6 +59,10 @@ var _default = /*#__PURE__*/function (_Controller) {
         payload.options = {};
       }
 
+      this._dispatchEvent('chartjs:pre-connect', {
+        options: payload.options
+      });
+
       var chart = new _chart.Chart(this.element.getContext('2d'), payload);
 
       this._dispatchEvent('chartjs:connect', {

src/Chartjs/Resources/assets/src/controller.js

@@ -19,6 +19,8 @@ export default class extends Controller {
             payload.options = {};
         }
 
+        this._dispatchEvent('chartjs:pre-connect', { options: payload.options });
+
         const chart = new Chart(this.element.getContext('2d'), payload);
 
         this._dispatchEvent('chartjs:connect', { chart });

src/Chartjs/Resources/assets/test/controller.test.js

@@ -17,6 +17,10 @@ import ChartjsController from '../dist/controller';
 // Controller used to check the actual controller was properly booted
 class CheckController extends Controller {
     connect() {
+        this.element.addEventListener('chartjs:pre-connect', () => {
+            this.element.classList.add('pre-connected');
+        });
+
         this.element.addEventListener('chartjs:connect', (event) => {
             this.element.classList.add('connected');
             this.element.chart = event.detail.chart;
@@ -46,10 +50,14 @@ describe('ChartjsController', () => {
             ></canvas>
         `);
 
+        expect(getByTestId(container, 'canvas')).not.toHaveClass('pre-connected');
         expect(getByTestId(container, 'canvas')).not.toHaveClass('connected');
 
         startStimulus();
-        await waitFor(() => expect(getByTestId(container, 'canvas')).toHaveClass('connected'));
+        await waitFor(() => {
+            expect(getByTestId(container, 'canvas')).toHaveClass('pre-connected');
+            expect(getByTestId(container, 'canvas')).toHaveClass('connected');
+        });
 
         const chart = getByTestId(container, 'canvas').chart;
         expect(chart.options.showLines).toBe(true);
@@ -64,10 +72,14 @@ describe('ChartjsController', () => {
             ></canvas>
         `);
 
+        expect(getByTestId(container, 'canvas')).not.toHaveClass('pre-connected');
         expect(getByTestId(container, 'canvas')).not.toHaveClass('connected');
 
         startStimulus();
-        await waitFor(() => expect(getByTestId(container, 'canvas')).toHaveClass('connected'));
+        await waitFor(() => {
+            expect(getByTestId(container, 'canvas')).toHaveClass('pre-connected');
+            expect(getByTestId(container, 'canvas')).toHaveClass('connected');
+        });
 
         const chart = getByTestId(container, 'canvas').chart;
         expect(chart.options.showLines).toBe(false);