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

Small stylistic changes to graph

Browse Source
This commit is contained in:
Matthias 2020-09-30 07:48:36 +02:00
parent 6379aa669a
commit 7703ee16fc
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/charts/CandleChart.vue
View File

@ -187,16 +187,15 @@ export default class CandleChart extends Vue {
{ {
left: MARGINLEFT, left: MARGINLEFT,
right: MARGINRIGHT, right: MARGINRIGHT,
// height: subplotCount === 0 ? '70%' : '60%', // Grid Layout from bottom to top
// top: '0px',
bottom: `${subplotCount * 10 + 10}%`, bottom: `${subplotCount * 10 + 10}%`,
// bottom: '150px',
}, },
{ {
// Volume // Volume
left: MARGINLEFT, left: MARGINLEFT,
right: MARGINRIGHT, right: MARGINRIGHT,
top: subplotCount === 0 ? '80%' : '70%', // Grid Layout from bottom to top
bottom: `${subplotCount * 10}%`,
height: '10%', height: '10%',
}, },
], ],
@ -375,8 +374,8 @@ export default class CandleChart extends Vue {
options.grid.push({ options.grid.push({
left: MARGINLEFT, left: MARGINLEFT,
right: MARGINRIGHT, right: MARGINRIGHT,
bottom: `${(plotIndex - 1) * 50}px`, bottom: `${plotIndex * 50}px`,
height: '8%', height: '50px',
}); });
} }
Object.entries(value).forEach(([sk, sv]) => { Object.entries(value).forEach(([sk, sv]) => {
@ -418,7 +417,8 @@ export default class CandleChart extends Vue {
// options.xAxis[options.xAxis.length - 1].axisTick.show = true; // options.xAxis[options.xAxis.length - 1].axisTick.show = true;
// } // }
if (options.grid && Array.isArray(options.grid)) { if (options.grid && Array.isArray(options.grid)) {
options.grid[options.grid.length - 1].bottom = '75px'; // Last subplot is bottom
options.grid[options.grid.length - 1].bottom = '50px';
delete options.grid[options.grid.length - 1].top; delete options.grid[options.grid.length - 1].top;
} }

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

@ -32,7 +32,7 @@
</div> </div>
<div class="col-mb-2 mr-2"> <div class="col-mb-2 mr-2">
<b-checkbox v-model="useUTC" title="Use UTC for graph">useUtc</b-checkbox> <b-checkbox v-model="useUTC" title="Use UTC for graph">useUTC</b-checkbox>
</div> </div>
<div class="col-mb-2 mr-1"> <div class="col-mb-2 mr-1">
<b-button size="sm" title="Plot configurator" @click="showConfigurator">&#9881;</b-button> <b-button size="sm" title="Plot configurator" @click="showConfigurator">&#9881;</b-button>
@ -40,12 +40,14 @@
</div> </div>
<div class="row mr-1 ml-1 h-100"> <div class="row mr-1 ml-1 h-100">
<CandleChart <CandleChart
v-if="hasDataset"
:dataset="dataset" :dataset="dataset"
:trades="trades" :trades="trades"
:plot-config="plotConfig" :plot-config="plotConfig"
:use-u-t-c="useUTC" :use-u-t-c="useUTC"
> >
</CandleChart> </CandleChart>
<label v-else style="margin: auto auto; font-size: 1.5rem">No data available</label>
</div> </div>
</div> </div>
</template> </template>
@ -160,4 +162,4 @@ export default class CandleChartContainer extends Vue {
} }
</script> </script>
<style></style> <style scoped></style>

5
src/views/Graphs.vue
View File

@ -31,6 +31,7 @@ import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue'; import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
import StrategyList from '@/components/ftbot/StrategyList.vue'; import StrategyList from '@/components/ftbot/StrategyList.vue';
import { AvailablePairPayload, AvailablePairResult, WhitelistResponse } from '@/types'; import { AvailablePairPayload, AvailablePairResult, WhitelistResponse } from '@/types';
import { BotStoreGetters } from '@/store/modules/ftbot';
const ftbot = namespace('ftbot'); const ftbot = namespace('ftbot');
@ -38,8 +39,6 @@ const ftbot = namespace('ftbot');
components: { CandleChartContainer, StrategyList, TimeRangeSelect }, components: { CandleChartContainer, StrategyList, TimeRangeSelect },
}) })
export default class Graphs extends Vue { export default class Graphs extends Vue {
timeframe = '5m';
historicView = false; historicView = false;
strategy = ''; strategy = '';
@ -52,6 +51,8 @@ export default class Graphs extends Vue {
@ftbot.State trades; @ftbot.State trades;
@ftbot.Getter [BotStoreGetters.timeframe]!: string;
@ftbot.Action public getWhitelist!: () => Promise<WhitelistResponse>; @ftbot.Action public getWhitelist!: () => Promise<WhitelistResponse>;
@ftbot.Action public getAvailablePairs!: ( @ftbot.Action public getAvailablePairs!: (