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,17 +38,11 @@ use([
 // Define Column labels here to avoid typos
 const CHART_PROFIT = 'Profit';
 
-export default defineComponent({
+const props = defineProps({
-  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 }[]>([]);
@@ -186,10 +180,6 @@ export default defineComponent({
   // });
   return chartOptionsLoc;
 });
-
-    return { settingsStore, cumulativeData, chartOptions };
-  },
-});
 </script>
 
 <style scoped>

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">
+<script setup lang="ts">
-import { defineComponent, computed, ComputedRef } from 'vue';
+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({
+const props = defineProps({
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
   dailyStats: {
     type: Object as () => DailyReturnValue,
     required: true,
@@ -57,9 +53,8 @@ export default defineComponent({
     type: Boolean,
     default: true,
   },
-  },
+});
 
-  setup(props) {
 const settingsStore = useSettingsStore();
 const absoluteMin = computed(() =>
   props.dailyStats.data.reduce(
@@ -157,13 +152,6 @@ export default defineComponent({
     ],
   };
 });
-
-    return {
-      dailyChartOptions,
-      settingsStore,
-    };
-  },
-});
 </script>
 
 <style lang="scss" scoped>

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,16 +45,10 @@ use([
 const CHART_PROFIT = 'Profit %';
 const CHART_TRADE_COUNT = 'Trade Count';
 
-export default defineComponent({
+const props = defineProps({
-  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 hourlyData = computed(() => {
@@ -158,9 +152,6 @@ export default defineComponent({
     ],
   };
 });
-    return { settingsStore, hourlyChartOptions };
-  },
-});
 </script>
 
 <style scoped>

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">
+<script setup lang="ts">
-import { defineComponent, computed } from 'vue';
+import { computed } from 'vue';
 import ECharts from 'vue-echarts';
 import { EChartsOption } from 'echarts';
 
@@ -57,16 +57,10 @@ use([
 // Define Column labels here to avoid typos
 const CHART_PROFIT = 'Trade count';
 
-export default defineComponent({
+const props = defineProps({
-  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);
@@ -140,10 +134,6 @@ export default defineComponent({
   };
   return chartOptionsLoc;
 });
-    // console.log(chartOptions);
-    return { settingsStore, chartOptions, binOptions };
-  },
-});
 </script>
 
 <style scoped>

src/components/ftbot/PairLockList.vue

@@ -21,22 +21,18 @@
   </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';
-
-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' },
 ];
@@ -49,15 +45,6 @@ export default defineComponent({
     showAlert('This Freqtrade version does not support deleting locks.');
   }
 };
-
-    return {
-      timestampms,
-      botStore,
-      tableFields,
-      removePairLock,
-    };
-  },
-});
 </script>
 
 <style scoped></style>