Add Detailed performances to bot Performance view

src/components/ftbot/BotPerformance.vue

@@ -1,13 +1,47 @@
 <script setup lang="ts">
 import { formatPrice } from '@/shared/formatters';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 import { TableField } from 'bootstrap-vue-next';
 
 const botStore = useBotStore();
-const tableFields = computed<TableField[]>(() => {
+enum PerformanceOptions {
+  performance = 'performance',
+  entryStats = 'entryStats',
+  exitStats = 'exitStats',
+  mixTagStats = 'mixTagStats',
+}
+const selectedOption = ref<PerformanceOptions>(PerformanceOptions.performance);
+
+function formatTextLen(text: string, len: number) {
+  if (text.length > len) {
+    return text.substring(0, len) + '...';
+  }
+  return text;
+}
+
+const performanceTable = computed<TableField[]>(() => {
+  const textLength = 17;
+  const initialCol = {
+    [PerformanceOptions.performance]: { key: 'pair', label: 'Pair' },
+    [PerformanceOptions.entryStats]: {
+      key: 'enter_tag',
+      label: 'Enter tag',
+      formatter: (v: unknown) => formatTextLen(v as string, textLength),
+    },
+    [PerformanceOptions.exitStats]: {
+      key: 'exit_reason',
+      label: 'Exit Reason',
+      formatter: (v: unknown) => formatTextLen(v as string, textLength),
+    },
+    [PerformanceOptions.mixTagStats]: {
+      key: 'mix_tag',
+      label: 'Mix Tag',
+      formatter: (v: unknown) => formatTextLen(v as string, textLength),
+    },
+  };
   return [
-    { key: 'pair', label: 'Pair' },
+    initialCol[selectedOption.value],
     { key: 'profit', label: 'Profit %' },
     {
       key: 'profit_abs',
@@ -18,8 +52,44 @@ const tableFields = computed<TableField[]>(() => {
   ];
 });
 
+const performanceData = computed(() => {
+  if (selectedOption.value === PerformanceOptions.performance) {
+    return botStore.activeBot.performanceStats;
+  }
+  if (selectedOption.value === PerformanceOptions.entryStats) {
+    return botStore.activeBot.entryStats;
+  }
+  if (selectedOption.value === PerformanceOptions.exitStats) {
+    return botStore.activeBot.exitStats;
+  }
+  if (selectedOption.value === PerformanceOptions.mixTagStats) {
+    return botStore.activeBot.mixTagStats;
+  }
+  return [];
+});
+
+const hasAdvancedStats = computed(() => botStore.activeBot.botApiVersion >= 2.34);
+
+const options = [
+  { value: PerformanceOptions.performance, text: 'Performance' },
+  { value: PerformanceOptions.entryStats, text: 'Entries' },
+  { value: PerformanceOptions.exitStats, text: 'Exits' },
+  { value: PerformanceOptions.mixTagStats, text: 'Mix Tag' },
+];
+
 function refreshSummary() {
-  botStore.activeBot.getPerformance();
+  if (selectedOption.value === PerformanceOptions.performance) {
+    botStore.activeBot.getPerformance();
+  }
+  if (selectedOption.value === PerformanceOptions.entryStats) {
+    botStore.activeBot.getEntryStats();
+  }
+  if (selectedOption.value === PerformanceOptions.exitStats) {
+    botStore.activeBot.getExitStats();
+  }
+  if (selectedOption.value === PerformanceOptions.mixTagStats) {
+    botStore.activeBot.getMixTagStats();
+  }
 }
 </script>
 <template>
@@ -30,10 +100,18 @@ function refreshSummary() {
         <i-mdi-refresh />
       </b-button>
     </div>
-    <b-table
-      class="table-sm"
-      :items="botStore.activeBot.performanceStats"
-      :fields="tableFields"
-    ></b-table>
+    <b-form-radio-group
+      v-if="hasAdvancedStats"
+      id="order-direction"
+      v-model="selectedOption"
+      :options="options"
+      name="radios-btn-default"
+      size="sm"
+      buttons
+      style="min-width: 10em"
+      button-variant="outline-primary"
+      @change="refreshSummary"
+    ></b-form-radio-group>
+    <b-table class="table-sm" :items="performanceData" :fields="performanceTable"></b-table>
   </div>
 </template>