From eac34ba448ca80df69013ead8d555fc0ba64142b Mon Sep 17 00:00:00 2001 From: Felix Schnabel Date: Fri, 28 Jun 2024 14:27:01 +0200 Subject: [PATCH 1/6] Check if chart is already connected --- src/Chartjs/assets/dist/controller.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Chartjs/assets/dist/controller.js b/src/Chartjs/assets/dist/controller.js index aa04c9cb36..26fc8a53b2 100644 --- a/src/Chartjs/assets/dist/controller.js +++ b/src/Chartjs/assets/dist/controller.js @@ -20,6 +20,10 @@ class default_1 extends Controller { if (!(this.element instanceof HTMLCanvasElement)) { throw new Error('Invalid element'); } + if(Chart.getChart(this.element)) { + // Chart is already connected + return; + } const payload = this.viewValue; if (Array.isArray(payload.options) && 0 === payload.options.length) { payload.options = {}; From e7e94a55904cf098ad9ff39598081fa5c2af395a Mon Sep 17 00:00:00 2001 From: Felix Schnabel Date: Tue, 2 Jul 2024 10:51:06 +0200 Subject: [PATCH 2/6] Move "chart is already connected" check --- src/Chartjs/assets/dist/controller.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Chartjs/assets/dist/controller.js b/src/Chartjs/assets/dist/controller.js index 26fc8a53b2..2fa7d3a2f7 100644 --- a/src/Chartjs/assets/dist/controller.js +++ b/src/Chartjs/assets/dist/controller.js @@ -11,6 +11,10 @@ class default_1 extends Controller { this.chart = null; } connect() { + if(Chart.getChart(this.element)) { + // Chart is already connected + return; + } if (!isChartInitialized) { isChartInitialized = true; this.dispatchEvent('init', { @@ -20,10 +24,6 @@ class default_1 extends Controller { if (!(this.element instanceof HTMLCanvasElement)) { throw new Error('Invalid element'); } - if(Chart.getChart(this.element)) { - // Chart is already connected - return; - } const payload = this.viewValue; if (Array.isArray(payload.options) && 0 === payload.options.length) { payload.options = {}; From e1a167560c92f6cbbd81f54205a4a4e38489b9e6 Mon Sep 17 00:00:00 2001 From: Felix Schnabel Date: Tue, 2 Jul 2024 10:59:16 +0200 Subject: [PATCH 3/6] Also add check to src --- src/Chartjs/assets/src/controller.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Chartjs/assets/src/controller.ts b/src/Chartjs/assets/src/controller.ts index 1b24a17a81..39dfbadabf 100644 --- a/src/Chartjs/assets/src/controller.ts +++ b/src/Chartjs/assets/src/controller.ts @@ -29,6 +29,11 @@ export default class extends Controller { private chart: Chart | null = null; connect() { + if(Chart.getChart(this.element)) { + // Chart is already connected + return; + } + if (!isChartInitialized) { isChartInitialized = true; this.dispatchEvent('init', { From a5c0204bf5c81ef1a4d68c487e4808e5ddee4acb Mon Sep 17 00:00:00 2001 From: Felix Schnabel Date: Tue, 2 Jul 2024 09:06:21 +0000 Subject: [PATCH 4/6] Fix typescript error and build dist files --- src/Chartjs/assets/dist/controller.js | 3 +-- src/Chartjs/assets/src/controller.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Chartjs/assets/dist/controller.js b/src/Chartjs/assets/dist/controller.js index 2fa7d3a2f7..558dc8ca8c 100644 --- a/src/Chartjs/assets/dist/controller.js +++ b/src/Chartjs/assets/dist/controller.js @@ -11,8 +11,7 @@ class default_1 extends Controller { this.chart = null; } connect() { - if(Chart.getChart(this.element)) { - // Chart is already connected + if (this.element instanceof HTMLCanvasElement && Chart.getChart(this.element)) { return; } if (!isChartInitialized) { diff --git a/src/Chartjs/assets/src/controller.ts b/src/Chartjs/assets/src/controller.ts index 39dfbadabf..5bf6e1cecb 100644 --- a/src/Chartjs/assets/src/controller.ts +++ b/src/Chartjs/assets/src/controller.ts @@ -29,7 +29,7 @@ export default class extends Controller { private chart: Chart | null = null; connect() { - if(Chart.getChart(this.element)) { + if (this.element instanceof HTMLCanvasElement && Chart.getChart(this.element)) { // Chart is already connected return; } From d84aeb035423f8c0a1a3eb5ba11bf52f3f22074b Mon Sep 17 00:00:00 2001 From: Felix Schnabel Date: Thu, 18 Jul 2024 00:02:10 +0200 Subject: [PATCH 5/6] Overwrite `initialize` instead of `connect` method since it is only called once --- src/Chartjs/assets/dist/controller.d.ts | 2 +- src/Chartjs/assets/dist/controller.js | 5 +---- src/Chartjs/assets/src/controller.ts | 7 +------ 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/Chartjs/assets/dist/controller.d.ts b/src/Chartjs/assets/dist/controller.d.ts index 4f1287e904..529f743879 100644 --- a/src/Chartjs/assets/dist/controller.d.ts +++ b/src/Chartjs/assets/dist/controller.d.ts @@ -5,7 +5,7 @@ export default class extends Controller { view: ObjectConstructor; }; private chart; - connect(): void; + initialize(): void; viewValueChanged(): void; private dispatchEvent; } diff --git a/src/Chartjs/assets/dist/controller.js b/src/Chartjs/assets/dist/controller.js index 558dc8ca8c..7a98a1d8e7 100644 --- a/src/Chartjs/assets/dist/controller.js +++ b/src/Chartjs/assets/dist/controller.js @@ -10,10 +10,7 @@ class default_1 extends Controller { super(...arguments); this.chart = null; } - connect() { - if (this.element instanceof HTMLCanvasElement && Chart.getChart(this.element)) { - return; - } + initialize() { if (!isChartInitialized) { isChartInitialized = true; this.dispatchEvent('init', { diff --git a/src/Chartjs/assets/src/controller.ts b/src/Chartjs/assets/src/controller.ts index 5bf6e1cecb..ad9fb657e3 100644 --- a/src/Chartjs/assets/src/controller.ts +++ b/src/Chartjs/assets/src/controller.ts @@ -28,12 +28,7 @@ export default class extends Controller { private chart: Chart | null = null; - connect() { - if (this.element instanceof HTMLCanvasElement && Chart.getChart(this.element)) { - // Chart is already connected - return; - } - + initialize() { if (!isChartInitialized) { isChartInitialized = true; this.dispatchEvent('init', { From f5a54298ef15b335e75f1ec55fa016f530412d2c Mon Sep 17 00:00:00 2001 From: Felix Schnabel Date: Thu, 18 Jul 2024 00:52:24 +0200 Subject: [PATCH 6/6] Destroy the chart on disconnect --- src/Chartjs/assets/dist/controller.d.ts | 3 ++- src/Chartjs/assets/dist/controller.js | 9 ++++++++- src/Chartjs/assets/src/controller.ts | 11 ++++++++++- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/Chartjs/assets/dist/controller.d.ts b/src/Chartjs/assets/dist/controller.d.ts index 529f743879..bc05560d88 100644 --- a/src/Chartjs/assets/dist/controller.d.ts +++ b/src/Chartjs/assets/dist/controller.d.ts @@ -5,7 +5,8 @@ export default class extends Controller { view: ObjectConstructor; }; private chart; - initialize(): void; + connect(): void; + disconnect(): void; viewValueChanged(): void; private dispatchEvent; } diff --git a/src/Chartjs/assets/dist/controller.js b/src/Chartjs/assets/dist/controller.js index 7a98a1d8e7..ce28532416 100644 --- a/src/Chartjs/assets/dist/controller.js +++ b/src/Chartjs/assets/dist/controller.js @@ -10,7 +10,7 @@ class default_1 extends Controller { super(...arguments); this.chart = null; } - initialize() { + connect() { if (!isChartInitialized) { isChartInitialized = true; this.dispatchEvent('init', { @@ -35,6 +35,13 @@ class default_1 extends Controller { this.chart = new Chart(canvasContext, payload); this.dispatchEvent('connect', { chart: this.chart }); } + disconnect() { + if (this.chart) { + this.chart.destroy(); + this.chart = null; + } + this.dispatchEvent('disconnect', { chart: this.chart }); + } viewValueChanged() { if (this.chart) { const viewValue = { data: this.viewValue.data, options: this.viewValue.options }; diff --git a/src/Chartjs/assets/src/controller.ts b/src/Chartjs/assets/src/controller.ts index ad9fb657e3..407551bd62 100644 --- a/src/Chartjs/assets/src/controller.ts +++ b/src/Chartjs/assets/src/controller.ts @@ -28,7 +28,7 @@ export default class extends Controller { private chart: Chart | null = null; - initialize() { + connect() { if (!isChartInitialized) { isChartInitialized = true; this.dispatchEvent('init', { @@ -59,6 +59,15 @@ export default class extends Controller { this.dispatchEvent('connect', { chart: this.chart }); } + disconnect() { + if (this.chart) { + this.chart.destroy(); + this.chart = null; + } + + this.dispatchEvent('disconnect', { chart: this.chart }); + } + /** * If the underlying data or options change, let's update the chart! */