54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
|
|
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>
|
|
));
|
|
}; |