From ff1b217ca9febaed4ad827dda4c737b0d3cf99b2 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Tue, 9 May 2023 20:06:24 +0200
Subject: [PATCH] Final components to script setup

---
 src/components/charts/CumProfitChart.vue      | 278 +++++++++---------
 src/components/charts/DailyChart.vue          | 218 +++++++-------
 src/components/charts/HourlyChart.vue         | 207 +++++++------
 .../charts/ProfitDistributionChart.vue        | 156 +++++-----
 src/components/ftbot/PairLockList.vue         |  47 ++-
 5 files changed, 426 insertions(+), 480 deletions(-)

diff --git a/src/components/charts/CumProfitChart.vue b/src/components/charts/CumProfitChart.vue
index e8ff0fc4..5cf4c3ac 100644
--- a/src/components/charts/CumProfitChart.vue
+++ b/src/components/charts/CumProfitChart.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-chart v-if="trades" :option="chartOptions" autoresize :theme="settingsStore.chartTheme" />
+  <e-charts v-if="trades" :option="chartOptions" autoresize :theme="settingsStore.chartTheme" />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ECharts from 'vue-echarts';
 import { EChartsOption } from 'echarts';
 
@@ -18,7 +18,7 @@ import {
 } from 'echarts/components';
 
 import { ClosedTrade, CumProfitData, CumProfitDataPerDate } from '@/types';
-import { defineComponent, computed, ComputedRef } from 'vue';
+import { computed, ComputedRef } from 'vue';
 import { useSettingsStore } from '@/stores/settings';
 import { dataZoomPartial } from '@/shared/charts/chartZoom';
 
