From 7724ca60f51166528e0c1a68664bee65c80cde88 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 3 Jul 2024 15:04:10 +0200
Subject: [PATCH] Add Option to configure chart Scale side (left or right).

---
 src/components/charts/CandleChart.vue          | 10 +++++++---
 src/components/charts/CandleChartContainer.vue |  4 ++--
 src/views/SettingsView.vue                     |  5 ++++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index 955739ee..5999ae30 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -80,11 +80,13 @@ const props = defineProps<{
   sliderPosition: ChartSliderPosition | undefined;
   colorUp: string;
   colorDown: string;
+  labelSide: 'left' | 'right';
 }>();
 
+const isLabelLeft = computed(() => props.labelSide === 'left');
 // Chart default options
-const MARGINLEFT = '5.5%';
-const MARGINRIGHT = '1%';
+const MARGINLEFT = isLabelLeft.value ? '5.5%' : '1%';
+const MARGINRIGHT = isLabelLeft.value ? '1%' : '5.5%';
 const NAMEGAP = 55;
 const SUBPLOTHEIGHT = 8; // Value in %
 
@@ -387,6 +389,7 @@ function updateChart(initial = false) {
           scale: true,
           gridIndex: currGridIdx,
           name: key,
+          position: props.labelSide,
           nameLocation: 'middle',
           nameGap: NAMEGAP,
           axisLabel: { show: true },
@@ -590,6 +593,7 @@ function initializeChartOptions() {
         min: (value) => {
           return value.min - (value.max - value.min) * 0.04;
         },
+        position: props.labelSide,
       },
       {
         scale: true,
@@ -597,7 +601,7 @@ function initializeChartOptions() {
         splitNumber: 2,
         name: 'volume',
         nameLocation: 'middle',
-        // position: 'right',
+        position: props.labelSide,
         nameGap: NAMEGAP,
         axisLabel: { show: false },
         axisLine: { show: false },
diff --git a/src/components/charts/CandleChartContainer.vue b/src/components/charts/CandleChartContainer.vue
index 59c0350b..7d2a6713 100644
--- a/src/components/charts/CandleChartContainer.vue
+++ b/src/components/charts/CandleChartContainer.vue
@@ -73,8 +73,8 @@
             :slider-position="sliderPosition"
             :color-up="colorStore.colorUp"
             :color-down="colorStore.colorDown"
-          >
-          </CandleChart>
+            :label-side="settingsStore.chartLabelSide"
+          />
           <div v-else class="m-auto">
             <b-spinner v-if="isLoadingDataset" label="Spinning" />
             <div v-else style="font-size: 1.5rem">
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index f659085a..08579e9f 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -45,7 +45,9 @@
 
         <div class="d-flex flex-column border rounded p-2 mb-2 gap-2">
           <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
               v-model="settingsStore.chartLabelSide"
               name="chart-preference-options"
@@ -55,6 +57,7 @@
               ]"
             ></b-form-radio-group>
           </b-form-group>
+
           <b-form-group description="Use Heikin Ashi candles in your charts">
             <b-form-checkbox v-model="settingsStore.useHeikinAshiCandles"
               >Use Heikin Ashi candles.</b-form-checkbox