69 lines
1.3 KiB
TypeScript
69 lines
1.3 KiB
TypeScript
import { getPriceChangeColor } from './chart-colors';
|
|
|
|
type CandlestickShapeProps = {
|
|
cx?: number;
|
|
payload?: {
|
|
open: number;
|
|
high: number;
|
|
low: number;
|
|
close: number;
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Custom candlestick shape component for Recharts
|
|
* Renders candlestick with wick and body
|
|
*/
|
|
export function CandlestickShape(props: CandlestickShapeProps) {
|
|
const { cx, payload } = props;
|
|
|
|
if (!payload || !cx) return null;
|
|
|
|
const { open, high, low, close } = payload;
|
|
const isPositive = close >= open;
|
|
const color = getPriceChangeColor(close - open);
|
|
|
|
// Calculate positions
|
|
const bodyTop = Math.min(open, close);
|
|
const bodyBottom = Math.max(open, close);
|
|
const bodyHeight = Math.max(bodyBottom - bodyTop, 1);
|
|
|
|
// Candlestick width
|
|
const width = 8;
|
|
|
|
return (
|
|
<g>
|
|
{/* Upper wick */}
|
|
<line
|
|
x1={cx}
|
|
y1={high}
|
|
x2={cx}
|
|
y2={bodyTop}
|
|
stroke={color}
|
|
strokeWidth={1}
|
|
/>
|
|
|
|
{/* Body */}
|
|
<rect
|
|
x={cx - width / 2}
|
|
y={bodyTop}
|
|
width={width}
|
|
height={bodyHeight}
|
|
fill={isPositive ? 'transparent' : color}
|
|
stroke={color}
|
|
strokeWidth={1}
|
|
/>
|
|
|
|
{/* Lower wick */}
|
|
<line
|
|
x1={cx}
|
|
y1={bodyBottom}
|
|
x2={cx}
|
|
y2={low}
|
|
stroke={color}
|
|
strokeWidth={1}
|
|
/>
|
|
</g>
|
|
);
|
|
}
|