@@ -38,157 +38,147 @@ use([
 // Define Column labels here to avoid typos
 const CHART_PROFIT = 'Profit';
 
-export default defineComponent({
-  name: 'CumProfitChart',
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
-    trades: { required: true, type: Array as () => ClosedTrade[] },
-    showTitle: { default: true, type: Boolean },
-    profitColumn: { default: 'profit_abs', type: String },
-  },
-  setup(props) {
-    const settingsStore = useSettingsStore();
-    // const botList = ref<string[]>([]);
-    // const cumulativeData = ref<{ date: number; profit: any }[]>([]);
+const props = defineProps({
+  trades: { required: true, type: Array as () => ClosedTrade[] },
+  showTitle: { default: true, type: Boolean },
+  profitColumn: { default: 'profit_abs', type: String },
+});
+const settingsStore = useSettingsStore();
+// const botList = ref<string[]>([]);
+// const cumulativeData = ref<{ date: number; profit: any }[]>([]);
 
-    const cumulativeData: ComputedRef<{ date: number; profit: number }[]> = computed(() => {
-      const res: CumProfitData[] = [];
-      const resD: CumProfitDataPerDate = {};
-      const closedTrades = props.trades
-        .slice()
-        .sort((a, b) => (a.close_timestamp > b.close_timestamp ? 1 : -1));
-      let profit = 0.0;
+const cumulativeData: ComputedRef<{ date: number; profit: number }[]> = computed(() => {
+  const res: CumProfitData[] = [];
+  const resD: CumProfitDataPerDate = {};
+  const closedTrades = props.trades
+    .slice()
+    .sort((a, b) => (a.close_timestamp > b.close_timestamp ? 1 : -1));
+  let profit = 0.0;
 
-      for (let i = 0, len = closedTrades.length; i < len; i += 1) {
-        const trade = closedTrades[i];
+  for (let i = 0, len = closedTrades.length; i < len; i += 1) {
+    const trade = closedTrades[i];
 
-        if (trade.close_timestamp && trade[props.profitColumn]) {
-          profit += trade[props.profitColumn];
-          if (!resD[trade.close_timestamp]) {
-            // New timestamp
-            resD[trade.close_timestamp] = { profit, [trade.botId]: profit };
-          } else {
-            // Add to existing profit
-            resD[trade.close_timestamp].profit += trade[props.profitColumn];
-            if (resD[trade.close_timestamp][trade.botId]) {
-              resD[trade.close_timestamp][trade.botId] += trade[props.profitColumn];
-            } else {
-              resD[trade.close_timestamp][trade.botId] = profit;
-            }
-          }
-          res.push({ date: trade.close_timestamp, profit, [trade.botId]: profit });
+    if (trade.close_timestamp && trade[props.profitColumn]) {
+      profit += trade[props.profitColumn];
+      if (!resD[trade.close_timestamp]) {
+        // New timestamp
+        resD[trade.close_timestamp] = { profit, [trade.botId]: profit };
+      } else {
+        // Add to existing profit
+        resD[trade.close_timestamp].profit += trade[props.profitColumn];
+        if (resD[trade.close_timestamp][trade.botId]) {
+          resD[trade.close_timestamp][trade.botId] += trade[props.profitColumn];
+        } else {
+          resD[trade.close_timestamp][trade.botId] = profit;
         }
       }
-      // console.log(resD);
+      res.push({ date: trade.close_timestamp, profit, [trade.botId]: profit });
+    }
+  }
+  // console.log(resD);
 
-      return Object.entries(resD).map(([k, v]) => {
-        const obj = { date: parseInt(k, 10), profit: v.profit };
-        // TODO: The below could allow "lines" per bot"
-        // this.botList.forEach((botId) => {
-        // obj[botId] = v[botId];
-        // });
-        return obj;
-      });
-    });
+  return Object.entries(resD).map(([k, v]) => {
+    const obj = { date: parseInt(k, 10), profit: v.profit };
+    // TODO: The below could allow "lines" per bot"
+    // this.botList.forEach((botId) => {
+    // obj[botId] = v[botId];
+    // });
+    return obj;
+  });
+});
 
-    const chartOptions = computed((): EChartsOption => {
-      const chartOptionsLoc: EChartsOption = {
-        title: {
-          text: 'Cumulative Profit',
-          show: props.showTitle,
+const chartOptions = computed((): EChartsOption => {
+  const chartOptionsLoc: EChartsOption = {
+    title: {
+      text: 'Cumulative Profit',
+      show: props.showTitle,
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    dataset: {
+      dimensions: ['date', 'profit'],
+      source: cumulativeData.value,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        dataset: {
-          dimensions: ['date', 'profit'],
-          source: cumulativeData.value,
+      },
+    },
+    legend: {
+      data: [CHART_PROFIT],
+      right: '5%',
+    },
+    useUTC: false,
+    xAxis: {
+      type: 'time',
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: CHART_PROFIT,
+        splitLine: {
+          show: false,
         },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            label: {
-              backgroundColor: '#6a7985',
-            },
-          },
-        },
-        legend: {
-          data: [CHART_PROFIT],
-          right: '5%',
-        },
-        useUTC: false,
-        xAxis: {
-          type: 'time',
-        },
-        yAxis: [
-          {
-            type: 'value',
-            name: CHART_PROFIT,
-            splitLine: {
-              show: false,
-            },
-            nameRotate: 90,
-            nameLocation: 'middle',
-            nameGap: 40,
-          },
-        ],
-        grid: {
-          bottom: 80,
-        },
-        dataZoom: [
-          {
-            type: 'inside',
-            // xAxisIndex: [0],
-            start: 0,
+        nameRotate: 90,
+        nameLocation: 'middle',
+        nameGap: 40,
+      },
+    ],
+    grid: {
+      bottom: 80,
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        // xAxisIndex: [0],
+        start: 0,
 
-            end: 100,
-          },
-          {
-            // xAxisIndex: [0],
-            bottom: 10,
-            start: 0,
-            end: 100,
-            ...dataZoomPartial,
-          },
-        ],
-        series: [
-          {
-            type: 'line',
-            name: CHART_PROFIT,
-            animation: true,
-            step: 'end',
-            lineStyle: {
-              color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
-            },
-            itemStyle: {
-              color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
-            },
-            // symbol: 'none',
-          },
-        ],
-      };
-      // TODO: maybe have profit lines per bot?
-      // this.botList.forEach((botId: string) => {
-      //   console.log('bot', botId);
-      //   chartOptionsLoc.series.push({
-      //     type: 'line',
-      //     name: botId,
-      //     animation: true,
-      //     step: 'end',
-      //     lineStyle: {
-      //       color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
-      //     },
-      //     itemStylesettingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
-      //     },
-      //     // symbol: 'none',
-      //   });
-      // });
-      return chartOptionsLoc;
-    });
-
-    return { settingsStore, cumulativeData, chartOptions };
-  },
+        end: 100,
+      },
+      {
+        // xAxisIndex: [0],
+        bottom: 10,
+        start: 0,
+        end: 100,
+        ...dataZoomPartial,
+      },
+    ],
+    series: [
+      {
+        type: 'line',
+        name: CHART_PROFIT,
+        animation: true,
+        step: 'end',
+        lineStyle: {
+          color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
+        },
+        itemStyle: {
+          color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
+        },
+        // symbol: 'none',
+      },
+    ],
+  };
+  // TODO: maybe have profit lines per bot?
+  // this.botList.forEach((botId: string) => {
+  //   console.log('bot', botId);
+  //   chartOptionsLoc.series.push({
+  //     type: 'line',
+  //     name: botId,
+  //     animation: true,
+  //     step: 'end',
+  //     lineStyle: {
+  //       color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
+  //     },
+  //     itemStylesettingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
+  //     },
+  //     // symbol: 'none',
+  //   });
+  // });
+  return chartOptionsLoc;
 });
 </script>
 
diff --git a/src/components/charts/DailyChart.vue b/src/components/charts/DailyChart.vue
index 97166c68..b1b2a16d 100644
--- a/src/components/charts/DailyChart.vue
+++ b/src/components/charts/DailyChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chart
+  <e-charts
     v-if="dailyStats.data"
     :option="dailyChartOptions"
     :theme="settingsStore.chartTheme"
@@ -7,8 +7,8 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, ComputedRef } from 'vue';
+<script setup lang="ts">
+import { computed, ComputedRef } from 'vue';
 import ECharts from 'vue-echarts';
 // import { EChartsOption } from 'echarts';
 
@@ -44,125 +44,113 @@ use([
 const CHART_ABS_PROFIT = 'Absolute profit';
 const CHART_TRADE_COUNT = 'Trade Count';
 
-export default defineComponent({
-  components: {
-    'v-chart': ECharts,
+const props = defineProps({
+  dailyStats: {
+    type: Object as () => DailyReturnValue,
+    required: true,
   },
-  props: {
-    dailyStats: {
-      type: Object as () => DailyReturnValue,
-      required: true,
-    },
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
+  showTitle: {
+    type: Boolean,
+    default: true,
   },
+});
 
-  setup(props) {
-    const settingsStore = useSettingsStore();
-    const absoluteMin = computed(() =>
-      props.dailyStats.data.reduce(
-        (min, p) => (p.abs_profit < min ? p.abs_profit : min),
-        props.dailyStats.data[0]?.abs_profit,
-      ),
-    );
-    const absoluteMax = computed(() =>
-      props.dailyStats.data.reduce(
-        (max, p) => (p.abs_profit > max ? p.abs_profit : max),
-        props.dailyStats.data[0]?.abs_profit,
-      ),
-    );
-    const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
-      return {
-        title: {
-          text: 'Daily profit',
-          show: props.showTitle,
+const settingsStore = useSettingsStore();
+const absoluteMin = computed(() =>
+  props.dailyStats.data.reduce(
+    (min, p) => (p.abs_profit < min ? p.abs_profit : min),
+    props.dailyStats.data[0]?.abs_profit,
+  ),
+);
+const absoluteMax = computed(() =>
+  props.dailyStats.data.reduce(
+    (max, p) => (p.abs_profit > max ? p.abs_profit : max),
+    props.dailyStats.data[0]?.abs_profit,
+  ),
+);
+const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
+  return {
+    title: {
+      text: 'Daily profit',
+      show: props.showTitle,
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    dataset: {
+      dimensions: ['date', 'abs_profit', 'trade_count'],
+      source: props.dailyStats.data,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        dataset: {
-          dimensions: ['date', 'abs_profit', 'trade_count'],
-          source: props.dailyStats.data,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            label: {
-              backgroundColor: '#6a7985',
-            },
-          },
-        },
-        legend: {
-          data: [CHART_ABS_PROFIT, CHART_TRADE_COUNT],
-          right: '5%',
-        },
-        xAxis: [
+      },
+    },
+    legend: {
+      data: [CHART_ABS_PROFIT, CHART_TRADE_COUNT],
+      right: '5%',
+    },
+    xAxis: [
+      {
+        type: 'category',
+      },
+    ],
+    visualMap: [
+      {
+        dimension: 1,
+        seriesIndex: 0,
+        show: false,
+        pieces: [
           {
-            type: 'category',
+            max: 0.0,
+            min: absoluteMin.value,
+            color: 'red',
+          },
+          {
+            min: 0.0,
+            max: absoluteMax.value,
+            color: 'green',
           },
         ],
-        visualMap: [
-          {
-            dimension: 1,
-            seriesIndex: 0,
-            show: false,
-            pieces: [
-              {
-                max: 0.0,
-                min: absoluteMin.value,
-                color: 'red',
-              },
-              {
-                min: 0.0,
-                max: absoluteMax.value,
-                color: 'green',
-              },
-            ],
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: CHART_ABS_PROFIT,
-            splitLine: {
-              show: false,
-            },
-            nameRotate: 90,
-            nameLocation: 'middle',
-            nameGap: 40,
-          },
-          {
-            type: 'value',
-            name: CHART_TRADE_COUNT,
-            nameRotate: 90,
-            nameLocation: 'middle',
-            nameGap: 30,
-          },
-        ],
-        series: [
-          {
-            type: 'line',
-            name: CHART_ABS_PROFIT,
-            // Color is induced by visualMap
-          },
-          {
-            type: 'bar',
-            name: CHART_TRADE_COUNT,
-            itemStyle: {
-              color: 'rgba(150,150,150,0.3)',
-            },
-            yAxisIndex: 1,
-          },
-        ],
-      };
-    });
-
-    return {
-      dailyChartOptions,
-      settingsStore,
-    };
-  },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: CHART_ABS_PROFIT,
+        splitLine: {
+          show: false,
+        },
+        nameRotate: 90,
+        nameLocation: 'middle',
+        nameGap: 40,
+      },
+      {
+        type: 'value',
+        name: CHART_TRADE_COUNT,
+        nameRotate: 90,
+        nameLocation: 'middle',
+        nameGap: 30,
+      },
+    ],
+    series: [
+      {
+        type: 'line',
+        name: CHART_ABS_PROFIT,
+        // Color is induced by visualMap
+      },
+      {
+        type: 'bar',
+        name: CHART_TRADE_COUNT,
+        itemStyle: {
+          color: 'rgba(150,150,150,0.3)',
+        },
+        yAxisIndex: 1,
+      },
+    ],
+  };
 });
 </script>
 
diff --git a/src/components/charts/HourlyChart.vue b/src/components/charts/HourlyChart.vue
index da07b72e..d1df2521 100644
--- a/src/components/charts/HourlyChart.vue
+++ b/src/components/charts/HourlyChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chart
+  <e-charts
     v-if="trades.length > 0"
     :option="hourlyChartOptions"
     autoresize
@@ -7,10 +7,10 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ECharts from 'vue-echarts';
 import { useSettingsStore } from '@/stores/settings';
-import { defineComponent, computed } from 'vue';
+import { computed } from 'vue';
 
 import { Trade } from '@/types';
 import { timestampHour } from '@/shared/formatters';
@@ -45,121 +45,112 @@ use([
 const CHART_PROFIT = 'Profit %';
 const CHART_TRADE_COUNT = 'Trade Count';
 
-export default defineComponent({
-  name: 'HourlyChart',
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
-    trades: { required: true, type: Array as () => Trade[] },
-    showTitle: { default: true, type: Boolean },
-  },
-  setup(props) {
-    const settingsStore = useSettingsStore();
+const props = defineProps({
+  trades: { required: true, type: Array as () => Trade[] },
+  showTitle: { default: true, type: Boolean },
+});
+const settingsStore = useSettingsStore();
 
-    const hourlyData = computed(() => {
-      const res = new Array(24);
-      for (let i = 0; i < 24; i += 1) {
-        res[i] = { hour: i, hourDesc: `${i}h`, profit: 0.0, count: 0.0 };
-      }
+const hourlyData = computed(() => {
+  const res = new Array(24);
+  for (let i = 0; i < 24; i += 1) {
+    res[i] = { hour: i, hourDesc: `${i}h`, profit: 0.0, count: 0.0 };
+  }
 
-      for (let i = 0, len = props.trades.length; i < len; i += 1) {
-        const trade = props.trades[i];
-        if (trade.close_timestamp) {
-          const hour = timestampHour(trade.close_timestamp);
+  for (let i = 0, len = props.trades.length; i < len; i += 1) {
+    const trade = props.trades[i];
+    if (trade.close_timestamp) {
+      const hour = timestampHour(trade.close_timestamp);
 
-          res[hour].profit += trade.profit_ratio;
-          res[hour].count += 1;
-        }
-      }
-      return res;
-    });
-    const hourlyChartOptions = computed((): EChartsOption => {
-      return {
-        title: {
-          text: 'Hourly Profit',
-          show: props.showTitle,
+      res[hour].profit += trade.profit_ratio;
+      res[hour].count += 1;
+    }
+  }
+  return res;
+});
+const hourlyChartOptions = computed((): EChartsOption => {
+  return {
+    title: {
+      text: 'Hourly Profit',
+      show: props.showTitle,
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    dataset: {
+      dimensions: ['hourDesc', 'profit', 'count'],
+      source: hourlyData.value,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        dataset: {
-          dimensions: ['hourDesc', 'profit', 'count'],
-          source: hourlyData.value,
+      },
+    },
+    legend: {
+      data: [CHART_PROFIT, CHART_TRADE_COUNT],
+      right: '5%',
+    },
+    xAxis: {
+      type: 'category',
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: CHART_PROFIT,
+        splitLine: {
+          show: false,
         },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            label: {
-              backgroundColor: '#6a7985',
-            },
-          },
-        },
-        legend: {
-          data: [CHART_PROFIT, CHART_TRADE_COUNT],
-          right: '5%',
-        },
-        xAxis: {
-          type: 'category',
-        },
-        yAxis: [
+        nameRotate: 90,
+        nameLocation: 'middle',
+        nameGap: 30,
+      },
+      {
+        type: 'value',
+        name: CHART_TRADE_COUNT,
+        nameRotate: 90,
+        nameLocation: 'middle',
+        nameGap: 30,
+      },
+    ],
+    visualMap: [
+      {
+        dimension: 1,
+        seriesIndex: 0,
+        show: false,
+        pieces: [
           {
-            type: 'value',
-            name: CHART_PROFIT,
-            splitLine: {
-              show: false,
-            },
-            nameRotate: 90,
-            nameLocation: 'middle',
-            nameGap: 30,
+            max: 0.0,
+            min: -2,
+            color: 'red',
           },
           {
-            type: 'value',
-            name: CHART_TRADE_COUNT,
-            nameRotate: 90,
-            nameLocation: 'middle',
-            nameGap: 30,
+            min: 0.0,
+            max: 2,
+            color: 'green',
           },
         ],
-        visualMap: [
-          {
-            dimension: 1,
-            seriesIndex: 0,
-            show: false,
-            pieces: [
-              {
-                max: 0.0,
-                min: -2,
-                color: 'red',
-              },
-              {
-                min: 0.0,
-                max: 2,
-                color: 'green',
-              },
-            ],
-          },
-        ],
-        series: [
-          {
-            type: 'line',
-            name: CHART_PROFIT,
-            animation: false,
-            // symbol: 'none',
-          },
-          {
-            type: 'bar',
-            name: CHART_TRADE_COUNT,
-            animation: false,
-            itemStyle: {
-              color: 'rgba(150,150,150,0.3)',
-            },
-            yAxisIndex: 1,
-          },
-        ],
-      };
-    });
-    return { settingsStore, hourlyChartOptions };
-  },
+      },
+    ],
+    series: [
+      {
+        type: 'line',
+        name: CHART_PROFIT,
+        animation: false,
+        // symbol: 'none',
+      },
+      {
+        type: 'bar',
+        name: CHART_TRADE_COUNT,
+        animation: false,
+        itemStyle: {
+          color: 'rgba(150,150,150,0.3)',
+        },
+        yAxisIndex: 1,
+      },
+    ],
+  };
 });
 </script>
 
diff --git a/src/components/charts/ProfitDistributionChart.vue b/src/components/charts/ProfitDistributionChart.vue
index a1b53f1b..653ce18d 100644
--- a/src/components/charts/ProfitDistributionChart.vue
+++ b/src/components/charts/ProfitDistributionChart.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex flex-column h-100 position-relative">
     <div class="flex-grow-1 order-2">
-      <v-chart v-if="trades" :option="chartOptions" autoresize :theme="settingsStore.chartTheme" />
+      <e-charts v-if="trades" :option="chartOptions" autoresize :theme="settingsStore.chartTheme" />
     </div>
     <b-form-group
       class="w-25 order-1"
@@ -22,8 +22,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import ECharts from 'vue-echarts';
 import { EChartsOption } from 'echarts';
 
@@ -57,92 +57,82 @@ use([
 // Define Column labels here to avoid typos
 const CHART_PROFIT = 'Trade count';
 
-export default defineComponent({
-  name: 'ProfitDistributionChart',
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
-    trades: { required: true, type: Array as () => ClosedTrade[] },
-    showTitle: { default: true, type: Boolean },
-  },
-  setup(props) {
-    const settingsStore = useSettingsStore();
-    // registerTransform(ecStat.transform.histogram);
-    // console.log(profits);
-    // const data = [[]];
-    const binOptions = [10, 15, 20, 25, 50];
-    const data = computed(() => {
-      const profits = props.trades.map((trade) => trade.profit_ratio);
+const props = defineProps({
+  trades: { required: true, type: Array as () => ClosedTrade[] },
+  showTitle: { default: true, type: Boolean },
+});
+const settingsStore = useSettingsStore();
+// registerTransform(ecStat.transform.histogram);
+// console.log(profits);
+// const data = [[]];
+const binOptions = [10, 15, 20, 25, 50];
+const data = computed(() => {
+  const profits = props.trades.map((trade) => trade.profit_ratio);
 
-      return binData(profits, settingsStore.profitDistributionBins);
-    });
+  return binData(profits, settingsStore.profitDistributionBins);
+});
 
-    const chartOptions = computed((): EChartsOption => {
-      const chartOptionsLoc: EChartsOption = {
-        title: {
-          text: 'Profit distribution',
-          show: props.showTitle,
+const chartOptions = computed((): EChartsOption => {
+  const chartOptionsLoc: EChartsOption = {
+    title: {
+      text: 'Profit distribution',
+      show: props.showTitle,
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    dataset: {
+      source: data.value,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        label: {
+          backgroundColor: '#6a7985',
         },
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        dataset: {
-          source: data.value,
+      },
+    },
+    legend: {
+      data: [CHART_PROFIT],
+      right: '5%',
+    },
+    xAxis: {
+      type: 'category',
+      name: 'Profit %',
+      nameLocation: 'middle',
+      nameGap: 25,
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: CHART_PROFIT,
+        splitLine: {
+          show: false,
         },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            label: {
-              backgroundColor: '#6a7985',
-            },
-          },
-        },
-        legend: {
-          data: [CHART_PROFIT],
-          right: '5%',
-        },
-        xAxis: {
-          type: 'category',
-          name: 'Profit %',
-          nameLocation: 'middle',
-          nameGap: 25,
-        },
-        yAxis: [
-          {
-            type: 'value',
-            name: CHART_PROFIT,
-            splitLine: {
-              show: false,
-            },
-            nameRotate: 90,
-            nameLocation: 'middle',
-            nameGap: 35,
-            position: 'left',
-          },
-        ],
-        // grid: {
-        // bottom: 80,
-        // },
+        nameRotate: 90,
+        nameLocation: 'middle',
+        nameGap: 35,
+        position: 'left',
+      },
+    ],
+    // grid: {
+    // bottom: 80,
+    // },
 
-        series: [
-          {
-            type: 'bar',
-            name: CHART_PROFIT,
-            animation: true,
-            encode: {
-              x: 'x0',
-              y: 'y0',
-            },
+    series: [
+      {
+        type: 'bar',
+        name: CHART_PROFIT,
+        animation: true,
+        encode: {
+          x: 'x0',
+          y: 'y0',
+        },
 
-            // symbol: 'none',
-          },
-        ],
-      };
-      return chartOptionsLoc;
-    });
-    // console.log(chartOptions);
-    return { settingsStore, chartOptions, binOptions };
-  },
+        // symbol: 'none',
+      },
+    ],
+  };
+  return chartOptionsLoc;
 });
 </script>
 
diff --git a/src/components/ftbot/PairLockList.vue b/src/components/ftbot/PairLockList.vue
index b9617354..6eb2390e 100644
--- a/src/components/ftbot/PairLockList.vue
+++ b/src/components/ftbot/PairLockList.vue
@@ -21,43 +21,30 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { timestampms } from '@/shared/formatters';
 import { Lock } from '@/types';
 
 import { showAlert } from '@/stores/alerts';
 import { useBotStore } from '@/stores/ftbotwrapper';
-import { defineComponent } from 'vue';
+import { TableField } from 'bootstrap-vue-next';
+const botStore = useBotStore();
 
-export default defineComponent({
-  name: 'PairLockList',
-  setup() {
-    const botStore = useBotStore();
+const tableFields: TableField[] = [
+  { key: 'pair', label: 'Pair' },
+  { key: 'lock_end_timestamp', label: 'Until', formatter: (value) => timestampms(value as number) },
+  { key: 'reason', label: 'Reason' },
+  { key: 'actions' },
+];
 
-    const tableFields = [
-      { key: 'pair', label: 'Pair' },
-      { key: 'lock_end_timestamp', label: 'Until', formatter: 'timestampms' },
-      { key: 'reason', label: 'Reason' },
-      { key: 'actions' },
-    ];
-
-    const removePairLock = (item: Lock) => {
-      console.log(item);
-      if (item.id !== undefined) {
-        botStore.activeBot.deleteLock(item.id);
-      } else {
-        showAlert('This Freqtrade version does not support deleting locks.');
-      }
-    };
-
-    return {
-      timestampms,
-      botStore,
-      tableFields,
-      removePairLock,
-    };
-  },
-});
+const removePairLock = (item: Lock) => {
+  console.log(item);
+  if (item.id !== undefined) {
+    botStore.activeBot.deleteLock(item.id);
+  } else {
+    showAlert('This Freqtrade version does not support deleting locks.');
+  }
+};
 </script>
 
 <style scoped></style>