railbird-gql/component/charts/custom-bars.tsx

import { Svg } from "react-native-svg";

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

export interface CombinedData {
	data: { value: number }[];
	svg: { fill: string };
}

interface CustomBarsProps {
	x: ScaleBandType;
	y: ScaleLinearType;
	bandwidth: number;
	barColors: string[];
	xValues: unknown[]; // TODO: update this value when this data type is defined
	barData: CombinedData[];
	gap: number;
	roundedRadius: number;
}

export const CustomBars: React.FC<Partial<CustomBarsProps>> = ({
	x: scaleX,
	y: scaleY,
	bandwidth,
	barData,
	xValues,
	barColors,
	gap = 2,
	roundedRadius = 4,
}) => {
	const barWidth = calculateBarWidth(bandwidth, barData.length, gap);

	return xValues.map((_, index) => (
		<Svg key={`group-${index}`} testID={`svg-${index}`}>
			{barData.map((item, i) => (
				<Bar
					key={`bar-${i}-${index}`}
					scaleX={scaleX}
					scaleY={scaleY}
					data={item.data[index]}
					barNumber={i}
					index={index}
					fill={barColors[i]}
					barWidth={barWidth}
					gap={gap}
					roundedRadius={roundedRadius}
				/>
			))}
		</Svg>
	));
};