fix apexchart

src/components/Client/Charts.vue

@@ -3,25 +3,23 @@
     v-if="globalStore.uiChartType"
     :class="`absolute z-0 bottom-0 left-0 right-0 h-6 ${globalStore.uiChartType === 1 && 'line-chart'}`"
   >
-    <ClientOnly>
+    <UiChart :options="chartOptionsTX" :series="client.transferTxSeries" />
-      <Chart :options="chartOptionsTX" :series="client.transferTxSeries" />
-    </ClientOnly>
   </div>
   <div
     v-if="globalStore.uiChartType"
     :class="`absolute z-0 top-0 left-0 right-0 h-6 ${globalStore.uiChartType === 1 && 'line-chart'}`"
   >
-    <ClientOnly>
+    <UiChart
-      <Chart
+      :options="chartOptionsRX"
-        :options="chartOptionsRX"
+      :series="client.transferRxSeries"
-        :series="client.transferRxSeries"
+      style="transform: scaleY(-1)"
-        style="transform: scaleY(-1)"
+    />
-      />
-    </ClientOnly>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { ApexOptions } from 'apexcharts';
+
 defineProps<{
   client: LocalClient;
 }>();
@@ -34,7 +32,7 @@ const chartOptionsTX = computed(() => {
     ...chartOptions,
     colors: [CHART_COLORS.tx[theme.value]],
   };
-  opts.chart.type = UI_CHART_TYPES[globalStore.uiChartType].type || false;
+  opts.chart.type = UI_CHART_TYPES[globalStore.uiChartType].type || undefined;
   opts.stroke.width = UI_CHART_TYPES[globalStore.uiChartType].strokeWidth;
   return opts;
 });
@@ -44,14 +42,14 @@ const chartOptionsRX = computed(() => {
     ...chartOptions,
     colors: [CHART_COLORS.rx[theme.value]],
   };
-  opts.chart.type = UI_CHART_TYPES[globalStore.uiChartType].type || false;
+  opts.chart.type = UI_CHART_TYPES[globalStore.uiChartType].type || undefined;
   opts.stroke.width = UI_CHART_TYPES[globalStore.uiChartType].strokeWidth;
   return opts;
 });
 
 const chartOptions = {
   chart: {
-    type: false as string | boolean,
+    type: undefined as ApexChart['type'],
     background: 'transparent',
     stacked: false,
     toolbar: {
@@ -130,7 +128,7 @@ const chartOptions = {
       },
     },
   },
-};
+} satisfies ApexOptions;
 </script>
 
 <style scoped lang="css">

src/components/ui/Chart.vue

@@ -1,13 +1,10 @@
 <template>
-  <apexchart
+  <ClientOnly>
-    width="100%"
+    <apexchart width="100%" height="100%" :options="options" :series="series" />
-    height="100%"
+  </ClientOnly>
-    :options="chartOptionsTX"
-    :series="client.transferTxSeries"
-  />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { VueApexChartsComponent } from 'vue3-apexcharts';
 
 defineProps<{

src/server/utils/WireGuard.ts

@@ -79,7 +79,7 @@ class WireGuard {
     const config = await this.__buildConfig();
 
     await this.__saveConfig(config);
-    await exec('wg-quick down wg0').catch(() => { });
+    await exec('wg-quick down wg0').catch(() => {});
     await exec('wg-quick up wg0').catch((err) => {
       if (
         err &&
@@ -132,8 +132,9 @@ PostDown = ${WG_POST_DOWN}
 # Client: ${client.name} (${clientId})
 [Peer]
 PublicKey = ${client.publicKey}
-${client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
+${
-        }AllowedIPs = ${client.address}/32`;
+  client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
+}AllowedIPs = ${client.address}/32`;
     }
 
     debug('Config saving...');
@@ -234,8 +235,9 @@ ${WG_MTU ? `MTU = ${WG_MTU}\n` : ''}\
 
 [Peer]
 PublicKey = ${config.server.publicKey}
-${client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
+${
-      }AllowedIPs = ${WG_ALLOWED_IPS}
+  client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
+}AllowedIPs = ${WG_ALLOWED_IPS}
 PersistentKeepalive = ${WG_PERSISTENT_KEEPALIVE}
 Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
   }
@@ -387,7 +389,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
 
   // Shutdown wireguard
   async Shutdown() {
-    await exec('wg-quick down wg0').catch(() => { });
+    await exec('wg-quick down wg0').catch(() => {});
   }
 }
 

src/utils/chart.ts

@@ -1,9 +1,9 @@
 export const UI_CHART_TYPES = [
-  { type: false, strokeWidth: 0 },
+  { type: undefined, strokeWidth: 0 },
   { type: 'line', strokeWidth: 3 },
   { type: 'area', strokeWidth: 0 },
   { type: 'bar', strokeWidth: 0 },
-];
+] as const;
 
 export const CHART_COLORS = {
   rx: { light: 'rgba(128,128,128,0.3)', dark: 'rgba(255,255,255,0.3)' },