diff --git a/src/pages/platformAmbient/Chart/Chart.tsx b/src/pages/platformAmbient/Chart/Chart.tsx index 9cf331673b..ac4aea7698 100644 --- a/src/pages/platformAmbient/Chart/Chart.tsx +++ b/src/pages/platformAmbient/Chart/Chart.tsx @@ -111,6 +111,7 @@ import { mainCanvasElementId, xAxisBuffer, xAxisHeightPixel, + xAxisMobileBuffer, } from './ChartUtils/chartConstants'; import OrderHistoryCanvas from './OrderHistoryCh/OrderHistoryCanvas'; import OrderHistoryTooltip from './OrderHistoryCh/OrderHistoryTooltip'; @@ -2614,7 +2615,9 @@ export default function Chart(props: propsIF) { const liqBuffer = liqMode === 'none' || ['futa'].includes(platformName) ? 0.95 - : xAxisBuffer; + : mobileView + ? xAxisMobileBuffer + : xAxisBuffer; const centerX = snappedTime; const diff = diff --git a/src/pages/platformAmbient/Chart/ChartUtils/chartConstants.ts b/src/pages/platformAmbient/Chart/ChartUtils/chartConstants.ts index a726486591..79bfd7ba6c 100644 --- a/src/pages/platformAmbient/Chart/ChartUtils/chartConstants.ts +++ b/src/pages/platformAmbient/Chart/ChartUtils/chartConstants.ts @@ -2,6 +2,7 @@ export const LS_KEY_CHART_ANNOTATIONS = 'chart_annotations'; export const LS_KEY_CHART_CONTEXT_SETTINGS = 'chart_context_settings'; export const defaultCandleBandwith = 5; export const xAxisBuffer = 0.8; +export const xAxisMobileBuffer = 0.7; export const initialDisplayCandleCount = 100; export const initialDisplayCandleCountForMobile = 30; export const xAxisHeightPixel = 32; diff --git a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx index 688fc251a4..026776f3bd 100644 --- a/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx +++ b/src/pages/platformAmbient/Chart/Liquidity/LiquidityChart.tsx @@ -34,6 +34,7 @@ import { import { TradeDataContext } from '../../../../contexts/TradeDataContext'; import { RangeContext } from '../../../../contexts/RangeContext'; import { ChartThemeIF } from '../../../../contexts/ChartContext'; +import useMediaQuery from '../../../../utils/hooks/useMediaQuery'; interface liquidityPropsIF { liqMode: string; @@ -134,6 +135,8 @@ export default function LiquidityChart(props: liquidityPropsIF) { setColorChangeTrigger, } = props; + const mobileView = useMediaQuery('(max-width: 1200px)'); + const currentPoolPriceTick = poolPriceNonDisplay === undefined ? 0 @@ -263,6 +266,45 @@ export default function LiquidityChart(props: liquidityPropsIF) { diffHashSig(chartThemeColors), ]); + // Auto scale fo liq Curve + useEffect(() => { + // if (mobileView) { + const mergedLiqData = liqDataBid.concat(liqDataAsk); + + try { + if (mergedLiqData && mergedLiqData.length === 0) return; + + const { min, max }: nearestLiquidity = + findLiqNearest(mergedLiqData); + + if (min !== undefined && max !== undefined) { + const visibleDomain = mergedLiqData.filter( + (liqData: LiquidityDataLocal) => + liqData?.liqPrices >= min && + liqData?.liqPrices <= max, + ); + const maxLiq = d3.max( + visibleDomain, + (d: LiquidityDataLocal) => d.activeLiq, + ); + if (maxLiq && parseFloat(maxLiq) !== 1 && liquidityScale) { + liquidityScale.domain([0, maxLiq]); + } + + render(); + renderCanvasArray([d3CanvasLiq]); + } + } catch (error) { + console.error({ error }); + } + // } + }, [ + diffHashSigScaleData(scaleData, 'y'), + liquidityData?.depthLiqAskData, + liquidityData?.depthLiqBidData, + mobileView, + ]); + useEffect(() => { if ( scaleData !== undefined && @@ -550,7 +592,7 @@ export default function LiquidityChart(props: liquidityPropsIF) { .on('measure', (event: CustomEvent) => { liquidityScale.range([ event.detail.width, - (event.detail.width / 10) * 6, + mobileView ? 0 : (event.detail.width / 10) * 6, ]); liquidityDepthScale.range([