From d8a4f27e0c2d42d5d56bb90792663d2f851356db Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 28 Dec 2024 18:29:54 +0100
Subject: [PATCH] chore: Better align backtesting charts

---
 src/auto-imports.d.ts                             | 2 ++
 src/components/charts/CumProfitChart.vue          | 4 +---
 src/components/charts/MarketChangeChart.vue       | 3 +++
 src/components/charts/ProfitDistributionChart.vue | 7 ++++---
 src/components/charts/TradesLogChart.vue          | 4 ++--
 src/utils/charts/chartZoom.ts                     | 6 ++++++
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 289b2749d1..f0a20ded37 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -49,6 +49,7 @@ declare global {
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const echartsGridDefault: typeof import('./utils/charts/chartZoom')['echartsGridDefault']
   const effectScope: typeof import('vue')['effectScope']
   const exportForTesting: typeof import('./utils/formatters/timeformat')['exportForTesting']
   const extendRef: typeof import('@vueuse/core')['extendRef']
@@ -436,6 +437,7 @@ declare module 'vue' {
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly echartsGridDefault: UnwrapRef<typeof import('./utils/charts/chartZoom')['echartsGridDefault']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly exportForTesting: UnwrapRef<typeof import('./utils/formatters/timeformat')['exportForTesting']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
diff --git a/src/components/charts/CumProfitChart.vue b/src/components/charts/CumProfitChart.vue
index a091788889..a3d2259307 100644
--- a/src/components/charts/CumProfitChart.vue
+++ b/src/components/charts/CumProfitChart.vue
@@ -242,9 +242,7 @@ const cumProfitChartOptions: ComputedRefWithControl<EChartsOption> = computedWit
         },
       ],
       grid: {
-        left: '55',
-        right: '20',
-        bottom: 80,
+        ...echartsGridDefault,
       },
       dataZoom: [
         {
diff --git a/src/components/charts/MarketChangeChart.vue b/src/components/charts/MarketChangeChart.vue
index c8593a3542..d2b4ae2360 100644
--- a/src/components/charts/MarketChangeChart.vue
+++ b/src/components/charts/MarketChangeChart.vue
@@ -77,6 +77,9 @@ const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
         },
       },
     },
+    grid: {
+      ...echartsGridDefault,
+    },
     legend: {
       data: [CHART_MARKET_CHANGE],
       right: '5%',
diff --git a/src/components/charts/ProfitDistributionChart.vue b/src/components/charts/ProfitDistributionChart.vue
index 07582d47b0..f04491a52a 100644
--- a/src/components/charts/ProfitDistributionChart.vue
+++ b/src/components/charts/ProfitDistributionChart.vue
@@ -95,9 +95,10 @@ const chartOptions = computed((): EChartsOption => {
         position: 'left',
       },
     ],
-    // grid: {
-    // bottom: 80,
-    // },
+    grid: {
+      ...echartsGridDefault,
+      bottom: 50,
+    },
 
     series: [
       {
diff --git a/src/components/charts/TradesLogChart.vue b/src/components/charts/TradesLogChart.vue
index 7a07225f6f..77667f96d3 100644
--- a/src/components/charts/TradesLogChart.vue
+++ b/src/components/charts/TradesLogChart.vue
@@ -111,8 +111,8 @@ const chartOptions = computed((): EChartsOption => {
       },
     ],
     grid: {
-      right: 50,
-      bottom: 80,
+      ...echartsGridDefault,
+      left: 80,
     },
     dataZoom: [
       {
diff --git a/src/utils/charts/chartZoom.ts b/src/utils/charts/chartZoom.ts
index bdcbf07603..ebb605c75c 100644
--- a/src/utils/charts/chartZoom.ts
+++ b/src/utils/charts/chartZoom.ts
@@ -8,3 +8,9 @@ export const dataZoomPartial = {
   handleIcon,
   handleSize: '80%',
 };
+
+export const echartsGridDefault = {
+  left: '55',
+  right: '30',
+  bottom: 80,
+};