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

54 lines
1.3 KiB
TypeScript
Raw Normal View History

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;
}
2024-01-10 17:34:27 -07:00
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]}
2024-01-10 19:09:47 -07:00
barNumber={i} // index of bar
index={index} // index of group
fill={barColors[i]}
barWidth={barWidth}
gap={gap}
roundedRadius={roundedRadius}
/>
))}
</Svg>
));
};