Final components to script setup

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,22 +38,16 @@ use([
 // Define Column labels here to avoid typos
 const CHART_PROFIT = 'Profit';
 
-export default defineComponent({
-  name: 'CumProfitChart',
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
+const props = defineProps({
   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 settingsStore = useSettingsStore();
+// const botList = ref<string[]>([]);
+// const cumulativeData = ref<{ date: number; profit: any }[]>([]);
 
-    const cumulativeData: ComputedRef<{ date: number; profit: number }[]> = computed(() => {
+const cumulativeData: ComputedRef<{ date: number; profit: number }[]> = computed(() => {
   const res: CumProfitData[] = [];
   const resD: CumProfitDataPerDate = {};
   const closedTrades = props.trades
@@ -91,9 +85,9 @@ export default defineComponent({
     // });
     return obj;
   });
-    });
+});
 
-    const chartOptions = computed((): EChartsOption => {
+const chartOptions = computed((): EChartsOption => {
   const chartOptionsLoc: EChartsOption = {
     title: {
       text: 'Cumulative Profit',
@@ -185,10 +179,6 @@ export default defineComponent({
   //   });
   // });
   return chartOptionsLoc;
-    });
-
-    return { settingsStore, cumulativeData, chartOptions };
-  },
 });
 </script>
 

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,11 +44,7 @@ use([
 const CHART_ABS_PROFIT = 'Absolute profit';
 const CHART_TRADE_COUNT = 'Trade Count';
 
-export default defineComponent({
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
+const props = defineProps({
   dailyStats: {
     type: Object as () => DailyReturnValue,
     required: true,
@@ -57,23 +53,22 @@ export default defineComponent({
     type: Boolean,
     default: true,
   },
-  },
+});
 
-  setup(props) {
-    const settingsStore = useSettingsStore();
-    const absoluteMin = computed(() =>
+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(() =>
+);
+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(() => {
+);
+const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
   return {
     title: {
       text: 'Daily profit',
@@ -156,13 +151,6 @@ export default defineComponent({
       },
     ],
   };
-    });
-
-    return {
-      dailyChartOptions,
-      settingsStore,
-    };
-  },
 });
 </script>
 

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,19 +45,13 @@ use([
 const CHART_PROFIT = 'Profit %';
 const CHART_TRADE_COUNT = 'Trade Count';
 
-export default defineComponent({
-  name: 'HourlyChart',
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
+const props = defineProps({
   trades: { required: true, type: Array as () => Trade[] },
   showTitle: { default: true, type: Boolean },
-  },
-  setup(props) {
-    const settingsStore = useSettingsStore();
+});
+const settingsStore = useSettingsStore();
 
-    const hourlyData = computed(() => {
+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 };
@@ -73,8 +67,8 @@ export default defineComponent({
     }
   }
   return res;
-    });
-    const hourlyChartOptions = computed((): EChartsOption => {
+});
+const hourlyChartOptions = computed((): EChartsOption => {
   return {
     title: {
       text: 'Hourly Profit',
@@ -157,9 +151,6 @@ export default defineComponent({
       },
     ],
   };
-    });
-    return { settingsStore, hourlyChartOptions };
-  },
 });
 </script>
 

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,28 +57,22 @@ use([
 // Define Column labels here to avoid typos
 const CHART_PROFIT = 'Trade count';
 
-export default defineComponent({
-  name: 'ProfitDistributionChart',
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
+const props = defineProps({
   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 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);
-    });
+});
 
-    const chartOptions = computed((): EChartsOption => {
+const chartOptions = computed((): EChartsOption => {
   const chartOptionsLoc: EChartsOption = {
     title: {
       text: 'Profit distribution',
@@ -139,10 +133,6 @@ export default defineComponent({
     ],
   };
   return chartOptionsLoc;
-    });
-    // console.log(chartOptions);
-    return { settingsStore, chartOptions, binOptions };
-  },
 });
 </script>
 

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 = [
+const tableFields: TableField[] = [
   { key: 'pair', label: 'Pair' },
-      { key: 'lock_end_timestamp', label: 'Until', formatter: 'timestampms' },
+  { key: 'lock_end_timestamp', label: 'Until', formatter: (value) => timestampms(value as number) },
   { key: 'reason', label: 'Reason' },
   { key: 'actions' },
-    ];
+];
 
-    const removePairLock = (item: Lock) => {
+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,
-    };
-  },
-});
+};
 </script>
 
 <style scoped></style>