railbird-gql/component/charts/bar.tsx

import React from "react";
import { Path } from "react-native-svg";

import { calculateBarOrigin, drawBarPath } from "./custom-bar-utils";
import { ScaleBandType, ScaleLinearType } from "./graph-types";

interface BarProps {
	scaleX: ScaleBandType;
	scaleY: ScaleLinearType;
	data: { value: number };
	barNumber: number;
	index: number;
	fill: string;
	barWidth: number;
	gap: number;
	roundedRadius: number;
}

export const Bar: React.FC<BarProps> = ({
	scaleX,
	scaleY,
	data,
	barNumber,
	index,
	fill,
	barWidth,
	gap,
	roundedRadius,
}) => {
	const { xOrigin, yOrigin, height } = calculateBarOrigin({
		scaleX,
		scaleY,
		index,
		data,
		barNumber,
		barWidth,
		gap,
	});

	return (
		<Path
			key={`bar-path-${barNumber}-${index}`}
			d={drawBarPath(xOrigin, yOrigin, barWidth, height, roundedRadius)}
			fill={fill}
			testID={`bar-${barNumber}-${index}`}
		/>
	);
};