fix: use dynamic import for the apex charts

Author: yaroslav8765

adminforth/spa/src/afcl/AreaChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
 
@@ -137,15 +139,22 @@ const options = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
-watch(() => [options.value, chart.value], (value) => {
+watch(() => [options.value, chart.value], async (value) => {
   if (!value || !chart.value) {
     return;
   }
+
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
+
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {
-    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart = new ApexChartsCtor(chart.value, options.value);
     apexChart.render();
   }
 });

adminforth/spa/src/afcl/BarChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
 
@@ -150,15 +152,22 @@ const options = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
-watch(() => [options.value, chart.value], (value) => {
+watch(() => [options.value, chart.value], async (value) => {
   if (!value || !chart.value) {
     return;
   }
+
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
+
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {
-    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart = new ApexChartsCtor(chart.value, options.value);
     apexChart.render();
   }
 });

adminforth/spa/src/afcl/MixedChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, onUnmounted, watch, computed } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const props = defineProps<{
   data: {
@@ -103,17 +105,23 @@ const chartOptions = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
 
-watch(() => [chartOptions.value, chart.value], ([newOptions, newRef]) => {
+watch(() => [chartOptions.value, chart.value], async ([newOptions, newRef]) => {
   if (!newOptions || !newRef) {
     return;
   }
+
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
   
   if (apexChart) {
     apexChart.updateOptions(newOptions);
   } else if (chart.value) {
-    apexChart = new ApexCharts(chart.value, newOptions);
+    apexChart = new ApexChartsCtor(chart.value, newOptions);
     apexChart.render();
   }
 }, { deep: true });

adminforth/spa/src/afcl/PieChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
 
@@ -154,15 +156,22 @@ const options = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
-watch(() => [options.value, chart.value], (value) => {
+watch(() => [options.value, chart.value], async (value) => {
   if (!value || !chart.value) {
     return;
   }
+
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
+
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {
-    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart = new ApexChartsCtor(chart.value, options.value);
     apexChart.render();
   }
 });

adminforth/spa/src/afcl/TreeMapChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: ApexOptions) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
 
@@ -94,16 +96,22 @@ const options = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
-watch(() => [options.value, chart.value], (value) => {
+watch(() => [options.value, chart.value], async (value) => {
   if (!value || !chart.value) {
     return;
   }
 
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
+
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {
-    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart = new ApexChartsCtor(chart.value, options.value);
     apexChart.render();
   }
 });