46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { BarChart } from "react-native-svg-charts";
|
|
|
|
import { CommonProps, withChartType } from "../graph-types";
|
|
|
|
import { graphStyles } from "../chart-styles";
|
|
import { CustomBars } from "../custom-bars";
|
|
import { CustomGrid } from "../custom-grid";
|
|
|
|
// TODO: #43 #31 separate PR will update useGraphData to take into account useCommonScale
|
|
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
|
const BarGraphBase: React.FC<CommonProps> = ({ ...chartComponentProps }) => {
|
|
const {
|
|
yData,
|
|
xValues,
|
|
min,
|
|
contentInset,
|
|
numberOfTicks,
|
|
spacingInner,
|
|
spacingOuter,
|
|
barColors,
|
|
} = chartComponentProps;
|
|
|
|
return (
|
|
<>
|
|
<BarChart
|
|
style={graphStyles.flex}
|
|
data={yData}
|
|
gridMin={min}
|
|
numberOfTicks={numberOfTicks} // TODO: #31 rethink numberOfTicks, it should be determined automatically if we do our y axis scaling properly
|
|
yAccessor={({ item }) => (item as unknown as { value: number }).value}
|
|
contentInset={contentInset}
|
|
spacingInner={spacingInner}
|
|
spacingOuter={spacingOuter}
|
|
>
|
|
<CustomGrid />
|
|
<CustomBars barData={yData} xValues={xValues} barColors={barColors} />
|
|
</BarChart>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const BarGraph = withChartType(BarGraphBase, "bar");
|
|
|
|
export default BarGraph;
|