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

Add Option to configure chart Scale side (left or right).

Browse Source
This commit is contained in:
Matthias 2024-07-03 15:04:10 +02:00
parent 742edecb64
commit 7724ca60f5
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,11 +80,13 @@ const props = defineProps<{
sliderPosition: ChartSliderPosition | undefined; sliderPosition: ChartSliderPosition | undefined;
colorUp: string; colorUp: string;
colorDown: string; colorDown: string;
labelSide: 'left' | 'right';
}>(); }>();
const isLabelLeft = computed(() => props.labelSide === 'left');
// Chart default options // Chart default options
const MARGINLEFT = '5.5%'; const MARGINLEFT = isLabelLeft.value ? '5.5%' : '1%';
const MARGINRIGHT = '1%'; const MARGINRIGHT = isLabelLeft.value ? '1%' : '5.5%';
const NAMEGAP = 55; const NAMEGAP = 55;
const SUBPLOTHEIGHT = 8; // Value in % const SUBPLOTHEIGHT = 8; // Value in %
@ -387,6 +389,7 @@ function updateChart(initial = false) {
scale: true, scale: true,
gridIndex: currGridIdx, gridIndex: currGridIdx,
name: key, name: key,
position: props.labelSide,
nameLocation: 'middle', nameLocation: 'middle',
nameGap: NAMEGAP, nameGap: NAMEGAP,
axisLabel: { show: true }, axisLabel: { show: true },
@ -590,6 +593,7 @@ function initializeChartOptions() {
min: (value) => { min: (value) => {
return value.min - (value.max - value.min) * 0.04; return value.min - (value.max - value.min) * 0.04;
}, },
position: props.labelSide,
}, },
{ {
scale: true, scale: true,
@ -597,7 +601,7 @@ function initializeChartOptions() {
splitNumber: 2, splitNumber: 2,
name: 'volume', name: 'volume',
nameLocation: 'middle', nameLocation: 'middle',
// position: 'right', position: props.labelSide,
nameGap: NAMEGAP, nameGap: NAMEGAP,
axisLabel: { show: false }, axisLabel: { show: false },
axisLine: { show: false }, axisLine: { show: false },

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

@ -73,8 +73,8 @@
:slider-position="sliderPosition" :slider-position="sliderPosition"
:color-up="colorStore.colorUp" :color-up="colorStore.colorUp"
:color-down="colorStore.colorDown" :color-down="colorStore.colorDown"
> :label-side="settingsStore.chartLabelSide"
</CandleChart> />
<div v-else class="m-auto"> <div v-else class="m-auto">
<b-spinner v-if="isLoadingDataset" label="Spinning" /> <b-spinner v-if="isLoadingDataset" label="Spinning" />
<div v-else style="font-size: 1.5rem"> <div v-else style="font-size: 1.5rem">

5
src/views/SettingsView.vue
View File

@ -45,7 +45,9 @@
<div class="d-flex flex-column border rounded p-2 mb-2 gap-2"> <div class="d-flex flex-column border rounded p-2 mb-2 gap-2">
<h4>Chart settings</h4> <h4>Chart settings</h4>
<b-form-group description="Chart Scale side"> <b-form-group
description="Chart scale Side (Should the scale be displayed on the right or left?)"
>
<b-form-radio-group <b-form-radio-group
v-model="settingsStore.chartLabelSide" v-model="settingsStore.chartLabelSide"
name="chart-preference-options" name="chart-preference-options"
@ -55,6 +57,7 @@
]" ]"
></b-form-radio-group> ></b-form-radio-group>
</b-form-group> </b-form-group>
<b-form-group description="Use Heikin Ashi candles in your charts"> <b-form-group description="Use Heikin Ashi candles in your charts">
<b-form-checkbox v-model="settingsStore.useHeikinAshiCandles" <b-form-checkbox v-model="settingsStore.useHeikinAshiCandles"
>Use Heikin Ashi candles.</b-form-checkbox >Use Heikin Ashi candles.</b-form-checkbox