Browse Source

fix apexchart

pull/1244/head
Bernd Storath 12 months ago
parent
commit
08e6e0a6d7
  1. 26
      src/components/Client/Charts.vue
  2. 11
      src/components/ui/Chart.vue
  3. 14
      src/server/utils/WireGuard.ts
  4. 4
      src/utils/chart.ts

26
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">

11
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<{

14
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(() => {});
}
}

4
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)' },

Loading…
Cancel
Save