From c1e447e16370aba984f1be14c4a190d8ec0cb851 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Tue, 20 Jun 2023 21:11:39 +0200
Subject: [PATCH 1/2] Show current stoploss line

---
 src/components/charts/CandleChart.vue |  6 +++++
 src/shared/charts/tradeChartData.ts   | 33 ++++++++++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index 1dbc1a2d14..a2c50c3465 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -37,6 +37,9 @@ import {
   TooltipComponent,
   VisualMapComponent,
   VisualMapPiecewiseComponent,
+  // MarkAreaComponent,
+  MarkLineComponent,
+  // MarkPointComponent,
 } from 'echarts/components';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
@@ -54,6 +57,9 @@ use([
   TooltipComponent,
   VisualMapComponent,
   VisualMapPiecewiseComponent,
+  // MarkAreaComponent,
+  MarkLineComponent,
+  // MarkPointComponent,
 
   CandlestickChart,
   BarChart,
diff --git a/src/shared/charts/tradeChartData.ts b/src/shared/charts/tradeChartData.ts
index 418be4a542..d3bcd5a5ab 100644
--- a/src/shared/charts/tradeChartData.ts
+++ b/src/shared/charts/tradeChartData.ts
@@ -127,6 +127,8 @@ export function generateTradeSeries(
 ): ScatterSeriesOption {
   const { tradeData } = getTradeEntries(dataset, trades);
 
+  const openTrades = trades.filter((t) => t.is_open);
+
   const tradesSeries: ScatterSeriesOption = {
     name: nameTrades,
     type: 'scatter',
@@ -158,6 +160,35 @@ export function generateTradeSeries(
     symbolSize: 13,
     data: tradeData,
   };
-
+  // Show distance to stoploss
+  if (openTrades.length > 0) {
+    // Ensure to import and "use" whatever feature in candleChart! (MarkLine, MarkArea, ...)
+    tradesSeries.markLine = {
+      symbol: 'none',
+      itemStyle: {
+        color: '#ff000055',
+      },
+      label: {
+        show: true,
+        position: 'middle',
+      },
+      lineStyle: {
+        type: 'solid',
+      },
+      data: openTrades.map((t) => {
+        return [
+          {
+            name: 'Stoploss',
+            yAxis: t.stop_loss_abs,
+            xAxis: t.open_timestamp,
+          },
+          {
+            yAxis: t.stop_loss_abs,
+            xAxis: t.close_timestamp ?? dataset.data_stop_ts,
+          },
+        ];
+      }),
+    };
+  }
   return tradesSeries;
 }

From bc88cd16d05a52e6c373eb482a68bdda9d03e6f2 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 29 Jul 2023 19:52:19 +0200
Subject: [PATCH 2/2] Ensure stop line is visible for new trades

---
 src/shared/charts/tradeChartData.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/shared/charts/tradeChartData.ts b/src/shared/charts/tradeChartData.ts
index d3bcd5a5ab..39b367bc69 100644
--- a/src/shared/charts/tradeChartData.ts
+++ b/src/shared/charts/tradeChartData.ts
@@ -163,10 +163,13 @@ export function generateTradeSeries(
   // Show distance to stoploss
   if (openTrades.length > 0) {
     // Ensure to import and "use" whatever feature in candleChart! (MarkLine, MarkArea, ...)
+    // Offset to avoid having the line at the very end of the chart
+    const offset = dataset.timeframe_ms * 10;
+
     tradesSeries.markLine = {
       symbol: 'none',
       itemStyle: {
-        color: '#ff000055',
+        color: '#ff0000AA',
       },
       label: {
         show: true,
@@ -180,7 +183,10 @@ export function generateTradeSeries(
           {
             name: 'Stoploss',
             yAxis: t.stop_loss_abs,
-            xAxis: t.open_timestamp,
+            xAxis:
+              dataset.data_stop_ts - offset > t.open_timestamp
+                ? t.open_timestamp
+                : dataset.data_stop_ts - offset,
           },
           {
             yAxis: t.stop_loss_abs,