Fixed linting errors

src/components/charts/CandleChart.vue

@@ -12,7 +12,7 @@ import heikinashi from '@/shared/heikinashi';
 import { getTradeEntries } from '@/shared/charts/tradeChartData';
 import ECharts from 'vue-echarts';
 import { addHours, subHours } from 'date-fns';
-import { utcToZonedTime, zonedTimeToUtc, format } from 'date-fns-tz';
+import { format } from 'date-fns-tz';
 
 import { use } from 'echarts/core';
 import { EChartsOption, SeriesOption, ScatterSeriesOption } from 'echarts';
@@ -81,7 +81,11 @@ export default defineComponent({
     useUTC: { required: false, default: true, type: Boolean },
     plotConfig: { required: true, type: Object as () => PlotConfig },
     theme: { default: 'dark', type: String },
-    sliderPosition: {required: false, type: Object as () => ChartSliderPosition}
+    sliderPosition: {
+      required: false,
+      type: Object as () => ChartSliderPosition,
+      default: () => undefined,
+    },
   },
   setup(props) {
     const candleChart = ref<typeof ECharts>();
@@ -638,16 +642,18 @@ export default defineComponent({
     };
 
     const updateSliderPosition = () => {
-      let start = format(subHours(props.sliderPosition.startValue,3),'yyyy-MM-dd HH:mm:ss');
-      let end = format(addHours(props.sliderPosition.endValue,3),'yyyy-MM-dd HH:mm:ss');
+      if (!props.sliderPosition) return;
+
+      const start = format(subHours(props.sliderPosition.startValue, 3), 'yyyy-MM-dd HH:mm:ss');
+      const end = format(addHours(props.sliderPosition.endValue, 3), 'yyyy-MM-dd HH:mm:ss');
 
       candleChart.value.dispatchAction({
         type: 'dataZoom',
         dataZoomIndex: 0,
         startValue: start,
-        endValue: end
+        endValue: end,
       });
-    }
+    };
 
     // createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
     // Calculate Buy and sell Series
@@ -690,7 +696,7 @@ export default defineComponent({
 
     watch(
       () => props.sliderPosition,
-      () => updateSliderPosition()
+      () => updateSliderPosition(),
     );
 
     return {

src/components/charts/CandleChartContainer.vue

@@ -71,7 +71,7 @@
           :heikin-ashi="settingsStore.useHeikinAshiCandles"
           :use-u-t-c="settingsStore.timezone === 'UTC'"
           :theme="settingsStore.chartTheme"
-          :sliderPosition="sliderPosition"
+          :slider-position="sliderPosition"
         >
         </CandleChart>
         <div v-else class="m-auto">
@@ -92,7 +92,14 @@
 </template>
 
 <script lang="ts">
-import { Trade, PairHistory, EMPTY_PLOTCONFIG, PlotConfig, LoadingStatus, ChartSliderPosition } from '@/types';
+import {
+  Trade,
+  PairHistory,
+  EMPTY_PLOTCONFIG,
+  PlotConfig,
+  LoadingStatus,
+  ChartSliderPosition,
+} from '@/types';
 import CandleChart from '@/components/charts/CandleChart.vue';
 import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
 import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
@@ -115,7 +122,11 @@ export default defineComponent({
     timerange: { required: false, default: '', type: String },
     /** Only required if historicView is true */
     strategy: { required: false, default: '', type: String },
-    sliderPosition: {required: false, type: Object as () => ChartSliderPosition}
+    sliderPosition: {
+      required: false,
+      type: Object as () => ChartSliderPosition,
+      default: () => undefined,
+    },
   },
   setup(props) {
     const root = getCurrentInstance();

src/components/ftbot/TradeListNav.vue

@@ -7,7 +7,10 @@
       class="d-flex justify-content-between align-items-center py-1"
       :title="`${trade.pair}`"
       :active="trade.open_timestamp === selectedTrade.open_timestamp"
-      @click="selectedTrade = trade; $emit('trade-select',trade);"
+      @click="
+        selectedTrade = trade;
+        $emit('trade-select', trade);
+      "
     >
       <div>
         <DateTimeTZ :date="trade.open_timestamp" />
@@ -16,7 +19,7 @@
       <TradeProfit :trade="trade" />
       <ProfitPill
         v-if="backtestMode"
-        :profit-ratio="trade.profit"
+        :profit-ratio="trade.profit_ratio"
         :stake-currency="botStore.activeBot.stakeCurrency"
       />
     </b-list-group-item>
@@ -37,21 +40,21 @@ export default defineComponent({
   components: { TradeProfit, ProfitPill, DateTimeTZ },
   props: {
     trades: { required: true, type: Array as () => Trade[] },
-    backtestMode: { required: false, default: false, type: Boolean }
+    backtestMode: { required: false, default: false, type: Boolean },
   },
 
   setup(props) {
     const botStore = useBotStore();
-    const selectedTrade = ref(<Trade>{});
+    const selectedTrade = ref({} as Trade);
 
     const sortedTrades = computed(() => {
-      return props.trades.slice().sort((a,b) => b.open_timestamp - a.open_timestamp);
+      return props.trades.slice().sort((a, b) => b.open_timestamp - a.open_timestamp);
     });
 
     return {
       botStore,
       selectedTrade,
-      sortedTrades
+      sortedTrades,
     };
   },
 });

src/types/chart.ts

@@ -8,6 +8,6 @@ export interface CumProfitDataPerDate {
 }
 
 export interface ChartSliderPosition {
-  startValue: number,
-  endValue: number
+  startValue: number;
+  endValue: number;
 }

src/views/Backtesting.vue

@@ -306,15 +306,21 @@
           :timerange="timerange"
           :strategy="strategy"
           :trades="botStore.activeBot.selectedBacktestResult.trades"
-          :class="`${showRightBar ? 'col-md-8' : 'col-md-10'} candle-chart-container px-0 w-100 h-100`"
-          :sliderPosition="sliderPosition"
+          :class="`${
+            showRightBar ? 'col-md-8' : 'col-md-10'
+          } candle-chart-container px-0 w-100 h-100`"
+          :slider-position="sliderPosition"
         >
         </CandleChartContainer>
         <TradeListNav
+          v-if="showRightBar"
           class="overflow-auto col-md-2"
           style="max-height: calc(100vh - 200px)"
-          v-if="showRightBar"
-          :trades="botStore.activeBot.selectedBacktestResult.trades.filter(t => t.pair === botStore.activeBot.selectedPair)"
+          :trades="
+            botStore.activeBot.selectedBacktestResult.trades.filter(
+              (t) => t.pair === botStore.activeBot.selectedPair,
+            )
+          "
           @trade-select="navigateChartToTrade"
         />
       </div>
@@ -364,7 +370,7 @@ export default defineComponent({
     PairSummary,
     TimeframeSelect,
     TradeList,
-    TradeListNav
+    TradeListNav,
   },
   setup() {
     const botStore = useBotStore();
@@ -395,7 +401,7 @@ export default defineComponent({
     const startingCapital = ref('');
     const btFormMode = ref('run');
     const pollInterval = ref<number | null>(null);
-    const sliderPosition = ref(<ChartSliderPosition>{});
+    const sliderPosition = ref({} as ChartSliderPosition);
 
     const setBacktestResult = (key: string) => {
       botStore.activeBot.setBacktestResultKey(key);
@@ -448,11 +454,11 @@ export default defineComponent({
       botStore.activeBot.startBacktest(btPayload);
     };
 
-    const navigateChartToTrade = (trade : Trade) => {
+    const navigateChartToTrade = (trade: Trade) => {
       sliderPosition.value = {
         startValue: trade.open_timestamp,
-        endValue: trade.close_timestamp
-      }
+        endValue: trade.close_timestamp,
+      };
     };
 
     onMounted(() => botStore.activeBot.getState());
@@ -488,7 +494,7 @@ export default defineComponent({
       btFormMode,
       clickBacktest,
       navigateChartToTrade,
-      sliderPosition
+      sliderPosition,
     };
   },
 });