Show liquidation price lines on chart

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, showLiquidationsOnChart, 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);
+	function saveSettings(soc, spc, slc, st) {
+		// console.log('saveSettings', soc, spc, slc, st);
 		saveUserSetting('showOrdersOnChart', soc);
 		saveUserSetting('showPositionsOnChart', spc);
+		saveUserSetting('showLiquidationsOnChart', slc);
 		saveUserSetting('showTooltips', st);
 	}
 
-	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showTooltips);
+	$: saveSettings($showOrdersOnChart, $showPositionsOnChart, $showLiquidationsOnChart, $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='Liquidations on chart' bind:value={$showLiquidationsOnChart} />
 	</div><!-- 
 	<div class='row'>
 		<Checkbox hasPadding={true} label='Tooltips' bind:value={$showTooltips} />

src/lib/chart.js

@@ -1,9 +1,9 @@
 import { get } from 'svelte/store'
 import { createChart, ColorType, LineStyle } from 'lightweight-charts'
 
-import { CURRENCY_DECIMALS } from './config'
+import { CURRENCY_DECIMALS, BPS_DIVIDER } 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, showLiquidationsOnChart, hoveredOHLC, marketInfos, fundingTrackers } from './stores'
 import { saveUserSetting, getPrecision } from './utils'
 
 import { getMarketCandles } from '@api/prices'
@@ -142,6 +142,15 @@ export function initChart(cb) {
 	showPositionsOnChart.subscribe(() => {
 		loadPositionLines();
 	});
+	showLiquidationsOnChart.subscribe(() => {
+		loadPositionLines();
+	});
+	marketInfos.subscribe(() => {
+		loadPositionLines();
+	});
+	fundingTrackers.subscribe(() => {
+		loadPositionLines();
+	});
 
 	chart.subscribeCrosshairMove(param => {
 		if (!param?.seriesPrices || param?.seriesPrices.size == 0) {
@@ -375,7 +384,7 @@ function loadPositionLines(_positions) {
 	clearPositionLines();
 
 
-	if (!get(showPositionsOnChart)) return;
+	if (!get(showPositionsOnChart) && !get(showLiquidationsOnChart)) return;
 
 	let markers = [];
 
@@ -385,7 +394,8 @@ function loadPositionLines(_positions) {
 
 		if (_position.market != get(selectedMarket)) continue;
 
-		positionLines.push(
+		if (get(showPositionsOnChart)) {
+			positionLines.push(
 			candlestickSeries.createPriceLine({
 			    price: _position.price,
 			    color: _position.isLong ? '#00D604' : '#FF5000',
@@ -394,7 +404,24 @@ function loadPositionLines(_positions) {
 			    axisLabelVisible: true,
 			    title: `${_position.isLong ? '▲' : '▼'} ${formatForDisplay(_position.size)} ${_position.asset}`,
 			})
-		);
+			);
+		}
+
+		if (get(showLiquidationsOnChart)) {
+			const liqPrice = getPositionLiquidationPrice(_position);
+			if (liqPrice && !isNaN(liqPrice * 1)) {
+				positionLines.push(
+					candlestickSeries.createPriceLine({
+					    price: liqPrice,
+					    color: '#F5A623',
+					    lineWidth: 1,
+					    lineStyle: LineStyle.Dashed,
+					    axisLabelVisible: true,
+					    title: `Liq ${formatPriceForDisplay(liqPrice)}`,
+					})
+				);
+			}
+		}
 
 		// markers.push({
 		// 	time: _position.timestamp.toNumber(),
@@ -420,6 +447,31 @@ function loadPositionLines(_positions) {
 
 }
 
+function getPositionFunding(_position) {
+	const trackers = get(fundingTrackers);
+	let ft = trackers[_position.asset]?.[_position.market];
+	if (!ft) return 0;
+
+	ft = formatUnits(ft);
+	const positionFundingTracker = formatUnits(_position.fundingTracker);
+	let ftDiff = ft * 1 - positionFundingTracker * 1;
+	if (_position.isLong) ftDiff = -1 * ftDiff;
+	return _position.size * ftDiff / BPS_DIVIDER || 0;
+}
+
+function getPositionLiquidationPrice(_position) {
+	const marketInfo = get(marketInfos)[_position.market];
+	if (!marketInfo || !_position.price || !_position.size) return;
+
+	const liqThreshold = marketInfo.liqThreshold / BPS_DIVIDER;
+	const funding = getPositionFunding(_position);
+
+	if (_position.isLong) {
+		return _position.price * 1 - liqThreshold * (_position.margin * 1 + funding * 1) * _position.price / _position.size;
+	}
+	return _position.price * 1 + liqThreshold * (_position.margin * 1 + funding * 1) * _position.price / _position.size;
+}
+
 function clearOrderLines() {
 	for (const priceline of orderLines) {
 		candlestickSeries.removePriceLine(priceline);

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 showLiquidationsOnChart = writable(getUserSetting('showLiquidationsOnChart') == undefined ? true : getUserSetting('showLiquidationsOnChart'));
 export const showTooltips = writable(getUserSetting('showTooltips') == undefined ? true : getUserSetting('showTooltips'));
 
 // Contracts