lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-10 18:23:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

pinia: candlechart and logview

Browse Source
This commit is contained in:
Matthias 2022-04-18 13:43:55 +02:00
parent c7620cd1ed
commit 43587cfe45
4 changed files with 92 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BotList.vue
View File

@ -28,10 +28,8 @@
import LoginModal from '@/views/LoginModal.vue';
import BotEntry from '@/components/BotEntry.vue';
import BotRename from '@/components/BotRename.vue';
import StoreModules from '@/store/storeSubModules';
import { defineComponent, ref } from '@vue/composition-api';
import { useNamespacedActions } from 'vuex-composition-helpers';
import { useBotStore } from '@/stores/ftbotwrapper';
export default defineComponent({
@ -43,7 +41,6 @@ export default defineComponent({
setup() {
const botStore = useBotStore();
const { selectBot } = useNamespacedActions(StoreModules.ftbot, ['selectBot']);
const editingBots = ref<string[]>([]);
const editBot = (botId: string) => {
@ -62,7 +59,6 @@ export default defineComponent({
return {
botStore,
selectBot,
editingBots,
editBot,
stopEditBot,

116
src/components/charts/CandleChartContainer.vue
View File

@ -46,7 +46,7 @@
<div class="ml-2">
<b-select
v-model="plotConfigName"
:options="availablePlotConfigNames"
:options="botStore.activeBot.availablePlotConfigNames"
size="sm"
@change="plotConfigChanged"
>
@ -89,7 +89,7 @@
</template>
<script lang="ts">
import { Trade, PairHistory, EMPTY_PLOTCONFIG, PlotConfig } from '@/types';
import { Trade, PairHistory, EMPTY_PLOTCONFIG, PlotConfig, LoadingStatus } from '@/types';
import CandleChart from '@/components/charts/CandleChart.vue';
import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
@ -100,6 +100,7 @@ import { useSettingsStore } from '@/stores/settings';
import { defineComponent, ref, computed, watch, onMounted } from '@vue/composition-api';
import { useGetters, useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
import { useBotStore } from '@/stores/ftbotwrapper';
export default defineComponent({
name: 'CandleChartContainer',
@ -117,26 +118,27 @@ export default defineComponent({
},
setup(props, { root }) {
const settingsStore = useSettingsStore();
const botStore = useBotStore();
const { getChartTheme } = useGetters(['getChartTheme']);
const {
availablePlotConfigNames,
candleDataStatus,
candleData,
historyStatus,
history,
selectedPair,
} = useNamespacedGetters(StoreModules.ftbot, [
BotStoreGetters.availablePlotConfigNames,
BotStoreGetters.candleDataStatus,
BotStoreGetters.candleData,
BotStoreGetters.historyStatus,
BotStoreGetters.history,
BotStoreGetters.selectedPair,
]);
const { setPlotConfigName, getPairCandles, getPairHistory } = useNamespacedActions(
StoreModules.ftbot,
['setPlotConfigName', 'getPairCandles', 'getPairHistory'],
);
// const {
// availablePlotConfigNames,
// candleDataStatus,
// candleData,
// historyStatus,
// history,
// selectedPair,
// } = useNamespacedGetters(StoreModules.ftbot, [
// BotStoreGetters.availablePlotConfigNames,
// BotStoreGetters.candleDataStatus,
// BotStoreGetters.candleData,
// BotStoreGetters.historyStatus,
// BotStoreGetters.history,
// BotStoreGetters.selectedPair,
// ]);
// const { setPlotConfigName, getPairCandles, getPairHistory } = useNamespacedActions(
// StoreModules.ftbot,
// ['setPlotConfigName', 'getPairCandles', 'getPairHistory'],
// );
const pair = ref('');
const plotConfig = ref<PlotConfig>({ ...EMPTY_PLOTCONFIG });
const plotConfigName = ref('');
@ -145,31 +147,33 @@ export default defineComponent({
const dataset = computed((): PairHistory => {
if (props.historicView) {
return history.value[`${pair.value}__${props.timeframe}`];
return botStore.activeBot.history[`${pair.value}__${props.timeframe}`]?.data;
}
return candleData.value[`${pair.value}__${props.timeframe}`];
return botStore.activeBot.candleData[`${pair.value}__${props.timeframe}`]?.data;
});
const strategyName = computed(() => props.strategy || dataset.value?.strategy || '');
const datasetColumns = computed(() => (dataset.value ? dataset.value.columns : []));
const hasDataset = computed(() => !!dataset.value);
const isLoadingDataset = computed((): boolean => {
if (props.historicView) {
return historyStatus.value === 'loading';
return botStore.activeBot.historyStatus === LoadingStatus.loading;
}
return candleDataStatus.value === 'loading';
return botStore.activeBot.candleDataStatus === LoadingStatus.loading;
});
const noDatasetText = computed((): string => {
const status = props.historicView ? historyStatus.value : candleDataStatus.value;
const status = props.historicView
? botStore.activeBot.historyStatus
: botStore.activeBot.candleDataStatus;
switch (status) {
case 'loading':
case LoadingStatus.loading:
return 'Loading...';
case 'success':
case LoadingStatus.success:
return 'No data available';
case 'error':
case LoadingStatus.error:
return 'Failed to load data';
default:
@ -180,7 +184,7 @@ export default defineComponent({
const plotConfigChanged = () => {
console.log('plotConfigChanged');
plotConfig.value = getCustomPlotConfig(plotConfigName.value);
setPlotConfigName(plotConfigName.value);
botStore.activeBot.setPlotConfigName(plotConfigName.value);
};
const showConfigurator = () => {
@ -193,33 +197,40 @@ export default defineComponent({
const refresh = () => {
if (pair.value && props.timeframe) {
if (props.historicView) {
getPairHistory({
botStore.activeBot.getPairHistory({
pair: pair.value,
timeframe: props.timeframe,
timerange: props.timerange,
strategy: props.strategy,
});
} else {
getPairCandles({ pair: pair.value, timeframe: props.timeframe, limit: 500 });
botStore.activeBot.getPairCandles({
pair: pair.value,
timeframe: props.timeframe,
limit: 500,
});
}
}
};
watch(props.availablePairs, () => {
if (!props.availablePairs.find((p) => p === pair.value)) {
[pair.value] = props.availablePairs;
refresh();
}
});
// watch(props.availablePairs, () => {
// if (!props.availablePairs.find((p) => p === pair.value)) {
// [pair.value] = props.availablePairs;
// refresh();
// }
// });
watch(selectedPair, () => {
pair.value = selectedPair.value;
refresh();
});
// watch(
// () => botStore.activeBot.selectedPair,
// () => {
// pair.value = botStore.activeBot.selectedPair;
// refresh();
// },
// );
onMounted(() => {
if (selectedPair.value) {
pair.value = selectedPair.value;
if (botStore.activeBot.selectedPair) {
pair.value = botStore.activeBot.selectedPair;
} else if (props.availablePairs.length > 0) {
[pair.value] = props.availablePairs;
}
@ -232,16 +243,17 @@ export default defineComponent({
});
return {
botStore,
getChartTheme,
availablePlotConfigNames,
candleDataStatus,
candleData,
historyStatus,
// availablePlotConfigNames,
// candleDataStatus,
// candleData,
// historyStatus,
history,
selectedPair,
setPlotConfigName,
getPairCandles,
getPairHistory,
// selectedPair,
// setPlotConfigName,
// getPairCandles,
// getPairHistory,
dataset,
strategyName,
datasetColumns,

19
src/components/ftbot/LogViewer.vue
View File

@ -1,35 +1,32 @@
<template>
<div class="d-flex h-100 p-0 align-items-start">
<textarea v-model="formattedLogs" class="h-100" readonly></textarea>
<b-button size="sm" @click="getLogs">&#x21bb;</b-button>
<b-button size="sm" @click="botStore.activeBot.getLogs">&#x21bb;</b-button>
</div>
</template>
<script lang="ts">
import { BotStoreGetters } from '@/store/modules/ftbot';
import StoreModules from '@/store/storeSubModules';
import { useBotStore } from '@/stores/ftbotwrapper';
import { defineComponent, onMounted, computed } from '@vue/composition-api';
import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
export default defineComponent({
name: 'LogViewer',
setup() {
const { lastLogs } = useNamespacedGetters(StoreModules.ftbot, [BotStoreGetters.lastLogs]);
const { getLogs } = useNamespacedActions(StoreModules.ftbot, ['getLogs']);
const botStore = useBotStore();
onMounted(() => botStore.activeBot.getLogs());
onMounted(() => getLogs());
const formattedLogs = computed(() => {
let result = '';
for (let i = 0, len = lastLogs.value.length; i < len; i += 1) {
const log = lastLogs.value[i];
for (let i = 0, len = botStore.activeBot.lastLogs.length; i < len; i += 1) {
const log = botStore.activeBot.lastLogs[i];
result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
}
return result;
});
return {
getLogs,
lastLogs,
botStore,
formattedLogs,
};
},

57
src/views/Graphs.vue
View File

@ -4,7 +4,7 @@
<!-- Currently only available in Webserver mode -->
<!-- <b-checkbox v-model="historicView">HistoricData</b-checkbox> -->
<!-- </div> -->
<div v-if="isWebserverMode" class="mx-md-3 mt-2">
<div v-if="botStore.activeBot.isWebserverMode" class="mx-md-3 mt-2">
<div class="d-flex flex-wrap">
<div class="col-md-3 text-left">
<span>Strategy</span>
@ -20,12 +20,18 @@
<div class="mx-2 mt-2 pb-1 h-100">
<CandleChartContainer
:available-pairs="isWebserverMode ? pairlist : whitelist"
:historic-view="isWebserverMode"
:timeframe="isWebserverMode ? selectedTimeframe : timeframe"
:trades="trades"
:timerange="isWebserverMode ? timerange : ''"
:strategy="isWebserverMode ? strategy : ''"
:available-pairs="
botStore.activeBot.isWebserverMode
? botStore.activeBot.pairlist
: botStore.activeBot.whitelist
"
:historic-view="botStore.activeBot.isWebserverMode"
:timeframe="
botStore.activeBot.isWebserverMode ? selectedTimeframe : botStore.activeBot.timeframe
"
:trades="botStore.activeBot.trades"
:timerange="botStore.activeBot.isWebserverMode ? timerange : ''"
:strategy="botStore.activeBot.isWebserverMode ? strategy : ''"
:plot-config-modal="false"
>
</CandleChartContainer>
@ -38,55 +44,32 @@ import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
import TimeframeSelect from '@/components/ftbot/TimeframeSelect.vue';
import StrategySelect from '@/components/ftbot/StrategySelect.vue';
import { BotStoreGetters } from '@/store/modules/ftbot';
import StoreModules from '@/store/storeSubModules';
import { defineComponent, onMounted, ref } from '@vue/composition-api';
import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
import { useBotStore } from '@/stores/ftbotwrapper';
export default defineComponent({
name: 'Graphs',
components: { CandleChartContainer, StrategySelect, TimeRangeSelect, TimeframeSelect },
setup() {
const botStore = useBotStore();
const strategy = ref('');
const timerange = ref('');
const selectedTimeframe = ref('');
const { pairlist, whitelist, trades, timeframe, isWebserverMode } = useNamespacedGetters(
StoreModules.ftbot,
[
BotStoreGetters.pairlist,
BotStoreGetters.whitelist,
BotStoreGetters.trades,
BotStoreGetters.timeframe,
BotStoreGetters.isWebserverMode,
],
);
const { getWhitelist, getAvailablePairs } = useNamespacedActions(StoreModules.ftbot, [
'getWhitelist',
'getAvailablePairs',
]);
onMounted(() => {
if (!whitelist.value || whitelist.value.length === 0) {
getWhitelist();
}
console.log(isWebserverMode.value);
if (isWebserverMode.value) {
if (botStore.activeBot.isWebserverMode) {
// this.refresh();
getAvailablePairs({ timeframe: timeframe.value });
botStore.activeBot.getAvailablePairs({ timeframe: botStore.activeBot.timeframe });
// .then((val) => {
// console.log(val);
// });
} else if (!botStore.activeBot.whitelist || botStore.activeBot.whitelist.length === 0) {
botStore.activeBot.getWhitelist();
}
});
return {
pairlist,
whitelist,
trades,
timeframe,
isWebserverMode,
getWhitelist,
getAvailablePairs,
botStore,
strategy,
timerange,
selectedTimeframe,