From 08e6e0a6d70d06df23249049aef060ad56380223 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Wed, 14 Aug 2024 09:49:06 +0200
Subject: [PATCH] fix apexchart

---
 src/components/Client/Charts.vue | 26 ++++++++++++--------------
 src/components/ui/Chart.vue      | 11 ++++-------
 src/server/utils/WireGuard.ts    | 14 ++++++++------
 src/utils/chart.ts               |  4 ++--
 4 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/components/Client/Charts.vue b/src/components/Client/Charts.vue
index 9f1350eb..e8ed2c68 100644
--- a/src/components/Client/Charts.vue
+++ b/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>
-      <Chart :options="chartOptionsTX" :series="client.transferTxSeries" />
-    </ClientOnly>
+    <UiChart :options="chartOptionsTX" :series="client.transferTxSeries" />
   </div>
   <div
     v-if="globalStore.uiChartType"
     :class="`absolute z-0 top-0 left-0 right-0 h-6 ${globalStore.uiChartType === 1 && 'line-chart'}`"
   >
-    <ClientOnly>
-      <Chart
-        :options="chartOptionsRX"
-        :series="client.transferRxSeries"
-        style="transform: scaleY(-1)"
-      />
-    </ClientOnly>
+    <UiChart
+      :options="chartOptionsRX"
+      :series="client.transferRxSeries"
+      style="transform: scaleY(-1)"
+    />
   </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">
diff --git a/src/components/ui/Chart.vue b/src/components/ui/Chart.vue
index 4910c653..9976acff 100644
--- a/src/components/ui/Chart.vue
+++ b/src/components/ui/Chart.vue
@@ -1,13 +1,10 @@
 <template>
-  <apexchart
-    width="100%"
-    height="100%"
-    :options="chartOptionsTX"
-    :series="client.transferTxSeries"
-  />
+  <ClientOnly>
+    <apexchart width="100%" height="100%" :options="options" :series="series" />
+  </ClientOnly>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { VueApexChartsComponent } from 'vue3-apexcharts';
 
 defineProps<{
diff --git a/src/server/utils/WireGuard.ts b/src/server/utils/WireGuard.ts
index a297a395..0306828a 100644
--- a/src/server/utils/WireGuard.ts
+++ b/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(() => {});
   }
 }
 
diff --git a/src/utils/chart.ts b/src/utils/chart.ts
index d65df5b4..3dde92ae 100644
--- a/src/utils/chart.ts
+++ b/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)' },