Merge pull request #1181 from freqtrade/dependabot/npm_and_yarn/main/bootstrap-vue-next-0.8.0

build(deps): bump bootstrap-vue-next from 0.7.3 to 0.8.0

cypress/e2e/settings.cy.ts

@@ -11,7 +11,7 @@ describe('Settings', () => {
     cy.wait('@ShowConf');
     // cy.wait('@Strategies');
 
-    cy.get('[id=avatar-drop]').parent().click();
+    cy.get('[id=avatar-drop]').should('be.visible').parent().click();
     cy.get('.dropdown-menu > [href="/settings"]').click();
     cy.contains('FreqUI Settings');
 

package.json

@@ -21,7 +21,7 @@
     "@vueuse/core": "^9.13.0",
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
-    "bootstrap-vue-next": "^0.7.3",
+    "bootstrap-vue-next": "^0.8.0",
     "core-js": "^3.30.0",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",

src/components/ftbot/BacktestResultView.vue

@@ -29,7 +29,7 @@
           small
           hover
           stacked="sm"
-          :items="backtestResult.exit_reason_summary || backtestResult.sell_reason_summary"
+          :items="(backtestResult.exit_reason_summary || backtestResult.sell_reason_summary) as unknown as TableItem[]"
           :fields="perExitReason"
         >
         </b-table>
@@ -39,7 +39,7 @@
           small
           hover
           stacked="sm"
-          :items="backtestResult.results_per_pair"
+          :items="backtestResult.results_per_pair as unknown as TableItem[]"
           :fields="perPairFields"
         >
         </b-table>
@@ -68,6 +68,7 @@ import {
   formatPrice,
   humanizeDurationFromSeconds,
 } from '@/shared/formatters';
+import { TableField, TableItem } from 'bootstrap-vue-next';
 
 const props = defineProps({
   backtestResult: { required: true, type: Object as () => StrategyBacktestResult },
@@ -389,12 +390,12 @@ const perExitReason = computed(() => {
     { key: 'losses', label: 'Losses' },
   ];
 });
-const backtestResultFields: Array<Record<string, string>> = [
+const backtestResultFields: TableField[] = [
   { key: 'metric', label: 'Metric' },
   { key: 'value', label: 'Value' },
 ];
 
-const backtestsettingFields: Array<Record<string, string>> = [
+const backtestsettingFields: TableField[] = [
   { key: 'setting', label: 'Setting' },
   { key: 'value', label: 'Value' },
 ];

src/components/ftbot/BotComparisonList.vue

@@ -58,6 +58,7 @@ import { formatPrice } from '@/shared/formatters';
 import { defineComponent, computed } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { ProfitInterface, ComparisonTableItems } from '@/types';
+import { TableField, TableItem } from 'bootstrap-vue-next';
 
 export default defineComponent({
   name: 'BotComparisonList',
@@ -65,7 +66,7 @@ export default defineComponent({
   setup() {
     const botStore = useBotStore();
 
-    const tableFields: Record<string, string | Function>[] = [
+    const tableFields: TableField[] = [
       { key: 'botName', label: 'Bot' },
       { key: 'trades', label: 'Trades' },
       { key: 'profitOpen', label: 'Open Profit' },
@@ -74,7 +75,7 @@ export default defineComponent({
       { key: 'winVsLoss', label: 'W/L' },
     ];
 
-    const tableItems = computed(() => {
+    const tableItems = computed<TableItem[]>(() => {
       const val: ComparisonTableItems[] = [];
       const summary: ComparisonTableItems = {
         botId: undefined,
@@ -121,7 +122,7 @@ export default defineComponent({
         }
       });
       val.push(summary);
-      return val;
+      return val as unknown as TableItem[];
     });
 
     return {

src/components/ftbot/DailyStats.vue

@@ -20,8 +20,9 @@
 <script lang="ts">
 import { defineComponent, computed, onMounted } from 'vue';
 import DailyChart from '@/components/charts/DailyChart.vue';
-import { formatPercent, formatPrice } from '@/shared/formatters';
+import { formatPercent } from '@/shared/formatters';
 import { useBotStore } from '@/stores/ftbotwrapper';
+import { TableField } from 'bootstrap-vue-next';
 
 export default defineComponent({
   name: 'DailyStats',
@@ -30,20 +31,28 @@ export default defineComponent({
   },
   setup() {
     const botStore = useBotStore();
-    const dailyFields = computed(() => {
-      return [
+    const dailyFields = computed<TableField[]>(() => {
+      const res: TableField[] = [
         { key: 'date', label: 'Day' },
-        { key: 'abs_profit', label: 'Profit', formatter: (value) => formatPrice(value) },
+        {
+          key: 'abs_profit',
+          label: 'Profit',
+          // formatter: (value: unknown) => formatPrice(value as number),
+        },
         {
           key: 'fiat_value',
           label: `In ${botStore.activeBot.dailyStats.fiat_display_currency}`,
-          formatter: (value) => formatPrice(value, 2),
+          // formatter: (value: unknown) => formatPrice(value as number, 2),
         },
         { key: 'trade_count', label: 'Trades' },
-        botStore.activeBot.botApiVersion >= 2.16
-          ? { key: 'rel_profit', label: 'Profit%', formatter: (value) => formatPercent(value, 2) }
-          : null,
       ];
+      if (botStore.activeBot.botApiVersion >= 2.16)
+        res.push({
+          key: 'rel_profit',
+          label: 'Profit%',
+          formatter: (value: unknown) => formatPercent(value as number, 2),
+        });
+      return res;
     });
     onMounted(() => {
       botStore.activeBot.getDaily();

src/components/ftbot/Performance.vue

@@ -15,19 +15,20 @@
 import { formatPrice } from '@/shared/formatters';
 import { defineComponent, computed } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
+import { TableField } from 'bootstrap-vue-next';
 
 export default defineComponent({
   name: 'Performance',
   setup() {
     const botStore = useBotStore();
-    const tableFields = computed(() => {
+    const tableFields = computed<TableField[]>(() => {
       return [
         { key: 'pair', label: 'Pair' },
         { key: 'profit', label: 'Profit %' },
         {
           key: 'profit_abs',
           label: `Profit ${botStore.activeBot.botState?.stake_currency}`,
-          formatter: (v: number) => formatPrice(v, 5),
+          formatter: (v: unknown) => formatPrice(v as number, 5),
         },
         { key: 'count', label: 'Count' },
       ];

src/components/ftbot/TradeList.vue

@@ -11,7 +11,7 @@
             t.pair.toLowerCase().includes(filterText.toLowerCase()) ||
             t.exit_reason?.toLowerCase().includes(filterText.toLowerCase()) ||
             t.enter_tag?.toLowerCase().includes(filterText.toLowerCase()),
-        )
+        ) as unknown as TableItem[]
       "
       :fields="tableFields"
       show-empty
@@ -104,6 +104,7 @@ import ForceExitForm from '@/components/ftbot/ForceExitForm.vue';
 import { ref, computed, watch } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { useRouter } from 'vue-router';
+import { TableField, TableItem } from 'bootstrap-vue-next';
 
 enum ModalReasons {
   removeTrade,
@@ -134,8 +135,8 @@ const removeTradeVisible = ref(false);
 const confirmExitText = ref('');
 const confirmExitValue = ref<ModalReasons | null>(null);
 
-const openFields: Record<string, string | Function>[] = [{ key: 'actions' }];
-const closedFields: Record<string, string | Function>[] = [
+const openFields: TableField[] = [{ key: 'actions' }];
+const closedFields: TableField[] = [
   { key: 'close_timestamp', label: 'Close date' },
   { key: 'exit_reason', label: 'Close Reason' },
 ];
@@ -146,8 +147,8 @@ const rows = computed(() => {
   return props.trades.length;
 });
 
-const tableFields: Record<string, string | Function>[] = [
-  props.multiBotView ? { key: 'botName', label: 'Bot' } : {},
+const tableFields: TableField[] = [
+  props.multiBotView ? { key: 'botName', label: 'Bot' } : { key: 'actions' },
   { key: 'trade_id', label: 'ID' },
   { key: 'pair', label: 'Pair' },
   { key: 'amount', label: 'Amount' },
@@ -158,19 +159,24 @@ const tableFields: Record<string, string | Function>[] = [
   {
     key: 'open_rate',
     label: 'Open rate',
-    formatter: (value: number) => formatPrice(value),
+    formatter: (value: unknown) => formatPrice(value as number),
   },
   {
     key: props.activeTrades ? 'current_rate' : 'close_rate',
     label: props.activeTrades ? 'Current rate' : 'Close rate',
-    formatter: (value: number) => formatPrice(value),
+    formatter: (value: unknown) => formatPrice(value as number),
   },
   {
     key: 'profit',
     label: props.activeTrades ? 'Current profit %' : 'Profit %',
-    formatter: (value: number, key, item: Trade) => {
-      const percent = formatPercent(item.profit_ratio, 2);
-      return `${percent} ${`(${formatPriceWithDecimals(item.profit_abs)})`}`;
+
+    formatter: (value: unknown, key?: string, item?: unknown) => {
+      if (!item) {
+        return '';
+      }
+      const typedItem = item as Trade;
+      const percent = formatPercent(typedItem.profit_ratio, 2);
+      return `${percent} ${`(${formatPriceWithDecimals(typedItem.profit_abs)})`}`;
     },
   },
   { key: 'open_timestamp', label: 'Open date' },