49 lines
878 B
TypeScript
49 lines
878 B
TypeScript
import React from "react";
|
|
import { Path } from "react-native-svg";
|
|
|
|
import { calculateBarOrigin, drawBarPath } from "./custom-bar-utils";
|
|
import { ScaleBandType, ScaleLinearType } from "./graph-types";
|
|
|
|
interface BarProps {
|
|
scaleX: ScaleBandType;
|
|
scaleY: ScaleLinearType;
|
|
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}`}
|
|
/>
|
|
);
|
|
};
|