Update zoom sliders to be bigger

closes #275

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: {

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: [

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: [

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%',
+};