mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-23 11:35:14 +00:00
feat: add color preference setting
This commit is contained in:
parent
5253f70cb4
commit
abed6f8868
|
@ -11,11 +11,14 @@ import NavBar from '@/components/layout/NavBar.vue';
|
|||
import NavFooter from '@/components/layout/NavFooter.vue';
|
||||
import BodyLayout from '@/components/layout/BodyLayout.vue';
|
||||
import { setTimezone } from './shared/formatters';
|
||||
import { setProfitLossColorsCSS } from './shared/colorPreference';
|
||||
import { onMounted, watch } from 'vue';
|
||||
import { useSettingsStore } from './stores/settings';
|
||||
const settingsStore = useSettingsStore();
|
||||
onMounted(() => {
|
||||
setTimezone(settingsStore.timezone);
|
||||
setProfitLossColorsCSS(settingsStore.colorPreference);
|
||||
settingsStore.updateProfitLossColor();
|
||||
});
|
||||
watch(
|
||||
() => settingsStore.timezone,
|
||||
|
@ -24,6 +27,12 @@ watch(
|
|||
setTimezone(tz);
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => settingsStore.colorPreference,
|
||||
(preference) => {
|
||||
setProfitLossColorsCSS(preference);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
@ -68,17 +68,6 @@ const MARGINRIGHT = '1%';
|
|||
const NAMEGAP = 55;
|
||||
const SUBPLOTHEIGHT = 8; // Value in %
|
||||
|
||||
// Binance colors
|
||||
const upColor = '#26A69A';
|
||||
const upBorderColor = '#26A69A';
|
||||
const downColor = '#EF5350';
|
||||
const downBorderColor = '#EF5350';
|
||||
|
||||
const buySignalColor = '#00ff26';
|
||||
const shortEntrySignalColor = '#00ff26';
|
||||
const sellSignalColor = '#faba25';
|
||||
const shortexitSignalColor = '#faba25';
|
||||
|
||||
const props = defineProps({
|
||||
trades: { required: false, default: () => [], type: Array as () => Trade[] },
|
||||
dataset: { required: true, type: Object as () => PairHistory },
|
||||
|
@ -91,7 +80,23 @@ const props = defineProps({
|
|||
type: Object as () => ChartSliderPosition,
|
||||
default: () => undefined,
|
||||
},
|
||||
colorPreference: { required: false, type: String, default: 'greenUp' },
|
||||
});
|
||||
|
||||
// Candle Colors
|
||||
const colorProfit = props.colorPreference === 'greenUp' ? '#26A69A' : '#EF5350';
|
||||
const colorLoss = props.colorPreference === 'greenUp' ? '#EF5350' : '#26A69A';
|
||||
const upColor = colorProfit;
|
||||
const upBorderColor = colorProfit;
|
||||
const downColor = colorLoss;
|
||||
const downBorderColor = colorLoss;
|
||||
|
||||
// Buy / Sell Signal Colors
|
||||
const buySignalColor = '#00ff26';
|
||||
const shortEntrySignalColor = '#00ff26';
|
||||
const sellSignalColor = '#faba25';
|
||||
const shortexitSignalColor = '#faba25';
|
||||
|
||||
const candleChart = ref<typeof ECharts>();
|
||||
const chartOptions = ref<EChartsOption>({});
|
||||
|
||||
|
|
|
@ -57,6 +57,7 @@
|
|||
:use-u-t-c="settingsStore.timezone === 'UTC'"
|
||||
:theme="settingsStore.chartTheme"
|
||||
:slider-position="sliderPosition"
|
||||
:color-preference="settingsStore.colorPreference"
|
||||
>
|
||||
</CandleChart>
|
||||
<div v-else class="m-auto">
|
||||
|
|
|
@ -121,6 +121,7 @@ const cumulativeData = computed<CumProfitChartData[]>(() => {
|
|||
});
|
||||
|
||||
function updateChart(initial = false) {
|
||||
const { colorProfit, colorLoss } = settingsStore;
|
||||
const chartOptionsLoc: EChartsOption = {
|
||||
dataset: {
|
||||
dimensions: ['date', 'profit', 'currentProfit'],
|
||||
|
@ -136,11 +137,11 @@ function updateChart(initial = false) {
|
|||
animation: initial,
|
||||
|
||||
lineStyle: {
|
||||
color: openProfit.value > 0 ? 'green' : 'red',
|
||||
color: openProfit.value > 0 ? colorProfit : colorLoss,
|
||||
type: 'dotted',
|
||||
},
|
||||
itemStyle: {
|
||||
color: openProfit.value > 0 ? 'green' : 'red',
|
||||
color: openProfit.value > 0 ? colorProfit : colorLoss,
|
||||
},
|
||||
encode: {
|
||||
x: 'date',
|
||||
|
|
|
@ -106,12 +106,12 @@ const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
|
|||
{
|
||||
max: 0.0,
|
||||
min: absoluteMin.value,
|
||||
color: 'red',
|
||||
color: settingsStore.colorLoss,
|
||||
},
|
||||
{
|
||||
min: 0.0,
|
||||
max: absoluteMax.value,
|
||||
color: 'green',
|
||||
color: settingsStore.colorProfit,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
@ -123,12 +123,12 @@ const hourlyChartOptions = computed((): EChartsOption => {
|
|||
{
|
||||
max: 0.0,
|
||||
min: -2,
|
||||
color: 'red',
|
||||
color: settingsStore.colorLoss,
|
||||
},
|
||||
{
|
||||
min: 0.0,
|
||||
max: 2,
|
||||
color: 'green',
|
||||
color: settingsStore.colorProfit,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
@ -140,11 +140,11 @@ const chartOptions = computed((): EChartsOption => {
|
|||
pieces: [
|
||||
{
|
||||
max: 0.0,
|
||||
color: '#f84960',
|
||||
color: settingsStore.colorLoss,
|
||||
},
|
||||
{
|
||||
min: 0.0,
|
||||
color: '#2ed191',
|
||||
color: settingsStore.colorProfit,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
7
src/shared/colorPreference.ts
Normal file
7
src/shared/colorPreference.ts
Normal file
|
@ -0,0 +1,7 @@
|
|||
// setProfitLossColorsCSS
|
||||
export function setProfitLossColorsCSS(preference: string) {
|
||||
const [colorProfit, colorLoss] =
|
||||
preference === 'greenUp' ? ['#12bb7b', '#ef5350'] : ['#ef5350', '#12bb7b'];
|
||||
document.documentElement.style.setProperty('--color-profit', colorProfit);
|
||||
document.documentElement.style.setProperty('--color-loss', colorLoss);
|
||||
}
|
|
@ -32,6 +32,9 @@ export const useSettingsStore = defineStore('uiSettings', {
|
|||
useHeikinAshiCandles: false,
|
||||
notifications: notificationDefaults,
|
||||
profitDistributionBins: 20,
|
||||
colorPreference: 'greenUp',
|
||||
colorProfit: '#12bb7b',
|
||||
colorLoss: '#ef5350',
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
|
@ -58,6 +61,12 @@ export const useSettingsStore = defineStore('uiSettings', {
|
|||
}
|
||||
}
|
||||
},
|
||||
updateProfitLossColor() {
|
||||
const [colorProfit, colorLoss] =
|
||||
this.colorPreference === 'greenUp' ? ['#12bb7b', '#ef5350'] : ['#ef5350', '#12bb7b'];
|
||||
this.colorProfit = colorProfit;
|
||||
this.colorLoss = colorLoss;
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
key: STORE_UI_SETTINGS,
|
||||
|
|
|
@ -1,5 +1,11 @@
|
|||
// variables created for the project and not overwrite of bootstrap
|
||||
$fontsize-small: 0.8rem;
|
||||
|
||||
$color-profit: #12bb7b;
|
||||
$color-loss: #ef5350;
|
||||
:root {
|
||||
// default profit loss colors, could be overwriten by setProfitLossColorsCSS
|
||||
--color-profit: #12bb7b;
|
||||
--color-loss: #ef5350;
|
||||
}
|
||||
|
||||
$color-profit: var(--color-profit);
|
||||
$color-loss: var(--color-loss);
|
||||
|
|
|
@ -11,6 +11,14 @@
|
|||
<b-form-group description="Reset dynamic layouts to how they were.">
|
||||
<b-button size="sm" class="me-1" @click="resetDynamicLayout">Reset layout</b-button>
|
||||
</b-form-group>
|
||||
<b-form-group description="Color Preference">
|
||||
<b-form-radio-group
|
||||
id="settings-color-preference-radio-group"
|
||||
v-model="settingsStore.colorPreference"
|
||||
:options="colorPreferenceOptions"
|
||||
name="color-preference-options"
|
||||
></b-form-radio-group>
|
||||
</b-form-group>
|
||||
<b-form-group
|
||||
label="Show open trades in header"
|
||||
description="Decide if open trades should be visualized"
|
||||
|
@ -71,6 +79,10 @@ const openTradesOptions = [
|
|||
{ value: OpenTradeVizOptions.asTitle, text: 'Show in title' },
|
||||
{ value: OpenTradeVizOptions.noOpenTrades, text: "Don't show open trades in header" },
|
||||
];
|
||||
const colorPreferenceOptions = [
|
||||
{ value: 'greenUp', text: 'Green Up/Red Down' },
|
||||
{ value: 'redUp', text: 'Green Down/Red Up' },
|
||||
];
|
||||
|
||||
//
|
||||
const resetDynamicLayout = () => {
|
||||
|
|
Loading…
Reference in New Issue
Block a user