Chart moves to selected trade

src/components/charts/CandleChart.vue

@@ -6,11 +6,13 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted, watch } from 'vue';
-import { Trade, PairHistory, PlotConfig } from '@/types';
+import { Trade, PairHistory, PlotConfig, ChartSliderPosition } from '@/types';
 import randomColor from '@/shared/randomColor';
 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 { use } from 'echarts/core';
 import { EChartsOption, SeriesOption, ScatterSeriesOption } from 'echarts';
@@ -79,6 +81,7 @@ 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}
   },
   setup(props) {
     const candleChart = ref<typeof ECharts>();
@@ -634,6 +637,18 @@ export default defineComponent({
       updateChart(true);
     };
 
+    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');
+
+      candleChart.value.dispatchAction({
+        type: 'dataZoom',
+        dataZoomIndex: 0,
+        startValue: start,
+        endValue: end
+      });
+    }
+
     // createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
     // Calculate Buy and sell Series
     // if (!this.signalsCalculated) {
@@ -673,6 +688,11 @@ export default defineComponent({
       () => updateChart(),
     );
 
+    watch(
+      () => props.sliderPosition,
+      () => updateSliderPosition()
+    );
+
     return {
       candleChart,
       buyData,

src/components/charts/CandleChartContainer.vue

@@ -71,6 +71,7 @@
           :heikin-ashi="settingsStore.useHeikinAshiCandles"
           :use-u-t-c="settingsStore.timezone === 'UTC'"
           :theme="settingsStore.chartTheme"
+          :sliderPosition="sliderPosition"
         >
         </CandleChart>
         <div v-else class="m-auto">
@@ -91,7 +92,7 @@
 </template>
 
 <script lang="ts">
-import { Trade, PairHistory, EMPTY_PLOTCONFIG, PlotConfig, LoadingStatus } 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';
@@ -114,6 +115,7 @@ 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}
   },
   setup(props) {
     const root = getCurrentInstance();

src/types/chart.ts

@@ -6,3 +6,8 @@ export interface CumProfitData {
 export interface CumProfitDataPerDate {
   [key: number]: CumProfitData;
 }
+
+export interface ChartSliderPosition {
+  startValue: number,
+  endValue: number
+}

src/views/Backtesting.vue

@@ -272,10 +272,24 @@
       v-if="hasBacktestResult && btFormMode == 'visualize'"
       class="container-fluid text-center w-100 mt-2"
     >
-      <p class="row">
+      <div class="row">
-        Graph will always show the latest values for the selected strategy. Timerange:
+        <div class="col-md-11 text-left">
-        {{ timerange }} - {{ strategy }}
+          <p>
-      </p>
+            Graph will always show the latest values for the selected strategy. Timerange:
+            {{ timerange }} - {{ strategy }}
+          </p>
+        </div>
+        <div class="col-md-1">
+          <b-button
+            v-if="btFormMode === 'visualize'"
+            class="right-bar-toggle"
+            aria-label="Close"
+            size="sm"
+            @click="showRightBar = !showRightBar"
+            >{{ showRightBar ? '&gt;' : '&lt;'  }}
+          </b-button>
+        </div>
+      </div>
       <div class="row text-center">
         <PairSummary
           class="col-md-2 overflow-auto"
@@ -292,20 +306,17 @@
           :timerange="timerange"
           :strategy="strategy"
           :trades="botStore.activeBot.selectedBacktestResult.trades"
-          class="col-md-8 candle-chart-container px-0 w-100 h-100"
+          :class="`${showRightBar ? 'col-md-8' : 'col-md-10'} candle-chart-container px-0 w-100 h-100`"
+          :sliderPosition="sliderPosition"
         >
         </CandleChartContainer>
         <TradeListNav 
-          class="col-md-2 overflow-auto"
+          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)"
+          @trade-select="navigateChartToTrade"
         />
-        <!--<TradeList
-          class="col-md-2 overflow-auto"
-          :trades="botStore.activeBot.selectedBacktestResult.trades.filter(t => t.pair === botStore.activeBot.selectedPair)"
-          :show-filter="true"
-          :stake-currency="botStore.activeBot.selectedBacktestResult.stake_currency"
-        /> -->
       </div>
       <b-card header="Single trades" class="row mt-2 w-100">
         <TradeList
@@ -333,7 +344,7 @@ import TradeList from '@/components/ftbot/TradeList.vue';
 import TradeListNav from '@/components/ftbot/TradeListNav.vue';
 import BacktestHistoryLoad from '@/components/ftbot/BacktestHistoryLoad.vue';
 
-import { BacktestPayload } from '@/types';
+import { BacktestPayload, ChartSliderPosition, Trade } from '@/types';
 
 import { formatPercent } from '@/shared/formatters';
 import { defineComponent, computed, ref, onMounted, watch } from 'vue';
@@ -376,6 +387,7 @@ export default defineComponent({
     const selectedDetailTimeframe = ref('');
     const timerange = ref('');
     const showLeftBar = ref(false);
+    const showRightBar = ref(true);
     const enableProtections = ref(false);
     const stakeAmountUnlimited = ref(false);
     const maxOpenTrades = ref('');
@@ -383,6 +395,7 @@ export default defineComponent({
     const startingCapital = ref('');
     const btFormMode = ref('run');
     const pollInterval = ref<number | null>(null);
+    const sliderPosition = ref(<ChartSliderPosition>{});
 
     const setBacktestResult = (key: string) => {
       botStore.activeBot.setBacktestResultKey(key);
@@ -434,6 +447,14 @@ export default defineComponent({
 
       botStore.activeBot.startBacktest(btPayload);
     };
+
+    const navigateChartToTrade = (trade : Trade) => {
+      sliderPosition.value = {
+        startValue: trade.open_timestamp,
+        endValue: trade.close_timestamp
+      }
+    };
+
     onMounted(() => botStore.activeBot.getState());
     watch(
       () => botStore.activeBot.backtestRunning,
@@ -459,12 +480,15 @@ export default defineComponent({
       timerange,
       enableProtections,
       showLeftBar,
+      showRightBar,
       stakeAmountUnlimited,
       maxOpenTrades,
       stakeAmount,
       startingCapital,
       btFormMode,
       clickBacktest,
+      navigateChartToTrade,
+      sliderPosition
     };
   },
 });