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