lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-14 04:03:51 +00:00
Code Issues Actions 1 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 LoginModal from '@/views/LoginModal.vue';
import BotEntry from '@/components/BotEntry.vue'; import BotEntry from '@/components/BotEntry.vue';
import BotRename from '@/components/BotRename.vue'; import BotRename from '@/components/BotRename.vue';
import StoreModules from '@/store/storeSubModules';
import { defineComponent, ref } from '@vue/composition-api'; import { defineComponent, ref } from '@vue/composition-api';
import { useNamespacedActions } from 'vuex-composition-helpers';
import { useBotStore } from '@/stores/ftbotwrapper'; import { useBotStore } from '@/stores/ftbotwrapper';
export default defineComponent({ export default defineComponent({
@ -43,7 +41,6 @@ export default defineComponent({
setup() { setup() {
const botStore = useBotStore(); const botStore = useBotStore();
const { selectBot } = useNamespacedActions(StoreModules.ftbot, ['selectBot']);
const editingBots = ref<string[]>([]); const editingBots = ref<string[]>([]);
const editBot = (botId: string) => { const editBot = (botId: string) => {
@ -62,7 +59,6 @@ export default defineComponent({
return { return {
botStore, botStore,
selectBot,
editingBots, editingBots,
editBot, editBot,
stopEditBot, stopEditBot,

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

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

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

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

57
src/views/Graphs.vue
View File

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