Refactor period breakdown to separate component

src/components/ftbot/BacktestResultPeriodBreakdown.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { PeriodicBreakdown } from '@/types';
+import { TableField, TableItem } from 'bootstrap-vue-next';
+import { computed, ref } from 'vue';
+
+defineProps({
+  periodicBreakdown: {
+    type: Object as () => PeriodicBreakdown,
+    required: true,
+  },
+});
+const periodicBreakdownSelections = [
+  { value: 'day', text: 'Days' },
+  { value: 'week', text: 'Weeks' },
+  { value: 'month', text: 'Months' },
+];
+
+const periodicBreakdownPeriod = ref<string>('day');
+
+const periodicBreakdownFields = computed<TableField[]>(() => {
+  return [
+    { key: 'date', label: 'Date' },
+    { key: 'wins', label: 'Wins' },
+    { key: 'draws', label: 'Draws' },
+    { key: 'loses', label: 'Losses' },
+  ];
+});
+</script>
+
+<template>
+  <b-form-radio-group
+    id="order-direction"
+    v-model="periodicBreakdownPeriod"
+    :options="periodicBreakdownSelections"
+    name="radios-btn-default"
+    size="sm"
+    buttons
+    style="min-width: 10em"
+    button-variant="outline-primary"
+  ></b-form-radio-group>
+  <b-table
+    small
+    hover
+    stacked="sm"
+    :items="periodicBreakdown[periodicBreakdownPeriod] as unknown as TableItem[]"
+    :fields="periodicBreakdownFields"
+  >
+  </b-table>
+</template>

src/components/ftbot/BacktestResultView.vue

@@ -46,27 +46,12 @@
       </b-card>
       <b-card
         v-if="backtestResult.periodic_breakdown"
-        header="`Periodic breakdown"
+        header="Periodic breakdown"
         class="row mt-2 w-100"
       >
-        <b-form-radio-group
-          id="order-direction"
-          v-model="periodicBreakdownPeriod"
-          :options="periodicBreakdownSelections"
-          name="radios-btn-default"
-          size="sm"
-          buttons
-          style="min-width: 10em"
-          button-variant="outline-primary"
-        ></b-form-radio-group>
-        <b-table
-          small
-          hover
-          stacked="sm"
-          :items="periodicBreakdownItems"
-          :fields="periodicBreakdownFields"
-        >
-        </b-table>
+        <BacktestResultPeriodBreakdown
+          :periodic-breakdown="backtestResult.periodic_breakdown"
+        ></BacktestResultPeriodBreakdown>
       </b-card>
 
       <b-card header="Single trades" class="row mt-2 w-100">
@@ -84,8 +69,9 @@
 <script setup lang="ts">
 import TradeList from '@/components/ftbot/TradeList.vue';
 import { StrategyBacktestResult, Trade } from '@/types';
+import BacktestResultPeriodBreakdown from './BacktestResultPeriodBreakdown.vue';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import {
   timestampms,
   formatPercent,
@@ -388,30 +374,6 @@ const perPairFields = computed(() => {
   ];
 });
 
-const periodicBreakdownSelections = [
-  { value: 'day', text: 'Days' },
-  { value: 'week', text: 'Weeks' },
-  { value: 'month', text: 'Months' },
-];
-
-const periodicBreakdownPeriod = ref<string>('day');
-
-const periodicBreakdownItems = computed<TableItem[]>(() => {
-  return props.backtestResult?.periodic_breakdown
-    ? props.backtestResult?.periodic_breakdown[periodicBreakdownPeriod.value] ??
-        ([] as unknown as TableItem[])
-    : [];
-});
-
-const periodicBreakdownFields = computed<TableField[]>(() => {
-  return [
-    { key: 'date', label: 'Date' },
-    { key: 'wins', label: 'Wins' },
-    { key: 'draws', label: 'Draws' },
-    { key: 'loses', label: 'Losses' },
-  ];
-});
-
 const perExitReason = computed(() => {
   return [
     { key: 'exit_reason', label: 'Exit Reason' },