From 1fb43f5c5bc45a08c6ff8d435c885ba1baea044d Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 28 Apr 2023 20:27:58 +0200
Subject: [PATCH] Extract function to separate file

---
 src/components/charts/CandleChart.vue  | 30 +++-----------------------
 src/shared/charts/candleChartSeries.ts | 27 +++++++++++++++++++++++
 2 files changed, 30 insertions(+), 27 deletions(-)
 create mode 100644 src/shared/charts/candleChartSeries.ts

diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index 067a1155..cbf4bcfd 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -6,15 +6,15 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue';
-import { Trade, PairHistory, PlotConfig, ChartSliderPosition, IndicatorConfig } from '@/types';
-import randomColor from '@/shared/randomColor';
+import { Trade, PairHistory, PlotConfig, ChartSliderPosition } from '@/types';
+import { generateCandleSeries } from '@/shared/charts/candleChartSeries';
 import heikinashi from '@/shared/charts/heikinashi';
 import { getTradeEntries } from '@/shared/charts/tradeChartData';
 import ECharts from 'vue-echarts';
 import { format } from 'date-fns-tz';
 
 import { use } from 'echarts/core';
-import { EChartsOption, SeriesOption, ScatterSeriesOption } from 'echarts';
+import { EChartsOption, ScatterSeriesOption } from 'echarts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { CandlestickChart, LineChart, BarChart, ScatterChart } from 'echarts/charts';
 import {
@@ -111,30 +111,6 @@ const chartTitle = computed(() => {
   return `${strategy.value} - ${pair.value} - ${timeframe.value}`;
 });
 
-function generateCandleSeries(
-  colDate: number,
-  col: number,
-  key: string,
-  value: IndicatorConfig,
-  axis = 0,
-): SeriesOption {
-  const sp: SeriesOption = {
-    name: key,
-    type: value.type || 'line',
-    xAxisIndex: axis,
-    yAxisIndex: axis,
-    itemStyle: {
-      color: value.color || randomColor(),
-    },
-    encode: {
-      x: colDate,
-      y: col,
-    },
-    showSymbol: false,
-  };
-  return sp;
-}
-
 function updateChart(initial = false) {
   if (!hasData.value) {
     return;
diff --git a/src/shared/charts/candleChartSeries.ts b/src/shared/charts/candleChartSeries.ts
new file mode 100644
index 00000000..4c3b1905
--- /dev/null
+++ b/src/shared/charts/candleChartSeries.ts
@@ -0,0 +1,27 @@
+import { IndicatorConfig } from '@/types';
+import { SeriesOption } from 'echarts';
+import randomColor from '../randomColor';
+
+export function generateCandleSeries(
+  colDate: number,
+  col: number,
+  key: string,
+  value: IndicatorConfig,
+  axis = 0,
+): SeriesOption {
+  const sp: SeriesOption = {
+    name: key,
+    type: value.type || 'line',
+    xAxisIndex: axis,
+    yAxisIndex: axis,
+    itemStyle: {
+      color: value.color || randomColor(),
+    },
+    encode: {
+      x: colDate,
+      y: col,
+    },
+    showSymbol: false,
+  };
+  return sp;
+}