railbird-gql/component/bar.tsx

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

import { calculateBarOrigin, drawBarPath } from './custom-bar-utils';
import { ScaleFunction } from './graph-types';

interface BarProps {
  scaleX: ScaleFunction;
  scaleY: ScaleFunction;
  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}`}
    />
  );
};