Split profit colors from "up/Down colors

This commit is contained in:
Matthias 2023-10-18 07:05:33 +02:00
parent 96f81a98c9
commit 202fdf97d9
3 changed files with 15 additions and 13 deletions

View File

@ -86,16 +86,15 @@ const props = defineProps({
type: Object as () => ChartSliderPosition, type: Object as () => ChartSliderPosition,
default: () => undefined, default: () => undefined,
}, },
colorPreference: { required: false, type: String, default: 'greenUp' }, colorUp: { required: false, type: String, default: '#12bb7b' },
colorDown: { required: false, type: String, default: '#ef5350' },
}); });
// Candle Colors // Candle Colors
const colorProfit = props.colorPreference === 'greenUp' ? '#26A69A' : '#EF5350'; const upColor = props.colorUp;
const colorLoss = props.colorPreference === 'greenUp' ? '#EF5350' : '#26A69A'; const upBorderColor = props.colorUp;
const upColor = colorProfit; const downColor = props.colorDown;
const upBorderColor = colorProfit; const downBorderColor = props.colorDown;
const downColor = colorLoss;
const downBorderColor = colorLoss;
// Buy / Sell Signal Colors // Buy / Sell Signal Colors
const buySignalColor = '#00ff26'; const buySignalColor = '#00ff26';

View File

@ -65,7 +65,8 @@
:use-u-t-c="settingsStore.timezone === 'UTC'" :use-u-t-c="settingsStore.timezone === 'UTC'"
:theme="settingsStore.chartTheme" :theme="settingsStore.chartTheme"
:slider-position="sliderPosition" :slider-position="sliderPosition"
:color-preference="colorStore.colorPreference" :color-down="colorStore.colorDown"
:color-up="colorStore.colorUp"
> >
</CandleChart> </CandleChart>
<div v-else class="m-auto"> <div v-else class="m-auto">

View File

@ -7,17 +7,19 @@ export const useColorStore = defineStore('colorStore', {
state: () => { state: () => {
return { return {
colorPreference: 'greenUp', colorPreference: 'greenUp',
colorProfit: '#12bb7b', colorUp: '#26A69A',
colorDown: '#EF5350',
colorProfit: '#26A69A', //12bb7b
colorLoss: '#ef5350', colorLoss: '#ef5350',
}; };
}, },
getters: {}, getters: {},
actions: { actions: {
updateProfitLossColor() { updateProfitLossColor() {
const [colorProfit, colorLoss] = const [colorUp, colorDown] =
this.colorPreference === 'greenUp' ? ['#12bb7b', '#ef5350'] : ['#ef5350', '#12bb7b']; this.colorPreference === 'greenUp' ? ['#26A69A', '#ef5350'] : ['#ef5350', '#12bb7b'];
this.colorProfit = colorProfit; this.colorUp = colorUp;
this.colorLoss = colorLoss; this.colorDown = colorDown;
}, },
}, },
persist: { persist: {