Show a max of 250 candles on startup

This commit is contained in:
Matthias 2020-07-11 15:34:14 +02:00
parent fa96070db3
commit 135daaf119
2 changed files with 8 additions and 13 deletions

View File

@ -9,9 +9,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import ECharts from 'vue-echarts'; import ECharts from 'vue-echarts';
// import { EChartOption } from 'echarts';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { timestampms } from '../../shared/formatters';
import { PairHistory, PlotConfig } from '../../store/types'; import { PairHistory, PlotConfig } from '../../store/types';
import randomColor from '../../shared/randomColor'; import randomColor from '../../shared/randomColor';
import 'echarts'; import 'echarts';
@ -77,7 +75,9 @@ export default class CandleChart extends Vue {
const colVolume = this.dataset.columns.findIndex((el) => el === 'volume'); const colVolume = this.dataset.columns.findIndex((el) => el === 'volume');
const colBuyData = this.dataset.columns.findIndex((el) => el === '_buy_signal_open'); const colBuyData = this.dataset.columns.findIndex((el) => el === '_buy_signal_open');
const colSellData = this.dataset.columns.findIndex((el) => el === '_sell_signal_open'); const colSellData = this.dataset.columns.findIndex((el) => el === '_sell_signal_open');
// Plot data
// Always show ~250 candles max as starting point
const startingZoom = (1 - 250 / this.dataset.length) * 100;
const options: echarts.EChartOption = { const options: echarts.EChartOption = {
title: { title: {
@ -119,11 +119,6 @@ export default class CandleChart extends Vue {
splitNumber: 20, splitNumber: 20,
min: 'dataMin', min: 'dataMin',
max: 'dataMax', max: 'dataMax',
axisLabel: {
formatter: (value) => {
return timestampms(value);
},
},
}, },
{ {
type: 'category', type: 'category',
@ -165,15 +160,15 @@ export default class CandleChart extends Vue {
// Volume // Volume
left: MARGINLEFT, left: MARGINLEFT,
right: MARGINRIGHT, right: MARGINRIGHT,
bottom: '20%', top: '70%',
height: '80px', height: '10%',
}, },
], ],
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: 'inside',
xAxisIndex: [0, 1], xAxisIndex: [0, 1],
start: 50, start: startingZoom,
end: 100, end: 100,
}, },
{ {
@ -181,7 +176,7 @@ export default class CandleChart extends Vue {
xAxisIndex: [0, 1], xAxisIndex: [0, 1],
type: 'slider', type: 'slider',
bottom: 10, bottom: 10,
start: 10, start: startingZoom,
end: 100, end: 100,
}, },
], ],

View File

@ -13,7 +13,7 @@
<div class="col-mb-2"> <div class="col-mb-2">
<b-checkbox v-model="strategyPlotConfig">Use strategy plot_config</b-checkbox> <b-checkbox v-model="strategyPlotConfig">Use strategy plot_config</b-checkbox>
</div> </div>
<div class="col-mb-2 ml-5"> <div class="col-mb-2 ml-5" v-if="!strategyPlotConfig">
<b-button @click="showConfigurator">Show configurator</b-button> <b-button @click="showConfigurator">Show configurator</b-button>
</div> </div>
</div> </div>