From 95a879bccf329903e8a410ad29fe52d4cbbd8984 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 30 Mar 2024 13:01:36 +0100
Subject: [PATCH] Extract BT breakdowns to their own component

(it's 3 identical tables after all()
---
 .../ftbot/BacktestResultAnalysis.vue          | 128 ++++--------------
 .../ftbot/BacktestResultTablePer.vue          |  50 +++++++
 2 files changed, 74 insertions(+), 104 deletions(-)
 create mode 100644 src/components/ftbot/BacktestResultTablePer.vue

diff --git a/src/components/ftbot/BacktestResultAnalysis.vue b/src/components/ftbot/BacktestResultAnalysis.vue
index bb94554c..34a22404 100644
--- a/src/components/ftbot/BacktestResultAnalysis.vue
+++ b/src/components/ftbot/BacktestResultAnalysis.vue
@@ -24,18 +24,29 @@
           </b-card>
         </div>
       </div>
-      <b-card header="Results per Enter tag">
-        <b-table small hover stacked="sm" :items="enterTagSummary" :fields="perTagReason">
-        </b-table>
-      </b-card>
-      <b-card header="Results per Exit-reason">
-        <b-table small hover stacked="sm" :items="exitReasonSummary" :fields="perExitReason">
-        </b-table>
-      </b-card>
-      <b-card header="Results per pair">
-        <b-table small hover stacked="sm" :items="resultsPerPair" :fields="perPairFields">
-        </b-table>
-      </b-card>
+      <BacktestResultTablePer
+        title="Results per Enter tag"
+        :results="backtestResult.results_per_enter_tag"
+        :stake-currency="backtestResult.stake_currency"
+        key-header="Tag"
+        :stake-currency-decimals="backtestResult.stake_currency_decimals"
+      />
+
+      <BacktestResultTablePer
+        title="Results per Exit-reason"
+        :results="backtestResult.exit_reason_summary ?? []"
+        :stake-currency="backtestResult.stake_currency"
+        key-header="Exit Reason"
+        :stake-currency-decimals="backtestResult.stake_currency_decimals"
+      />
+
+      <BacktestResultTablePer
+        title="Results per pair"
+        :results="backtestResult.results_per_pair"
+        :stake-currency="backtestResult.stake_currency"
+        key-header="Pair"
+        :stake-currency-decimals="backtestResult.stake_currency_decimals"
+      />
       <b-card v-if="backtestResult.periodic_breakdown" header="Periodic breakdown">
         <BacktestResultPeriodBreakdown :periodic-breakdown="backtestResult.periodic_breakdown">
         </BacktestResultPeriodBreakdown>
@@ -56,9 +67,8 @@
 import { StrategyBacktestResult } from '@/types';
 import { formatObjectForTable } from '@/shared/objectToTableItems';
 
-import { formatPercent, formatPrice } from '@/shared/formatters';
 import { generateBacktestMetricRows, generateBacktestSettingRows } from '@/shared/backtestMetrics';
-import { TableField, TableItem } from 'bootstrap-vue-next';
+import { TableField } from 'bootstrap-vue-next';
 
 const props = defineProps({
   backtestResult: { required: true, type: Object as () => StrategyBacktestResult },
@@ -75,96 +85,6 @@ const backtestResultSettings = computed(() => {
 
   return formatObjectForTable({ value: tmp }, 'setting');
 });
-
-const resultsPerPair = computed(
-  () => props.backtestResult.results_per_pair as unknown as TableItem[],
-);
-const exitReasonSummary = computed(
-  () =>
-    (props.backtestResult.exit_reason_summary ||
-      props.backtestResult.sell_reason_summary) as unknown as TableItem[],
-);
-
-const enterTagSummary = computed(
-  () => props.backtestResult.results_per_enter_tag as unknown as TableItem[],
-);
-
-const perPairFields = computed(() => {
-  return [
-    { key: 'key', label: 'Pair' },
-    { key: 'trades', label: 'Buys' },
-    {
-      key: 'profit_mean',
-      label: 'Avg Profit %',
-      formatter: (value) => formatPercent(value, 2),
-    },
-    {
-      key: 'profit_total_abs',
-      label: `Tot Profit ${props.backtestResult.stake_currency}`,
-      formatter: (value) => formatPrice(value, props.backtestResult.stake_currency_decimals),
-    },
-    {
-      key: 'profit_total',
-      label: 'Tot Profit %',
-      formatter: (value) => formatPercent(value, 2),
-    },
-    { key: 'duration_avg', label: 'Avg Duration' },
-    { key: 'wins', label: 'Wins' },
-    { key: 'draws', label: 'Draws' },
-    { key: 'losses', label: 'Losses' },
-  ];
-});
-
-const perExitReason = computed(() => {
-  return [
-    { key: 'exit_reason', label: 'Exit Reason' },
-    { key: 'trades', label: 'Buys' },
-    {
-      key: 'profit_mean',
-      label: 'Avg Profit %',
-      formatter: (value) => formatPercent(value, 2),
-    },
-    {
-      key: 'profit_total_abs',
-      label: `Tot Profit ${props.backtestResult.stake_currency}`,
-
-      formatter: (value) => formatPrice(value, props.backtestResult.stake_currency_decimals),
-    },
-    {
-      key: 'profit_total',
-      label: 'Tot Profit %',
-      formatter: (value) => formatPercent(value, 2),
-    },
-    { key: 'wins', label: 'Wins' },
-    { key: 'draws', label: 'Draws' },
-    { key: 'losses', label: 'Losses' },
-  ];
-});
-const perTagReason = computed(() => {
-  return [
-    { key: 'key', label: 'Tag', formatter: (value) => value || 'OTHER' },
-    { key: 'trades', label: 'Buys' },
-    {
-      key: 'profit_mean',
-      label: 'Avg Profit %',
-      formatter: (value) => formatPercent(value, 2),
-    },
-    {
-      key: 'profit_total_abs',
-      label: `Tot Profit ${props.backtestResult.stake_currency}`,
-
-      formatter: (value) => formatPrice(value, props.backtestResult.stake_currency_decimals),
-    },
-    {
-      key: 'profit_total',
-      label: 'Tot Profit %',
-      formatter: (value) => formatPercent(value, 2),
-    },
-    { key: 'wins', label: 'Wins' },
-    { key: 'draws', label: 'Draws' },
-    { key: 'losses', label: 'Losses' },
-  ];
-});
 const backtestResultFields: TableField[] = [
   { key: 'metric', label: 'Metric' },
   { key: 'value', label: 'Value' },
diff --git a/src/components/ftbot/BacktestResultTablePer.vue b/src/components/ftbot/BacktestResultTablePer.vue
new file mode 100644
index 00000000..fbdc0ae2
--- /dev/null
+++ b/src/components/ftbot/BacktestResultTablePer.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { formatPercent, formatPrice } from '@/shared/formatters';
+import type { ExitReasonResults, PairResult } from '@/types';
+import { TableItem } from 'bootstrap-vue-next';
+
+const props = defineProps({
+  title: { type: String, required: true },
+  results: { type: Array as PropType<(PairResult | ExitReasonResults)[]>, required: true },
+  stakeCurrency: { type: String, required: true },
+  stakeCurrencyDecimals: { type: Number, required: true },
+  keyHeader: { type: String, default: 'Tag' },
+});
+
+const tableItems = computed(() => props.results as unknown as TableItem[]);
+
+const perTagReason = computed(() => {
+  return [
+    {
+      key: 'key',
+      label: props.keyHeader,
+      formatter: (value, _, item) => value || item['exit_reason'] || 'OTHER',
+    },
+    { key: 'trades', label: 'Entries' },
+    {
+      key: 'profit_mean',
+      label: 'Avg Profit %',
+      formatter: (value) => formatPercent(value, 2),
+    },
+    {
+      key: 'profit_total_abs',
+      label: `Tot Profit ${props.stakeCurrency}`,
+
+      formatter: (value) => formatPrice(value, props.stakeCurrencyDecimals),
+    },
+    {
+      key: 'profit_total',
+      label: 'Tot Profit %',
+      formatter: (value) => formatPercent(value, 2),
+    },
+    { key: 'wins', label: 'Wins' },
+    { key: 'draws', label: 'Draws' },
+    { key: 'losses', label: 'Losses' },
+  ];
+});
+</script>
+<template>
+  <b-card :header="title">
+    <b-table small hover stacked="sm" :items="tableItems" :fields="perTagReason"> </b-table>
+  </b-card>
+</template>