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

Use TimeRangeSelect

Browse Source
This commit is contained in:
Matthias 2020-07-11 19:55:47 +02:00
parent 4efae963d8
commit 69d22d1b7f
2 changed files with 79 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/ftbot/TimeRangeSelect.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<b-card class="row mb-2 mr-4">
<b-list-group class="col-mb-4" horizontal="md">
<b-form-group label="Start date" label-for="dp_dateFrom">
<b-input-group>
<b-input-group-prepend>
<b-form-datepicker v-model="dateFrom" class="mb-2" button-only></b-form-datepicker>
</b-input-group-prepend>
<b-form-input
id="dp_dateFrom"
v-model="dateFrom"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
></b-form-input>
</b-input-group>
</b-form-group>
<b-form-group class="ml-2" label="End date" label-for="dp_dateTo">
<b-input-group>
<b-input-group-prepend>
<b-form-datepicker v-model="dateTo" class="mb-2" button-only></b-form-datepicker>
</b-input-group-prepend>
<b-form-input
id="dp_dateTo"
v-model="dateTo"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
></b-form-input>
</b-input-group>
</b-form-group>
<label
>Timerange: <b>{{ timeRange }}</b></label
>
</b-list-group>
</b-card>
</template>
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator';
import { dateStringToTimeRange, timestampToDateString } from '../../shared/formatters';
const now = new Date();
@Component({})
export default class TimeRangeSelect extends Vue {
dateFrom = timestampToDateString(new Date(now.getFullYear(), now.getMonth() - 1, 1));
dateTo = '';
@Emit('input')
emitTimeRange() {
return this.timeRange;
}
created() {
this.emitTimeRange();
}
updated() {
this.emitTimeRange();
}
get timeRange() {
if (this.dateFrom !== '' || this.dateTo !== '') {
return `${dateStringToTimeRange(this.dateFrom)}-${dateStringToTimeRange(this.dateTo)}`;
}
return '';
}
}
</script>
<style scoped>
</style>

43
src/views/Graphs.vue
View File

@ -17,35 +17,8 @@
<b-button @click="showConfigurator">Show configurator</b-button>
</div>
</div>
<div class="row mt-2" v-if="historicView">
<div class="col-mb-4">
<label for="dp_dateFrom">Start date</label>
<b-input-group class="mb-3">
<b-input-group-prepend>
<b-form-datepicker v-model="dateFrom" class="mb-2" button-only></b-form-datepicker>
</b-input-group-prepend>
<b-form-input
id="dp_dateFrom"
v-model="dateFrom"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
></b-form-input>
</b-input-group>
<label for="dp_dateTo">End date</label>
<b-input-group class="mb-3">
<b-input-group-prepend>
<b-form-datepicker v-model="dateTo" class="mb-2" button-only></b-form-datepicker>
</b-input-group-prepend>
<b-form-input
id="dp_dateTo"
v-model="dateTo"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
></b-form-input>
</b-input-group>
</div>
<div class="mt-2" v-if="historicView">
<TimeRangeSelect v-model="timerange"></TimeRangeSelect>
</div>
<b-modal
@ -74,6 +47,7 @@ import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import CandleChart from '@/components/ftbot/CandleChart.vue';
import PlotConfigurator from '@/components/ftbot/PlotConfigurator.vue';
import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
import {
PlotConfig,
EMPTY_PLOTCONFIG,
@ -81,13 +55,10 @@ import {
PairHistoryPayload,
} from '../store/types';
import { loadCustomPlotConfig } from '../shared/storage';
import { dateStringToTimeRange, timestampToDateString } from '../shared/formatters';
const ftbot = namespace('ftbot');
const now = new Date();
@Component({
components: { CandleChart, PlotConfigurator },
components: { CandleChart, PlotConfigurator, TimeRangeSelect },
})
export default class Graphs extends Vue {
pair = 'XRP/USDT';
@ -100,9 +71,7 @@ export default class Graphs extends Vue {
historicView = false;
dateFrom = timestampToDateString(new Date(now.getFullYear(), now.getMonth() - 1, 1));
dateTo = '';
timerange = '';
// Custom plot config - manually changed by user.
// eslint-disable-next-line @typescript-eslint/camelcase
@ -159,7 +128,7 @@ export default class Graphs extends Vue {
this.getPairHistory({
pair: this.pair,
timeframe: this.timeframe,
timerange: `${dateStringToTimeRange(this.dateFrom)}-${dateStringToTimeRange(this.dateTo)}`,
timerange: this.timerange,
});
} else {
this.getPairCandles({ pair: this.pair, timeframe: this.timeframe, limit: 500 });