[Chart.js] add view-value-change event

Author: IndraGunawan

src/Chartjs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.17.0
+
+-   Add `chartjs:view-value-change` event #1605
+
 ## 2.15.0
 
 -   Remove restriction that prevented Chart.js 3.9 #1518

src/Chartjs/assets/dist/controller.js

@@ -34,8 +34,13 @@ class default_1 extends Controller {
     }
     viewValueChanged() {
         if (this.chart) {
-            this.chart.data = this.viewValue.data;
-            this.chart.options = this.viewValue.options;
+            const viewValue = { data: this.viewValue.data, options: this.viewValue.options };
+            if (Array.isArray(viewValue.options) && 0 === viewValue.options.length) {
+                viewValue.options = {};
+            }
+            this.dispatchEvent('view-value-change', viewValue);
+            this.chart.data = viewValue.data;
+            this.chart.options = viewValue.options;
             this.chart.update();
             const parentElement = this.element.parentElement;
             if (parentElement && this.chart.options.responsive) {

src/Chartjs/assets/src/controller.ts

@@ -59,8 +59,14 @@ export default class extends Controller {
      */
     viewValueChanged(): void {
         if (this.chart) {
-            this.chart.data = this.viewValue.data;
-            this.chart.options = this.viewValue.options;
+            const viewValue = { data: this.viewValue.data, options: this.viewValue.options };
+            if (Array.isArray(viewValue.options) && 0 === viewValue.options.length) {
+                viewValue.options = {};
+            }
+            this.dispatchEvent('view-value-change', viewValue);
+            this.chart.data = viewValue.data;
+            this.chart.options = viewValue.options;
+
             this.chart.update();
 
             // Updating the chart seems to sometimes result in a chart that is

src/Chartjs/assets/test/controller.test.ts

@@ -46,7 +46,7 @@ const startChartTest = async (canvasHtml: string): Promise<{ canvas: HTMLCanvasE
     });
 
     if (!chart) {
-        throw 'Missing TomSelect instance';
+        throw 'Missing ChartJS instance';
     }
 
     return { canvas: canvasElement, chart };
@@ -105,6 +105,33 @@ describe('ChartjsController', () => {
         });
     });
 
+    it('will update when the view data changes without options', async () => {
+        let viewValueChangeCallCount = 0;
+
+        document.body.addEventListener('chartjs:view-value-change', (event: any) => {
+            viewValueChangeCallCount++;
+            event.detail.options.showLines = true;
+        });
+
+        const { chart, canvas } = await startChartTest(`
+           <canvas
+               data-testid='canvas'
+               data-controller='check chartjs'
+               data-chartjs-view-value="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x5B;&#x5D;&#x7D;"
+           ></canvas>
+       `);
+
+        expect(chart.options.showLines).toBeUndefined();
+        // change label: January -> NewDataJanuary
+        const currentViewValue = JSON.parse('{"type":"line","data":{"labels":["NewDataJanuary","February","March","April","May","June","July"],"datasets":[{"label":"My First dataset","backgroundColor":"rgb(255, 99, 132)","borderColor":"rgb(255, 99, 132)","data":[0,10,5,2,20,30,45]}]},"options":[]}');
+        canvas.dataset.chartjsViewValue = JSON.stringify(currentViewValue);
+
+        await waitFor(() => {
+            expect(chart.options.showLines).toBe(true);
+            expect(viewValueChangeCallCount).toBe(1);
+        });
+    });
+
     it('dispatches the events correctly', async () => {
         let preConnectCallCount = 0;
         let preConnectDetail: any = null;