Merge pull request #47 from Quentium-Forks/fix/watch-props

zellerbaptiste · web-flow · commit fdd3d682f7df · 2025-05-05T11:33:58.000+02:00
fix(render): watch props
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -47,9 +47,9 @@ import { defineCustomElement } from 'vue';
 
 import NewChart from '@/components/NewChart.vue';
 
-const NewChartElement = defineCustomElement(NewChart);
+const NewChartElement = defineCustomElement(NewChart, { shadowRoot: false });
 
-customElements.define('bar-line-chart', NewChartElement, { shadowRoot: false });
+customElements.define('bar-line-chart', NewChartElement);
 ```
 
 Il est également important de rajouter cela dans le fichier `src/charts/main.js` qui permet de l'inclure dans la compilation de tous les web-components ainsi que dans le fichier `src/main.js` pour l'utiliser dans la documentation du `index.html`.
diff --git a/src/charts/BarChart.js b/src/charts/BarChart.js
@@ -4,6 +4,6 @@ import '@/styles/style.scss';
 
 import BarChart from '@/components/BarChart.vue';
 
-const BarChartElement = defineCustomElement(BarChart);
+const BarChartElement = defineCustomElement(BarChart, { shadowRoot: false });
 
-customElements.define('bar-chart', BarChartElement, { shadowRoot: false });
+customElements.define('bar-chart', BarChartElement);
diff --git a/src/charts/BarLineChart.js b/src/charts/BarLineChart.js
@@ -4,6 +4,6 @@ import '@/styles/style.scss';
 
 import BarLineChart from '@/components/BarLineChart.vue';
 
-const BarLineChartElement = defineCustomElement(BarLineChart);
+const BarLineChartElement = defineCustomElement(BarLineChart, { shadowRoot: false });
 
-customElements.define('bar-line-chart', BarLineChartElement, { shadowRoot: false });
+customElements.define('bar-line-chart', BarLineChartElement);
diff --git a/src/charts/DataBox.js b/src/charts/DataBox.js
@@ -5,6 +5,6 @@ import '@/styles/DataBox.scss';
 
 import DataBox from '@/components/DataBox.vue';
 
-const DataBoxElement = defineCustomElement(DataBox);
+const DataBoxElement = defineCustomElement(DataBox, { shadowRoot: false });
 
-customElements.define('data-box', DataBoxElement, { shadowRoot: false });
+customElements.define('data-box', DataBoxElement);
diff --git a/src/charts/GaugeChart.js b/src/charts/GaugeChart.js
@@ -5,6 +5,6 @@ import '@/styles/GaugeChart.scss';
 
 import GaugeChart from '@/components/GaugeChart.vue';
 
-const GaugeChartElement = defineCustomElement(GaugeChart);
+const GaugeChartElement = defineCustomElement(GaugeChart, { shadowRoot: false });
 
-customElements.define('gauge-chart', GaugeChartElement, { shadowRoot: false });
+customElements.define('gauge-chart', GaugeChartElement);
diff --git a/src/charts/LineChart.js b/src/charts/LineChart.js
@@ -4,6 +4,6 @@ import '@/styles/style.scss';
 
 import LineChart from '@/components/LineChart.vue';
 
-const LineChartElement = defineCustomElement(LineChart);
+const LineChartElement = defineCustomElement(LineChart, { shadowRoot: false });
 
-customElements.define('line-chart', LineChartElement, { shadowRoot: false });
+customElements.define('line-chart', LineChartElement);
diff --git a/src/charts/MapChart.js b/src/charts/MapChart.js
@@ -5,6 +5,6 @@ import '@/styles/MapChart.scss';
 
 import MapChart from '@/components/MapChart.vue';
 
-const MapChartElement = defineCustomElement(MapChart);
+const MapChartElement = defineCustomElement(MapChart, { shadowRoot: false });
 
-customElements.define('map-chart', MapChartElement, { shadowRoot: false });
+customElements.define('map-chart', MapChartElement);
diff --git a/src/charts/MapChartReg.js b/src/charts/MapChartReg.js
@@ -5,6 +5,6 @@ import '@/styles/MapChart.scss';
 
 import MapChartReg from '@/components/MapChartReg.vue';
 
-const MapChartRegElement = defineCustomElement(MapChartReg);
+const MapChartRegElement = defineCustomElement(MapChartReg, { shadowRoot: false });
 
-customElements.define('map-chart-reg', MapChartRegElement, { shadowRoot: false });
+customElements.define('map-chart-reg', MapChartRegElement);
diff --git a/src/charts/PieChart.js b/src/charts/PieChart.js
@@ -4,6 +4,6 @@ import '@/styles/style.scss';
 
 import PieChart from '@/components/PieChart.vue';
 
-const PieChartElement = defineCustomElement(PieChart);
+const PieChartElement = defineCustomElement(PieChart, { shadowRoot: false });
 
-customElements.define('pie-chart', PieChartElement, { shadowRoot: false });
+customElements.define('pie-chart', PieChartElement);
diff --git a/src/charts/RadarChart.js b/src/charts/RadarChart.js
@@ -4,6 +4,6 @@ import '@/styles/style.scss';
 
 import RadarChart from '@/components/RadarChart.vue';
 
-const RadarChartElement = defineCustomElement(RadarChart);
+const RadarChartElement = defineCustomElement(RadarChart, { shadowRoot: false });
 
-customElements.define('radar-chart', RadarChartElement, { shadowRoot: false });
+customElements.define('radar-chart', RadarChartElement);
diff --git a/src/charts/ScatterChart.js b/src/charts/ScatterChart.js
@@ -4,6 +4,6 @@ import '@/styles/style.scss';
 
 import ScatterChart from '@/components/ScatterChart.vue';
 
-const ScatterChartElement = defineCustomElement(ScatterChart);
+const ScatterChartElement = defineCustomElement(ScatterChart, { shadowRoot: false });
 
-customElements.define('scatter-chart', ScatterChartElement, { shadowRoot: false });
+customElements.define('scatter-chart', ScatterChartElement);
diff --git a/src/charts/TableChart.js b/src/charts/TableChart.js
@@ -5,6 +5,6 @@ import '@/styles/TableChart.scss';
 
 import TableChart from '@/components/TableChart.vue';
 
-const TableChartElement = defineCustomElement(TableChart);
+const TableChartElement = defineCustomElement(TableChart, { shadowRoot: false });
 
-customElements.define('table-chart', TableChartElement, { shadowRoot: false });
+customElements.define('table-chart', TableChartElement);
diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
@@ -153,6 +153,20 @@ export default {
       legendColors: [],
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the chart is already created to prevent useless re-renders
+        if (this.chartId) {
+          this.resetData();
+          this.getData();
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     configureChartDefaults();
     this.chartId = 'dsfr-chart-' + Math.floor(Math.random() * 1000);
diff --git a/src/components/BarLineChart.vue b/src/components/BarLineChart.vue
@@ -261,6 +261,20 @@ export default {
       colorBarHover: [],
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the chart is already created to prevent useless re-renders
+        if (this.chartId) {
+          this.resetData();
+          this.getData();
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     configureChartDefaults();
     this.chartId = 'dsfr-chart-' + Math.floor(Math.random() * 1000);
diff --git a/src/components/GaugeChart.vue b/src/components/GaugeChart.vue
@@ -142,6 +142,18 @@ export default {
       width: '',
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the widget is already created to prevent useless re-renders
+        if (this.widgetId) {
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     this.widgetId = 'dsfr-widget-' + Math.floor(Math.random() * 1000);
   },
diff --git a/src/components/LineChart.vue b/src/components/LineChart.vue
@@ -221,6 +221,20 @@ export default {
       colorHover: [],
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the chart is already created to prevent useless re-renders
+        if (this.chartId) {
+          this.resetData();
+          this.getData();
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     configureChartDefaults();
     this.chartId = 'dsfr-chart-' + Math.floor(Math.random() * 1000);
diff --git a/src/components/MapChart.vue b/src/components/MapChart.vue
@@ -273,6 +273,18 @@ export default {
       dromColor: '#6b6b6b',
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the widget is already created to prevent useless re-renders
+        if (this.widgetId) {
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     this.widgetId = 'dsfr-widget-' + Math.floor(Math.random() * 1000);
     this.isDep = this.level === 'dep';
diff --git a/src/components/MapChartReg.vue b/src/components/MapChartReg.vue
@@ -142,6 +142,18 @@ export default {
       displayGuyanne: '',
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the widget is already created to prevent useless re-renders
+        if (this.widgetId) {
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     this.widgetId = 'dsfr-widget-' + Math.floor(Math.random() * 1000);
   },
diff --git a/src/components/PieChart.vue b/src/components/PieChart.vue
@@ -122,6 +122,20 @@ export default {
       colorHover: [],
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the chart is already created to prevent useless re-renders
+        if (this.chartId) {
+          this.resetData();
+          this.getData();
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     configureChartDefaults();
     this.chartId = 'dsfr-chart-' + Math.floor(Math.random() * 1000);
diff --git a/src/components/RadarChart.vue b/src/components/RadarChart.vue
@@ -119,6 +119,20 @@ export default {
       colorHover: [],
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the chart is already created to prevent useless re-renders
+        if (this.chartId) {
+          this.resetData();
+          this.getData();
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     configureChartDefaults();
     this.chartId = 'dsfr-chart-' + Math.floor(Math.random() * 1000);
diff --git a/src/components/ScatterChart.vue b/src/components/ScatterChart.vue
@@ -211,6 +211,20 @@ export default {
       colorHover: [],
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the chart is already created to prevent useless re-renders
+        if (this.chartId) {
+          this.resetData();
+          this.getData();
+          this.createChart();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     configureChartDefaults();
     this.chartId = 'dsfr-chart-' + Math.floor(Math.random() * 1000);
diff --git a/src/components/TableChart.vue b/src/components/TableChart.vue
@@ -125,6 +125,19 @@ export default {
       nameParse: [],
     };
   },
+  watch: {
+    $props: {
+      handler() {
+        // Check if the chart is already created to prevent useless re-renders
+        if (this.tableId) {
+          this.resetData();
+          this.getData();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
     this.tableId = 'dsfr-table-' + Math.floor(Math.random() * 1000);
     this.widgetId = 'dsfr-widget-' + Math.floor(Math.random() * 1000);
