92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { View } from "react-native";
|
||
|
|
import { YAxis } from "react-native-svg-charts";
|
||
|
|
|
||
|
|
import { graphStyles } from "../chart-styles";
|
||
|
|
import ChartView from "../chart-view";
|
||
|
|
import { ChartContainerProps } from "../graph-types";
|
||
|
|
import { useGraphData } from "../use-graph-data";
|
||
|
|
|
||
|
|
// TODO: separate PR will update useGraphData to take into account useCommonScale
|
||
|
|
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||
|
|
const ChartContainer: React.FC<ChartContainerProps> = ({
|
||
|
|
ChartComponent,
|
||
|
|
data,
|
||
|
|
useCommonScale = false,
|
||
|
|
testID,
|
||
|
|
...props
|
||
|
|
}) => {
|
||
|
|
if (!data || typeof data !== "object") {
|
||
|
|
return null;
|
||
|
|
} // TODO:#38
|
||
|
|
const {
|
||
|
|
xValues,
|
||
|
|
yData,
|
||
|
|
yAxisLeftLabels,
|
||
|
|
yAxisRightLabels,
|
||
|
|
defaultProps: {
|
||
|
|
height,
|
||
|
|
contentInset,
|
||
|
|
min,
|
||
|
|
numberOfTicks,
|
||
|
|
lineStrokeWidth,
|
||
|
|
yAxisProps: {
|
||
|
|
maxLeftYAxisValue,
|
||
|
|
maxRightYAxisValue,
|
||
|
|
formatLeftYAxisLabel,
|
||
|
|
formatRightYAxisLabel,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// Proper error/loading handling from useQueryHandler can work with this rule #38
|
||
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||
|
|
} = useGraphData(data, props);
|
||
|
|
|
||
|
|
// TODO: This could be done by the hook since it already handles spreading props.
|
||
|
|
// Depending on if we want a context provider for Charts, that could be another way to handle it
|
||
|
|
const chartComponentProps = {
|
||
|
|
yData,
|
||
|
|
xValues,
|
||
|
|
lineStrokeWidth,
|
||
|
|
min,
|
||
|
|
contentInset,
|
||
|
|
numberOfTicks,
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<ChartView>
|
||
|
|
<View
|
||
|
|
style={[graphStyles.rowContainer, { height: height }]}
|
||
|
|
testID={`line-graph-${testID}`}
|
||
|
|
>
|
||
|
|
<YAxis
|
||
|
|
data={yAxisLeftLabels.values}
|
||
|
|
contentInset={contentInset}
|
||
|
|
svg={graphStyles.yAxisFontStyle}
|
||
|
|
style={graphStyles.yAxisLeftPadding}
|
||
|
|
min={min}
|
||
|
|
max={maxLeftYAxisValue}
|
||
|
|
numberOfTicks={numberOfTicks}
|
||
|
|
formatLabel={formatLeftYAxisLabel}
|
||
|
|
/>
|
||
|
|
<View style={graphStyles.flex}>
|
||
|
|
<ChartComponent {...chartComponentProps} />
|
||
|
|
</View>
|
||
|
|
<YAxis
|
||
|
|
data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
|
||
|
|
contentInset={contentInset}
|
||
|
|
svg={graphStyles.yAxisFontStyle}
|
||
|
|
style={[
|
||
|
|
graphStyles.yAxisRightPadding,
|
||
|
|
{ height: useCommonScale ? 0 : "auto" },
|
||
|
|
]}
|
||
|
|
min={min}
|
||
|
|
max={maxRightYAxisValue}
|
||
|
|
numberOfTicks={numberOfTicks}
|
||
|
|
formatLabel={formatRightYAxisLabel}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</ChartView>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ChartContainer;
|