From ecd687b1f482742cf360c7078b8e65075ff7c3da Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 28 Dec 2024 15:50:30 +0100
Subject: [PATCH] feat: add support for annotations

---
 src/auto-imports.d.ts                 |  2 ++
 src/components/charts/CandleChart.vue |  1 +
 src/types/candleTypes.ts              | 12 +++++++++
 src/utils/charts/tradeChartData.ts    | 35 ++++++++++++++++++++++++++-
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index ad376e7e2..289b2749d 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -61,6 +61,7 @@ declare global {
   const generateBacktestMetricRows: typeof import('./utils/backtestMetrics')['generateBacktestMetricRows']
   const generateBacktestSettingRows: typeof import('./utils/backtestMetrics')['generateBacktestSettingRows']
   const generateCandleSeries: typeof import('./utils/charts/candleChartSeries')['generateCandleSeries']
+  const generateMarkArea: typeof import('./utils/charts/tradeChartData')['generateMarkArea']
   const generateTradeSeries: typeof import('./utils/charts/tradeChartData')['generateTradeSeries']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
@@ -447,6 +448,7 @@ declare module 'vue' {
     readonly generateBacktestMetricRows: UnwrapRef<typeof import('./utils/backtestMetrics')['generateBacktestMetricRows']>
     readonly generateBacktestSettingRows: UnwrapRef<typeof import('./utils/backtestMetrics')['generateBacktestSettingRows']>
     readonly generateCandleSeries: UnwrapRef<typeof import('./utils/charts/candleChartSeries')['generateCandleSeries']>
+    readonly generateMarkArea: UnwrapRef<typeof import('./utils/charts/tradeChartData')['generateMarkArea']>
     readonly generateTradeSeries: UnwrapRef<typeof import('./utils/charts/tradeChartData')['generateTradeSeries']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index 0976dd2d1..d418b65cf 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -219,6 +219,7 @@ function updateChart(initial = false) {
           // open, close, low, high
           y: [colOpen, colClose, colLow, colHigh],
         },
+        ...generateMarkArea(props.dataset),
       },
       {
         name: 'Volume',
diff --git a/src/types/candleTypes.ts b/src/types/candleTypes.ts
index 221aabe48..23ec76c42 100644
--- a/src/types/candleTypes.ts
+++ b/src/types/candleTypes.ts
@@ -30,6 +30,16 @@ export interface PairHistoryPayload {
   columns?: string[];
 }
 
+export interface MarkArea {
+  type: 'area';
+  start?: string;
+  end?: string;
+  y_start?: number;
+  y_end?: number;
+  color?: string;
+  label?: string;
+}
+
 export interface PairHistory {
   strategy: string;
   pair: string;
@@ -42,6 +52,8 @@ export interface PairHistory {
   all_columns?: string[];
   /** Actual data */
   data: number[][];
+  annotations: MarkArea[];
+
   length: number;
   /** Number of buy signals in this response */
   buy_signals: number;
diff --git a/src/utils/charts/tradeChartData.ts b/src/utils/charts/tradeChartData.ts
index c6ba79726..52bffd87b 100644
--- a/src/utils/charts/tradeChartData.ts
+++ b/src/utils/charts/tradeChartData.ts
@@ -1,6 +1,6 @@
 import type { Order, PairHistory, Trade, BTOrder } from '@/types';
 
-import type { ScatterSeriesOption } from 'echarts';
+import type { MarkAreaComponentOption, ScatterSeriesOption } from 'echarts';
 
 function buildTooltipCost(order: Order | BTOrder, quoteCurrency: string): string {
   return `${order.ft_order_side === 'buy' ? '+' : '-'}${formatPriceCurrency(
@@ -225,3 +225,36 @@ export function generateTradeSeries(
   }
   return tradesSeries;
 }
+
+export function generateMarkArea(dataset: PairHistory): { markArea?: MarkAreaComponentOption } {
+  if (!dataset.annotations) return {};
+
+  const markArea: MarkAreaComponentOption = {
+    label: {
+      position: 'insideTop',
+    },
+    data: dataset.annotations
+      .filter((area) => area.type == 'area')
+      .map((area) => {
+        return [
+          {
+            xAxis: area.start,
+            yAxis: area.y_start,
+            itemStyle: {
+              color: area.color,
+            },
+            label: {
+              formatter: area.label,
+            },
+          },
+          {
+            xAxis: area.end,
+            yAxis: area.y_end,
+          },
+        ];
+      }),
+  };
+  return {
+    markArea,
+  };
+}