49 lines
909 B
TypeScript
49 lines
909 B
TypeScript
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}`}
|
|
/>
|
|
);
|
|
};
|