Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 1x 1x 1x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 35x 35x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 1x | import { Rectangle, RectangleProps } from 'recharts';
// Types
import { BarPosition, ChartRow } from '@/types/chart';
export type CustomShapeBarProps = RectangleProps & {
payload?: ChartRow;
position: BarPosition;
siblingKey: string;
index?: number;
barSize?: number;
dotCx?: number;
};
const CustomShapeBar = ({
payload,
fill,
position,
siblingKey,
x,
width,
index,
barSize = 12,
dotCx,
...rest
}: CustomShapeBarProps) => {
if (!payload) return <Rectangle {...rest} fill={fill} />;
const hasSibling = !!payload[siblingKey as keyof ChartRow];
const radius: NonNullable<RectangleProps['radius']> =
!hasSibling || position === BarPosition.TOP ? [2, 2, 0, 0] : [0, 0, 0, 0];
const cx = dotCx ?? x! + width! / 2;
const adjustedX = cx - barSize / 2;
return (
<Rectangle
{...rest}
x={adjustedX}
width={barSize}
fill={fill}
radius={radius}
className="cursor-pointer"
/>
);
};
export default CustomShapeBar;
|