diff --git a/src/hooks/Orderbook/useDrawOrderbook.ts b/src/hooks/Orderbook/useDrawOrderbook.ts index 709798055..ee12e3e68 100644 --- a/src/hooks/Orderbook/useDrawOrderbook.ts +++ b/src/hooks/Orderbook/useDrawOrderbook.ts @@ -48,6 +48,8 @@ enum OrderbookRowAnimationType { NONE, } +const GRADIENT_MULTIPLIER = 1.3; + export type Rekt = { x1: number; x2: number; y1: number; y2: number }; export const useDrawOrderbook = ({ @@ -104,18 +106,16 @@ export const useDrawOrderbook = ({ const drawBars = useCallback( ({ - barType, ctx, - depthOrSizeValue, - gradientMultiplier, + value, + gradientMultiplier = GRADIENT_MULTIPLIER, histogramAccentColor, histogramSide: inHistogramSide, rekt, }: { - barType: 'depth' | 'size'; ctx: CanvasRenderingContext2D; - depthOrSizeValue: number; - gradientMultiplier: number; + value: number; + gradientMultiplier?: number; histogramAccentColor: string; histogramSide: 'left' | 'right'; rekt: Rekt; @@ -123,9 +123,9 @@ export const useDrawOrderbook = ({ const { x1, x2, y1, y2 } = rekt; // X values - const maxHistogramBarWidth = x2 - x1 - (barType === 'size' ? 8 : 2); - const barWidth = depthOrSizeValue - ? Math.min((depthOrSizeValue / histogramRange) * maxHistogramBarWidth, maxHistogramBarWidth) + const maxHistogramBarWidth = x2 - x1 - 2; + const barWidth = value + ? Math.min((value / histogramRange) * maxHistogramBarWidth, maxHistogramBarWidth) : 0; const { gradient, bar } = getHistogramXValues({ @@ -318,27 +318,14 @@ export const useDrawOrderbook = ({ // Depth Bar if (depth) { drawBars({ - barType: 'depth', ctx, - depthOrSizeValue: depth, - gradientMultiplier: 1.3, + value: depth, histogramAccentColor, histogramSide, rekt, }); } - // Size Bar - drawBars({ - barType: 'size', - ctx, - depthOrSizeValue: size, - gradientMultiplier: 5, - histogramAccentColor, - histogramSide, - rekt, - }); - if (mine && mine > 0) { drawMineCircle({ ctx, rekt }); }