From d4c6815eca1b39e5a4271812e051ddf50eb1b752 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 19 Apr 2023 20:35:41 +0200
Subject: [PATCH] Update zoom sliders to be bigger

closes #275
---
 src/components/charts/CandleChart.vue    |  4 ++--
 src/components/charts/CumProfitChart.vue |  5 +++--
 src/components/charts/TradesLog.vue      |  4 ++--
 src/shared/charts/chartZoom.ts           | 10 ++++++++++
 4 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 src/shared/charts/chartZoom.ts

diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index 423f003a..bc850fff 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -31,6 +31,7 @@ import {
   VisualMapComponent,
   VisualMapPiecewiseComponent,
 } from 'echarts/components';
+import { dataZoomPartial } from '@/shared/charts/chartZoom';
 
 use([
   AxisPointerComponent,
@@ -609,12 +610,11 @@ export default defineComponent({
             end: 100,
           },
           {
-            show: true,
             xAxisIndex: [0, 1],
-            type: 'slider',
             bottom: 10,
             start: 80,
             end: 100,
+            ...dataZoomPartial,
           },
         ],
         // visualMap: {
diff --git a/src/components/charts/CumProfitChart.vue b/src/components/charts/CumProfitChart.vue
index 5ff019a1..e8ff0fc4 100644
--- a/src/components/charts/CumProfitChart.vue
+++ b/src/components/charts/CumProfitChart.vue
@@ -20,6 +20,7 @@ import {
 import { ClosedTrade, CumProfitData, CumProfitDataPerDate } from '@/types';
 import { defineComponent, computed, ComputedRef } from 'vue';
 import { useSettingsStore } from '@/stores/settings';
+import { dataZoomPartial } from '@/shared/charts/chartZoom';
 
 use([
   BarChart,
@@ -140,15 +141,15 @@ export default defineComponent({
             type: 'inside',
             // xAxisIndex: [0],
             start: 0,
+
             end: 100,
           },
           {
-            show: true,
             // xAxisIndex: [0],
-            type: 'slider',
             bottom: 10,
             start: 0,
             end: 100,
+            ...dataZoomPartial,
           },
         ],
         series: [
diff --git a/src/components/charts/TradesLog.vue b/src/components/charts/TradesLog.vue
index 583925b6..ab26c4b3 100644
--- a/src/components/charts/TradesLog.vue
+++ b/src/components/charts/TradesLog.vue
@@ -28,6 +28,7 @@ import { ClosedTrade } from '@/types';
 import { useSettingsStore } from '@/stores/settings';
 import { defineComponent, computed } from 'vue';
 import { timestampms } from '@/shared/formatters';
+import { dataZoomPartial } from '@/shared/charts/chartZoom';
 
 use([
   BarChart,
@@ -133,11 +134,10 @@ export default defineComponent({
             end: 100,
           },
           {
-            show: true,
-            type: 'slider',
             bottom: 10,
             start: datazoomStart,
             end: 100,
+            ...dataZoomPartial,
           },
         ],
         visualMap: [
diff --git a/src/shared/charts/chartZoom.ts b/src/shared/charts/chartZoom.ts
new file mode 100644
index 00000000..bdcbf076
--- /dev/null
+++ b/src/shared/charts/chartZoom.ts
@@ -0,0 +1,10 @@
+// Circle icon with handles - for slightly bigger data-zoom slider.
+const handleIcon =
+  'path://M18.1 10.7V9.3c-.3-4.9-4.4-8.8-9.4-8.8-5 0-9.1 3.9-9.4 8.8v1.3c.3 4.9 4.4 8.8 9.4 8.8C13.7 19.5 17.8 15.6 18.1 10.7zM5.6 13.3V6.7H7v6.6H5.6zM10.4 13.3V6.7h1.4v6.6H10.4z';
+
+export const dataZoomPartial = {
+  show: true,
+  type: 'slider',
+  handleIcon,
+  handleSize: '80%',
+};