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>
  ));
};