Move drawing above prices

src/components/strategies/common/d3Chart/D3ChartCandlesticks.tsx

@@ -13,6 +13,7 @@ import { D3Pointer } from './D3Pointer';
 import { D3Drawings } from './drawing/D3Drawings';
 import { useD3ChartCtx } from './D3ChartContext';
 import { D3AllDrawingRanges } from './drawing/D3DrawingRanges';
+import { D3PricesAxis } from './D3PriceAxis';
 
 export type ChartPrices<T = string> = {
   buy: { min: T; max: T };
@@ -68,15 +69,6 @@ export const D3ChartCandlesticks = (props: D3ChartCandlesticksProps) => {
         fillOpacity="0"
       />
       {activities?.length && <D3ChartIndicators activities={activities} />}
-      {!activities && <D3Drawings />}
-      <XAxis />
-      <D3YAxisRight
-        ticks={yTicks}
-        dms={dms}
-        formatter={(value) => {
-          return prettifyNumber(value, { decimals: 100, abbreviate: true });
-        }}
-      />
       {marketPrice && (
         <D3ChartHandleLine
           color="white"
@@ -94,7 +86,7 @@ export const D3ChartCandlesticks = (props: D3ChartCandlesticksProps) => {
           onPriceUpdates={onPriceUpdates}
         />
       )}
-      {type === 'recurring' && isLimit && (
+      {type === 'recurring' && isLimit !== undefined && (
         <D3ChartRecurring
           readonly={readonly}
           isLimit={isLimit}
@@ -113,7 +105,17 @@ export const D3ChartCandlesticks = (props: D3ChartCandlesticksProps) => {
           spread={Number(overlappingSpread)}
         />
       )}
+      {!activities && <D3Drawings />}
+      <XAxis />
+      <D3YAxisRight
+        ticks={yTicks}
+        dms={dms}
+        formatter={(value) => {
+          return prettifyNumber(value, { decimals: 100, abbreviate: true });
+        }}
+      />
       <D3Pointer />
+      <D3PricesAxis prices={prices} />
       <D3AllDrawingRanges />
     </>
   );

src/components/strategies/common/d3Chart/D3PriceAxis.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react';
+import { useD3ChartCtx } from './D3ChartContext';
+import { prettifyNumber } from 'utils/helpers';
+import { ChartPrices } from './D3ChartCandlesticks';
+
+const handleDms = {
+  width: 64,
+  height: 16,
+};
+
+export const D3PricesAxis = ({ prices }: { prices: ChartPrices<string> }) => {
+  const buyMin = Number(prices.buy.min);
+  const buyMax = Number(prices.buy.max);
+  const showBuyMax = buyMax && buyMin !== buyMax;
+  const sellMin = Number(prices.sell.min);
+  const sellMax = Number(prices.sell.max);
+  const showSellMax = sellMax && sellMin !== sellMax;
+
+  return (
+    <>
+      {!!buyMin && <D3PriceAxis price={buyMin} color="var(--buy)" />}
+      {showBuyMax && <D3PriceAxis price={buyMax} color="var(--buy)" />}
+      {!!sellMin && <D3PriceAxis price={sellMin} color="var(--sell)" />}
+      {showSellMax && <D3PriceAxis price={sellMax} color="var(--sell)" />}
+    </>
+  );
+};
+
+interface Props {
+  price: number;
+  color: string;
+}
+
+const D3PriceAxis: FC<Props> = ({ price, color }) => {
+  const { dms, yScale } = useD3ChartCtx();
+  const lineWidth = dms.boundedWidth + 5;
+  const y = yScale(price);
+  return (
+    <g
+      transform={`translate(${lineWidth},-${handleDms.height / 2})`}
+      className="pointer-events-none"
+    >
+      <rect y={y} {...handleDms} fill={color} rx={4} />
+      <text y={y + 12} x={6} fill="black" fontSize={10}>
+        {prettifyNumber(price, { decimals: 4 })}
+      </text>
+    </g>
+  );
+};

src/libs/d3/primitives/D3YAxisRight.tsx

@@ -3,7 +3,11 @@ import { uuid } from 'utils/helpers';
 
 export const D3YAxisRight = ({ ticks, dms, formatter }: D3AxisProps) => {
   return (
-    <g className="y-axis" transform={`translate(${dms.boundedWidth},0)`}>
+    <g
+      transform={`translate(${dms.boundedWidth},0)`}
+      // click should target underlying price handler
+      className="y-axis pointer-events-none"
+    >
       <rect
         x="0"
         y="0"