From abed6f8868333d6be294be093c3d782f8e912ec7 Mon Sep 17 00:00:00 2001
From: qiweiii <yangqiwei97@gmail.com>
Date: Sun, 16 Jul 2023 14:11:40 +0800
Subject: [PATCH] feat: add color preference setting

---
 src/App.vue                                   |  9 +++++++
 src/components/charts/CandleChart.vue         | 27 +++++++++++--------
 .../charts/CandleChartContainer.vue           |  1 +
 src/components/charts/CumProfitChart.vue      |  5 ++--
 src/components/charts/DailyChart.vue          |  4 +--
 src/components/charts/HourlyChart.vue         |  4 +--
 src/components/charts/TradesLog.vue           |  4 +--
 src/shared/colorPreference.ts                 |  7 +++++
 src/stores/settings.ts                        |  9 +++++++
 src/styles/_variables.scss                    | 10 +++++--
 src/views/SettingsView.vue                    | 12 +++++++++
 11 files changed, 71 insertions(+), 21 deletions(-)
 create mode 100644 src/shared/colorPreference.ts

diff --git a/src/App.vue b/src/App.vue
index c05c42fd..822bd110 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index 812bd639..1c0360f1 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -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>({});
 
diff --git a/src/components/charts/CandleChartContainer.vue b/src/components/charts/CandleChartContainer.vue
index e6876b1c..6d8e2026 100644
--- a/src/components/charts/CandleChartContainer.vue
+++ b/src/components/charts/CandleChartContainer.vue
@@ -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">
diff --git a/src/components/charts/CumProfitChart.vue b/src/components/charts/CumProfitChart.vue
index 62b56434..a46e9f55 100644
--- a/src/components/charts/CumProfitChart.vue
+++ b/src/components/charts/CumProfitChart.vue
@@ -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',
diff --git a/src/components/charts/DailyChart.vue b/src/components/charts/DailyChart.vue
index b1b2a16d..da301c53 100644
--- a/src/components/charts/DailyChart.vue
+++ b/src/components/charts/DailyChart.vue
@@ -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,
           },
         ],
       },
diff --git a/src/components/charts/HourlyChart.vue b/src/components/charts/HourlyChart.vue
index d1df2521..f3050455 100644
--- a/src/components/charts/HourlyChart.vue
+++ b/src/components/charts/HourlyChart.vue
@@ -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,
           },
         ],
       },
diff --git a/src/components/charts/TradesLog.vue b/src/components/charts/TradesLog.vue
index 6884913e..9af59572 100644
--- a/src/components/charts/TradesLog.vue
+++ b/src/components/charts/TradesLog.vue
@@ -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,
           },
         ],
       },
diff --git a/src/shared/colorPreference.ts b/src/shared/colorPreference.ts
new file mode 100644
index 00000000..4726147f
--- /dev/null
+++ b/src/shared/colorPreference.ts
@@ -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);
+}
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index a2b40b10..aefb9d88 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -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,
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 6c0ac53c..fc465a51 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -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);
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 91419c33..020add07 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -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 = () => {