mirror of
https://github.com/freqtrade/frequi.git
synced 2024-09-21 01:51:09 +00:00
Chart moves to selected trade
This commit is contained in:
parent
12b2e3aad9
commit
0a18721705
|
@ -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,
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -6,3 +6,8 @@ export interface CumProfitData {
|
|||
export interface CumProfitDataPerDate {
|
||||
[key: number]: CumProfitData;
|
||||
}
|
||||
|
||||
export interface ChartSliderPosition {
|
||||
startValue: number,
|
||||
endValue: number
|
||||
}
|
||||
|
|
|
@ -272,10 +272,24 @@
|
|||
v-if="hasBacktestResult && btFormMode == 'visualize'"
|
||||
class="container-fluid text-center w-100 mt-2"
|
||||
>
|
||||
<p class="row">
|
||||
Graph will always show the latest values for the selected strategy. Timerange:
|
||||
{{ timerange }} - {{ strategy }}
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-md-11 text-left">
|
||||
<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 ? '>' : '<' }}
|
||||
</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
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue
Block a user