feat: display liquidation price line on trading chart (fixes #7)

src/components/modals/EditMargin.svelte

@@ -151,9 +151,12 @@
 				<Input label={`${selected} ${data.position.asset}`} bind:value={margin} />
 			</div>
 
-			<div class='row'>
-				<LabelValue label='New Liq. Price' value={`${formatForDisplay(newLiqPrice) || "-"}`} />
-			</div>
+		<div class='row'>
+			<LabelValue label='Current Liq. Price' value={`${formatForDisplay(data.position.liqprice) || "-"}`} />
+		</div>
+		<div class='row'>
+			<LabelValue label='New Liq. Price' value={`${formatForDisplay(newLiqPrice) || "-"}`} />
+		</div>
 
 			<div class='row'>
 				<LabelValue label='New Leverage' value={`${formatForDisplay(newLeverage) || "-"}`} />

src/components/modals/Settings.svelte

@@ -4,7 +4,7 @@
 	import LabelValue from '@components/layout/LabelValue.svelte'
 	import Checkbox from '@components/layout/Checkbox.svelte'
 
-	import { showOrdersOnChart, showPositionsOnChart, showTooltips } from '@lib/stores'
+	import { showOrdersOnChart, showPositionsOnChart, showLiqPriceOnChart, showTooltips } from '@lib/stores'
 	import { showToast } from '@lib/ui'
 	import { saveUserSetting } from '@lib/utils'
 
@@ -13,14 +13,15 @@
 		showToast('Settings reset.');
 	}
 
-	function saveSettings(soc, spc, st) {
-		// console.log('saveSettings', soc, spc, st);
-		saveUserSetting('showOrdersOnChart', soc);
-		saveUserSetting('showPositionsOnChart', spc);
-		saveUserSetting('showTooltips', st);
-	}
+function saveSettings(soc, spc, slpc, st) {
+	// console.log('saveSettings', soc, spc, slpc, st);
+	saveUserSetting('showOrdersOnChart', soc);
+	saveUserSetting('showPositionsOnChart', spc);
+	saveUserSetting('showLiqPriceOnChart', slpc);
+	saveUserSetting('showTooltips', st);
+}
 
-	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showTooltips);
+$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showLiqPriceOnChart, $showTooltips);
 
 </script>
 
@@ -37,6 +38,9 @@
 	</div>
 	<div class='row'>
 		<Checkbox hasPadding={true} label='Positions on chart' bind:value={$showPositionsOnChart} />
+	</div>
+	<div class='row'>
+		<Checkbox hasPadding={true} label='Liquidation price on chart' bind:value={$showLiqPriceOnChart} />
 	</div><!-- 
 	<div class='row'>
 		<Checkbox hasPadding={true} label='Tooltips' bind:value={$showTooltips} />

src/lib/chart.js

@@ -3,7 +3,7 @@ import { createChart, ColorType, LineStyle } from 'lightweight-charts'
 
 import { CURRENCY_DECIMALS } from './config'
 import { formatUnits, formatOrder, formatPosition, formatForDisplay, formatPriceForDisplay } from './formatters'
-import { selectedMarket, orders, positions, chartResolution, chartLoading, showOrdersOnChart, showPositionsOnChart, hoveredOHLC } from './stores'
+import { selectedMarket, orders, positions, chartResolution, chartLoading, showOrdersOnChart, showPositionsOnChart, showLiqPriceOnChart, hoveredOHLC } from './stores'
 import { saveUserSetting, getPrecision } from './utils'
 
 import { getMarketCandles } from '@api/prices'
@@ -142,6 +142,9 @@ export function initChart(cb) {
 	showPositionsOnChart.subscribe(() => {
 		loadPositionLines();
 	});
+	showLiqPriceOnChart.subscribe(() => {
+		loadLiqPriceLines();
+	});
 
 	chart.subscribeCrosshairMove(param => {
 		if (!param?.seriesPrices || param?.seriesPrices.size == 0) {
@@ -272,6 +275,7 @@ export async function loadCandles(_end) {
 	// redraw order and position lines
 	loadOrderLines();
 	loadPositionLines();
+	loadLiqPriceLines();
 
 
 	chartLoading.set(false);
@@ -324,6 +328,7 @@ export function onNewPrice(price) {
 
 let orderLines = [];
 let positionLines = [];
+let liqPriceLines = [];
 
 function loadOrderLines(_orders) {
 
@@ -434,3 +439,43 @@ function clearPositionLines() {
 	candlestickSeries.setMarkers([]);
 	positionLines = [];
 }
+
+function loadLiqPriceLines(_positions) {
+	if (!_positions) _positions = get(positions);
+
+	if (!candlestickSeries) {
+		setTimeout(() => {
+			loadLiqPriceLines(_positions);
+		}, 2000);
+		return;
+	}
+
+	clearLiqPriceLines();
+
+	if (!get(showLiqPriceOnChart)) return;
+
+	for (let _position of _positions) {
+		_position = formatPosition(_position);
+
+		if (_position.market != get(selectedMarket)) continue;
+		if (!_position.liqprice || isNaN(_position.liqprice * 1)) continue;
+
+		liqPriceLines.push(
+			candlestickSeries.createPriceLine({
+			    price: _position.liqprice * 1,
+			    color: '#FF2D00',
+			    lineWidth: 1,
+			    lineStyle: LineStyle.Dashed,
+			    axisLabelVisible: true,
+			    title: `⚠ LIQ ${formatForDisplay(_position.liqprice)}`,
+			})
+		);
+	}
+}
+
+function clearLiqPriceLines() {
+	for (const priceline of liqPriceLines) {
+		candlestickSeries.removePriceLine(priceline);
+	}
+	liqPriceLines = [];
+}

src/lib/stores.js

@@ -23,6 +23,7 @@ export const activeError = writable();
 export const showMobileNav = writable(false);
 export const showOrdersOnChart = writable(getUserSetting('showOrdersOnChart') == undefined ? true : getUserSetting('showOrdersOnChart'));
 export const showPositionsOnChart = writable(getUserSetting('showPositionsOnChart') == undefined ? true : getUserSetting('showPositionsOnChart'));
+export const showLiqPriceOnChart = writable(getUserSetting('showLiqPriceOnChart') == undefined ? false : getUserSetting('showLiqPriceOnChart'));
 export const showTooltips = writable(getUserSetting('showTooltips') == undefined ? true : getUserSetting('showTooltips'));
 
 // Contracts