railbird-gql/component/custom-bars.tsx

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

import { Bar } from './bar';
import { ScaleFunction } from './graph-types';
import { calculateBarWidth } from './custom-bar-utils';

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

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

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

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